/* 3D scroll motions — Draftly-style */

:root {
  --motion-ease: cubic-bezier(.22,.61,.36,1);
  --motion-dur: 1.1s;
}

html { scroll-behavior: smooth; }
body { perspective: 1600px; perspective-origin: 50% 50%; }

/* Master fade-up-in-3D for any direct child of <main> (top-level sections) */
main > section,
.scroll-3d {
  opacity: 0;
  transform: translate3d(0, 80px, -180px) rotateX(8deg);
  transform-origin: 50% 0%;
  transition:
    opacity var(--motion-dur) var(--motion-ease),
    transform var(--motion-dur) var(--motion-ease);
  will-change: transform, opacity;
}
main > section.in-view,
.scroll-3d.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0);
}

/* Per-element children stagger using --i */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 60px, -120px) rotateX(10deg);
  transition:
    opacity .9s var(--motion-ease),
    transform .9s var(--motion-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}
[data-stagger].in-view > * {
  opacity: 1;
  transform: none;
}

/* Tilt-in for cards / KPIs / pains / features */
.kpi, .stat, .pain, .feat, .reel, .tl__item, .meas__item, .cob-list li, .evt, .ex-list li {
  opacity: 0;
  transform: translate3d(0, 40px, -80px) rotateX(6deg);
  transition: opacity .7s var(--motion-ease), transform .7s var(--motion-ease);
  transform-origin: 50% 80%;
  will-change: transform, opacity;
}
.kpi.in-view, .stat.in-view, .pain.in-view, .feat.in-view, .reel.in-view,
.tl__item.in-view, .meas__item.in-view, .cob-list li.in-view, .evt.in-view, .ex-list li.in-view {
  opacity: 1;
  transform: none;
}

/* Scroll-linked transforms driven by --p (0..1) set in JS */
.parallax-up   { transform: translate3d(0, calc(var(--p, 0) * -80px), 0); will-change: transform; }
.parallax-down { transform: translate3d(0, calc(var(--p, 0) *  80px), 0); will-change: transform; }

/* Hero 3D layers — depth as user scrolls down */
.hero {
  transform-style: preserve-3d;
}
.hero__title {
  transform: translate3d(0, calc(var(--p, 0) * -60px), calc(var(--p, 0) * 120px)) rotateX(calc(var(--p, 0) * -6deg));
  transition: transform .15s linear;
  transform-origin: 50% 100%;
  will-change: transform;
}
.hero__sub,
.hero__bullets {
  transform: translate3d(0, calc(var(--p, 0) * -30px), 0);
  opacity: calc(1 - var(--p, 0) * 0.6);
  transition: transform .15s linear, opacity .15s linear;
}
.hero__right {
  transform:
    translate3d(0, calc(var(--p, 0) * -20px), calc(var(--p, 0) * 60px))
    rotateY(calc(var(--p, 0) * -3deg))
    rotateX(calc(var(--p, 0) * 2deg));
  transform-origin: 50% 50%;
  transition: transform .15s linear;
  will-change: transform;
}
.hero__glow {
  transform: translate3d(calc(var(--p, 0) * -60px), calc(var(--p, 0) * 60px), 0) scale(calc(1 + var(--p, 0) * 0.3));
  transition: transform .2s linear;
}
.hero__blob {
  transform: translate3d(calc(var(--p, 0) * 80px), calc(var(--p, 0) * -40px), 0);
  transition: transform .2s linear;
}

/* Section-head titles get a subtle 3D lift on scroll */
[data-tilt-scroll] {
  transform: rotateX(calc((1 - var(--vp, 0.5)) * 18deg)) translate3d(0, calc((1 - var(--vp, 0.5)) * 60px), 0);
  transform-origin: 50% 100%;
  transition: transform .2s linear;
  will-change: transform;
}

/* Browser mockup — pivots in 3D as it crosses center */
.browser {
  transform:
    perspective(2000px)
    rotateX(calc((0.5 - var(--vp, 0.5)) * 14deg))
    translate3d(0, 0, calc((1 - var(--vp, 0.5)) * -80px))
    scale(calc(1 - (1 - var(--vp, 0.5)) * 0.05));
  transform-origin: 50% 50%;
  transition: transform .2s linear;
  will-change: transform;
}

/* Phones in white-label — counter-rotate slightly (keeps base scale) */
.wl__phones .wl__frame--a {
  transform:
    scale(.74)
    translateX(-52%)
    rotate(calc(-5deg + (0.5 - var(--vp, 0.5)) * -6deg))
    translateY(calc((0.5 - var(--vp, 0.5)) * -40px));
  transition: transform .2s linear;
}
.wl__phones .wl__frame--b {
  transform:
    scale(.74)
    translateX(52%)
    rotate(calc(5deg + (0.5 - var(--vp, 0.5)) * 6deg))
    translateY(calc((0.5 - var(--vp, 0.5)) * 40px));
  transition: transform .2s linear;
}

/* Decada giant "10" tilts with scroll */
.decada__num {
  transform: rotateX(calc((0.5 - var(--vp, 0.5)) * 18deg)) translateZ(calc((1 - var(--vp, 0.5)) * -60px));
  transform-origin: 50% 100%;
  transition: transform .2s linear;
  will-change: transform;
}

/* Final CTA card lifts and pushes back as you enter */
.cta-final__card {
  transform: perspective(2000px) rotateX(calc((1 - var(--vp, 0.5)) * 10deg)) translateY(calc((1 - var(--vp, 0.5)) * 40px));
  transform-origin: 50% 100%;
  transition: transform .2s linear;
  will-change: transform;
}

/* Reduced motion: nuke all of this */
@media (prefers-reduced-motion: reduce) {
  main > section, .scroll-3d, [data-stagger] > *,
  .kpi, .stat, .pain, .feat, .reel, .tl__item, .meas__item, .cob-list li, .evt, .ex-list li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-tilt-scroll], .browser, .wl__phones .wl__frame, .decada__num, .cta-final__card,
  .hero__title, .hero__sub, .hero__bullets, .hero__right, .hero__glow, .hero__blob {
    transform: none !important;
  }
}