/* ══════════════════════════════════════════════════════════════════════
   anim.css — 3SKID motion layer. Tasteful, purposeful, GPU-only
   (transform/opacity + a couple of small box-shadow pulses), theme-accent
   aware (uses --glow), and FULLY disabled under prefers-reduced-motion —
   everything below lives inside the no-preference query, so reduced-motion
   visitors get the exact static layout with zero animation.
   Loaded AFTER landing.css + theme.css.
   ══════════════════════════════════════════════════════════════════════ */

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

  @keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

  /* ── hero: staggered rise on first paint ─────────────────────────────────
        `backwards` fill (not an explicit opacity:0 base) so the RESTING state is
        visible — if the animation is ever skipped/unsupported, content still shows;
        during the delay the `from` keyframe hides it, then it rises in. ────────── */
  .hero-copy > *, .hero-visual > * { animation: riseIn .7s cubic-bezier(.22,.61,.36,1) backwards; }
  .hero-copy > .eyebrow   { animation-delay: .05s; }
  .hero-copy > h1         { animation-delay: .13s; }
  .hero-copy > .lede      { animation-delay: .22s; }
  .hero-copy > .hero-cta  { animation-delay: .31s; }
  .hero-copy > .hero-note { animation-delay: .38s; }
  .hero-visual > .sponsor        { animation-delay: .30s; }
  .hero-visual > .hero-shortcuts { animation-delay: .40s; }
  .hero-visual > .demo           { animation-delay: .48s; }

  /* ── ambient accent glow drifting behind the hero ────────────────────── */
  .hero { position: relative; isolation: isolate; }
  .hero::before {
    content: ""; position: absolute; z-index: -1; inset: -12% -18% auto -18%; height: 78%;
    background: radial-gradient(46% 60% at 68% 28%, rgba(var(--glow), .17), transparent 70%);
    animation: glowDrift 18s ease-in-out infinite; pointer-events: none;
  }
  @keyframes glowDrift {
    0%,100% { transform: translate3d(0,0,0) scale(1);      opacity: .75; }
    50%     { transform: translate3d(-4%, 3%, 0) scale(1.14); opacity: 1; }
  }

  /* ── live demo: rows stream in, badges pop, the "live" dot pulses ─────── */
  .demo-row { animation: riseIn .5s cubic-bezier(.22,.61,.36,1) backwards; }
  .demo-row:nth-child(1) { animation-delay: .72s; }
  .demo-row:nth-child(2) { animation-delay: .90s; }
  .demo-row:nth-child(3) { animation-delay: 1.08s; }
  .demo-row:nth-child(4) { animation-delay: 1.26s; }
  .demo-badge { animation: badgePop .5s cubic-bezier(.34,1.56,.64,1) backwards; }
  .demo-row:nth-child(1) .demo-badge { animation-delay: .90s; }
  .demo-row:nth-child(2) .demo-badge { animation-delay: 1.08s; }
  .demo-row:nth-child(3) .demo-badge { animation-delay: 1.26s; }
  .demo-row:nth-child(4) .demo-badge { animation-delay: 1.44s; }
  @keyframes badgePop { 0% { transform: scale(.55); opacity: 0; } 62% { transform: scale(1.09); } 100% { transform: scale(1); opacity: 1; } }
  .demo-bar .dots i:first-child { animation: livePulse 1.9s ease-in-out infinite; }
  @keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--glow), .55); } 55% { box-shadow: 0 0 0 5px rgba(var(--glow), 0); } }

  /* ── brand accent dot: gentle heartbeat ──────────────────────────────── */
  .brand .dot { animation: dotPulse 2.8s ease-in-out infinite; }
  @keyframes dotPulse { 0%,100% { box-shadow: 0 0 14px 1px rgba(var(--glow), .85); } 50% { box-shadow: 0 0 22px 3px rgba(var(--glow), 1); } }

  /* ── sponsor banner: slow shimmer sweep (draws the eye, then rests) ───── */
  .sponsor { position: relative; overflow: hidden; }
  .sponsor::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.10) 48%, transparent 64%);
    transform: translateX(-130%); animation: sweep 6s ease-in-out infinite;
  }
  @keyframes sweep { 0%, 60% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }

  /* ── primary CTA: a light sheen glides across on hover ────────────────── */
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary > * { position: relative; z-index: 1; }
  .btn-primary::after {
    content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: translateX(-200%); transition: transform .6s ease; z-index: 0;
  }
  .btn-primary:hover::after { transform: translateX(320%); }

  /* ── shortcut card icons: a spring flourish on hover ─────────────────── */
  .hshort-ico { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
  .hshort:hover .hshort-ico { transform: translateY(-2px) scale(1.07) rotate(-3deg); }

  /* ── service / feature card icons lift with the card ─────────────────── */
  .card .ico, .feat .ico { transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
  .card:hover .ico, .feat:hover .ico { transform: scale(1.09) rotate(-3deg); }

  /* ── reveal cascade: landing.js sets --rd (per-group index) so grouped
        cards/steps/features fan in instead of snapping together ─────────── */
  .reveal { transition-delay: var(--rd, 0s); }
}