/* Motion: scroll-reveal, brand reveal, kinetic hero. Honours reduced-motion. */

/* ---- Scroll reveal (JS toggles .is-in). Hidden only when JS is present so
   content stays visible without JS (SEO + no-JS users). ---- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal--left { transform: translateX(-28px); }
.js .reveal--right { transform: translateX(28px); }
.js .reveal--scale { transform: scale(.94); }
.js .reveal--left.is-in, .js .reveal--right.is-in, .js .reveal--scale.is-in { transform: none; }

/* staggered children */
.js .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(1) { transition-delay: .04s; }
.stagger.is-in > *:nth-child(2) { transition-delay: .10s; }
.stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
.stagger.is-in > *:nth-child(4) { transition-delay: .22s; }
.stagger.is-in > *:nth-child(5) { transition-delay: .28s; }
.stagger.is-in > *:nth-child(6) { transition-delay: .34s; }
.stagger.is-in > *:nth-child(7) { transition-delay: .40s; }
.stagger.is-in > *:nth-child(8) { transition-delay: .46s; }

/* ---- Hero kinetic headline reveal ---- */
.hero__title .kin > span { transform: translateY(110%); animation: kinUp .8s var(--ease-out) forwards; }
.hero__title .kin:nth-of-type(1) > span { animation-delay: .15s; }
.hero__title .kin:nth-of-type(2) > span { animation-delay: .30s; }
.hero__title .kin:nth-of-type(3) > span { animation-delay: .45s; }
@keyframes kinUp { to { transform: translateY(0); } }

.hero__sub, .hero__cta { opacity: 0; animation: fadeUp .7s var(--ease-out) forwards; }
.hero__sub { animation-delay: .6s; }
.hero__cta { animation-delay: .75s; }
.hero__rule { transform: scaleX(0); animation: ruleIn .8s var(--ease-out) forwards; animation-delay: .7s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ruleIn { to { transform: scaleX(1); } }

/* ---- Brand wordmark stroke draw (SVG) ---- */
.brand__logo .draw { stroke-dasharray: 240; stroke-dashoffset: 240; animation: draw 1.4s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- Magnetic / pulse accents ---- */
.pulse-gold { position: relative; }
.pulse-gold::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(242,169,0,.5); animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 14px rgba(242,169,0,0); } 100% { box-shadow: 0 0 0 0 rgba(242,169,0,0); } }

/* count-up numbers start hidden until JS */
.countup { font-variant-numeric: tabular-nums; }

/* ---- Reduced motion: disable all of the above ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .hero__title .kin > span { transform: none !important; }
  .hero__sub, .hero__cta, .hero__rule { opacity: 1 !important; transform: none !important; }
}