/*
 * Bulgar's overrides for the GetLayers "Soda" template.
 *
 * style.css is left byte-identical to the GetLayers original so future template
 * updates stay diffable. Everything Bulgar changes lives here and is loaded
 * after it, winning on source order at equal specificity.
 *
 * Three jobs: rebrand, make it work on a phone, and stop it animating at people
 * who have asked their OS not to.
 */

/* ===========================================================================
 * 1. PALETTE
 *
 * The template shipped a green/blue pair. Bulgar's two flavours are CHERRY and
 * BLUEBERRY, each matched to the fruit that physically floats around the can,
 * so the colour story is cherry-red and violet-blue instead.
 *
 * The gradient's inner colour is the darkest, lowest-chroma member of each set —
 * the radial gets *darker* toward the centre, behind the can, so the can reads
 * as the light source. The can bodies (#FF2340 / #5B3BFF) are pushed to the top
 * of sRGB chroma on purpose: a muted "premium" can dissolves into the
 * background and kills the whole showcase.
 *
 * These values are duplicated in the page's BG map and in
 * scripts/generate-can-labels.mjs. Change one, change all three.
 * ======================================================================== */
:root {
    /* CHERRY — the default flavour. */
    --bg-inner: #6B0F2A;
    --bg-mid: #45081B;
    --bg-outer: #2A0410;
    --accent: #00D6A2;
    --accent-ink: #3A0A14;
}

body.blue-theme {
    /* BLUEBERRY */
    --bg-inner: #2E1C6E;
    --bg-mid: #1B1145;
    --bg-outer: #120A2B;
    --accent: #FFC53D;
    --accent-ink: #1B1145;
}

/* The template hard-coded a pink (#fbcfe8) into three places. Route them
   through the accent so they flip with the flavour. */
.nav-item:hover,
.nav-item.active {
    background: var(--accent);
    color: var(--accent-ink);
}

.plus-icon {
    background: var(--accent);
    color: var(--accent-ink);
}

.card.active {
    border-color: var(--accent);
}

/* ===========================================================================
 * 2. BACKGROUND HARDENING — every width
 *
 * The page background is a radial-gradient built from three custom properties,
 * and GSAP tweens them on every flavour switch. If a tween emits a value the
 * gradient cannot parse, the whole `background` declaration is invalid and the
 * canvas falls back to white — which is what the first phone screenshots showed.
 *
 * A background-color underneath the gradient means the worst case is a flat
 * dark field instead of a white flash. Costs nothing when the gradient is fine.
 * ======================================================================== */
html {
    background-color: #2A0410;
}

body {
    background-color: #2A0410;
}

body.blue-theme {
    background-color: #120A2B;
}

/* iOS Safari's 100vh excludes the browser chrome and leaves a strip of white
   under the fold. dvh tracks the visible viewport. */
@supports (height: 100dvh) {

    body,
    .hero {
        height: 100dvh;
    }
}

/* ===========================================================================
 * 2b. PERFORMANCE
 *
 * The template fights itself in three places. All three cost frames on every
 * screen, and badly on a large one where nothing is hidden.
 *
 * 1. `.berry` carries `transition: transform 0.8s`, and the page script assigns
 *    `style.transform` on EVERY FRAME. So every frame cancels and restarts a
 *    0.8s transition on nine elements. The compositor never gets to settle.
 *    The containers do the same thing with `transition: transform 0.1s`.
 *    The JS is the animation; the transitions are pure interference.
 *
 * 2. Every fruit and leaf has a `drop-shadow()` filter. A filtered element that
 *    moves must be re-rasterised each frame, not just re-composited — thirteen
 *    of them, sixty times a second.
 *
 * 3. `backdrop-filter: blur(20px)` on the nav and blur(10px) on the cards forces
 *    the compositor to re-sample everything behind them whenever anything above
 *    moves, which here is constantly.
 * ======================================================================== */
.berry,
.leaf,
.berries-container,
.berries-container-bg,
.leaves-container {
    transition: none !important;
    filter: none !important;
    will-change: transform;
}

.nav.glass {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.07);
}

/* Isolate the moving layers so their repaints cannot invalidate the rest. */
.hero-center,
.berries-container,
.berries-container-bg,
.leaves-container,
#bubbles-container {
    contain: layout paint;
}

/* ---------------------------------------------------------------------------
 * Dragging the can was selecting the page.
 *
 * `model-viewer` swallows the pointer for its own camera control, but the fruit
 * and leaves around it are ordinary elements — so a drag across them ran a text
 * selection and the browser painted highlight rectangles over each one. That is
 * the "squares" around the berries when you rotate on a large screen.
 * ------------------------------------------------------------------------ */
.hero,
.hero *,
.header,
.header * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

model-viewer {
    -webkit-user-drag: none;
    outline: none !important;
}

/* Keyboard users still need to see focus — this only removes the outline that
   appeared from mouse dragging. */
model-viewer:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 4px;
}

/* The stock loading bar flashed as a bright rectangle across each fruit while
   the models streamed in — the other half of "the squares". */
model-viewer::part(default-progress-bar) {
    display: none;
}

/* ===========================================================================
 * 3. NEW ELEMENTS
 * ======================================================================== */
.logo-tag {
    font-family: 'Manrope', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-color);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    padding: 0.2rem 0.55rem;
    margin-left: 0.1rem;
}

.contact-btn {
    text-decoration: none;
    display: inline-block;
}

.switch-note {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--muted-color);
    max-width: 30ch;
    text-align: right;
    margin-top: 0.25rem;
}

.brand-pitch {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.brand-note {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted-color);
    max-width: 32ch;
    text-align: right;
}

