/* LONE BREED — Ambient motion
   A living backdrop for the hero and section breaks, plus the motion polish
   that keeps the dark palette from reading as flat.

   Everything here is GPU-cheap (transform/opacity only), sits behind content
   at z-index 0 or below, and switches off under prefers-reduced-motion. */

/* ═══════════════════ Ambient backdrop ═══════════════════ */

.lb-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--lb-black);
}

/* Two slow gold auroras drifting past each other. Large, heavily blurred
   radial blooms — the motion reads as light moving, not as shapes. */
.lb-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.85;
    will-change: transform;
}

.lb-aurora--one {
    width: 62vw;
    height: 62vw;
    min-width: 420px;
    min-height: 420px;
    left: -14vw;
    top: -18vw;
    background: radial-gradient(circle at 50% 50%,
        rgba(197, 160, 89, 0.46) 0%,
        rgba(197, 160, 89, 0.20) 42%,
        rgba(197, 160, 89, 0) 70%);
    animation: auroraDriftA 26s ease-in-out infinite alternate;
}

.lb-aurora--two {
    width: 52vw;
    height: 52vw;
    min-width: 340px;
    min-height: 340px;
    right: -12vw;
    bottom: -16vw;
    background: radial-gradient(circle at 50% 50%,
        rgba(212, 176, 106, 0.40) 0%,
        rgba(160, 120, 60, 0.18) 45%,
        rgba(197, 160, 89, 0) 72%);
    animation: auroraDriftB 32s ease-in-out infinite alternate;
}

/* A third, cooler bloom keeps the gold from feeling monotone. */
.lb-aurora--three {
    width: 40vw;
    height: 40vw;
    min-width: 280px;
    min-height: 280px;
    left: 42%;
    top: 30%;
    background: radial-gradient(circle at 50% 50%,
        rgba(120, 110, 130, 0.16) 0%,
        rgba(90, 84, 104, 0.06) 50%,
        rgba(0, 0, 0, 0) 74%);
    animation: auroraDriftC 38s ease-in-out infinite alternate;
}

@keyframes auroraDriftA {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(12vw, 8vh, 0) scale(1.18); }
}

@keyframes auroraDriftB {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-14vw, -10vh, 0) scale(1); }
}

@keyframes auroraDriftC {
    from { transform: translate3d(-6vw, 4vh, 0) scale(0.95); }
    to   { transform: translate3d(8vw, -6vh, 0) scale(1.25); }
}

/* A slow sweep of light across the whole field, like a spot passing. */
.lb-sheen {
    position: absolute;
    inset: -20% -60%;
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, 0.045) 50%,
        rgba(255, 255, 255, 0) 58%);
    animation: sheenSweep 14s ease-in-out infinite;
    will-change: transform;
}

@keyframes sheenSweep {
    0%        { transform: translate3d(-38%, 0, 0); }
    55%, 100% { transform: translate3d(38%, 0, 0); }
}

/* Fine drifting grain stops the gradients from banding on wide screens. */
.lb-grain {
    position: absolute;
    inset: -100px;
    opacity: 0.22;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    animation: grainShift 1.1s steps(4) infinite;
    will-change: transform;
}

@keyframes grainShift {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-4px, 3px, 0); }
    50%  { transform: translate3d(3px, -4px, 0); }
    75%  { transform: translate3d(-3px, -2px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* Slow-rising motes. Each is offset by its own delay/duration so the field
   never visibly loops. */
.lb-motes { position: absolute; inset: 0; }

.lb-mote {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--lb-gold);
    opacity: 0;
    animation: moteRise linear infinite;
    will-change: transform, opacity;
}

@keyframes moteRise {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
    12%  { opacity: 0.55; }
    70%  { opacity: 0.35; }
    100% { opacity: 0; transform: translate3d(var(--drift, 20px), -92vh, 0) scale(1.1); }
}

/* Vignette to pull focus back to the copy. */
.lb-ambient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.32) 62%,
        rgba(0, 0, 0, 0.74) 100%);
}

/* When a hero photo IS set, the ambient layer sits under it and only the
   grain and sheen show through — the photo stays the subject. */
.hero-section .hero-bg { z-index: 1; }
.hero-section .hero-overlay { z-index: 1; }
.hero-section .hero-content,
.hero-section .hero-scroll-hint { position: relative; z-index: 3; }

.hero-section:has(.hero-bg) .lb-aurora { opacity: 0.3; }

/* With no photo, the heavy scrim exists only to darken an image that isn't
   there — it would flatten the backdrop we just lit. Ease it right back. */
