/* Everything that moves. JS only toggles classes (is-active, is-in, …); timing lives here. */

/* ---------- Page entrance: a plain fade, then the headline rises line by line ---------- */
body { animation: page-in .9s var(--ease) both; }

.intro__title .line > span { transform: translateY(105%); animation: rise 1.2s var(--ease-out) .35s forwards; }
.intro__title .line + .line > span { animation-delay: .47s; }

/* ---------- Cross-fading slides (hero photos and reviews) ---------- */
.hero__slide, .voice { opacity: 0; visibility: hidden; transition: opacity 1.6s var(--ease-in-out), visibility 0s 1.6s; }
.hero__slide.is-active, .voice.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.6s var(--ease-in-out), visibility 0s; }

/* Slow push-in on the photo that is showing */
.hero__slide img, .voice > img { transform: scale(1.1); transition: transform 9s linear; }
.hero__slide.is-active img, .voice.is-active > img { transform: scale(1); }
.hero__slide:first-child.is-active img { animation: settle 2.6s var(--ease) both; }

.hero__ticks i.is-active::after { animation: tick var(--slide-ms, 6500ms) linear forwards; }
.hero__ticks i.is-done::after { transform: scaleX(1); }

.hero__down svg { animation: nudge 2.2s var(--ease-in-out) infinite; }

/* Review copy arrives after its photo */
.voice__copy > * { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .6s var(--ease-out); }
.voice.is-active .voice__copy > * { opacity: 1; transform: none; transition: opacity 1s .55s, transform 1.1s var(--ease-out) .55s; }
.voice.is-active .voice__copy blockquote { transition-delay: .7s; }
.voice.is-active .voice__copy figcaption { transition-delay: .85s; }

/* ---------- Scroll reveals ---------- */
[data-reveal]:not([data-reveal="image"]) {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform 1s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Images open from the bottom edge while settling from a slight zoom */
[data-reveal="image"] { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-in-out); }
[data-reveal="image"] img { scale: 1.2; transition: scale 1.8s var(--ease-out); }
[data-reveal="image"].is-in { clip-path: inset(0); }
[data-reveal="image"].is-in img { scale: 1; }
.feature:hover [data-reveal="image"].is-in img { scale: 1.03; transition-duration: 1.4s; }

/* Service cards rise one after another the first time the rail comes into view */
.rail .service-card { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform 1.1s var(--ease-out); }
.rail.is-in .service-card { opacity: 1; transform: none; }
.rail.is-in .service-card:nth-child(2) { transition-delay: .1s; }
.rail.is-in .service-card:nth-child(3) { transition-delay: .2s; }
.rail.is-in .service-card:nth-child(4) { transition-delay: .3s; }

[data-parallax], [data-parallax] img { will-change: translate; }

/* ---------- Keyframes ---------- */
@keyframes page-in { from { opacity: 0; } }
@keyframes rise { to { transform: none; } }
@keyframes settle { from { transform: scale(1.12); } }
@keyframes tick { to { transform: scaleX(1); } }
@keyframes nudge { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(6px); } }

/* Shorter distances feel calmer on small screens */
@media (max-width: 720px) {
  [data-reveal]:not([data-reveal="image"]) { transform: translateY(18px); transition-duration: .75s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  [data-reveal], [data-reveal="image"], .rail .service-card, .voice__copy > * { opacity: 1; transform: none; clip-path: none; }
  [data-reveal="image"] img, .hero__slide img, .voice > img { scale: 1; transform: none; }
  .intro__title .line > span { transform: none; }
}