/* OZDIGITAL fx layer for index.html (loaded after motion.css). fx.js adds the `fx` class on <html>
   once GSAP is up, so without it (or with reduced motion) none of this applies.
   `fx-wait` is set by an inline script in <head> and holds the hero title back until the ink takes over. */

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Ink reveal: the hero title skips its word rise, fx.js inks it in instead ---------- */
.fx-wait .hero h1 { opacity: 0; }
.fx .hero h1.rise, .fx-wait .hero h1.rise { animation: none; }
.fx .split .w > span { animation: none; }

/* ---------- Hero ink canvas, under the copy and the mascot ---------- */
.hero-fluid { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Services stack ---------- */
.fx .fx-stack.services { display: flex; flex-direction: column; gap: 24px; }
.fx .fx-stack .svc {
  --st: 0;
  position: sticky; top: calc(88px + var(--k, 0) * 18px);
  min-height: min(520px, 66vh);
  transform-origin: 50% 0;
  scale: calc(1 - var(--st) * 0.07);
}
.fx .fx-stack .svc-apps { grid-row: auto; }
.svc-shade {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: var(--bg); opacity: calc(var(--st, 0) * 0.55);
}
/* Scroll-linked properties must not be eased by the tilt card transitions. */
.js .fx .fx-stack .svc.tilt { transition: transform 0.7s var(--ease), box-shadow 0.4s var(--ease); }
.js .fx .fx-stack .svc.tilt.is-hover { transition: transform 0.14s linear, box-shadow 0.4s var(--ease); }
@media (max-width: 767px) {
  .fx .fx-stack .svc { top: calc(76px + var(--k, 0) * 12px); min-height: min(420px, 62vh); }
}

/* ---------- Team deck ---------- */
.fx .fx-deck .member {
  --fx: 0px; --fy: 0px; --fr: 0deg;
  translate: var(--fx) var(--fy); rotate: var(--fr);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.55);
}
.fx .fx-deck .member:nth-child(2) { z-index: 2; }
.js .fx .fx-deck .member.tilt { transition: transform 0.7s var(--ease), box-shadow 0.4s var(--ease); }
.js .fx .fx-deck .member.tilt.is-hover { transition: transform 0.14s linear, box-shadow 0.4s var(--ease); }