/*
 * DeXarEngine - Custom Stylesheet
 * Project: Flying Bison — single-page band site
 * Author: Charlie Gackowski | Maxwell Digital Studio
 */

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--header-h);
    display: flex;
    align-items: center;
    /* fully transparent initially — no bg, no blur (blur(0) still hazes in some
       browsers, so use none) */
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: height 0.35s var(--ease), background 0.35s var(--ease),
                border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease),
                box-shadow 0.35s var(--ease);
}

/* --- compact, frosted, tinted state once the page is scrolled --- */
.site-header.is-scrolled {
    height: 64px;
    background: rgba(18, 18, 18, 0.62);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.site-header__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--gutter);
    /* full-bleed over the hero; on scroll it narrows to match content sections */
    max-width: 3000px;
    margin: 0 auto;
    transition: max-width 0.4s var(--ease);
}

/* once scrolled, align the bar's edges with the centred content sections */
.site-header.is-scrolled .site-header__inner {
    max-width: 1600px;
}

.site-logo img {
    height: 34px;
    width: auto;
    /* top-logo.svg paths default to black; render it white over the dark hero */
    filter: brightness(0) invert(1);
    transition: height 0.35s var(--ease);
}

/* slightly smaller logo + tighter nav when compact */
.site-header.is-scrolled .site-logo img {
    height: 26px;
}
.site-header.is-scrolled .nav-menu {
    gap: 26px;
}
.site-header.is-scrolled .nav-menu a {
    font-size: 14px;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 36px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-menu a {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-white);
    transition: color 0.25s var(--ease), font-size 0.35s var(--ease);
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a {
    color: var(--color-accent);
}

/* Language switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 14px;
}

.lang-switcher .lang-sep {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
    margin-right: 4px;
}

.lang-link {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-white);
    transition: color 0.25s var(--ease);
}

.lang-link.is-active,
.lang-link:hover {
    color: var(--color-accent);
}
/* the "|" divider + mobile-panel logo/separator are mobile-only */
.lang-divider { display: none; color: rgba(255,255,255,0.4); font-weight: 400; }
.nav-panel__logo,
.nav-panel__sep { display: none; }

/* Mobile nav toggle (hidden on desktop) */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    z-index: 60;
}

.nav-toggle span {
    width: 26px;
    height: 2px;
    background: var(--color-white);
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
}

/* Background slideshow */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.2s var(--ease), transform 6s linear;
}

.hero__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 30%, rgba(187, 36, 38, 0.10), transparent 60%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.65) 100%);
}

/* Left slide indicator */
.hero__indicator {
    position: absolute;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    /* ticks now carry 12px transparent padding for touch targets; the small
       gap keeps the same visual rhythm as before */
    gap: 2px;
}

.hero__tick {
    width: 26px;
    height: 2px;
    /* keep the thin 2px visual bar, but expand the tappable area to >=24px
       (a11y touch target) via transparent vertical padding + content-box clip */
    padding: 12px 0;
    box-sizing: content-box;
    background: rgba(255, 255, 255, 0.55);
    background-clip: content-box;
    cursor: pointer;
    transition: background 0.3s var(--ease), width 0.3s var(--ease);
}

.hero__tick:hover {
    width: 34px;
}

.hero__tick.is-active {
    background: var(--color-accent);
    background-clip: content-box;
    width: 34px;
}

/* Right follow-us rail — one continuous vertical line */
.hero__follow {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translateY(-50%) rotate(180deg);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1;
}

.hero__follow-label {
    color: var(--color-accent);
    margin-bottom: 18px;
}

.hero__follow-link {
    color: var(--color-white);
    transition: color 0.25s var(--ease);
}

.hero__follow-link:not(:last-child) {
    margin-bottom: 18px;
}

.hero__follow-link:hover {
    color: var(--color-accent);
}

/* Center wings logo */
.hero__center {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: calc(var(--header-h) + 60px);
    pointer-events: none;
    /* depth so translateZ on the crest reads as motion toward the viewer */
    perspective: 1400px;
    perspective-origin: 50% 40%;
}

.hero__crest {
    width: clamp(260px, 30vw, 420px);
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5));
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: crest-float 6s ease-in-out infinite;
}

@keyframes crest-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- Play-triggered fly-through ---
   The crest dives down, then arcs back up while zooming toward the viewer
   (translateZ forward = larger) and fades — like sliding along a curved path
   set perpendicular to the screen, passing the camera. */
.hero__center.is-flying .hero__crest {
    /* LINEAR timing — every smoothness cue lives in the curve geometry below,
       so the browser never re-eases between stops (that's what made it look
       like discrete stages). Densely sampled (every 5%) = continuous motion. */
    animation: crest-flythrough 2s linear forwards;
    will-change: transform, opacity;
}

/* Path: a smooth dive down past centre, then the logo arcs back to dead-centre
   and rushes forward toward the viewer to FILL the screen — front, centre,
   "in your face" — before dissolving. Y resolves back to 0 (no flying up/out);
   the drama is depth (translateZ) + scale. Linear timing + dense sampling so
   the whole thing is one continuous, step-free motion. */
@keyframes crest-flythrough {
    0%   { transform: translate3d(0,    0px,    0px) scale(1.00);  opacity: 1; }
    5%   { transform: translate3d(0,   26px,   -8px) scale(0.985); opacity: 1; }
    10%  { transform: translate3d(0,   58px,  -16px) scale(0.972); opacity: 1; }
    15%  { transform: translate3d(0,   94px,  -22px) scale(0.962); opacity: 1; }
    20%  { transform: translate3d(0,  128px,  -25px) scale(0.955); opacity: 1; }
    25%  { transform: translate3d(0,  156px,  -23px) scale(0.953); opacity: 1; }
    30%  { transform: translate3d(0,  176px,  -16px) scale(0.957); opacity: 1; }
    35%  { transform: translate3d(0,  186px,   -2px) scale(0.970); opacity: 1; }
    40%  { transform: translate3d(0,  184px,   24px) scale(1.000); opacity: 1; }
    45%  { transform: translate3d(0,  168px,   72px) scale(1.060); opacity: 0.99; }
    50%  { transform: translate3d(0,  142px,  142px) scale(1.150); opacity: 0.98; }
    55%  { transform: translate3d(0,  110px,  232px) scale(1.275); opacity: 0.96; }
    60%  { transform: translate3d(0,   78px,  338px) scale(1.435); opacity: 0.93; }
    65%  { transform: translate3d(0,   50px,  456px) scale(1.630); opacity: 0.88; }
    70%  { transform: translate3d(0,   28px,  580px) scale(1.860); opacity: 0.80; }
    75%  { transform: translate3d(0,   14px,  704px) scale(2.120); opacity: 0.68; }
    80%  { transform: translate3d(0,    6px,  820px) scale(2.400); opacity: 0.54; }
    85%  { transform: translate3d(0,    2px,  922px) scale(2.690); opacity: 0.39; }
    90%  { transform: translate3d(0,    0px, 1004px) scale(2.960); opacity: 0.24; }
    95%  { transform: translate3d(0,    0px, 1062px) scale(3.180); opacity: 0.11; }
    100% { transform: translate3d(0,    0px, 1100px) scale(3.350); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__crest { animation: none !important; }
    .hero__center.is-flying .hero__crest { opacity: 0; transition: opacity 0.5s; }
}

/* =========================================================
   MUSIC PLAYER
   ========================================================= */
.player {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    padding: 0 var(--gutter) 28px;
    transition: transform 0.4s var(--ease);
}
/* lift the hero player above the cookie bar while it's showing
   (only the in-hero player; the docked/fixed bar manages its own position) */
body.fb-cookie-open .player:not(.player--docked) {
    transform: translateY(-86px);
}
@media (max-width: 760px) {
    body.fb-cookie-open .player:not(.player--docked) { transform: translateY(-150px); }
}

.player__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
}

/* prev/next pinned to edges, play centered */
.player__prev { order: 1; }
.player__play { order: 2; position: absolute; left: 50%; transform: translateX(-50%); }
.player__next { order: 3; margin-left: auto; }

.player__btn svg {
    width: 22px;
    height: 22px;
    color: var(--color-white);
    transition: color 0.25s var(--ease), transform 0.2s var(--ease);
}

.player__btn:hover svg {
    color: var(--color-accent);
}

.player__play {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s var(--ease);
    /* gentle breathing glow (scale-free so it keeps its centring) */
    animation: play-pulse 2.6s ease-in-out infinite;
}

.player__play:hover {
    background: rgba(255, 255, 255, 0.32);
    animation: none;
}

@keyframes play-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .player__play { animation: none; }
}

.player__play svg {
    width: 18px;
    height: 18px;
    /* slight nudge so the play triangle reads as optically centred */
    margin-left: 1px;
}

.player__play[data-state="playing"] svg {
    margin-left: 0;
}

.player__play .ico-pause { display: none; }
.player__play[data-state="playing"] .ico-play { display: none; }
.player__play[data-state="playing"] .ico-pause { display: block; }

/* progress bar */
.player__bar {
    position: relative;
    height: 3px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    margin-bottom: 12px;
    cursor: pointer;
}

.player__progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--color-accent);
    border-radius: 2px;
}

.player__knob {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(187, 36, 38, 0.25);
}

/* meta row */
.player__meta {
    display: flex;
    align-items: center;
    gap: 18px;
}

.player__time {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--color-white);
    flex-shrink: 0;
}

.player__track {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player__track strong {
    font-weight: 700;
}

.player__sep {
    color: var(--color-accent);
    margin: 0 8px;
}

.player__platforms {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.player__platform {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s var(--ease), background 0.25s var(--ease);
}

.player__platform img {
    width: 58%;
    height: 58%;
    object-fit: contain;
}

.player__platform:hover {
    transform: translateY(-3px);
    background: var(--color-accent);
}

.player__platform:hover img {
    filter: brightness(0) invert(1);
}

/* volume control — shown in the full player (between platforms & time-left) */
.player__volume {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.player__mute svg { width: 20px; height: 20px; color: var(--color-white); transition: color 0.2s var(--ease); }
.player__mute:hover svg { color: var(--color-accent); }
.player__mute .ico-muted { display: none; }
.player__mute[data-muted="true"] .ico-vol { display: none; }
.player__mute[data-muted="true"] .ico-muted { display: block; }

/* =========================================================
   BOTTOM-DOCKED PLAYER  (scroll-linked compaction)
   When playback starts, the player fixes to the bottom edge and stays
   there (even when paused). A 0→1 progress var (--p), driven by scroll,
   gradually compacts the bar; scrolling back up reverses it.
   All size/colour values interpolate with calc(... * var(--p)).
   ========================================================= */
.player--docked {
    --p: 0; /* 0 = expanded, 1 = fully compact (set from JS on scroll) */
    position: fixed;
    left: 50%;
    right: auto;
    /* slides flush to the bottom edge as it compacts */
    bottom: calc(28px - (28px * var(--p)));
    transform: translateX(-50%);
    width: calc(100% - (var(--gutter) * 2 * (1 - var(--p))) - (40px * var(--p)));
    max-width: calc(2000px - (1440px * var(--p)));
    z-index: 60;

    display: flex;
    align-items: center;
    gap: calc(22px - (8px * var(--p)));

    /* padding tightens as it compacts */
    padding:
        calc(20px - (11px * var(--p)))
        calc(var(--gutter) - ((var(--gutter) - 16px) * var(--p)));

    /* frosted glass fades in with compaction */
    background: rgba(18, 18, 18, calc(0.55 * var(--p)));
    border-top: 1px solid rgba(255, 255, 255, calc(0.10 * var(--p)));
    border-radius: calc(22px * var(--p));
    box-shadow: 0 calc(14px * var(--p)) calc(40px * var(--p)) rgba(0, 0, 0, calc(0.45 * var(--p)));
    backdrop-filter: blur(calc(20px * var(--p))) saturate(140%);
    -webkit-backdrop-filter: blur(calc(20px * var(--p))) saturate(140%);

    /* smooth out the docking moment itself */
    transition: bottom 0.3s var(--ease), background 0.3s var(--ease),
                border-radius 0.3s var(--ease);
}

/* --- layout: single flex row, ordered play·prev/next·title·progress·time·vol --- */
.player--docked .player__controls {
    order: 1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: calc(10px - (2px * var(--p)));
    flex: 0 0 auto;
    position: static;
}
.player--docked .player__prev,
.player--docked .player__next {
    order: 1;
    position: static;
    height: auto;
    /* hidden when expanded, fade/scale in as it compacts */
    opacity: var(--p);
    width: calc(28px * var(--p));
    overflow: hidden;
}
.player--docked .player__prev { order: 0; }
.player--docked .player__next { order: 2; }
.player--docked .player__prev svg,
.player--docked .player__next svg {
    width: calc(18px * var(--p));
    height: calc(18px * var(--p));
}

.player--docked .player__play {
    order: 1;
    position: static;
    transform: none;
    margin: 0;
    width: calc(48px - (14px * var(--p)));
    height: calc(48px - (14px * var(--p)));
    background: rgba(255, 255, 255, calc(0.18 + (0.10 * var(--p))));
    animation: none;
}
.player--docked .player__play svg { width: calc(20px - (5px * var(--p))); height: calc(20px - (5px * var(--p))); }

/* title */
.player--docked .player__meta {
    display: contents;
}
.player--docked .player__track {
    order: 2;
    flex: 0 1 auto;
    max-width: calc(420px - (200px * var(--p)));
    font-size: calc(13px - (1px * var(--p)));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* progress fills the middle */
.player--docked .player__bar {
    order: 3;
    flex: 1 1 auto;
    margin: 0;
    height: calc(3px - (1px * var(--p)));
}

/* --- collapsed timeline: clock icon replaces the bar when compact --- */
/* clock button hidden by default */
.player__clock {
    display: none;
}
/* in the docked state the red dot/knob is dropped */
.player--docked .player__knob {
    display: none;
}

/* COMPACT (scrolled far) + not expanded: hide the bar, show the clock toggle */
.player--docked.is-compact:not(.is-expanded) .player__clock {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    color: var(--color-white);
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.player--docked .player__clock svg { width: 19px; height: 19px; }
.player--docked .player__clock:hover { color: var(--color-accent); transform: scale(1.08); }

.player--docked.is-compact:not(.is-expanded) .player__bar {
    /* collapse the bar away; the clock stands in for it */
    flex: 0 0 0 !important;
    width: 0 !important;
    opacity: 0;
    overflow: hidden;
    transition: flex-basis 0.35s var(--ease), opacity 0.3s var(--ease);
}

/* EXPANDED: the clock was clicked → force the full progress bar back */
.player--docked.is-expanded .player__clock { display: none !important; }
.player--docked.is-expanded .player__bar {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 120px;          /* guarantee a visible track */
    height: 4px !important;    /* override the --p height squeeze */
    opacity: 1 !important;
    overflow: visible;
    transition: flex-basis 0.35s var(--ease), opacity 0.3s var(--ease);
}
/* give the bar room: trim the title while the timeline is open */
.player--docked.is-expanded .player__track {
    max-width: 140px;
}

/* elapsed time stays; duration shows only when expanded */
.player--docked .player__time--current {
    order: 4;
    flex: 0 0 auto;
    font-size: calc(13px - (2px * var(--p)));
    font-variant-numeric: tabular-nums;
}
.player--docked .player__time--duration {
    order: 5;
    flex: 0 0 auto;
    font-size: calc(13px - (2px * var(--p)));
    font-variant-numeric: tabular-nums;
    opacity: calc(1 - var(--p)); /* fade out as it compacts */
    width: calc(40px * (1 - var(--p)));
    overflow: hidden;
}

/* platforms fade out as it compacts (replaced by volume) */
.player--docked .player__platforms {
    order: 6;
    opacity: calc(1 - var(--p));
    width: calc((46px * 5 + 14px * 4) * (1 - var(--p)));
    overflow: hidden;
    transition: opacity 0.25s var(--ease);
}

/* volume fades IN as it compacts */
.player--docked .player__volume {
    order: 7;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    opacity: var(--p);
    width: calc((90px) * var(--p));
    overflow: hidden;
    pointer-events: auto;
}
.player--docked .player__mute svg { width: 18px; height: 18px; }
.player--docked .player__mute .ico-muted { display: none; }
.player--docked .player__mute[data-muted="true"] .ico-vol { display: none; }
.player--docked .player__mute[data-muted="true"] .ico-muted { display: block; }

.player__vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 3px;
    border-radius: 2px;
    cursor: pointer;
    /* red fill up to --vol (0–1), white track after — set from JS */
    --vol: 0.5;
    background: linear-gradient(
        to right,
        var(--color-accent) 0%,
        var(--color-accent) calc(var(--vol) * 100%),
        rgba(255, 255, 255, 0.4) calc(var(--vol) * 100%),
        rgba(255, 255, 255, 0.4) 100%
    );
}
.player__vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--color-accent);
}
.player__vol-slider::-moz-range-thumb {
    width: 11px; height: 11px; border: none;
    border-radius: 50%;
    background: var(--color-accent);
}
/* Firefox native fill */
.player__vol-slider::-moz-range-progress {
    height: 3px;
    border-radius: 2px;
    background: var(--color-accent);
}

/* phones: drop the title to keep it tidy when fully compact */
@media (max-width: 520px) {
    .player--docked .player__track { max-width: calc(420px - (420px * var(--p))); }
    .player--docked .player__volume { width: calc(60px * var(--p)); }
    .player--docked .player__vol-slider { width: 36px; }
}

/* =========================================================
   ABOUT SECTION
   ========================================================= */
.about {
    position: relative;
    background: var(--color-black);
    color: var(--color-white);
    overflow: hidden;
}

/* right-side band photo, faded into the black on the left */
.about__media {
    position: absolute;
    inset: 0;
    background-image: var(--about-img);       /* JPG fallback (universal) */
    background-image: var(--about-img-set, var(--about-img)); /* WebP where image-set() is supported */
    background-size: cover;
    background-position: center right;
    z-index: 1;
}
.about__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--color-black) 0%,
        var(--color-black) 32%,
        rgba(0, 0, 0, 0.85) 46%,
        rgba(0, 0, 0, 0.35) 70%,
        rgba(0, 0, 0, 0.45) 100%
    );
}
/* bottom-edge blend: solid black at the bottom fading to transparent upward */
.about__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        var(--color-black) 0%,
        rgba(0, 0, 0, 0.7) 14%,
        rgba(0, 0, 0, 0) 38%
    );
}

.about__inner {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: 0 auto;
    padding: 110px var(--gutter) 120px;
}

.about__head {
    margin-bottom: 56px;
}
.about__title {
    font-size: clamp(56px, 8vw, 104px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: 1px;
}
.about__subtitle {
    font-family: var(--font-head);
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-accent);
    margin-top: 6px;
}

