/* ============================================================
   JewelsUp landing — motion layer (additive; loads after landing.css)
   STABILITY CONTRACT: every rule here is gated behind html.motion-live,
   a class that motion.js adds ONLY on the first TRUSTED user input
   (pointer/keyboard). DOM-capture and instrumentation contexts never
   produce trusted input, so they always serialize the plain approved
   page — the exact baseline that verified clean. No scroll-driven
   animations, no view timelines, no observers, no scroll listeners.
   All end states = the approved design.
   ============================================================ */

/* ---- structural safeguards (invisible at rest) ---- */
html.motion-live .prod-img { overflow: hidden; }
html.motion-live .hv, html.motion-live .hv > div { transform-style: preserve-3d; }

/* ============================================================
   1) Interactive 3D — pointer tilt + hover depth (fine pointers only)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  html.motion-live .lp:not(.no-tilt) .hv {
    transform: perspective(1150px) rotateX(var(--hv-rx, 0deg)) rotateY(var(--hv-ry, 0deg));
  }
  html.motion-live .lp:not(.no-tilt) .hv > div:nth-child(1) .hv-panel { transform: translateZ(16px); }
  html.motion-live .lp:not(.no-tilt) .hv > div:nth-child(2) .hv-panel { transform: translateZ(30px); }
  html.motion-live .lp:not(.no-tilt) .hv .hv-platform { transform: translateZ(44px); }

  html.motion-live .lp:not(.no-tilt) .thw-card:hover { transform: perspective(1000px) translateY(-4px) rotateX(1.4deg) translateZ(8px); }
  html.motion-live .lp:not(.no-tilt) .prod-card:hover { transform: perspective(1000px) translateY(-4px) rotateX(1.2deg) translateZ(8px); }

  html.motion-live .prod-img image-slot { transition: transform 600ms var(--ease-standard); }
  html.motion-live .lp:not(.no-tilt) .prod-card:hover .prod-img image-slot { transform: scale(1.045); }
}

/* ============================================================
   2) Hero entrance — one-shot, plays on first user interaction
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.motion-live .lp:not(.no-scrollfx) .hero-copy > div { animation: m-rise 700ms var(--ease-emphasized) backwards; }
  html.motion-live .lp:not(.no-scrollfx) .hero-copy > div:nth-child(2) { animation-delay: 130ms; }
  html.motion-live .lp:not(.no-scrollfx) .hero-copy > div:nth-child(3) { animation-delay: 260ms; }
  html.motion-live .lp:not(.no-scrollfx) .hero-in > div:last-child { animation: m-rise-3d 900ms var(--ease-emphasized) 220ms backwards; }
}

@keyframes m-rise    { from { opacity: 0; transform: translateY(26px); } }
@keyframes m-rise-3d { from { opacity: 0; transform: perspective(900px) translateY(30px) rotateX(5deg); } }

/* ============================================================
   Kill switches
   ============================================================ */
.lp.no-scrollfx *, .lp.no-scrollfx *::before, .lp.no-scrollfx *::after { animation: none !important; }
@media print {
  html.motion-live .lp *, html.motion-live .lp *::before, html.motion-live .lp *::after { animation: none !important; transform: none !important; }
}