/* ═══════════════════════════════════════════════════════════════════════
   SITHIYAM OS — MOTION POLISH (Phase 11)
   Canonical motion spec from nd-prototype-* translated to vanilla CSS.
   Respects prefers-reduced-motion.
   Tokens used: --dur-fast/base/slow · --ease · --stagger · --accent-ghost

   Classes available to components / JS:
     .motion-stagger            container: stagger children's entrance
     .motion-rise               single-element fade-up-in
     .motion-countup-flash      brief amber pulse on value change
     .motion-lift               hover lift (shadow/transform)
     .motion-skel               skeleton shimmer placeholder
     .motion-skel--line         single-line skeleton
     .motion-skel--block        block/card skeleton

   Opt-out: add  data-motion="off"  anywhere upstream to kill animations
            for the subtree (e.g. during bulk re-renders).
═══════════════════════════════════════════════════════════════════════ */


/* ── Keyframes ─────────────────────────────────────────────────────── */
@keyframes sitMotionRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sitMotionFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sitMotionShimmer {
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(160%); }
}
@keyframes sitMotionCountupFlash {
  0%   { box-shadow: 0 0 0 0   var(--accent-ghost); }
  40%  { box-shadow: 0 0 0 6px var(--accent-ghost); }
  100% { box-shadow: 0 0 0 0   transparent; }
}


/* ── Stagger container ─────────────────────────────────────────────
   Apply to a flex/grid parent. Each direct child rises in sequence. */
.motion-stagger > *,
.motion-stagger-item {
  opacity: 0;
  animation: sitMotionRise var(--dur-slow, 380ms) var(--ease, cubic-bezier(.16,1,.3,1)) forwards;
}
.motion-stagger > *:nth-child(1)  { animation-delay: calc(var(--stagger, 40ms) * 0); }
.motion-stagger > *:nth-child(2)  { animation-delay: calc(var(--stagger, 40ms) * 1); }
.motion-stagger > *:nth-child(3)  { animation-delay: calc(var(--stagger, 40ms) * 2); }
.motion-stagger > *:nth-child(4)  { animation-delay: calc(var(--stagger, 40ms) * 3); }
.motion-stagger > *:nth-child(5)  { animation-delay: calc(var(--stagger, 40ms) * 4); }
.motion-stagger > *:nth-child(6)  { animation-delay: calc(var(--stagger, 40ms) * 5); }
.motion-stagger > *:nth-child(7)  { animation-delay: calc(var(--stagger, 40ms) * 6); }
.motion-stagger > *:nth-child(8)  { animation-delay: calc(var(--stagger, 40ms) * 7); }
.motion-stagger > *:nth-child(n+9){ animation-delay: calc(var(--stagger, 40ms) * 8); }


/* ── Single element rise ───────────────────────────────────────────── */
.motion-rise {
  animation: sitMotionRise var(--dur-slow, 380ms) var(--ease, cubic-bezier(.16,1,.3,1)) both;
}
.motion-fade {
  animation: sitMotionFadeIn var(--dur-base, 220ms) var(--eio, cubic-bezier(.4,0,.2,1)) both;
}


/* ── CountUp flash (JS adds .motion-countup-flash for ~600ms) ────── */
.motion-countup-flash {
  animation: sitMotionCountupFlash 600ms var(--eio, cubic-bezier(.4,0,.2,1)) both;
  border-radius: inherit;
}


/* ── Hover lift utility (cards, quote rows, preset tiles) ────────── */
.motion-lift {
  transition:
    transform var(--dur-base, 220ms) var(--ease, cubic-bezier(.16,1,.3,1)),
    box-shadow var(--dur-base, 220ms) var(--ease, cubic-bezier(.16,1,.3,1)),
    border-color var(--dur-base, 220ms) var(--ease, cubic-bezier(.16,1,.3,1));
}
.motion-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh2);
  border-color: var(--accent-ring);
}


/* ── Skeleton shimmer ──────────────────────────────────────────────
   Canonical 1.5s left-to-right sweep. Dark-aware via tokens.
   Usage:
     <div class="motion-skel motion-skel--line" style="width:60%"></div>
     <div class="motion-skel motion-skel--block" style="height:120px"></div>
──────────────────────────────────────────────────────────────────── */
.motion-skel {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border-radius: var(--r1, 10px);
}
.motion-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-ghost) 45%,
    var(--accent-seam, var(--accent-ghost)) 50%,
    var(--accent-ghost) 55%,
    transparent 100%
  );
  transform: translateX(-60%);
  animation: sitMotionShimmer 1.5s var(--eio, cubic-bezier(.4,0,.2,1)) infinite;
}
.motion-skel--line  { height: 12px; }
.motion-skel--block { min-height: 80px; border-radius: var(--r2, 14px); }


/* ── Stacked skeleton helper (quick placeholder grid) ────────────── */
.motion-skel-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.motion-skel-stack .motion-skel:nth-child(1) { width: 72%; }
.motion-skel-stack .motion-skel:nth-child(2) { width: 96%; }
.motion-skel-stack .motion-skel:nth-child(3) { width: 54%; }


