/* 3D motion, tier 0 (no libraries): hero entrance, pointer tilt, hero tower parallax.
   All of it is progressive enhancement and sits behind prefers-reduced-motion. */

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance: towers rise from the bottom edge, copy fades up in sequence */
  .hero-tower i { transform-origin: 50% 100%; animation: tower-rise 0.9s var(--ease) both; }
  .hero-tower i:nth-child(2) { animation-delay: 0.1s; }
  .hero-tower i:nth-child(3) { animation-delay: 0.2s; }
  .hero-tower--r i:nth-child(1) { animation-delay: 0.15s; }
  .hero-tower--r i:nth-child(2) { animation-delay: 0.25s; }
  .hero-tower--r i:nth-child(3) { animation-delay: 0.35s; }
  .hero-in > * { animation: hero-up 0.8s var(--ease) both; }
  .hero-in > :nth-child(2) { animation-delay: 0.08s; }
  .hero-in > :nth-child(3) { animation-delay: 0.16s; }
  .hero-in > :nth-child(4) { animation-delay: 0.24s; }
  .hero-in > :nth-child(5) { animation-delay: 0.32s; }
}
@keyframes tower-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* start at .01, not 0: browsers skip fully transparent elements as LCP candidates */
@keyframes hero-up { from { opacity: 0.01; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }

/* Hero pointer parallax: --px/--py in [-1, 1] are set by js/tilt-cards.js; each tower moves at its own depth */
.hero-tower { transform: translate3d(calc(var(--px, 0) * var(--depth, 14px)), calc(var(--py, 0) * var(--depth, 14px) * 0.6), 0); transition: transform 0.4s var(--ease-out, ease-out); }
.hero-tower--l { --depth: -18px; }
.hero-tower--r { --depth: 26px; }

/* Pointer tilt: js/tilt-cards.js adds html.tilt-on (fine pointer, motion allowed) and writes --rx/--ry on [data-tilt] while hovered.
   Gated so touch / reduced-motion visitors never get a permanent compositing layer on every card. */
html.tilt-on [data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease); backface-visibility: hidden; }
html.tilt-on [data-tilt].is-tilting { transition: transform 0.08s linear; will-change: transform; }

/* Cards that also use scroll reveal: once revealed, the tilt transform must win over the reveal's `transform: none` */
.tilt-on.reveal-on [data-reveal][data-tilt].in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity 0.8s var(--ease), transform 0.5s var(--ease); }
.tilt-on.reveal-on [data-reveal][data-tilt].in.is-tilting { transition: opacity 0.8s var(--ease), transform 0.08s linear; }

/* Lenis owns smooth scrolling while active: native smooth scroll must be off or the two fight */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }