/* ==========================================================================
   JAGUAR FITNESS DEN — animations.css
   Purposeful motion only. Everything is layered on top of fully visible
   content: the `js` class is added to <html> by an inline script, so if
   JavaScript fails nothing is hidden (see `html.js` selectors below).
   ========================================================================== */

/* ---------- Scroll reveals (IntersectionObserver adds .is-in) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal--left { transform: translateX(-34px); }
html.js .reveal--right { transform: translateX(34px); }
html.js .reveal--left.is-in, html.js .reveal--right.is-in { transform: none; }

/* ---------- Clip-path image reveal (applied to .frame) ---------- */
html.js .clip-reveal img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.12);
  transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js .clip-reveal.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
html.js .clip-reveal--x img { clip-path: inset(0 100% 0 0); }
html.js .clip-reveal--x.is-in img { clip-path: inset(0 0 0 0); }

/* ---------- Staggered headline reveal (JS wraps each word) ---------- */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-words .wi { display: inline-block; }
html.js .split-words .wi {
  transform: translateY(112%);
  transition: transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms + var(--base, 0ms));
}
html.js .split-words.is-in .wi { transform: none; }

/* ---------- Animated editorial label: the rule draws in ---------- */
html.js .eyebrow::after { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .25s; }
html.js .is-in .eyebrow::after, html.js .eyebrow.is-in::after { transform: scaleX(1); }

/* ---------- Orange offset block slides into place ---------- */
html.js .fx::before { transform: translate(-14px, -14px); opacity: 0; transition: transform 1s var(--ease) .3s, opacity .6s .3s; }
html.js .fx--left::before { transform: translate(14px, -14px); }
html.js .fx.is-in::before, html.js .is-in .fx::before { transform: none; opacity: 1; }

/* ---------- Hero entrance (runs once, on load) ---------- */
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
html.js .hero .hero__chip, html.js .hero .hero__badge, html.js .hero .hero__sub { opacity: 0; }
html.js .hero.is-in .hero__chip { animation: popIn .8s var(--ease) .9s forwards; }
html.js .hero.is-in .hero__badge { animation: popIn .8s var(--ease) 1.05s forwards; }
html.js .hero.is-in .hero__sub { animation: popIn .9s var(--ease) .75s forwards; }
html.js .hero .hero__fade { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 110ms + 350ms); }
html.js .hero.is-in .hero__fade { opacity: 1; transform: none; }

/* ---------- Gentle ambient movement (very slow, decorative only) ---------- */
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -18px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero__ring { animation: drift 16s ease-in-out infinite; }
.hero.is-in .hero__badge { animation: popIn .8s var(--ease) 1.05s forwards, bob 6s ease-in-out 2s infinite; }
.feature__badge::before { animation: drift 18s ease-in-out infinite; }

/* ---------- Parallax targets are moved by JS via --py ---------- */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ---------- Lightbox ---------- */
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reduced motion: switch everything off, keep content visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  html.js .reveal, html.js .split-words .wi, html.js .hero .hero__fade { opacity: 1; transform: none; }
  html.js .clip-reveal img { clip-path: none; transform: none; }
  html.js .hero .hero__chip, html.js .hero .hero__badge, html.js .hero .hero__sub { opacity: 1; }
  html.js .fx::before { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}