/* The template sets both display headings to clamp(5rem, 10vw, 12rem) with
   `white-space: nowrap`. At 1440px that is 144px of un-wrapping type inside a
   450px column, so the right-hand heading burst out of its column and landed on
   top of the can. The left heading has the whole left half to itself and is
   fine; only this one needs reining in. */
.side-title {
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    white-space: normal;
    text-align: right;
    line-height: 1.02;
}

/* ===========================================================================
 * 4. RESPONSIVE
 *
 * The template ships desktop-only. Its own `@media (max-width: 1200px)` block
 * sets `grid-template-columns` on `.hero-content`, which is `display: flex` —
 * so that rule has never done anything, in the original either. Below 1200px
 * the two columns stayed side by side, `.hero-right` kept its hard 450px width,
 * the titles kept `white-space: nowrap` at 5rem, and the berries kept pixel
 * sizes up to 250px. On a 390px phone that produced an overlapping mess.
 * ======================================================================== */
@media (max-width: 1024px) {
    .hero-content {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .hero-left,
    .hero-right {
        width: 100%;
        height: auto;
        padding: 0;
        align-items: center;
        text-align: center;
    }

    .hero-left {
        gap: 1rem;
    }

    .main-title,
    .side-title {
        font-size: clamp(2.75rem, 12vw, 5rem);
        white-space: normal;
        text-align: center;
    }

    .description {
        max-width: 34ch;
        margin-inline: auto;
    }

    .primary-btn {
        margin-inline: auto;
    }

    .product-carousel,
    .brand-pitch {
        align-items: center;
    }

    .switch-note,
    .brand-note {
        text-align: center;
        margin-inline: auto;
    }

    /* Pushed the badge to the bottom of a full-height column; that column no
       longer has a height to push against. */
    .award-badge {
        margin-top: 0;
        justify-content: center;
    }
}

@media (max-width: 640px) {

    /* The nav is a fixed-width row of pills — it cannot fit, and overflow shoved
       the Start-a-build button off-screen entirely. Logo plus one action is the
       honest mobile version of this header. */
    .nav,
    .nav.glass {
        display: none;
    }

    .header {
        padding: 1rem 5%;
    }

    .logo-tag {
        display: none;
    }

    .contact-btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.75rem;
    }

    .hero {
        padding: 0 5%;
        padding-top: 4.5rem;
        padding-bottom: 1.5rem;
        align-items: stretch;
    }

    .hero-content {
        padding: 0;
    }

    .main-title {
        font-size: clamp(2.5rem, 15vw, 4rem);
        line-height: 0.9;
    }

    .description {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .description br {
        display: none;
    }

    /* No room, and it is decoration rather than information. The pitch is
       carried by the can itself, which wears it. */
    .award-badge,
    .side-title,
    .switch-note {
        display: none;
    }

    .brand-note {
        font-size: 0.78rem;
        max-width: 30ch;
    }

    /* The can is the whole point — give it the middle of the screen and let the
       flex column place it, rather than the fixed 50%/50% desktop centring. */
    .main-product-3d {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: 40vh;
        transform: rotate(18deg);
    }

    .hero-center {
        position: relative;
        height: auto;
        flex: 1 1 auto;
        order: 0;
    }

    /* Fixed pixel fruit is the worst offender: .b3 at 250px is 64% of a 390px
       viewport. Sizing off the viewport keeps the composition's proportions
       instead of its absolute values.
       Note the extras (.b6-.b9, .l2, .l4) are REMOVED FROM THE DOM by the page
       script at this width, not merely hidden — `display: none` still leaves the
       element holding a WebGL context. */
    .berry {
        width: 16vw;
        height: 16vw;
    }

    .b1 { width: 24vw; height: 24vw; top: 18%; left: 8%; }
    .b2 { width: 14vw; height: 14vw; top: 62%; left: 12%; }
    .b3 { width: 26vw; height: 26vw; top: 26%; left: 66%; }
    .b4 { width: 16vw; height: 16vw; top: 10%; left: 58%; }
    .b5 { width: 15vw; height: 15vw; top: 74%; left: 72%; }

    .leaf {
        width: 12vw;
        height: 12vw;
    }

    /* Two cards side by side, sized so both fit with the overhanging can art. */
    .card {
        width: 40vw;
        max-width: 130px;
        padding: 0.75rem;
        padding-top: 3.5rem;
        gap: 1rem;
        border-radius: 22px;
    }

    .card img {
        width: 100%;
        max-width: 96px;
        margin-top: -5rem;
    }

    .carousel-cards {
        gap: 0.75rem;
    }

    /* Decorative on desktop, non-functional here — the cards are tappable. */
    .carousel-nav {
        display: none;
    }

    .product-carousel {
        gap: 1rem;
    }

    .bubble-img {
        max-width: 14px;
    }
}

/* Short landscape phones — the hero is a fixed 100vh, so a 380px-tall viewport
   has to give the can less room rather than overflow it. */
@media (max-width: 900px) and (max-height: 520px) {
    .main-product-3d {
        height: 34vh;
    }

    .main-title {
        font-size: 2.25rem;
    }

    .description,
    .brand-note {
        display: none;
    }
}

/* ===========================================================================
 * 5. ACCESSIBILITY
 *
 * The template animates continuously — a render loop driving the can, nine
 * fruit and four leaves, plus a bubble every 400ms — with no reduced-motion
 * path at all. The page script also stops its rAF loop and bubble timer when
 * this matches; this handles the CSS-driven half.
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #bubbles-container {
        display: none;
    }

    .hero-center {
        animation: none !important;
        opacity: 1 !important;
    }
}