/* =========================================================================
   Burger Lab - Cinematic scroll-scrubbed video intro (pinned)
   A tall section with a sticky 100vh stage. As the user scrolls, a real
   grill clip is *scrubbed* frame-by-frame (cooking follows the scroll) while
   a 3D "camera" pushes in / pulls back / drifts for drama. The brand copy
   book-ends the story (shown at the start, fades out while it cooks, fades
   back in with the CTA at the end) then the menu scrolls in.
   Progressive enhancement: without JS / reduced motion it renders as a
   normal hero over the poster frame.
   ========================================================================= */

.burger-intro {
    position: relative;
    height: 100vh;                 /* fallback (no-JS): a normal hero */
    background: #0e0805;
    isolation: isolate;
}
.burger-intro.js-on { height: 360vh; }   /* scroll length for the story */

.bi-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    perspective: 1500px;
    perspective-origin: 50% 48%;
}

/* ---- backdrop (only seen behind the video edges, kept dark) ---- */
.bi-bg {
    position: absolute; inset: 0; z-index: 0;
    background: #0b0604;
}
.bi-glow {
    position: absolute; left: 50%; bottom: -6%; z-index: 3;
    width: 96vw; max-width: 1100px; height: 62vh;
    transform: translateX(-50%);
    background: radial-gradient(closest-side,
        rgba(255,150,40,.5), rgba(255,95,15,.18) 46%, transparent 72%);
    filter: blur(30px);
    mix-blend-mode: screen;
    opacity: 0;                    /* driven by JS */
    pointer-events: none;
}

/* ---- the 3D camera holds the video plane ---- */
.bi-camera {
    position: absolute; inset: 0; z-index: 1;
    transform-style: preserve-3d;
    will-change: transform;
}
.bi-video {
    position: absolute;
    /* over-scan so camera pans / tilts never reveal the backdrop */
    left: 50%; top: 50%;
    width: 124%; height: 124%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center 42%;
    filter: saturate(1.06) contrast(1.04) brightness(.92);
    will-change: transform;
    background: #0b0604 url("grill-poster.jpg") center 42% / cover no-repeat;
}

/* dark scrim for text legibility (opacity driven by JS with the copy) */
.bi-scrim {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 46%,
            rgba(6,3,1,.62) 0%, rgba(6,3,1,.30) 46%, transparent 74%),
        linear-gradient(to bottom, rgba(0,0,0,.30), transparent 30%, transparent 62%, rgba(0,0,0,.42));
    opacity: .35;
}
.bi-vignette {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(130% 108% at 50% 46%,
        transparent 40%, rgba(0,0,0,.38) 74%, rgba(0,0,0,.78) 100%);
}

/* embers float in front for warmth */
.bi-embers { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.bi-embers span {
    position: absolute; bottom: 18%;
    width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle, #ffe0a0, #ff7a1a 60%, transparent 70%);
    filter: blur(.3px);
    mix-blend-mode: screen;
    animation: bi-ember linear infinite;
}
.bi-embers span:nth-child(1){ left: 30%; animation-duration: 6.5s; animation-delay: 0s; }
.bi-embers span:nth-child(2){ left: 42%; animation-duration: 8s;   animation-delay: 1.2s; width:4px;height:4px;}
.bi-embers span:nth-child(3){ left: 52%; animation-duration: 5.5s; animation-delay: .6s; }
.bi-embers span:nth-child(4){ left: 62%; animation-duration: 7.5s; animation-delay: 2s; width:5px;height:5px;}
.bi-embers span:nth-child(5){ left: 70%; animation-duration: 6s;   animation-delay: 1.6s; width:3px;height:3px;}
.bi-embers span:nth-child(6){ left: 46%; animation-duration: 9s;   animation-delay: .3s; }
@keyframes bi-ember {
    0%   { transform: translateY(0) scale(1);      opacity: 0; }
    12%  { opacity: .9; }
    100% { transform: translateY(-54vh) scale(.35); opacity: 0; }
}

/* ---- copy overlay (headline / CTAs) ---- */
.bi-copy {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; gap: 16px; padding: 0 22px;
    will-change: opacity, transform;
    text-shadow: 0 2px 30px rgba(0,0,0,.8);
}
.bi-copy .hero-badge {
    display: inline-block; align-self: center;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,190,120,.35);
    color: #ffd9a8; padding: .5em 1.2em; border-radius: 999px;
    font-weight: 700; font-size: .92rem; letter-spacing: .3px;
    backdrop-filter: blur(6px);
}
.bi-copy h1 {
    margin: 0; color: #fff; line-height: 1.05;
    font-size: clamp(2.6rem, 8vw, 5.4rem); font-weight: 900;
}
.bi-copy .hero-subtitle {
    margin: 0; color: #ffe6c9; font-size: clamp(1.05rem, 3vw, 1.5rem); font-weight: 500;
}
.bi-copy .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.bi-cue {
    margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: #ffd9a8; font-weight: 600; font-size: .95rem; will-change: opacity;
}
.bi-cue i { font-style: normal; font-size: 1.5rem; animation: bi-bob 1.6s ease-in-out infinite; }
@keyframes bi-bob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(8px); } }

/* ---- phase caption ---- */
.bi-caption {
    position: absolute; left: 0; right: 0; bottom: 11%; z-index: 6;
    text-align: center; opacity: 0;
    transition: opacity .28s ease; pointer-events: none;
}
.bi-caption span {
    display: inline-block; font-weight: 800;
    font-size: clamp(1.15rem, 3.6vw, 2rem); color: #ffdca8;
    background: rgba(18,11,7,.5); backdrop-filter: blur(5px);
    padding: .42em 1.15em; border-radius: 999px;
    border: 1px solid rgba(255,190,120,.24);
    text-shadow: 0 2px 16px rgba(0,0,0,.7);
}

@media (max-width: 760px) {
    .bi-video { width: 150%; height: 150%; }
    .burger-intro.js-on { height: 320vh; }
}

/* ---- no-JS / reduced-motion fallback: static hero over the poster ---- */
.burger-intro:not(.js-on) .bi-video   { filter: saturate(1.05) contrast(1.03) brightness(.72); }
.burger-intro:not(.js-on) .bi-scrim   { opacity: .55; }
.burger-intro:not(.js-on) .bi-glow    { opacity: .45; }
.burger-intro:not(.js-on) .bi-cue     { display: none; }

@media (prefers-reduced-motion: reduce) {
    .bi-embers span, .bi-cue i { animation: none !important; }
}