/* PICK.IT R50.2 UI Refine 13 — restrained motion + camera-sheet depth.
   Motion communicates state changes only; no decorative looping animation. */

/* The shutter remains the visual anchor. State changes settle instead of snapping. */
.shutterBtn{
  transition:box-shadow 180ms ease,background 180ms ease,border-color 180ms ease,opacity 180ms ease;
  will-change:transform;
}
.shutterBtn.stateChanged{
  animation:pickitShutterState 220ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pickitShutterState{
  0%{transform:translate(-50%,-50%) scale(.965);opacity:.9}
  55%{transform:translate(-50%,-50%) scale(1.012);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}

/* Temporary sheets should read as a layer above the live camera, not as a new screen. */
.sheet{
  background:rgba(5,8,11,.88);
  backdrop-filter:blur(18px) saturate(112%);
  -webkit-backdrop-filter:blur(18px) saturate(112%);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 54px rgba(0,0,0,.46),0 4px 14px rgba(0,0,0,.26);
}
.sheet:not([hidden]){
  transform-origin:50% 100%;
  animation:pickitSheetIn 190ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pickitSheetIn{
  from{transform:translateY(8px) scale(.995);opacity:.88}
  to{transform:translateY(0) scale(1);opacity:1}
}
.sheetHandle{background:rgba(255,255,255,.24)}

@media(prefers-reduced-motion:reduce){
  .shutterBtn,.fieldStatus{transition:none!important}
  .shutterBtn.stateChanged,.sheet:not([hidden]){animation:none!important}
}