/* ════════════════════════════════════════════════════════════════
   mm-motion.css — MOTION LAYER (quality layer over mm-client.css)
   Source: animate-skill (Emil Kowalski, "Animations on the Web").
   Principle: motion is invisible — it confirms cause→effect, never
   performs. Client portal = daily storefront → motion must feel
   crafted but calm. GPU-only (transform/opacity). Exits < enters.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── easing tokens (animate-skill cheat-sheet) ── */
  --ease-out-quint:cubic-bezier(.23,1,.32,1);     /* enters — confident settle */
  --ease-in-out-cubic:cubic-bezier(.645,.045,.355,1); /* on-screen moves */
  --ease-out-cubic:cubic-bezier(.33,1,.68,1);     /* general */
  --ease-in-cubic:cubic-bezier(.32,0,.67,0);      /* exits */
  --ease-out-back:cubic-bezier(.34,1.56,.64,1);   /* playful overshoot — used sparingly */

  /* ── duration tokens ── enters 200–300, exits ~75%, hover 150, micro 100 */
  --d-micro:120ms;   /* button press, toggle */
  --d-hover:150ms;   /* hover state */
  --d-enter:240ms;   /* element entering */
  --d-exit:180ms;    /* element leaving (~75% of enter) */
  --d-move:260ms;    /* element repositioning on screen */
  --d-page:340ms;    /* route / view transition */
}

/* ───────── 1. interactive feedback ───────── */
/* hover-lift: cards & camera tiles. cyan-TINTED shadow (taste: tinted, not black) */
.mo-lift{transition:transform var(--d-hover) var(--ease-out-quint),
  box-shadow var(--d-hover) var(--ease-out-quint),border-color var(--d-hover) var(--ease)}
.mo-lift:hover{transform:translateY(-3px);
  box-shadow:0 10px 26px -8px var(--accent-glow),0 2px 8px rgba(2,8,20,.4)}

/* button press — physical click (animate-skill §Button Press) */
.mo-press{transition:transform var(--d-micro) var(--ease-out-cubic),
  background var(--d-hover) var(--ease),filter var(--d-hover) var(--ease)}
.mo-press:active{transform:scale(.97)}

/* nav row / list row hover — background wash only (cheap, calm) */
.mo-row{transition:background var(--d-hover) var(--ease),
  color var(--d-hover) var(--ease),padding-left var(--d-move) var(--ease-out-quint)}

/* ───────── 2. enters / mounts ───────── */
@keyframes mo-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-scale-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes mo-slide-over{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

.mo-in{animation:mo-fade-up var(--d-enter) var(--ease-out-quint) both}
.mo-scale{animation:mo-scale-in var(--d-enter) var(--ease-out-quint) both}
.mo-panel{animation:mo-slide-over var(--d-enter) var(--ease-out-quint) both}

/* staggered list — never mount all at once (animate-skill §Stagger / taste) */
.mo-stagger>*{animation:mo-fade-up var(--d-enter) var(--ease-out-quint) both;animation-delay:calc(var(--i,0)*55ms)}

/* ───────── 3. video-domain specifics ───────── */
/* timeline needle — follows playhead; smooth on seek, instant on drag (JS toggles .seeking) */
.mo-needle{transition:left var(--d-move) var(--ease-in-out-cubic)}
.mo-needle.seeking{transition:none}

/* trim handle grab — overshoot grip feedback */
.mo-handle{transition:transform var(--d-hover) var(--ease-out-back),
  background var(--d-hover) var(--ease)}
.mo-handle:hover,.mo-handle:focus-visible{transform:scaleX(1.25)}

/* live REC dot — slow breathing, NOT a flash (calm) */
@keyframes mo-rec{0%,100%{opacity:1}50%{opacity:.45}}
.mo-rec{animation:mo-rec 2.4s var(--ease-in-out-cubic) infinite}

/* skeleton shimmer — replaces spinner (taste + animate-skill loading) */
@keyframes mo-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.mo-skeleton{background:linear-gradient(90deg,var(--card-2) 25%,var(--inset) 37%,var(--card-2) 63%);
  background-size:200% 100%;animation:mo-shimmer 1.4s linear infinite;border-radius:var(--r-md)}

/* tab/segment indicator — shared-layout morph feel via transform (animate-skill §Tab Indicator) */
.mo-seg-ind{transition:transform var(--d-move) var(--ease-out-quint),
  width var(--d-move) var(--ease-out-quint)}

/* play/pause center button — cross-fade scale */
.mo-playbtn{transition:transform var(--d-hover) var(--ease-out-back),opacity var(--d-hover) var(--ease)}
.mo-playbtn:hover{transform:scale(1.06)}
.mo-playbtn:active{transform:scale(.94)}

/* ───────── 4. focus (a11y — animate-skill + redesign-skill: never remove) ───────── */
.mo-focus:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:var(--r-sm)}

/* ───────── 5. prefers-reduced-motion — MANDATORY (Ilya brief + animate-skill golden rule #4) ─────────
   Kill movement, keep opacity-only cross-fades so state changes stay legible. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .mo-in,.mo-scale,.mo-panel,.mo-stagger>*{animation:mo-fade .01ms both}
  .mo-lift:hover{transform:none}
  .mo-rec{animation:none;opacity:1}
  .mo-skeleton{animation:none}
}