/* Hero entrance — content stays in the HTML, only fades/slides in */
.hero-anim { opacity: 0; transform: translateY(18px); animation: heroIn .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + 100ms); }

@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroZoom { to { transform: scale(1); } }
@keyframes finderSwap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/*
  Scroll reveals. Elements are only hidden while the html has the "js" class;
  a failsafe in <head> removes it if animations.js never runs, so content can't stay hidden.
  Variants: .reveal / data-anim="up" | "left" | "right" | "zoom" | "fade"
*/
.js .reveal,
.js [data-anim] {
  opacity: 0;
  /* Reveal uses opacity/transform; hover lifts use translate/box-shadow so they never fight */
  transition:
    opacity .9s var(--ease) var(--reveal-delay, 0ms),
    transform .9s var(--ease) var(--reveal-delay, 0ms),
    translate .35s var(--ease),
    box-shadow .35s var(--ease);
}
.js .reveal,
.js [data-anim="up"] { transform: translateY(36px); }
.js [data-anim="left"] { transform: translateX(-48px); }
.js [data-anim="right"] { transform: translateX(56px); }
.js [data-anim="zoom"] { transform: scale(.94); }
.js .reveal.is-visible,
.js [data-anim].is-visible { opacity: 1; transform: none; }

/* Children animate one after another (section headings, footer columns) */
.js .reveal-stagger > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal-stagger > *:nth-child(2) { transition-delay: .12s; }
.js .reveal-stagger > *:nth-child(3) { transition-delay: .24s; }
.js .reveal-stagger > *:nth-child(4) { transition-delay: .36s; }

/* Image wipe inside revealed media */
.js [data-anim] .intro__img,
.js .option-card .option-card__img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) .15s; }
.js [data-anim].is-visible .intro__img,
.js .option-card.is-visible .option-card__img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .hero-anim, .js .reveal, .js [data-anim], .js .reveal-stagger > * { opacity: 1; transform: none; }
  .js [data-anim] .intro__img, .js .option-card .option-card__img { clip-path: none; }
}

/* Line-by-line headline reveal: <h1 data-lines><span class="line"><span>Text</span></span>…</h1> */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: inline-block; }
.js [data-lines] .line > span { transform: translateY(110%); transition: transform 1.2s var(--ease); }
.js [data-lines].is-visible .line > span { transform: none; }
.js [data-lines] .line:nth-child(2) > span { transition-delay: .1s; }
.js [data-lines] .line:nth-child(3) > span { transition-delay: .2s; }
.js [data-lines] .line:nth-child(4) > span { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-lines] .line > span { transform: none; }
}