.about__body {
    max-width: 760px;
}
.about__lead {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;        /* roomier than the tight heading default */
    margin: 34px 0 16px;
}
.about__body p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
}
.about__body p strong {
    color: var(--color-white);
    font-weight: 700;
}
/* WYSIWYG sub-headings in the body — looser line-height than the global h* */
.about__body h2,
.about__body h3,
.about__body h4 {
    line-height: 1.35;
    margin: 28px 0 12px;
}

/* achievements / milestones list (moved from the ticker) */
.about__achievements {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.about__achievements li {
    /* date acts like a bullet: wrapped text hangs under the text, not the date */
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}
.about__year {
    flex: 0 0 auto;          /* fixed bullet column */
    font-family: var(--font-head);
    font-weight: 800;
    color: var(--color-accent);
}
.about__ach-text {
    flex: 1 1 auto;          /* text wraps within its own column */
    min-width: 0;
    font-weight: 600;
    color: var(--color-white);
}

@media (max-width: 860px) {
    .about__media { background-position: center; opacity: 0.35; }
    .about__media::after {
        background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.92));
    }
    .about__inner { padding: 80px var(--gutter) 90px; }
    .about__body { max-width: none; }
}

/* =========================================================
   BAND MEMBERS
   ========================================================= */
.members {
    background: var(--color-black);
    padding: 0;
}

.members__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
}

.member {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #111;
}

/* photo */
.member__media {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.member__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: filter 0.45s var(--ease), transform 0.6s var(--ease);
}
/* bottom contrast gradient so the name reads clearly */
.member__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 18%,
        rgba(0, 0, 0, 0) 42%
    );
    transition: opacity 0.45s var(--ease);
}
/* fade the gradient on hover (the blur/darken takes over) */
.member:hover .member__media::after {
    opacity: 0;
}

/* on hover: darken + blur but keep the image visible behind the text */
.member:hover .member__img {
    filter: brightness(0.4) blur(5px);
    transform: scale(1.05);
}

/* bio — hidden until hover. Occupies only the area ABOVE the name overlay
   (bottom is inset to reserve the name's band) so it can never overlap it.
   The paragraph scrolls inside its reserved box when the text is long. */
.member__bio {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* reserve the name band below so the bio can never overlap it; the max()
       keeps a hard minimum clearance even when cards get short */
    bottom: max(22%, 120px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* role + text group sit low, just above the name */
    gap: 12px;
    padding: 12% 10% 4%;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s var(--ease), transform 0.45s var(--ease);
    pointer-events: none;
}
.member:hover .member__bio {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;        /* allow scrolling the bio on hover */
}
.member__role {
    flex: none;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
}
/* scrollable bio text with a soft fade at top & bottom instead of a hard cut */
.member__bio p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    flex: 0 1 auto;              /* fill up to the reserved box, then scroll */
    min-height: 0;               /* let it shrink inside the flex column */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 10px;         /* room for the scrollbar */
    /* fade the top & bottom edges of the scroll area */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
}
/* red-accent scrollbar (WebKit/Blink) */
.member__bio p::-webkit-scrollbar { width: 6px; }
.member__bio p::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 999px; }
.member__bio p::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 999px;
}
.member__bio p::-webkit-scrollbar-thumb:hover { background: #d62b2d; }
/* red-accent scrollbar (Firefox) */
.member__bio p { scrollbar-width: thin; scrollbar-color: var(--color-accent) rgba(255, 255, 255, 0.08); }

/* name overlay — pinned to the bottom edge, right-aligned like the design */
.member__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    text-align: right;
    line-height: 1;
    padding: 0 7% 6%;
    transition: transform 0.45s var(--ease);
}
.member__first {
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 56px);
    color: var(--color-white);
    letter-spacing: 0.5px;
}
.member__last {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(14px, 1.3vw, 20px);
    letter-spacing: 1px;
    color: var(--color-accent);
    margin-top: 4px;
}

@media (max-width: 860px) {
    .members__grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }
    /* each member is its own full-height screen — never clipped or cropped */
    .member {
        aspect-ratio: auto;
        height: 100vh;       /* fallback for browsers without svh */
        height: 100svh;      /* small-viewport height: excludes mobile browser chrome */
        min-height: 560px;   /* guard for very short viewports */
    }
    /* bio gets a large designated area above the name; text scrolls with fades */
    .member__bio {
        bottom: 22%;
        justify-content: center;
        gap: 16px;
        padding: 22% 9% 6%;
    }
    .member__bio p {
        font-size: 17px;
        line-height: 1.75;
        /* taller fade margins for the bigger mobile scroll area */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 24px), transparent 100%);
    }
    /* name band a touch larger on the full-height card */
    .member__name { padding: 0 8% 8%; }
}

/* touch devices: default shows image + name (like desktop). Tapping a card
   reveals the bio via the .is-open class (added in JS). */
.member.is-open .member__img { filter: brightness(0.4) blur(5px); transform: scale(1.05); }
.member.is-open .member__bio { opacity: 1; transform: translateY(0); pointer-events: auto; }
.member.is-open .member__media::after { opacity: 0; }

/* =========================================================
   MARQUEE / HIGHLIGHTS  (two rows, opposite directions)
   ========================================================= */
.marquee {
    background: var(--color-black);
    padding: 30px 0 50px;
    overflow: hidden;
}

.marquee__row {
    display: flex;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__row + .marquee__row {
    margin-top: 14px;
}

/* the track is duplicated inline (x2); animating to -50% loops seamlessly */
.marquee__track {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
    will-change: transform;
}

/* CSS-animation fallback (used when JS is unavailable) */
.marquee__row--left .marquee__track {
    animation: marquee-left 64s linear infinite;
}
.marquee__row--right .marquee__track {
    animation: marquee-right 64s linear infinite;
}
@keyframes marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
/* fallback hover-slow (don't stop) */
.marquee:not(.marquee--js):hover .marquee__track {
    animation-duration: 150s;
}

/* when JS takes over, it drives transform directly — disable the CSS anim */
.marquee--js .marquee__track {
    animation: none !important;
}

/* drag affordances */
.marquee--js {
    /* let vertical page-scroll through, but we handle horizontal drag in JS */
    touch-action: pan-y;
}
.marquee__row {
    cursor: grab;
}
.marquee.is-dragging,
.marquee.is-dragging .marquee__row {
    cursor: grabbing;
}
.marquee.is-dragging .marquee__item {
    user-select: none;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(24px, 3.2vw, 46px);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-white);
    white-space: nowrap;
}
/* English row in white, Polish row dimmed slightly for hierarchy */
.marquee__row--right .marquee__item {
    color: rgba(255, 255, 255, 0.82);
}
.marquee__sep {
    color: var(--color-accent);
    margin: 0 28px;
    font-size: 0.7em;
}

