/* 3D motion layer. motion3d.js adds html.m3d (motion allowed) and sets --sv
   (scroll depth 0..1), --gx/--gy (glare position) and the tilt rotation. */

/* ---------- Brand orb (WebGL) ---------- */
.brand-orb {
  width: clamp(150px, 19vw, 270px);
}
.brand-orb-gl {
  position: absolute;
  inset: -36%;
  width: 172%;
  height: 172%;
  pointer-events: none;
}
.brand-orb.is-gl .brand-mark,
.brand-orb.is-gl .brand-ring,
.brand-orb.is-gl::before {
  opacity: 0;
  animation: none;
}
html.m3d .brand-word-wrap {
  transform: perspective(1000px) rotateX(calc((1 - var(--p, 1)) * 62deg));
  transform-origin: 50% 100%;
}

/* ---------- 3D headings ---------- */
html.sx-ready [data-words] .w {
  perspective: 700px;
}
html.sx-ready [data-words] .w > span {
  transform: translate3d(0, 55%, 0) rotateX(-88deg);
  transform-origin: 50% 100%;
  transition:
    transform 1.15s var(--ease),
    opacity 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
  opacity: 0;
}
html.sx-ready [data-words].is-in .w > span {
  transform: none;
  opacity: 1;
}
html.sx-ready .dx-group-head {
  perspective: 700px;
}
html.sx-ready .dx-group-head .dx-num {
  display: inline-block;
  transform: rotateY(95deg);
  transition: transform 1.1s var(--ease) 0.1s;
}
html.sx-ready .dx-group-head.is-in .dx-num {
  transform: none;
}

/* ---------- Scroll depth ---------- */
html.m3d .sx-head,
html.m3d .dx-head {
  translate: 0 calc((1 - var(--sv, 1)) * 46px);
}
html.m3d .xp-grid,
html.m3d .pp-plans,
html.m3d .su-steps,
html.m3d .rm-stage {
  rotate: x calc((1 - var(--sv, 1)) * 18deg);
  scale: calc(0.92 + var(--sv, 1) * 0.08);
  transform-origin: 50% 100%;
}
.xp > .wrap,
.pp > .wrap,
.su > .wrap,
.rm > .wrap {
  perspective: 1600px;
}

/* ---------- Pointer tilt ---------- */
.xp-grid,
.dx-grid,
.pp-plans,
.su-steps,
.rm-panels {
  perspective: 1100px;
}
[data-tilt] {
  transition:
    rotate 0.55s var(--ease),
    opacity 0.9s var(--ease),
    transform 0.6s var(--ease),
    border-color 0.3s,
    box-shadow 0.45s var(--ease);
}
[data-tilt].is-tilting {
  transition:
    rotate 0.12s linear,
    opacity 0.9s var(--ease),
    transform 0.6s var(--ease),
    border-color 0.3s,
    box-shadow 0.45s var(--ease);
}
.xp-card,
.pp-plan {
  position: relative;
  transform-style: preserve-3d;
}
.xp-card .xp-vg {
  transform: translateZ(36px);
}
.xp-card h3 {
  transform: translateZ(22px);
}
.pp-plan .pp-price {
  transform: translateZ(34px);
}
.pp-plan .pp-badge {
  transform: translateZ(46px);
}
.xp-card::after,
.pp-plan::after,
.rm-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    460px circle at var(--gx, 50%) var(--gy, 0%),
    rgb(255 255 255 / 9%),
    transparent 55%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.rm-panel {
  position: relative;
}
[data-tilt].is-tilting::after {
  opacity: 1;
}

/* ---------- Tour window turns with each step ---------- */
.tv-sticky {
  perspective: 1500px;
}
.tv-app {
  transition: rotate 1s var(--ease);
}
html.m3d .tv-app[data-step="1"] {
  rotate: 0.2 -1 0 9deg;
}
html.m3d .tv-app[data-step="2"] {
  rotate: 1 0 0 5deg;
}
html.m3d .tv-app[data-step="3"] {
  rotate: 0.2 1 0 9deg;
}

/* ---------- Background solids and cursor light ---------- */
.bg3d {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.bg3d.is-on {
  opacity: 1;
}
.cursor-light {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(111 184 251 / 10%), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.cursor-light.is-on {
  opacity: 1;
}

@media (max-width: 900px) {
  html.m3d .tv-app[data-step] {
    rotate: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] {
    rotate: none !important;
  }
  .bg3d,
  .cursor-light {
    display: none;
  }
}