/* Motion layer.
   Rules followed (animate skill): transform, opacity, clip, translate and scale only; hover motion gated
   to real pointers; strong curves from tokens.css; UI moves stay under 300ms, marketing reveals run longer;
   reduced motion keeps fades and drops movement. */

/* ---- Hero: the headline rises out of a soft blur, once on load ---- */
.js [data-split]:not(.is-split) { opacity: 0; animation: splitFallback 0s linear 1.8s forwards; }
@keyframes splitFallback { to { opacity: 1; } }
.word { display: inline-block; opacity: 0; transform: translateY(.38em); filter: blur(6px); animation: wordIn 900ms var(--ease-out) forwards; animation-delay: calc(120ms + var(--w, 0) * 55ms); }
@keyframes wordIn { to { opacity: 1; transform: none; filter: blur(0); } }

/* Entrance order: badge, headline, product card, copy, form */
.js [data-intro="0"] { animation-delay: 40ms; }
.js [data-intro="2"] { animation-delay: 560ms; }
.js [data-intro="3"] { animation-delay: 680ms; }
.js [data-intro="4"] { animation-delay: 240ms; animation-duration: 1100ms; }

/* ---- Ambient: a slow drift in the hero glow ---- */
@media (prefers-reduced-motion: no-preference) {
  .glow::before { animation: glowDrift 26s var(--ease-in-out) infinite alternate; }
}
@keyframes glowDrift { to { transform: translate3d(-7%, 9%, 0) scale(1.08); } }

/* ---- Navigation: the section you are in ---- */
.nav__links a.is-current { color: var(--ink-900); background: rgba(6, 47, 43, .07); }

/* ---- Feature tiles: lift and a light that follows the pointer ---- */
.tile { position: relative; isolation: isolate; }
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(47, 165, 143, .12), transparent 62%);
  transition: opacity 300ms var(--ease-out);
}
.js .tile[data-reveal] {
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), translate 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms, 0ms;
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover { translate: 0 -3px; }
  .tile:hover::before { opacity: 1; }
}

/* ---- How it works: the current step's product card comes forward ---- */
.step .mock { transition: scale 520ms var(--ease-out), opacity 520ms var(--ease-out), box-shadow 520ms var(--ease-out); }
.step:not(.is-active) .mock { scale: .985; opacity: .82; }
.step.is-active .mock { box-shadow: var(--shadow-lg); }

/* ---- Audience tabs: one pill slides between tabs ---- */
.aud__thumb { position: absolute; z-index: 0; top: .6rem; bottom: .6rem; left: .6rem; width: calc((100% - 1.2rem) / 3); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 280ms var(--ease-in-out); }

/* ---- FAQ: icon turns immediately when closing ---- */
.faq__list details.is-closing summary::after { transform: none; }

/* ---- Reveal: a little more travel, staggered by JS (55ms steps) ---- */
.js [data-reveal] { transform: translateY(16px); transition-duration: 800ms; }
.js [data-reveal].is-in { transform: none; }

/* ---- Reduced motion: keep fades, drop movement and blur ---- */
@media (prefers-reduced-motion: reduce) {
  .word { transform: none; filter: none; animation: wordFade 300ms ease forwards; animation-delay: 0ms; }
  @keyframes wordFade { to { opacity: 1; } }
  .step:not(.is-active) .mock { scale: 1; }
  .tile:hover { translate: none; }
  .aud__thumb { transition: none; }
  .js [data-reveal] { transform: none; }
}