/* legacy (kept harmless) */
.marquee__year { color: var(--color-accent); margin-right: 8px; }
.marquee__text { color: var(--color-white); }

/* store buttons under the ticker */
.marquee__cta {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.marquee__btn {
    padding: 15px 69px;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 999px;
    transition: transform 0.2s var(--ease), background 0.25s var(--ease);
}
.marquee__btn:hover {
    background: #d62b2d;
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation-duration: 120s; }
}

/* =========================================================
   CONCERTS  (KONCERTY)
   ========================================================= */
.concerts {
    position: relative;
    background: var(--color-black);
    overflow: hidden;
}
/* stage photo, on the right, fading into black on the left */
.concerts::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--concerts-bg);       /* JPG fallback (universal) */
    background-image: var(--concerts-bg-set, var(--concerts-bg)); /* WebP where image-set() is supported */
    background-size: cover;
    background-position: center right;
    z-index: 1;
}
.concerts::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to right,
        var(--color-black) 0%,
        var(--color-black) 30%,
        rgba(0,0,0,0.7) 48%,
        rgba(0,0,0,0.25) 72%,
        rgba(0,0,0,0.55) 100%
    );
}

.concerts__inner {
    position: relative;
    z-index: 3;
    max-width: 1600px;
    margin: 0 auto;
    padding: 100px var(--gutter) 110px;
}

/* empty state ("shows coming soon") */
.concerts__empty {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 22px);
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    line-height: 1.5;
}

.concerts__head {
    margin-bottom: 52px;
}
.concerts__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(46px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: 1px;
    color: var(--color-white);
}
.concerts__subtitle {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 24px);
    letter-spacing: 1.5px;
    color: var(--color-accent);
    margin-top: 8px;
}

.concerts__list {
    display: flex;
    flex-direction: column;
    gap: 34px;
    max-width: 640px;
}

.concert {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

/* red circular day/month badge — numbers tight + staggered (top right, bottom left) */
.concert__badge {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0.92;
    font-family: var(--font-head);
    font-weight: 800;
}
.concert__day {
    font-size: 18px;
    transform: translateX(7px);   /* top: one step to the right */
}
.concert__mon {
    font-size: 18px;
    transform: translateX(-7px);  /* bottom: one step to the left */
}

.concert__info {
    padding-top: 2px;
}
.concert__venue {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(18px, 1.8vw, 24px);
    letter-spacing: 0.5px;
    color: var(--color-white);
    margin-bottom: 3px;
}
.concert__addr {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 3px;
}
.concert__meta {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.92);
}
.concert__label {
    color: rgba(255, 255, 255, 0.7);
    margin-right: 6px;
}
.concert__label--time { margin-left: 16px; }
.concert__val { color: var(--color-white); }

/* button */
.concerts__btn {
    display: inline-block;
    margin-top: 52px;
    padding: 16px 44px;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 999px;
    transition: transform 0.2s var(--ease), background 0.25s var(--ease);
}
.concerts__btn:hover {
    background: #d62b2d;
    transform: translateY(-2px);
}

@media (max-width: 860px) {
    .concerts::before { background-position: center; opacity: 0.4; }
    .concerts::after {
        background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
    }
    .concerts__inner { padding: 70px var(--gutter) 80px; }
    .concerts__list { max-width: none; }
}

/* =========================================================
   LISTEN / STREAMING BAR  ("Słuchaj nas")
   ========================================================= */
.listen {
    position: relative;
    background: var(--color-accent);
    overflow: hidden;
}
/* faded bison watermark — large overlay, raised higher */
.listen::before {
    content: "";
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1500px, 130%);
    height: 320%;
    background-image: var(--listen-watermark);
    background-image: var(--listen-watermark-set, var(--listen-watermark));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.12;
    pointer-events: none;
}

.listen__inner {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 130px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.listen__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 0.95;
    color: var(--color-white);
    letter-spacing: 1px;
}
.listen__subtitle {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(13px, 1.4vw, 20px);
    letter-spacing: 2px;
    color: var(--color-white);
    margin-top: 8px;
}

.listen__platforms {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 22px);
    flex-wrap: wrap;
}
.listen__platform {
    width: clamp(56px, 5vw, 78px);
    height: clamp(56px, 5vw, 78px);
    border-radius: 50%;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.listen__platform img {
    width: 56%;
    height: 56%;
    object-fit: contain;
    /* icons are monochrome (currentColor → black) on the white disc */
    color: #000;
}
.listen__platform:hover {
    transform: scale(0.9);
}

@media (max-width: 860px) {
    .listen__inner { flex-direction: column; align-items: center; text-align: center; }
    .listen__platforms { justify-content: center; }
}

/* =========================================================
   VIDEOS  (WIDEO)
   ========================================================= */
.videos {
    background: var(--color-black);
}
.videos__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 90px var(--gutter) 100px;
}

.videos__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.videos__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(46px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: 1px;
    color: var(--color-white);
}
.videos__subtitle {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 24px);
    letter-spacing: 1.5px;
    color: var(--color-accent);
    margin-top: 8px;
}
.videos__btn {
    flex: 0 0 auto;
    padding: 16px 44px;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 999px;
    transition: transform 0.2s var(--ease), background 0.25s var(--ease);
}
.videos__btn:hover {
    background: #d62b2d;
    transform: translateY(-2px);
}
/* the under-thumbnails button only appears on mobile */
.videos__btn--mobile { display: none; }

/* layout: 2×2 thumb grid (left) + large featured (right) */
.videos__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 26px;
    align-items: start;
}
.videos__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
}