/* ── Reduced motion ────────────────────────────────────────────────
   Respect the user's OS preference. Animations collapse to instant
   state changes. No popping, no shimmer. */
@media (prefers-reduced-motion: reduce) {
  .motion-stagger > *,
  .motion-stagger-item,
  .motion-rise,
  .motion-fade,
  .motion-countup-flash,
  .motion-skel::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .motion-lift {
    transition: none !important;
  }
  .motion-lift:hover {
    transform: none !important;
  }
}


/* ── Opt-out attribute ────────────────────────────────────────────── */
[data-motion="off"] .motion-stagger > *,
[data-motion="off"] .motion-stagger-item,
[data-motion="off"] .motion-rise,
[data-motion="off"] .motion-fade,
[data-motion="off"] .motion-countup-flash,
[data-motion="off"] .motion-skel::after {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   PHASE-REPAIR-5 — MOTION & CONTINUITY
═══════════════════════════════════════════════════════════════════════ */

/* ── 5.1 SCREEN TRANSITIONS ─────────────────────────────────────────
   Active screen fades + subtly rises in. Pairs with the nav router's
   existing `.on` class toggle — no JS changes required. */
@keyframes sitScreenIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen.on {
  animation: sitScreenIn 180ms cubic-bezier(.16,1,.3,1) both;
}

/* ── 5.2 COLLAPSE / EXPAND ──────────────────────────────────────────
   Modern grid-template-rows trick. No magic max-height.
   Usage:
     <div class="sit-collapse" data-open="false">
       <div class="sit-collapse__inner">content</div>
     </div>
   Toggle by setting data-open="true|false".                            */
.sit-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(.16,1,.3,1);
}
.sit-collapse[data-open="true"] { grid-template-rows: 1fr; }
.sit-collapse__inner {
  min-height: 0;
  overflow: hidden;
}
/* Fallback for engines without grid-row animation support (old Safari) */
@supports not (grid-template-rows: 0fr) {
  .sit-collapse {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 220ms cubic-bezier(.16,1,.3,1);
  }
  .sit-collapse[data-open="true"] { max-height: 4000px; }
}

/* ── 5.3 BUTTON PRESS MICRO-FEEDBACK ────────────────────────────────
   80ms scale-down on active. Suppressed while busy/loading.           */
@media (hover: hover) {
  .btn:not(.is-loading):active,
  button:not(.is-loading):not(:disabled):active,
  [role="button"]:not(.is-loading):active,
  .chip:active,
  .pill:active {
    transform: scale(.97);
    transition: transform 80ms ease-out;
  }
}

/* ── 5.4 CARD HOVER LIFT (opt-in) ───────────────────────────────────
   Opt-in via data-hover="lift" or .motion-lift (already defined).     */
@media (hover: hover) {
  [data-hover="lift"] {
    transition:
      transform var(--dur-base, 220ms) var(--ease, cubic-bezier(.16,1,.3,1)),
      box-shadow var(--dur-base, 220ms) var(--ease, cubic-bezier(.16,1,.3,1)),
      border-color var(--dur-base, 220ms) var(--ease, cubic-bezier(.16,1,.3,1));
  }
  [data-hover="lift"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh2);
    border-color: var(--accent-ring);
  }
}

/* ── 5.5 TAB / NAV ACTIVE INDICATOR SLIDE ───────────────────────────
   Container opts in with .sit-tabstrip. Active tab carries .is-active.
   The strip paints a sliding underline via ::before on the container. */
.sit-tabstrip {
  position: relative;
}
.sit-tabstrip::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: var(--sit-tab-x, 0px);
  width: var(--sit-tab-w, 0px);
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition:
    left 220ms cubic-bezier(.16,1,.3,1),
    width 220ms cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}

/* ── 5.6 SOFT STATE-CHANGE FLASH (generic) ──────────────────────────
   Mirrors motion-countup-flash but decoupled from numeric updates.    */
@keyframes sitMotionFlash {
  0%   { box-shadow: 0 0 0 0   var(--accent-ghost); }
  40%  { box-shadow: 0 0 0 5px var(--accent-ghost); }
  100% { box-shadow: 0 0 0 0   transparent; }
}
.motion-flash {
  animation: sitMotionFlash 520ms cubic-bezier(.4,0,.2,1) both;
  border-radius: inherit;
}


/* ── Reduced-motion degrade for Phase-5 rules ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .screen.on { animation: none !important; }
  .sit-collapse { transition: none !important; }
  .btn:active,
  button:active,
  [role="button"]:active,
  .chip:active,
  .pill:active { transform: none !important; transition: none !important; }
  [data-hover="lift"] { transition: none !important; }
  [data-hover="lift"]:hover { transform: none !important; }
  .sit-tabstrip::before { transition: none !important; }
  .motion-flash { animation: none !important; }
}

/* ── Opt-out attribute for Phase-5 rules ────────────────────────── */
[data-motion="off"] .screen.on { animation: none !important; }
[data-motion="off"] .sit-collapse { transition: none !important; }
[data-motion="off"] .motion-flash { animation: none !important; }
[data-motion="off"] .sit-tabstrip::before { transition: none !important; }