/* ============================================================
   Brand reveal — a portal opens on scroll to unveil a product stage.
   Scroll-driven via --p (0..1) set by app.js. clip-path is used (reliable)
   for the growing reveal. No looping animation.
   ============================================================ */
.sreveal {
    position: relative;
    /* full-bleed: break out of the .main max-width + padding so the pinned
       reveal fills the whole viewport edge-to-edge */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: 200vh;                 /* pin holds while you scroll this distance */
    background: #04060c;
    z-index: 1;
    /* NOTE: no overflow here — it would break the sticky pin below */
}
/* JS toggles this between absolute (before/after) and fixed (while pinned).
   Sticky is unreliable inside the flex .main; fixed pinning via JS is robust. */
.sreveal__pin {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100vh;
    overflow: hidden;              /* clips the stage within the pinned viewport */
    display: grid; place-items: center;
    isolation: isolate;
}
.sreveal__pin.is-fixed { position: fixed; top: 0; left: 0; }
.sreveal__pin.is-bottom { position: absolute; top: auto; bottom: 0; }

/* ---- animated starfield + nebula behind the portal (seen in the dark) ---- */
.sreveal__stars { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.sreveal__nebula { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 44% at 28% 32%, rgba(99,140,255,.22), transparent 70%),
        radial-gradient(34% 40% at 78% 30%, rgba(190,96,255,.18), transparent 70%),
        radial-gradient(40% 46% at 64% 78%, rgba(255,120,80,.14), transparent 70%);
    mix-blend-mode: screen;
    animation: srNebula 14s ease-in-out infinite alternate; }
@keyframes srNebula { from { transform: scale(1) translateY(0); opacity: .8; }
                      to   { transform: scale(1.15) translateY(-2%); opacity: 1; } }

/* ---- the staged product showcase, unveiled by a growing circular portal ----
   The circle reaches full coverage at ~p=0.82, so the image is fully shown for
   the last stretch before the section releases and the page scrolls on. ---- */
.sreveal__stage {
    position: absolute; inset: 0; z-index: 1;
    clip-path: circle(calc(6vmax + var(--p, 0) * 72vmax) at 50% 50%);
    -webkit-clip-path: circle(calc(6vmax + var(--p, 0) * 72vmax) at 50% 50%);
    background:
        radial-gradient(92% 78% at 50% 86%, #fff5e2 0%, #f4d6a4 28%, #e3a866 52%, #9c6a39 76%, #34230f 100%),
        linear-gradient(180deg, #06080f 0%, #0c1019 22%, rgba(12,16,25,0) 52%);
}
.sreveal__arc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 150vmin; height: 150vmin; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,247,228,.72), rgba(255,214,150,.30) 48%, transparent 70%); }
.sreveal__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
    background: linear-gradient(180deg, transparent, rgba(255,228,186,.5)); }

/* fanned product cut-outs on the stage */
.sreveal__prod { position: absolute; left: var(--x); top: var(--y);
    width: var(--w); aspect-ratio: 1; transform: translate(-50%, -50%); }
.sreveal__prod::after { content: ""; position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%);
    width: 64%; height: 8%; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(58,34,10,.5), transparent 70%); filter: blur(5px); z-index: -1; }
.sreveal__prod img { width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 26px 24px rgba(60,38,14,.5)); }

/* ---- brand + headline, pinned on top through the reveal ---- */
.sreveal__top { position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
    z-index: 4; text-align: center; width: min(760px, 90%); }
.sreveal__logo { height: clamp(84px, 11vw, 132px); width: auto; display: inline-block;
    /* no card — render the logo white so it reads on the dark backdrop */
    filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0,0,0,.55));
    margin-bottom: 24px; }
.sreveal__title { color: #fff; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.9rem, 4.8vw, 3.4rem); line-height: 1.08; text-shadow: 0 6px 26px rgba(0,0,0,.5); }
.sreveal__sub { margin-top: 10px; color: rgba(255,255,255,.85); font-size: clamp(1rem, 1.6vw, 1.2rem); }

/* ---- scroll hint, fades out as the stage opens ---- */
.sreveal__hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    z-index: 4; color: rgba(255,255,255,.6); opacity: calc(1 - var(--p, 0) * 4); }
.sreveal__hint .material-symbols-outlined { font-size: 2.2rem; }

/* ---- CTA, fades in once the stage is open ---- */
.sreveal__btn { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
    z-index: 5; background: #fff; color: #5a3a14; font-weight: 800;
    padding: 15px 30px; border-radius: 999px;
    box-shadow: 0 20px 40px -14px rgba(0,0,0,.55);
    opacity: clamp(0, calc((var(--p, 0) - .72) * 4), 1);
    transition: transform .2s ease, box-shadow .2s ease; }
.sreveal__btn:hover { transform: translateX(-50%) translateY(-3px) scale(1.03); }

@media (max-width: 760px) {
    .sreveal { height: 240vh; }
    .sreveal__top { top: 6%; width: 92%; }
    .sreveal__sub { font-size: 1rem; }
    /* a clean mobile composition: one hero product + a tidy 2x2 below */
    .sreveal__prod { width: 38vw; }
    .sreveal__prod--0 { left: 50%; top: 38%; width: 56vw; }
    .sreveal__prod--1 { left: 28%; top: 62%; }
    .sreveal__prod--2 { left: 72%; top: 62%; }
    .sreveal__prod--3 { left: 28%; top: 83%; }
    .sreveal__prod--4 { left: 72%; top: 83%; }
}