.video-card {
    display: block;
    width: 100%;
    text-align: left;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.video-card__thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
    border-radius: 4px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.25s var(--ease);
}
/* active selection highlight */
.video-card.is-active .video-card__thumb {
    outline-color: var(--color-accent);
}
.video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease), filter 0.3s var(--ease);
}
.video-card:hover .video-card__thumb img {
    transform: scale(1.05);
    filter: brightness(0.7);
}
.video-card__dur {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
}
.video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(187, 36, 38, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.video-card__play svg {
    width: 22px;
    height: 22px;
    color: #fff;
    margin-left: 2px;
}
.video-card:hover .video-card__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.video-card__title {
    display: -webkit-box;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-white);
    margin: 10px 0 4px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card__meta {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* large player */
.videos__player { position: relative; }
.videos__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
    border-radius: 6px;
}
.videos__embed img.videos__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s var(--ease);
}
.videos__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.videos__poster-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(187, 36, 38, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.videos__poster-play svg {
    width: 30px;
    height: 30px;
    color: #fff;
    margin-left: 3px;
}
.videos__embed:hover .videos__poster-play {
    transform: translate(-50%, -50%) scale(1.06);
    background: var(--color-accent);
}

@media (max-width: 980px) {
    /* full-width player on top, 2×2 thumbnails below, button under them */
    .videos__inner { display: flex; flex-direction: column; }
    .videos__head { order: 0; }
    .videos__layout { order: 1; grid-template-columns: 1fr; gap: 18px; }
    .videos__player { order: 1; }       /* player first within the layout */
    .videos__grid   { order: 2; grid-template-columns: 1fr 1fr; gap: 14px; }
    .videos__head .videos__btn { display: none; }   /* hide the header button */
    .videos__btn--mobile {
        display: block;
        order: 2;
        align-self: center;
        width: 100%;
        text-align: center;
        margin-top: 18px;
    }
}

/* =========================================================
   SHOP  (merch carousel)
   ========================================================= */
.shop {
    background: var(--color-black);
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 2.2fr);
    align-items: center;
    gap: 20px;
    padding: 70px 0;
    overflow: hidden;
}

.shop__panel {
    padding-left: var(--gutter);
}
.shop__head { margin-bottom: 36px; }
.shop__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(46px, 6vw, 92px);
    line-height: 0.92;
    letter-spacing: 1px;
    color: var(--color-white);
}
.shop__subtitle {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 24px);
    letter-spacing: 1.5px;
    color: var(--color-accent);
    margin-top: 8px;
}

.shop__buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 340px;
    margin-bottom: 40px;
}
.shop__btn {
    text-align: center;
    padding: 16px 28px;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 999px;
    transition: transform 0.2s var(--ease), background 0.25s var(--ease);
}
.shop__btn:hover {
    background: #d62b2d;
    transform: translateY(-2px);
}

/* carousel control */
.shop__control {
    display: flex;
    align-items: center;
    gap: 22px;
}
.shop__arrow {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: color 0.25s var(--ease), transform 0.2s var(--ease);
}
.shop__arrow svg { width: 22px; height: 22px; }
.shop__arrow:hover { color: var(--color-accent); transform: scale(1.1); }

.shop__dots {
    display: flex;
    align-items: center;
    gap: 2px;
}
.shop__dot {
    width: 2px;
    height: 26px;
    /* thin 2px visual bar with a >=24px transparent tap target around it */
    padding: 0 11px;
    box-sizing: content-box;
    background: rgba(255, 255, 255, 0.5);
    background-clip: content-box;
    cursor: pointer;
    transition: background 0.25s var(--ease), height 0.25s var(--ease);
}
.shop__dot.is-active {
    background: var(--color-accent);
    background-clip: content-box;
    height: 32px;
}

