/* LONE BREED — Hero depth
   The hero sits on a perspective stage: its copy occupies separate Z planes
   and the whole block tilts against the pointer, so the header reads as a
   space rather than a flat panel. Product cards tilt individually.

   The load sequence lives in splash.css / splash.js.
   Depends on tokens from store.css. */

/* ═══════════════════ Stage ═══════════════════ */

.lb3d-stage { perspective: 1500px; perspective-origin: 50% 45%; }

.lb3d-stage .hero-section {
    transform-style: preserve-3d;
    will-change: transform;
}

.lb3d-stage .hero-content { transform-style: preserve-3d; }

/* ─────────────── Copy on separate Z planes ─────────────── */

.lb3d-layer {
    will-change: transform;
    /* Each layer sits at its own depth, so the tilt separates them. */
    transform: translateZ(var(--z, 0px));
}

.lb3d-layer--eyebrow { --z: 70px; }
.lb3d-layer--title   { --z: 120px; }
.lb3d-layer--text    { --z: 55px; }
.lb3d-layer--cta     { --z: 95px; }

/* The ambient backdrop sits furthest back and moves least. */
.lb3d-stage .lb-ambient { transform: translateZ(-220px) scale(1.18); }

/* ─────────────── Live tilt ─────────────── */

/* JS writes these custom properties; keeping the rotation on a wrapper means
   it composes with the layer transforms instead of overwriting them. */
.lb3d-tilt {
    transform-style: preserve-3d;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.35s var(--ease-out);
    will-change: transform;
}

/* ═══════════════════ 3D product cards ═══════════════════ */

.lb3d-card {
    transform-style: preserve-3d;
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
    will-change: transform;
}

.lb3d-card:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95); }

.lb3d-card > * { transform: translateZ(28px); }

/* ═══════════════════ Motion off ═══════════════════ */

html[data-motion="reduced"] .lb3d-tilt { transform: none; }
html[data-motion="reduced"] .lb3d-card:hover { transform: none; }
html[data-motion="reduced"] .lb3d-stage .lb-ambient { transform: none; }
html[data-motion="reduced"] .lb3d-layer { transform: none; }

/* ═══════════════════ Responsive ═══════════════════ */

/* Phones: shallower depth so perspective does not distort at narrow
   viewports, and no card tilt (there is no hover to drive it). */
@media (max-width: 767.98px) {
    .lb3d-stage { perspective: 1000px; }

    .lb3d-layer--eyebrow { --z: 34px; }
    .lb3d-layer--title   { --z: 58px; }
    .lb3d-layer--text    { --z: 26px; }
    .lb3d-layer--cta     { --z: 46px; }

    .lb3d-card > * { transform: none; }
}