/* ==========================================================================
   U Jabka — Soda design system: VINEYARD BACKGROUND

   The shell for vineyard.js. Structure is the 21st ZoomParallax reference's,
   one for one: a tall scroll block (h-[300vh]) whose inner screen is sticky
   (sticky top-0 h-screen overflow-hidden). The block's scroll travel IS the
   camera track; the sticky screen is the frame the camera looks through.

   It is a BACKGROUND, not a section: the canvas takes no pointer events and
   sits under everything, and whatever the host puts inside the frame scrolls
   over it.

   TWO HOSTS, ONE COMPONENT. The track (.soda-vine) is for a standalone use —
   the preview page. The homepage does NOT use it: its hero already owns the
   track (home.css sets --hero-track on .soda-hero) and only borrows the three
   inner layers plus .soda-vine__frame. That split is why the colours below live
   on the FRAME and not on the track: the frame is the one box both hosts
   render, and it is the box the canvas inherits from.

   Colour discipline: this file publishes exactly three custom properties that
   the canvas reads (--vine-ink / --vine-accent / --vine-void). They resolve
   from the token layer and fall back to the Vesper ground values. The canvas
   never hard-codes a colour and never reads a component's colour.
   ========================================================================== */

/* The scroll track, for a standalone host. 300vh is the reference's number and
   it is load-bearing: it is what gives the dolly its length. */
html.theme-soda .soda-vine {
    --vine-track: 300vh;

    position: relative;
    height: var(--vine-track);
    background: var(--vesper-void, #0b0b0c);
    isolation: isolate;
}

html.theme-soda .soda-vine__frame {
    /* --- the three colours the renderer is allowed to use. Hex only: the
       canvas parses them into rgb triplets and composes its own alphas. */
    --vine-ink: var(--vesper-chalk, #fdfdfd);
    --vine-accent: var(--vesper-signal, #6cf3a3);
    --vine-void: var(--vesper-void, #0b0b0c);

    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* The ground under the drawing. A single very soft lift towards the horizon
   band, so the black is not flat black — the canvas then draws the ridge glow
   on top of it. Static: the surface plane is never animated. */
html.theme-soda .soda-vine__ground {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(120% 68% at 50% 42%, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, #07070a 0%, var(--vine-void) 46%, #060608 100%);
}

html.theme-soda .soda-vine__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* A background is never a target. */
    pointer-events: none;
}

/* Vignette + a floor of shadow, above the drawing and below any content: it
   keeps the corners quiet so overlaid text stays the brightest thing here. */
html.theme-soda .soda-vine__veil {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(112% 78% at 50% 46%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, .45) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .62) 100%);
}

/* Whatever a standalone host overlays. The homepage does not use this: the
   hero's own frame and stage sit in the same place in the stacking order. */
html.theme-soda .soda-vine__content {
    position: relative;
    z-index: 3;
    height: 100%;
}

/* --------------------------------------------------------- reduced motion
   vineyard.js already refuses to start its clock under prefers-reduced-motion
   and paints ONE finished frame instead. Here the standalone track collapses to
   a single screen as well, so there is no 300vh of scrolling that no longer
   does anything — the drawing is simply there, complete, on one screen. */
@media (prefers-reduced-motion: reduce) {
    html.theme-soda .soda-vine {
        --vine-track: 100vh;
    }
}