.hero-section:not(:has(.hero-bg)) .hero-overlay {
    background: linear-gradient(105deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.30) 55%,
        rgba(0, 0, 0, 0.10) 100%);
}

/* Fallback for browsers without :has() — the ambient still shows, just
   under the standard scrim. */
@supports not selector(:has(*)) {
    .lb-aurora { opacity: 0.6; }
}

/* ═══════════════════ Section-break ambience ═══════════════════ */

/* Reusable, subtler backdrop for interior sections. */
.lb-ambient--soft .lb-aurora { opacity: 0.3; filter: blur(110px); }
.lb-ambient--soft .lb-grain { opacity: 0.14; }
.lb-ambient--soft::after {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.55) 70%,
        rgba(0, 0, 0, 0.9) 100%);
}

.lb-has-ambient { position: relative; }
.lb-has-ambient > *:not(.lb-ambient) { position: relative; z-index: 1; }

/* ═══════════════════ Motion polish ═══════════════════ */

/* Word-by-word entrance for display headings. */
.lb-word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.7em, 0);
    animation: wordRise 0.85s var(--ease-out) forwards;
}

@keyframes wordRise {
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Gold shimmer that travels across a heading once it lands. */
.lb-shimmer {
    background: linear-gradient(
        100deg,
        var(--lb-gold) 0%,
        #f0dcae 45%,
        var(--lb-gold) 60%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerSweep 6s ease-in-out infinite;
}

@keyframes shimmerSweep {
    0%, 100% { background-position: 130% 0; }
    50%      { background-position: -30% 0; }
}

/* Cards lift on hover across the site. */
.product-card,
.vault-tile,
.film-row,
.house-chapter,
.pc-quick-tile {
    transition:
        transform 0.4s var(--ease-out),
        border-color 0.3s var(--ease-out),
        box-shadow 0.4s var(--ease-out);
}

.product-card:hover,
.vault-tile:hover,
.house-chapter:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}

/* Buttons get a travelling highlight. */
.btn-lb-filled { position: relative; overflow: hidden; }

.btn-lb-filled::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
}

.btn-lb-filled:hover::after { animation: btnSheen 0.85s var(--ease-out); }

@keyframes btnSheen {
    to { left: 120%; }
}

/* A hairline that draws itself in when its section scrolls into view. */
.lb-draw-line {
    height: 1px;
    background: linear-gradient(90deg, var(--lb-gold), rgba(197, 160, 89, 0));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--ease-out);
}

.reveal.visible .lb-draw-line,
.lb-draw-line.visible { transform: scaleX(1); }

/* Soft pulse for status dots and live indicators. */
.lb-pulse { position: relative; }

.lb-pulse::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--lb-gold);
    opacity: 0;
    animation: pulseRing 2.6s ease-out infinite;
}

@keyframes pulseRing {
    0%   { opacity: 0.6; transform: scale(0.7); }
    70%  { opacity: 0;   transform: scale(1.5); }
    100% { opacity: 0; }
}

/* ═══════════════════ Reduced motion ═══════════════════ */

html[data-motion="reduced"] .lb-aurora,
html[data-motion="reduced"] .lb-sheen,
html[data-motion="reduced"] .lb-grain,
html[data-motion="reduced"] .lb-mote,
html[data-motion="reduced"] .lb-shimmer,
html[data-motion="reduced"] .lb-word,
html[data-motion="reduced"] .lb-pulse::before {
    animation: none !important;
}

html[data-motion="reduced"] .lb-word { opacity: 1; transform: none; }
html[data-motion="reduced"] .lb-motes { display: none; }
html[data-motion="reduced"] .lb-shimmer { color: var(--lb-gold); background: none; -webkit-text-fill-color: currentColor; }

html[data-motion="reduced"] .product-card:hover,
html[data-motion="reduced"] .vault-tile:hover,
html[data-motion="reduced"] .house-chapter:hover { transform: none; }

html[data-motion="reduced"] .lb-draw-line { transform: scaleX(1); transition: none; }

/* Motes are decorative; drop them on small screens to save battery. */
@media (max-width: 767.98px) {
    .lb-motes { display: none; }
    .lb-aurora { filter: blur(70px); }
    .lb-grain { opacity: 0.16; }
}

/* Motion toggle in the footer */
.lb-motion-toggle {
    background: none;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--lb-muted);
    font-size: inherit;
    letter-spacing: inherit;
}

.lb-motion-toggle:hover { color: var(--lb-gold); }
.lb-motion-toggle i { font-size: 0.85em; }