/* product carousel */
.shop__carousel {
    overflow: hidden;
}
.shop__track {
    display: flex;
    align-items: center;
    gap: 30px;
    transition: transform 0.55s var(--ease);
    will-change: transform;
}
.shop__item {
    flex: 0 0 auto;
    width: clamp(320px, 34vw, 520px);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
    opacity: 0.55;
    transform: scale(0.86);
}
.shop__item img {
    width: 100%;
    height: auto;
    display: block;
}
/* the centred/active item is larger and fully opaque */
.shop__item.is-active {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

@media (max-width: 900px) {
    .shop {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .shop__panel { padding: 0 var(--gutter); text-align: center; }
    .shop__head, .shop__buttons { text-align: center; }
    .shop__buttons { max-width: none; }

    /* centre the prev/dots/next control */
    .shop__control { justify-content: center; }

    /* one full-width item centred; neighbours sit fully off-screen */
    .shop__carousel { width: 100%; }
    .shop__track { gap: 0; }
    .shop__item {
        width: 100vw;
        max-width: 100%;
        opacity: 1;
        transform: none;
        padding: 0 var(--gutter);
    }
    .shop__item.is-active { transform: none; opacity: 1; box-shadow: none; }
    .shop__item img { margin: 0 auto; }
}

/* =========================================================
   COOKIE BANNER (discreet, bottom)
   ========================================================= */
.fb-cookie {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: rgba(18, 18, 18, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transform: translateY(100%);
    transition: transform 0.4s var(--ease);
}
.fb-cookie.is-visible { transform: translateY(0); }
.fb-cookie__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 22px;
}
.fb-cookie__text {
    flex: 1 1 460px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}
.fb-cookie__text a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s var(--ease);
}
.fb-cookie__text a:hover { color: var(--color-accent); }

/* options (functionality / statistics toggles) */
.fb-cookie__options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
}
.fb-cookie__option { display: flex; align-items: center; gap: 10px; }
.fb-cookie__opt-label { font-size: 12px; font-weight: 700; letter-spacing: .3px; color: rgba(255,255,255,0.85); }
.fb-cookie__toggle { position: relative; display: inline-flex; cursor: pointer; }
.fb-cookie__toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-cookie__track { width: 40px; height: 22px; border-radius: 999px; background: #3a3a3a; transition: background .2s var(--ease); flex: 0 0 auto; }
.fb-cookie__thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.fb-cookie__toggle input:checked + .fb-cookie__track { background: var(--color-accent); }
.fb-cookie__toggle input:checked + .fb-cookie__track .fb-cookie__thumb { transform: translateX(18px); }
.fb-cookie__toggle.is-locked { cursor: not-allowed; }
/* locked = darker red track + gray thumb, so it reads as un-switchable */
.fb-cookie__toggle.is-locked .fb-cookie__track { background: #420d0e; }
.fb-cookie__toggle.is-locked .fb-cookie__thumb { background: #7a7a7a; }

.fb-cookie__actions { display: flex; gap: 8px; flex-shrink: 0; }
.fb-cookie__btn {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 22px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.18s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.fb-cookie__btn--accept { background: var(--color-accent); color: #fff; }
.fb-cookie__btn--accept:hover { background: #d62b2d; transform: translateY(-1px); }
.fb-cookie__btn--save { background: transparent; color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.25); }
.fb-cookie__btn--save:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (max-width: 760px) {
    /* compact: only as tall as its content */
    .fb-cookie__inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;   /* don't spread top↔bottom */
        gap: 8px;
        padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    }
    /* in a column, flex:1 made the text grow to fill the screen → reset it */
    .fb-cookie__text { flex: 0 0 auto; font-size: 11px; line-height: 1.4; margin: 0; }
    /* toggles in a compact inline row (not spread / full width) */
    .fb-cookie__options { gap: 20px; justify-content: flex-start; }
    .fb-cookie__option { gap: 8px; }
    .fb-cookie__opt-label { font-size: 11px; }
    .fb-cookie__track { width: 34px; height: 19px; }
    .fb-cookie__thumb { width: 13px; height: 13px; }
    .fb-cookie__toggle input:checked + .fb-cookie__track .fb-cookie__thumb { transform: translateX(15px); }
    /* full-width buttons row */
    .fb-cookie__actions { gap: 8px; }
    .fb-cookie__btn { flex: 1 1 auto; padding: 9px 12px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    position: relative;
    z-index: 5;
}

/* dark-gray top area */
.site-footer__top {
    background: var(--color-dark-gray);
    padding: 44px 0 48px;
}

.site-footer__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.site-footer__top .site-footer__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.footer-logo {
    width: clamp(150px, 13vw, 210px);
    height: auto;
}

.footer-col__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 18px;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-list a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.92);
    transition: color 0.25s var(--ease);
}
.footer-list a:hover {
    color: var(--color-accent);
}

/* listen icons */
.footer-platforms {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 14px;
}
.footer-platform {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s var(--ease);
}
.footer-platform img {
    width: 54%;
    height: 54%;
    object-fit: contain;
}
.footer-platform:hover {
    transform: scale(0.9);
}

/* follow-us block sits beneath the streaming icons (heading matches the others) */
.footer-follow {
    margin-top: 28px;
}

/* footer contact form */
.footer-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.footer-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.footer-form__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.footer-form input[type="text"],
.footer-form input[type="email"],
.footer-form textarea {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.footer-form input::placeholder,
.footer-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.footer-form input:focus,
.footer-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.09);
}
.footer-form textarea {
    resize: vertical;
    min-height: 96px;
}
.footer-form__submit {
    align-self: flex-start;
    margin-top: 4px;
    padding: 13px 40px;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s var(--ease), background 0.25s var(--ease);
}
.footer-form__submit:hover {
    background: #d62b2d;
    transform: translateY(-2px);
}
.footer-form__notice {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.footer-form__notice--ok {
    background: rgba(46, 160, 67, 0.15);
    border: 1px solid rgba(46, 160, 67, 0.5);
    color: #7ee2a0;
}
.footer-form__notice--err {
    background: rgba(214, 43, 45, 0.15);
    border: 1px solid rgba(214, 43, 45, 0.5);
    color: #f2a0a1;
}

/* red bottom bar */
.site-footer__bar {
    background: var(--color-dark-gray);   /* 1f1f1f */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 0;
}
.site-footer__bar .site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-copy,
.footer-credit {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
}
.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.footer-credit a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-white);
    transition: opacity 0.2s var(--ease);
}
.footer-credit a:hover { opacity: 0.7; }
.footer-credit__logo {
    height: 13px;
    width: auto;
    margin-top: -5px;
    display: block;
}
.footer-credit__studio {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (max-width: 1024px) {
    .site-footer__top .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }
    .footer-col--brand   { grid-column: 1 / -1; }
    /* give the contact form the full row so its inputs have room */
    .footer-col--contact { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    /* Mobile footer layout:
       row 1: brand (full width, centred)
       row 2: Explore | Listen & Stream + Follow us  (two columns)
       row 3: Contact Us form (full width, below)  */
    .site-footer__top .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px 22px;
    }
    .footer-col--brand   { grid-column: 1 / -1; text-align: center; order: 1; }
    .footer-col--explore { grid-column: 1; order: 2; }
    .footer-col--listen  { grid-column: 2; order: 2; }
    .footer-col--contact { grid-column: 1 / -1; order: 3; }

    .footer-col--brand .footer-logo { margin: 0 auto; }
    /* streaming icons wrap to fit the narrower half-width Listen column */
    .footer-platforms { grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: center; }
    .footer-platform { width: 100%; max-width: 46px; height: auto; aspect-ratio: 1; }
    .footer-col__title { font-size: 13px; margin-bottom: 12px; }
    .footer-list a { font-size: 13px; }
    .site-footer__bar .site-footer__inner { flex-direction: column; text-align: center; gap: 6px; }
    .footer-copy, .footer-credit { font-size: 11px; }
}

/* =========================================================
   SCROLL-REVEAL ANIMATIONS
   Elements start hidden + offset; JS adds .is-visible when they enter view.
   ========================================================= */
.fb-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    will-change: opacity, transform;
}
.fb-reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* directional variants */
.fb-reveal--left  { transform: translateX(-36px); }
.fb-reveal--right { transform: translateX(36px); }
.fb-reveal--zoom  { transform: scale(0.94); }
.fb-reveal--left.is-visible,
.fb-reveal--right.is-visible,
.fb-reveal--zoom.is-visible { transform: none; }

/* stagger children of a revealed container */
.fb-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.fb-stagger.is-visible > * { opacity: 1; transform: none; }
.fb-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.fb-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.fb-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.fb-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.fb-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.fb-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
    .fb-reveal, .fb-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    :root { --gutter: 24px; }
}

