/* =========================================================================
   Motion: everything animated lives here so it can be toned down in one place.
   Only transform / opacity (and clip-path for two reveals) are animated.
   Content is fully visible with JS off: hidden states are scoped to html.js.
   ========================================================================= */

/* ---------- Hero entrance (on load, once) ---------- */
@keyframes kenburns { from { transform: scale(1.08); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rise40 { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }

.js .hero__img { animation: kenburns 1.6s var(--ease-out) both; }
.js .hero__line { animation: rise .9s var(--ease-out) both; }
.js .hero__line:nth-child(1) { animation-delay: .15s; }
.js .hero__line:nth-child(2) { animation-delay: .27s; }
.js .hero__sub { animation: rise .9s var(--ease-out) .45s both; }
.js .hero__cta { animation: rise .9s var(--ease-out) .69s both; }
.js .hero__scroll { animation: fade .8s ease-out 1.35s both; }
.js .hero__scroll img { animation: bob 2s var(--ease-in-out) 2.2s infinite; }
.js.has-scrolled .hero__scroll img { animation: none; }
.hero__scroll img { transition: transform var(--dur) var(--ease-out); }
.hero__scroll:hover img { transform: scale(1.06); }

/* ---------- Scroll reveals ---------- */
.js .reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), clip-path 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal--pop { transform: scale(.8); }
.js .reveal--right { transform: translateX(60px); }
.js .reveal--clip { opacity: 1; transform: none; clip-path: inset(10% round var(--r-why-photo)); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--clip.is-visible { clip-path: inset(0 round var(--r-why-photo)); }
/* once revealed, hover transitions should not inherit the stagger delay */
.js .reveal.is-done { transition-delay: 0ms; }

/* Intro logo mark: one-off scale + slight rotate */
@keyframes markIn { from { transform: scale(.8) rotate(-10deg); opacity: .4; } to { transform: none; opacity: 1; } }
.js .intro__line.is-visible .intro__mark { animation: markIn 1s var(--ease-out) .25s both; }

/* Steps: connector draws in after its circle pops */
.js .step::after { transform: scaleX(0); transition: transform .6s var(--ease-out); transition-delay: calc(var(--d, 0ms) + 250ms); }
.js .step.is-visible::after { transform: scaleX(1); }
@media (max-width: 600px) {
  .js .step::after { transform: scaleY(0); }
  .js .step.is-visible::after { transform: scaleY(1); }
}

/* Featured bubbles: slow float, out of phase */
@keyframes float { from { translate: 0 -10px; } to { translate: 0 10px; } }
.js .bubble--xl { animation: float 7s var(--ease-in-out) infinite alternate; }
.js .bubble--lg { animation: float 8s var(--ease-in-out) -3s infinite alternate; }
.js .bubble--sm { animation: float 6s var(--ease-in-out) -1.5s infinite alternate; }

/* CTA "Happen!" brush underline: clip-path wipe left to right (the vector is a filled shape) */
.js .cta__underline { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease-out) .55s; }
.js .cta__title.is-visible .cta__underline { clip-path: inset(0 0 0 0); }

/* Parallax targets (transform written by motion.js) */
[data-parallax] { will-change: transform; }

/* ---------- Reduced motion (mandatory) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal, .js .reveal--clip { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .step::after { transform: none !important; }
  .js .cta__underline { clip-path: none !important; }
  .js .bubble, .js .hero__scroll img { animation: none !important; }
  [data-parallax] { transform: none !important; }
}