/* ==========================================================================
   Wellfit Designs — motion layer
   Every initial "hidden" state is scoped to html.js so content is always
   visible without JavaScript. prefers-reduced-motion disables all of it.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes scrollLine { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@keyframes heroSettle { from { transform: scale(1.18); } to { transform: scale(1.04); } }
@keyframes heroArch { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fadeUp { from { opacity: .001; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes heroSlide { 0% { opacity: 0; } 4%, 33% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes curtainLogo { 0% { opacity: 0; transform: translateY(10px); } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- Generic reveal ---------- */
/* .001 rather than 0: visually identical, but lets the browser count above-the-fold text as painted (LCP) */
.js [data-reveal] {
  opacity: .001;
  transform: translate3d(0, 44px, 0);
  transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translate3d(-44px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Media mask reveal: the frame wipes open while the image settles.
   The clip sits on the children (not the observed figure) so IntersectionObserver
   still sees the figure while it is masked. */
.js [data-reveal="mask"], .js [data-reveal="mask-side"] { opacity: 1; transform: none; background-color: transparent; }
.js [data-reveal="mask"] > picture, .js [data-reveal="mask"] > .media-caption { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-in-out); transition-delay: var(--d, 0s); }
.js [data-reveal="mask"] img { transform: scale(1.22); transition: transform 2s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal="mask"].is-in > picture, .js [data-reveal="mask"].is-in > .media-caption { clip-path: inset(0 0 0 0); }
.js [data-reveal="mask"].is-in img { transform: scale(1); }
.js [data-reveal="mask-side"] > * { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--ease-in-out); transition-delay: var(--d, 0s); }
.js [data-reveal="mask-side"].is-in > * { clip-path: inset(0 0 0 0); }

/* Hairlines that draw in */
.js [data-reveal="line"] { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-in-out); }
.js [data-reveal="line"].is-in { transform: scaleX(1); }

/* ---------- Split text (words rise from a mask) ---------- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-inner { display: inline-block; will-change: transform; }
.js [data-split] .split-inner { transform: translate3d(0, 108%, 0); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 45ms); }
.js [data-split].is-in .split-inner { transform: none; }

/* Scroll-linked word fill for statements */
.fill-word { transition: opacity .4s linear, color .4s linear; }
.js [data-fill] .fill-word { opacity: .3; }
.js [data-fill] .fill-word.is-lit { opacity: 1; }

/* ---------- Lazy images fade in once decoded ---------- */
.js img[data-fade] { opacity: 0; transition: opacity .9s ease; }
.js img[data-fade].is-loaded { opacity: 1; }

/* ---------- Hero entrance ---------- */
.js .hero__media img { animation: heroSettle 2.6s var(--ease-out) both; }
.js .hero:not(.is-pinned) .hero__media { animation: heroArch 1.6s var(--ease-in-out) .15s both; }
.js .hero.is-pinned .hero__media img { animation: none; }
.js .hero.is-pinned .hero__media > picture { animation: heroArch 1.6s var(--ease-in-out) .1s both; }
/* hero slideshow: the first picture stays put and the others crossfade over it in turn */
.hero__media > .hero__slide { animation: heroSlide 18s ease-in-out 6s infinite both; }
.hero__media > .hero__slide + .hero__slide { animation-delay: 12s; }
.js .hero.is-pinned .hero__media > .hero__slide { animation: heroArch 1.6s var(--ease-in-out) .1s both, heroSlide 18s ease-in-out 6s infinite both; }
.js .hero.is-pinned .hero__media > .hero__slide + .hero__slide { animation-delay: .1s, 12s; }
.js .hero__copy [data-hero-in] { opacity: .001; transform: translate3d(0, 24px, 0); }
.js.is-ready .hero__copy [data-hero-in] { animation: fadeUp 1.1s var(--ease-out) both; animation-delay: var(--d, .4s); }

/* ---------- Page curtain (between internal pages) ---------- */
.is-entering .curtain { transform: translateY(0); }
.is-entering.is-entered .curtain { transform: translateY(-101%); transition: transform .95s var(--ease-in-out) .05s; }
.is-leaving .curtain { transform: translateY(0); transition: transform .75s var(--ease-in-out); }
.is-leaving .curtain img, .is-entering:not(.is-entered) .curtain img { animation: curtainLogo 1s ease both; }

/* ---------- Magnetic elements ---------- */
[data-magnetic] { transition: transform .7s var(--ease-out); will-change: transform; }

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-reveal="mask"], .js [data-reveal="mask-side"], .js [data-reveal="line"],
  .js [data-reveal="mask"] > *, .js [data-reveal="mask-side"] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-reveal="mask"] img { transform: none !important; }
  .js [data-split] .split-inner { transform: none !important; }
  .js [data-fill] .fill-word { opacity: 1 !important; }
  .js img[data-fade] { opacity: 1 !important; }
  .js .hero__copy [data-hero-in] { opacity: 1 !important; transform: none !important; }
  .curtain { display: none !important; }
  .hero__slide { display: none !important; }
  .marquee__track { transform: none !important; }
}