@media (max-width: 860px) {
    .nav-toggle {
        display: flex;
        /* positioned so its z-index is honoured (sits above the overlay) */
        position: relative;
        z-index: 60;
    }

    /* The whole nav becomes the off-canvas panel — slides in from the right,
       above everything. Contains: logo → menu items → red separator → PL | EN. */
    .main-navigation {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;     /* content centred middle, fit to screen */
        align-items: center;
        gap: 20px;
        padding: 20px;
        background: rgba(20, 20, 20, 0.98);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transform: translateX(100%);
        transition: transform 0.4s var(--ease);
        z-index: 9998;
        overflow: hidden;            /* fit-to-size: never scroll the panel */
    }
    .main-navigation.is-open { transform: translateX(0); }

    /* oversized faint bison-head watermark, centred behind the menu */
    .main-navigation::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 195%;
        height: 195%;
        max-width: 960px;
        background-image: url('../images/logo-center.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.05;
        pointer-events: none;
        z-index: 0;
    }
    /* keep the menu content above the watermark */
    .main-navigation > * { position: relative; z-index: 1; }

    /* toggle stays fixed top-right, vertically centred in the header so it
       lines up with the logo (it's a sibling, so the panel slide never moves it) */
    .nav-toggle {
        position: fixed;
        top: 0;
        right: var(--gutter);
        height: var(--header-h);
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 10000;
        transition: height 0.35s var(--ease);
    }
    /* shrink with the header when scrolled, staying centred */
    .site-header.is-scrolled .nav-toggle { height: 64px; }

    /* logo at the top of the panel */
    .nav-panel__logo {
        display: block;
        order: 1;
        margin-bottom: 8px;
    }
    .nav-panel__logo img { height: 30px; width: auto; filter: brightness(0) invert(1); }

    /* menu list */
    .nav-menu {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }
    .nav-menu li {
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
    }
    .nav-menu a { font-size: 24px; font-weight: 700; letter-spacing: 1px; }

    /* staggered slide-in from the left once open */
    .main-navigation.is-open .nav-menu li { opacity: 1; transform: translateX(0); }
    .main-navigation.is-open .nav-menu li:nth-child(1) { transition-delay: 0.12s; }
    .main-navigation.is-open .nav-menu li:nth-child(2) { transition-delay: 0.17s; }
    .main-navigation.is-open .nav-menu li:nth-child(3) { transition-delay: 0.22s; }
    .main-navigation.is-open .nav-menu li:nth-child(4) { transition-delay: 0.27s; }
    .main-navigation.is-open .nav-menu li:nth-child(5) { transition-delay: 0.32s; }
    .main-navigation.is-open .nav-menu li:nth-child(6) { transition-delay: 0.37s; }
    .main-navigation.is-open .nav-menu li:nth-child(7) { transition-delay: 0.42s; }
    .main-navigation.is-open .nav-menu li:nth-child(8) { transition-delay: 0.47s; }

    /* 1px solid red separator under the menu */
    .nav-panel__sep {
        display: block;
        order: 3;
        width: 64px;
        height: 1px;
        background: var(--color-accent);
        margin: 6px 0 2px;
    }

    /* language switcher: inline PL | EN at the bottom */
    .lang-switcher {
        order: 4;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
    }
    .lang-switcher .lang-sep { display: none; }   /* hide the vertical-line variant */
    .lang-divider { display: inline; }            /* show the "|" */
    .lang-link { font-size: 16px; }

    /* hamburger → X (driven by body.nav-open since the toggle is now a sibling) */
    body.nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    body.nav-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }
    body.nav-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* lock background scroll while the menu is open */
    body.nav-open {
        overflow: hidden;
        position: fixed;     /* hard lock (iOS): JS pins `top` to keep position */
        left: 0;
        right: 0;
        width: 100%;
    }
    /* lift the whole header (which contains the menu) above all other layers */
    body.nav-open .site-header { z-index: 9999; }
    .nav-toggle { position: relative; z-index: 10000; } /* X always tappable */

    .hero__follow {
        display: none;
    }

    .hero__indicator {
        left: var(--gutter);
    }

    /* centre the hero logo vertically on mobile */
    .hero__center {
        align-items: center;
        padding-top: 0;
        padding-bottom: 120px; /* clear the player at the bottom */
    }
}

@media (max-width: 560px) {
    /* in-hero player only (don't clobber the docked pill's padding) */
    .player:not(.player--docked) { padding: 0 var(--gutter) 20px; }
    .player:not(.player--docked) .player__controls { margin-bottom: 22px; }
    .player__track { display: none; }
    .player__meta { gap: 12px; flex-wrap: wrap; }
    .player__platforms { gap: 9px; }
    .player__platform { width: 28px; height: 28px; }
    .hero__indicator { gap: 2px; }
    .hero__crest { width: clamp(180px, 56vw, 260px); }

    /* docked pill: balanced top/bottom padding, sits closer to the edge */
    .player--docked {
        bottom: calc(12px - (12px * var(--p))) !important;
        padding: 12px 14px !important;
        gap: 12px !important;
    }
    .player--docked .player__controls { margin-bottom: 0 !important; }
}

/* very small phones: trim the hero player to the essentials */
@media (max-width: 400px) {
    .player__platforms { display: none; }
    .player__volume { margin-left: auto; }
}

/* ---- consistent, lighter section padding on mobile ---- */
@media (max-width: 760px) {
    .listen__inner { padding: 64px var(--gutter); }
    /* re-centre the bison watermark on mobile (was clipped at top) */
    .listen::before {
        top: 50%;
        height: 100%;
        width: min(560px, 150%);
    }
    .videos__inner { padding: 60px var(--gutter) 70px; }
    /* members stay edge-to-edge full-screen cards on phones (no gaps/padding) */
    .members__grid { padding: 0; gap: 0; }
    .shop { padding: 50px 0; }
    .marquee { padding: 24px 0 36px; }
    /* section headings scale down a touch */
    .about__title, .concerts__title, .videos__title, .shop__title, .listen__title {
        font-size: clamp(38px, 12vw, 56px);
    }
    /* listen platform icons: fixed 3-per-row grid (= 2×3 for six icons) */
    .listen__platforms {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        justify-items: center;
    }
    .listen__platform { width: clamp(56px, 24vw, 84px); height: clamp(56px, 24vw, 84px); }
    /* videos: heading stacks (button is moved under the grid via the 980px rule) */
    .videos__head { flex-direction: column; align-items: flex-start; gap: 12px; }

    /* all primary CTA buttons full-width on mobile */
    .concerts__btn,
    .shop__btn,
    .marquee__btn,
    .videos__btn--mobile {
        display: block;
        width: 100%;
        text-align: center;
    }
    .marquee__cta { flex-direction: column; padding: 0 var(--gutter); }
    .marquee__cta .marquee__btn { width: 100%; }
}