/* ============================================================
   ANVUL PLATFORM — Unified Motion System
   One language for every transition: shared easing + duration
   tokens, choreographed screen entrances, consistent hover weight,
   and staggered card reveals. Loaded LAST so it harmonises the
   dashboard. Fully gated behind prefers-reduced-motion.
   ============================================================ */
:root {
  /* the two springs everything uses */
  --ease-out: cubic-bezier(.22,.8,.28,1);     /* settle */
  --ease-spring: cubic-bezier(.18,1.3,.4,1);  /* arrive with weight */
  --ease-soft: cubic-bezier(.4,0,.2,1);       /* utility */
  --dur-1: .14s;   /* micro: hovers, presses */
  --dur-2: .28s;   /* standard: toggles, panels */
  --dur-3: .5s;    /* entrance: screens, cards */
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- screen entrance: one choreographed motion ---- */
  #view-app .screen[data-active] { animation: anv-screen var(--dur-3) var(--ease-out) both; }
  @keyframes anv-screen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* ---- cards & panels arrive in a gentle cascade ---- */
  #view-app .screen[data-active] .card,
  #view-app .screen[data-active] .page-card,
  #view-app .screen[data-active] .mkt-card,
  #view-app .screen[data-active] .lr-score,
  #view-app .screen[data-active] .cmp-angle,
  #view-app .screen[data-active] .q-card,
  #view-app .screen[data-active] .lead-row,
  #view-app .screen[data-active] .fixcard {
    animation: anv-card var(--dur-3) var(--ease-out) both;
  }
  @keyframes anv-card { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  /* stagger the first several so it reads as a wave, not a flash */
  #view-app .screen[data-active] > * > :nth-child(1) { animation-delay: .02s; }
  #view-app .screen[data-active] > * > :nth-child(2) { animation-delay: .07s; }
  #view-app .screen[data-active] > * > :nth-child(3) { animation-delay: .12s; }
  #view-app .screen[data-active] > * > :nth-child(4) { animation-delay: .17s; }
  #view-app .screen[data-active] > * > :nth-child(5) { animation-delay: .22s; }
  #view-app .screen[data-active] > * > :nth-child(6) { animation-delay: .27s; }

  /* ---- consistent hover weight across interactive surfaces ---- */
  .card, .page-card, .mkt-card, .cmp-angle, .skin-card, .feat, .picker-item, .ed-skin, .lead-row, .bob-sugg {
    transition: transform var(--dur-1) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                border-color var(--dur-1) var(--ease-soft),
                background var(--dur-1) var(--ease-soft);
  }
  .page-card:hover, .mkt-card:hover, .feat:hover { transform: translateY(-3px); }

  /* ---- buttons respond with real weight ---- */
  .btn { transition: transform var(--dur-1) var(--ease-spring), background var(--dur-1) var(--ease-soft), box-shadow var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-soft); }
  .btn:active { transform: translateY(1px) scale(.985); }

  /* ---- toggles & nav share the spring ---- */
  .svc-item .toggle::after { transition: transform var(--dur-2) var(--ease-spring); }
  .nav-item { transition: background var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft); }
  .nav-item[aria-current="true"] svg { transition: color var(--dur-2) var(--ease-spring); }

  /* ---- the score rings sweep up to value on entrance ---- */
  #view-app .screen[data-active] .ring { animation: anv-ring var(--dur-3) var(--ease-out) both; }
  @keyframes anv-ring { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

  /* ---- THE SIGNAL PULSE — the brand signature ----
     A slow, soft terracotta halo that breathes outward from a GENUINELY
     live / verified state — "broadcasting". The element keeps its solid
     fill + resting ring at all times; this only layers an EXTRA expanding
     halo on top (animates box-shadow alone → cheap, no layout, no flicker).
     The SAME motif on every honest live/verified signal so it reads as one
     recurring brand gesture, never a one-off:
       · the "● Live" dot once the publish gate confirms live (JS owns .is-live,
         so the pulse can ONLY ever appear on a real live site) — this one
         selector covers both the Overview command-header AND the publish screen;
       · the MCS-verified badge, which only shows once verified on the register.
     The accent's resting ring stays terracotta-tinted; the halo fades to nothing.
     Reduced motion: this whole block is gated off → the static fallback is the
     element's existing solid fill + soft ring, untouched. */
  .statusbar.is-live .sb-live .ld {
    animation: anv-signal-pulse 2.4s var(--ease-soft) infinite;
  }
  /* :not(.readiness) is load-bearing for honesty — .mcs-bar.readiness is the
     amber "NOT yet verified" state; the verified pulse must never fire there.
     Only the confirmed-on-the-register green badge breathes the signal. */
  .mcs-bar:not(.readiness) .mcs-ico {
    animation: anv-signal-pulse-tile 2.4s var(--ease-soft) infinite;
    /* the badge is a solid green tile with no resting ring → it breathes the
       SAME terracotta halo from a 0px base, so the "verified" gesture reads as
       the same brand pulse as the live dot, just on a larger surface */
  }
  /* live dot: keep its resting 4px ring, breathe a terracotta halo out from it */
  @keyframes anv-signal-pulse {
    0%   { box-shadow: 0 0 0 4px var(--ok-soft), 0 0 0 0 var(--signal-glow); }
    70%  { box-shadow: 0 0 0 4px var(--ok-soft), 0 0 0 9px oklch(0.645 0.150 47 / 0); }
    100% { box-shadow: 0 0 0 4px var(--ok-soft), 0 0 0 0 oklch(0.645 0.150 47 / 0); }
  }
  /* MCS tile: no resting ring → halo only (slightly wider for the larger surface) */
  @keyframes anv-signal-pulse-tile {
    0%   { box-shadow: 0 0 0 0 var(--signal-glow); }
    70%  { box-shadow: 0 0 0 12px oklch(0.645 0.150 47 / 0); }
    100% { box-shadow: 0 0 0 0 oklch(0.645 0.150 47 / 0); }
  }
}