/* Operalytix Employee — motion layer. Loads after site.css; overrides only.
   Animates transform / opacity / clip-path / stroke-dashoffset (plus the individual
   translate / scale properties, which are transforms). html.mo = JS motion on;
   html.sd = scroll-driven reveals supported. */

/* ---------- MOTION-01 tokens ---------- */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 360ms; --dur-4: 600ms; --dur-5: 900ms;
  --rise: 24px;
  --stagger: 60ms;
  --ease: var(--ease-out);
  --motion-css: 1; /* site.js checks this before enabling motion */
}
@media (max-width: 640px) { :root { --rise: 16px; } }

@property --fan { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --sy { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- MOTION-12 buttons & links ---------- */
.btn { transition: transform var(--dur-2) var(--ease-out), translate var(--dur-1) linear, background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); transition-duration: var(--dur-1); }
.btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 5px; }
.btn.mag-back { transition: transform var(--dur-2) var(--ease-out), translate 500ms var(--ease-spring), background-color var(--dur-2), border-color var(--dur-2); }
.btn-store { position: relative; isolation: isolate; overflow: hidden; }
.btn-store::before { /* soft shadow that fades in instead of animating box-shadow */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 18px 44px -14px rgba(90, 80, 255, .75); opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
.btn-store::after { /* sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-110%);
}
.btn-store:hover::before { opacity: 1; }
.btn-store:hover::after { transform: translateX(110%); transition: transform 700ms var(--ease-in-out); }
.tabs button { transition: color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2); }
.link-arrow { position: relative; }
.link-arrow::after { transition: transform var(--dur-3) var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow::before {
  content: ""; position: absolute; left: 0; right: 1.3em; bottom: 9px; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out);
}
.link-arrow:hover::before, .link-arrow:focus-visible::before { transform: scaleX(1); }

/* ---------- MOTION-02/03 hero entrance (pure CSS, no JS needed) ---------- */
@keyframes h-rise { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes h-lead { from { transform: translateY(var(--rise)); } }
@keyframes h-pill { from { opacity: 0; transform: scale(.96); } }
@keyframes h-clip { from { clip-path: inset(0 0 100% 0); transform: translateY(.18em); } to { clip-path: inset(-.2em -.1em -.25em -.1em); } }
@keyframes h-phone { from { opacity: .01; transform: translateY(60px) scale(.94); } }
@keyframes h-fan-l { from { opacity: 0; --fan: 0; transform: translateX(45%) translateY(60px) scale(.94); } }
@keyframes h-fan-r { from { opacity: 0; --fan: 0; transform: translateX(-45%) translateY(60px) scale(.94); } }
@keyframes h-chip { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes grad-sweep { from { background-position: 250% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.h-in { animation: h-rise var(--dur-5) var(--ease-out) both; animation-delay: var(--d, 0s); }
.hero .pill.h-in { animation: h-pill var(--dur-4) var(--ease-out) both; animation-delay: 0s; }
.hero h1.h-in { animation: none; }
.hero h1 .ln { display: inline-block; animation: h-clip 700ms var(--ease-out) both; animation-delay: 60ms; }
.hero h1 .ln:nth-of-type(2) { animation-delay: 150ms; }
.hero h1 .ln:nth-of-type(3) { animation-delay: 240ms; }
.hero h1 .h1-sub { display: inline-block; animation: h-lead var(--dur-5) var(--ease-out) both; animation-delay: 200ms; }
.hero .lead.h-in { animation: h-lead var(--dur-5) var(--ease-out) both; animation-delay: 240ms; }
.hero-copy .persona.h-in { animation-delay: 200ms; }
.hero-copy .hero-ctas.h-in { animation-delay: 320ms; }
.hero-copy .hero-micro.h-in { animation-delay: 370ms; }
.hero-meta.h-in { animation: none; }
.hero-meta.h-in li { animation: h-rise var(--dur-4) var(--ease-out) both; animation-delay: 400ms; }
.hero-meta.h-in li:nth-child(2) { animation-delay: 460ms; }
.hero-meta.h-in li:nth-child(3) { animation-delay: 520ms; }
.mo .hero-meta svg { stroke-dasharray: 1; animation: draw 700ms var(--ease-out) 520ms both; }
.mo .hero-meta li:nth-child(2) svg { animation-delay: 580ms; }
.mo .hero-meta li:nth-child(3) svg { animation-delay: 640ms; }
.hero .pill b { position: relative; overflow: hidden; isolation: isolate; }
.hero .pill b::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.6) 50%, transparent 75%);
  animation: sheen 900ms var(--ease-in-out) 600ms both;
}
.hero h1 .grad {
  background-image: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.85) 50%, transparent 58%), linear-gradient(100deg, #ffffff 10%, #c9c6ff 55%, #8f8aff 95%);
  background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; background-position: -150% 0, 0 0;
  animation: grad-sweep 1.4s var(--ease-in-out) 750ms both;
}

.hero-stage .p-left { rotate: calc(-7deg * var(--fan)); }
.hero-stage .p-right { rotate: calc(7deg * var(--fan)); }
.hero-stage .p-center.h-in { animation: h-phone 1.1s var(--ease-out) 450ms backwards; }
.hero-stage .p-left.h-in { animation: h-fan-l 1.2s var(--ease-out) 570ms backwards; }
.hero-stage .p-right.h-in { animation: h-fan-r 1.2s var(--ease-out) 570ms backwards; }
.hero-stage .float-chip.h-in { animation: h-chip var(--dur-4) var(--ease-spring) 900ms backwards; }
.hero-stage .float-chip.chip-2.h-in { animation-delay: 1050ms; }

/* ENGAGE-20 chip-1 day sequence crossfade */
.chip-1 .chip-t { display: block; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.chip-1 .ic svg { transition: opacity var(--dur-3); }
.chip-1.swap .chip-t { opacity: 0; transform: translateY(5px); }
.chip-1.swap .ic svg { opacity: 0; }

/* ---------- MOTION-04 tilt + parallax (fine pointer, >=900px) ---------- */
.hero { view-timeline: --hero block; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero-stage .phone { --depth: 24; }
  .hero-stage .p-center { --depth: 14; }
  .hero-stage .float-chip { --depth: 34; }
  .hero-stage .phone, .hero-stage .float-chip {
    transform: perspective(1600px) rotateY(calc(var(--px, 0) * 6deg)) rotateX(calc(var(--py, 0) * -4deg))
      translate3d(calc(var(--px, 0) * var(--depth) * 1px), calc(var(--py, 0) * var(--depth) * 1px + var(--sy)), 0);
  }
  .hero-stage.tilting .phone, .hero-stage.tilting .float-chip { will-change: transform; }
  .hero-stage .phone .screen::after {
    content: ""; position: absolute; inset: 0 -40%; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.09) 50%, transparent 62%);
    transform: translateX(calc(var(--px, 0) * 18%)); opacity: calc(.4 + var(--px, 0) * var(--px, 0) * .6);
  }
  @supports (animation-timeline: view()) {
    @keyframes depth-s { to { --sy: -40px; } }
    @keyframes depth-c { to { --sy: -20px; } }
    .hero-stage .p-left.h-in, .hero-stage .p-right.h-in, .hero-stage .p-left, .hero-stage .p-right {
      animation: h-fan-l 1.2s var(--ease-out) 570ms backwards, depth-s linear both;
      animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%;
    }
    .hero-stage .p-right.h-in, .hero-stage .p-right { animation-name: h-fan-r, depth-s; }
    .hero-stage .p-center.h-in, .hero-stage .p-center {
      animation: h-phone 1.1s var(--ease-out) 450ms backwards, depth-c linear both;
      animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%;
    }
  }
}

/* ---------- MOTION-05 reveal variants ---------- */
.reveal {
  transform: none; translate: 0 var(--rise);
  transition:
    opacity var(--dur-4) var(--ease-out) calc(var(--d, 0s) + var(--sd, 0s)),
    translate var(--dur-4) var(--ease-out) calc(var(--d, 0s) + var(--sd, 0s)),
    scale var(--dur-4) var(--ease-out) calc(var(--d, 0s) + var(--sd, 0s)),
    clip-path var(--dur-5) var(--ease-out) calc(var(--d, 0s) + var(--sd, 0s)),
    transform var(--dur-3) var(--ease-out), border-color var(--dur-2);
}
.reveal.in { opacity: 1; translate: none; scale: none; }
@media (min-width: 900px) {
  html:not(.sd) .split .feat-list .reveal:not(.in) { translate: 32px 0; }
  html:not(.sd) .split.rev .feat-list .reveal:not(.in) { translate: -32px 0; }
}
:is(.browser, .tile, .spotlight).reveal:not(.in) { translate: 0 12px; scale: .96; }
:is(.final .display, .promise .big).reveal { clip-path: inset(-.3em -.3em -.3em -.3em); }
:is(.final .display, .promise .big).reveal:not(.in) { opacity: 1; translate: 0 .3em; clip-path: inset(0 0 100% 0); }
.no-js .reveal { opacity: 1; translate: none; scale: none; clip-path: none; }

@supports (animation-timeline: view()) {
  @keyframes rv { from { opacity: 0; translate: 0 var(--rise); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } }
  @keyframes rv-x { from { opacity: 0; translate: 32px 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } to { opacity: 1; translate: none; } }
  @keyframes rv-xr { from { opacity: 0; translate: -32px 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } to { opacity: 1; translate: none; } }
  @keyframes rv-s { from { opacity: 0; translate: 0 12px; scale: .96; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } }
  @keyframes rv-c { from { clip-path: inset(0 0 100% 0); translate: 0 .3em; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } to { clip-path: inset(-.3em); translate: none; } }
  html.sd .reveal, html.sd .reveal:not(.in) {
    opacity: 1; translate: none; scale: none;
    animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
  }
  @media (min-width: 900px) {
    html.sd .split .feat-list .reveal { animation-name: rv-x; }
    html.sd .split.rev .feat-list .reveal { animation-name: rv-xr; }
  }
  html.sd :is(.browser, .tile, .spotlight).reveal { animation-name: rv-s; }
  html.sd :is(.final .display, .promise .big).reveal { animation-name: rv-c; clip-path: inset(-.3em); }
}

/* ---------- MOTION-07 icon line drawing ---------- */
@keyframes ic-pop { 0% { scale: .6; } 60% { scale: 1.08; } 100% { scale: 1; } }
.mo :is(.feat, .tile) .ic svg, .mo .report-extras svg {
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 700ms var(--ease-out) calc(var(--d, 0s) + var(--sd, 0s) + 150ms);
}
.mo .reveal:not(.in) :is(.feat, .tile) .ic svg, .mo :is(.feat, .tile).reveal:not(.in) .ic svg, .mo .report-extras.reveal:not(.in) svg { stroke-dashoffset: 1; }
.mo .reveal.in :is(.feat, .tile) .ic, .mo :is(.feat, .tile).reveal.in .ic { animation: ic-pop var(--dur-4) var(--ease-spring) calc(var(--d, 0s) + var(--sd, 0s) + 80ms) both; }
@supports (animation-timeline: view()) {
  html.sd.mo :is(.feat, .tile) .ic svg, html.sd.mo .report-extras svg {
    stroke-dashoffset: 0; transition: none;
    animation: draw linear both; animation-timeline: view(); animation-range: entry 0% cover 14%;
  }
  html.sd.mo :is(.feat, .tile) .ic { animation: ic-pop linear both; animation-timeline: view(); animation-range: entry 0% cover 14%; }
}
@media (hover: hover) and (pointer: fine) {
  .mo :is(.feat, .tile):hover .ic svg { animation: draw 700ms var(--ease-out) both; }
}
.feat .ic { transition: background-color var(--dur-2), color var(--dur-2); }

/* ---------- MOTION-06 sticky phone layers ---------- */
.scr-layer {
  position: absolute; inset: 0; z-index: 1; opacity: 0; scale: 1.03; pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-in-out), scale var(--dur-3) var(--ease-in-out);
}
.scr-layer > img { width: 100%; height: 100%; object-fit: cover; }
.scr-layer.is-active { opacity: 1; scale: 1; }
.scr-chip {
  position: absolute; z-index: 2; left: 6%; right: 6%; bottom: 14%;
  display: flex; gap: 3cqw; align-items: center; padding: 3.4cqw 4cqw; border-radius: 5cqw;
  background: rgba(22, 22, 40, .86); color: #fff; font-size: 3.8cqw; line-height: 1.3; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  opacity: 0; translate: 0 6cqw; transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out);
}
.scr-chip small { display: block; font-weight: 500; opacity: .75; font-size: 3.2cqw; }
.scr-chip svg { flex: none; width: 7cqw; height: 7cqw; color: var(--accent-bright); }
.scr-chip.is-active { opacity: 1; translate: none; }
#employees .split .feat h3 { position: relative; }
#employees .split .feat h3::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 2.6em; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out);
}
.feat.is-active .ic { background: var(--accent); color: #fff; }
#employees .split .feat.is-active h3::after { transform: scaleX(1); }
@media (max-width: 899px) { .scr-layer, .scr-chip { display: none; } }

/* ---------- MOTION-08 report preview ---------- */
.tabs { position: relative; }
.tabs .tab-ind {
  position: absolute; left: 0; top: 0; width: 100px; height: 100%; max-height: 44px; border-radius: 999px; z-index: 0;
  background: var(--ink); transform-origin: 0 0; pointer-events: none; opacity: 0;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2);
}
.tabs.has-ind .tab-ind { opacity: 1; }
.tabs.has-ind button { position: relative; z-index: 1; }
.tabs.has-ind button[aria-selected="true"] { background: transparent; border-color: transparent; }
.panel.p-from { opacity: 0; transform: translateY(8px); }
.panel.p-go { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.ptitle { transition: opacity var(--dur-2); }
.ptitle.fade { opacity: 0; }
.tk { position: relative; color: transparent !important; -webkit-text-fill-color: transparent; }
.tk-o { position: absolute; left: 0; top: 0; color: var(--tk-c, currentColor); -webkit-text-fill-color: var(--tk-c, currentColor); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.tk.grad { background: none !important; }
.tk.grad .tk-o { -webkit-text-fill-color: transparent; color: transparent; background: linear-gradient(100deg, #ffffff 10%, #c9c6ff 55%, #8f8aff 95%); -webkit-background-clip: text; background-clip: text; }
.kpi b, .bignum, .wtd-stats b { font-variant-numeric: tabular-nums; }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes bar-in { from { transform: scaleX(0); } }
.minibar i { transform-origin: 0 50%; }
.mo .browser:not(.mo-in) .tbl tbody tr { opacity: 0; }
.mo .browser.mo-in .tbl tbody tr { animation: row-in var(--dur-3) var(--ease-out) both; }
.mo .browser.mo-in .tbl tbody tr:nth-child(2) { animation-delay: 40ms; }
.mo .browser.mo-in .tbl tbody tr:nth-child(3) { animation-delay: 80ms; }
.mo .browser.mo-in .tbl tbody tr:nth-child(4) { animation-delay: 120ms; }
.mo .browser.mo-in .tbl tbody tr:nth-child(5) { animation-delay: 160ms; }
.mo .browser.mo-in .tbl tbody tr:nth-child(6) { animation-delay: 200ms; }
.mo .browser.mo-in .minibar i { animation: bar-in var(--dur-4) var(--ease-out) 150ms both; }

/* ---------- MOTION-09 marquee ---------- */
.marquee .track { will-change: auto; }
.marquee:is(:hover, :focus-within) .track, .marquee.is-paused .track, .marquee.user-paused .track, .hidden-tab .marquee .track { animation-play-state: paused; }
.marquee span { transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.marquee span:hover { translate: 0 -3px; border-color: rgba(154, 150, 255, .45); }
.mq-toggle {
  display: flex; align-items: center; gap: 8px; margin: 20px auto 0; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--dark-line); background: rgba(255,255,255,.04);
  color: var(--dark-muted); font: 500 13.5px/1 var(--font); cursor: pointer;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.mq-toggle:hover { color: var(--dark-text); border-color: rgba(255,255,255,.25); }
.mq-toggle:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.mq-toggle i { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.mq-toggle[aria-pressed="true"] i { border: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* ---------- MOTION-10 aurora ---------- */
@keyframes au-1 { to { transform: translate3d(18vw, 8vh, 0) scale(1.15); } }
@keyframes au-2 { to { transform: translate3d(-16vw, -10vh, 0) scale(.9); } }
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; opacity: .55; }
.aurora i:nth-child(1) { left: -20vmax; top: -18vmax; background: radial-gradient(closest-side, rgba(98, 86, 255, .45), rgba(98, 86, 255, .12) 55%, transparent); animation: au-1 28s var(--ease-in-out) infinite alternate; }
.aurora i:nth-child(2) { right: -22vmax; top: 10vmax; background: radial-gradient(closest-side, rgba(150, 100, 255, .35), rgba(150, 100, 255, .08) 55%, transparent); animation: au-2 34s var(--ease-in-out) infinite alternate; }
.aurora.is-paused i, .hidden-tab .aurora i { animation-play-state: paused; }
.aurora:not(.is-paused) i { will-change: transform; }

/* ---------- MOTION-11 cursor glow ---------- */
@media (hover: hover) and (pointer: fine) {
  :is(.tile, .pillar, .step, .trust-col, .price, .wtd-stats > div, .ui-card, .play) { position: relative; --glow: rgba(74, 67, 217, .30); }
  :is(.dark, .trust-col.alt, .price, .spotlight) :is(.tile, .pillar, .step, .trust-col, .price, .wtd-stats > div, .ui-card, .play),
  :is(.trust-col.alt, .price) { --glow: rgba(154, 150, 255, .55); }
  :is(.tile, .pillar, .step, .trust-col, .price, .wtd-stats > div, .ui-card, .play)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; z-index: 1;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--glow), transparent 65%);
    -webkit-mask: linear-gradient(rgba(0,0,0,.34) 0 0), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(rgba(0,0,0,.34) 0 0), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: source-over, xor; mask-composite: add, exclude;
    opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
  }
  :is(.tile, .pillar, .step, .trust-col, .price, .wtd-stats > div, .ui-card, .play):hover::after { opacity: 1; }
}
.tile { isolation: isolate; }
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 24px 50px -30px rgba(30, 20, 120, .35); opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
.dark .tile::before { box-shadow: 0 24px 60px -30px rgba(0,0,0,.8); }
.tile, .tile:hover, .dark .tile:hover { box-shadow: none; position: relative; }
.tile:hover::before { opacity: 1; }
.tile:hover, .tile.reveal.in:hover { transform: translateY(-4px); }
.tile:active, .tile.reveal.in:active { transform: translateY(-4px) scale(.99); }

/* ---------- MOTION-15 nav ---------- */
.nav { transition: background-color var(--dur-3), border-color var(--dur-3); }
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: var(--accent-bright); transform-origin: 0 50%; transform: scaleX(var(--prog, 0));
}
@supports (animation-timeline: scroll()) {
  @keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .nav::after { animation: prog linear both; animation-timeline: scroll(root); }
}
.nav-links { position: relative; }
.nav-ind {
  position: absolute; left: 0; bottom: 2px; width: 100px; height: 2px; border-radius: 2px; pointer-events: none;
  background: currentColor; opacity: 0; transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2);
}
.nav-ind.on { opacity: .75; }
.nav-links a[aria-current="true"], .mobile-menu a[aria-current="true"] { opacity: 1; }
.mobile-menu a[aria-current="true"] { color: var(--accent-bright); }
@keyframes mm-in { from { opacity: 0; transform: translateY(-8px); } }
.nav.open .mobile-menu > * { animation: mm-in var(--dur-3) var(--ease-out) both; }
.nav.open .mobile-menu > :nth-child(2) { animation-delay: 30ms; }
.nav.open .mobile-menu > :nth-child(3) { animation-delay: 60ms; }
.nav.open .mobile-menu > :nth-child(4) { animation-delay: 90ms; }
.nav.open .mobile-menu > :nth-child(5) { animation-delay: 120ms; }
.nav.open .mobile-menu > :nth-child(6) { animation-delay: 150ms; }
.nav.open .mobile-menu > :nth-child(7) { animation-delay: 180ms; }
.nav.open .mobile-menu > :nth-child(8) { animation-delay: 210ms; }
.nav.open .mobile-menu > :nth-child(9) { animation-delay: 240ms; }
.nav.open .mobile-menu > :nth-child(n+10) { animation-delay: 270ms; }

@keyframes ic-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.final .icon-big.is-floating { animation: ic-float 6s var(--ease-in-out) infinite; }
@supports (animation-timeline: view()) {
  html.sd .final .icon-big.reveal.is-floating {
    animation: rv linear both, ic-float 6s var(--ease-in-out) infinite;
    animation-timeline: view(), auto; animation-range: entry 0% entry 40%, normal;
  }
}
.hidden-tab .final .icon-big { animation-play-state: paused; }

/* ---------- MOTION-16 reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .h-in, .hero h1 .ln, .hero h1 .h1-sub, .hero-meta li, .hero-meta svg, .hero .pill b::after, .hero h1 .grad,
  .hero-stage .phone, .hero-stage .float-chip, .final .icon-big, .final .icon-big.is-floating,
  .reveal, html.sd .reveal, .ic, .ic svg, .mo .browser.mo-in .tbl tbody tr, .mo .browser.mo-in .minibar i, .nav.open .mobile-menu > * {
    animation: none !important;
  }
  .hero h1 .ln { clip-path: none; }
  .hero-stage .phone, .hero-stage .float-chip { opacity: 1; }
  .reveal, .reveal:not(.in) { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; transition: none; }
  .mo :is(.feat, .tile) .ic svg, .mo .report-extras svg, .mo .hero-meta svg { stroke-dashoffset: 0 !important; transition: none; }
  .mo .browser:not(.mo-in) .tbl tbody tr { opacity: 1; }
  .scr-layer, .scr-chip, .feat .ic, .feat h3::after { transition: none !important; }
  .panel.p-go { transition: opacity var(--dur-1); transform: none; }
  .panel.p-from { transform: none; }
  .aurora { display: none; }
  .marquee .track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee .dup, .mq-toggle { display: none; }
  .marquee .track.rev { display: flex; }
  .nav-ind, .tabs .tab-ind, .btn, .btn-store::after, .link-arrow::before, .link-arrow::after, .tile, .tile::before, .marquee span, .chip-1 .chip-t { transition: none; }
  .tile:hover, .tile.reveal.in:hover, .btn:hover, .marquee span:hover { transform: none; translate: none; }
}

/* ---------- print: everything visible and drawn ---------- */
@media print {
  .reveal, .h-in, .hero h1 .ln, .tbl tbody tr { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; animation: none !important; transform: none !important; }
  .ic svg, .hero-meta svg, .report-extras svg { stroke-dasharray: none !important; animation: none !important; }
  .aurora, .mq-toggle, .nav::after { display: none !important; }
  .marquee .dup { display: none; }
  .marquee .track { animation: none; flex-wrap: wrap; width: auto; }
}