/* ============================================================
   MOTION.CSS — extra, additive motions (safe to delete)
   Only transform / opacity / background-size are animated.
   Hidden states apply ONLY after motion.js adds .mo-on to <html>,
   so nothing stays hidden if JS fails. Reduced-motion = untouched.
   ============================================================ */

/* ---- 1. Section titles / subtitles rise in ---- */
.mo-on .mo-rise {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--mo-d, 0s);
}
.mo-on .mo-rise.mo-in {
  opacity: 1;
  transform: none;
}

/* ---- 2. Red accent word gets an underline that draws itself ---- */
.mo-on .mo-rise .mo-accent,
.mo-on .mo-accent.mo-rise {
  background-image: linear-gradient(90deg, #e31e24, #f39200);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  padding-bottom: 3px;
  transition: background-size 1s cubic-bezier(.22,1,.36,1) .45s;
}
.mo-on .mo-rise.mo-in .mo-accent {
  background-size: 100% 3px;
}

/* ---- 3. Spotlight image: settle-zoom + one-time light sweep ---- */
.mo-on .spotlight-grid .visual img {
  transform: scale(1.14);
  transition: transform 1.6s cubic-bezier(.22,1,.36,1);
}
.mo-on .spotlight-grid .visual.mo-in img {
  transform: scale(1);
}
.spotlight-grid .visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.26) 50%, transparent 65%);
  transform: translate3d(-120%, 0, 0);
  pointer-events: none;
  opacity: 0;
}
.mo-on .spotlight-grid .visual.mo-in::after {
  animation: mo-sweep 1.5s cubic-bezier(.4,0,.2,1) .5s 1 both;
}
@keyframes mo-sweep {
  0%   { opacity: 1; transform: translate3d(-120%, 0, 0); }
  100% { opacity: 1; transform: translate3d(120%, 0, 0); }
}

/* ---- 4. Hero: soft light that follows the cursor (desktop only) ---- */
.mo-hero-glow {
  position: absolute;
  left: 0; top: 0;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,30,36,.20) 0%, rgba(243,146,0,.08) 40%, rgba(227,30,36,0) 68%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform, opacity;
}
.mo-hero-glow.mo-active { opacity: 1; }

/* ---- 5. Footer columns stagger in ---- */
.mo-on .footer-new .footer-grid > .mo-rise {
  transform: translate3d(0, 22px, 0);
}

/* ---- 6. Footer social icons: springy hover ---- */
@media (hover: hover) and (pointer: fine) {
  .footer-new .social a {
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .25s ease, color .25s ease;
  }
  .footer-new .social a:hover {
    transform: translateY(-4px) scale(1.1);
  }
}

/* ---- 7. Titles: words rise out of a mask ---- */
.mo-on .mo-split.mo-rise { opacity: 1; transform: none; transition: none; }
.mo-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.mo-w > span { display: inline-block; }
.mo-on .mo-split .mo-w > span { transform: translate3d(0, 115%, 0); transition: transform .9s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--mo-d, 0s) + var(--wi, 0) * .07s); }
.mo-on .mo-split.mo-in .mo-w > span { transform: none; }


@media (prefers-reduced-motion: reduce) {
  .mo-hero-glow { display: none !important; }
  .spotlight-grid .visual::after { display: none !important; }
}

/* ============================================================
   PRO-MOTION-2: Lenis, page veil, Three.js canvas, Lottie
   ============================================================ */
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: clip; }

.ts-veil { position: fixed; inset: 0; z-index: 10001; }
.ts-veil i { position: absolute; left: 0; right: 0; height: 50.5%; background: #080808; transition: transform .55s cubic-bezier(.77, 0, .18, 1); }
.ts-veil i:first-child { top: 0; transform: translate3d(0, -101%, 0); }
.ts-veil i:last-child { bottom: 0; transform: translate3d(0, 101%, 0); }
.ts-veil.on i { transform: none; }

.section-cta > .container { position: relative; z-index: 1; }
.ts-cta-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.ts-cta-canvas.on { opacity: .8; }

.ts-lottie-check { width: 96px; height: 96px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .ts-veil, .ts-cta-canvas { display: none !important; } }

/* GSAP-driven spotlight: light sweep is a CSS micro-effect toggled by a class */
.spotlight-grid .visual.mo-sweep::after { animation: mo-sweep 1.5s cubic-bezier(.4,0,.2,1) .1s 1 both; }
/* keep the 3D canvas strictly behind the CTA content */
.section-cta { isolation: isolate; }