/*
 * Motyw mmmaxx-zachod — ciepła wersja szablonu mmmaxx. Style własne.
 *
 * Barwy wzięte z okładek artysty: bursztyn zachodu słońca, koral fali i fiolet zmierzchu.
 * Paleta w zmiennych `--mx-*`, osobno dla trybu jasnego (`:root`, `[data-bs-theme=light]`)
 * i ciemnego (`[data-bs-theme=dark]`) — reszta arkusza używa wyłącznie zmiennych.
 * Utwory z okładką to karty: miniatura, rozmyta okładka w tle, biała fala z koralowym
 * postępem — w obu trybach na przyciemnionym zdjęciu, więc zawsze czytelne.
 * Animacje tylko na transform/opacity; przy `prefers-reduced-motion` wyłączone.
 */

/* ── Paleta: tryb jasny ───────────────────────────────────────────────── */
:root,
html[data-bs-theme=light] {
    --mx-bg: #fbf4ee;
    --mx-bg-rgb: 251, 244, 238;
    --mx-surface: #ffffff;
    --mx-surface-2: #f3e5da;
    --mx-line: rgba(90, 40, 20, .12);
    --mx-text: #2b1914;
    --mx-text-rgb: 43, 25, 20;
    --mx-soft: #5a3b31;
    --mx-muted: #86665a;
    --mx-strong: #1f100b;
    --mx-a1: #c9481a;
    --mx-a1-rgb: 201, 72, 26;
    --mx-a2: #b8322c;
    --mx-on-accent: #ffffff;
    --mx-glow-1: rgba(242, 140, 60, .24);
    --mx-glow-2: rgba(122, 59, 110, .14);
    --mx-title-from: #1f100b;
    --mx-cta-bg: #1f100b;
    --mx-cta-fg: #fff5ec;
    --mx-glass: rgba(251, 244, 238, .84);
    --mx-wave-rest: rgba(43, 25, 20, .26);
    --mx-shadow: rgba(90, 40, 20, .25);
}

/* ── Paleta: tryb ciemny ──────────────────────────────────────────────── */
html[data-bs-theme=dark] {
    --mx-bg: #140b0a;
    --mx-bg-rgb: 20, 11, 10;
    --mx-surface: #1f1312;
    --mx-surface-2: #2b1a18;
    --mx-line: rgba(255, 214, 190, .10);
    --mx-text: #fbeee6;
    --mx-text-rgb: 251, 238, 230;
    --mx-soft: #ead2c4;
    --mx-muted: #b99587;
    --mx-strong: #fff6ef;
    --mx-a1: #ff9a3c;
    --mx-a1-rgb: 255, 154, 60;
    --mx-a2: #ef4a36;
    --mx-on-accent: #1a0c08;
    --mx-glow-1: rgba(255, 154, 60, .22);
    --mx-glow-2: rgba(154, 72, 120, .18);
    --mx-title-from: #fff3e6;
    --mx-cta-bg: #fff3e6;
    --mx-cta-fg: #1a0c08;
    --mx-glass: rgba(20, 11, 10, .8);
    --mx-wave-rest: rgba(255, 240, 230, .5);
    --mx-shadow: rgba(0, 0, 0, .85);
}

/* ── Bootstrap z palety ───────────────────────────────────────────────── */
:root,
html[data-bs-theme] {
    --mx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-bg: var(--mx-bg);
    --bs-body-bg-rgb: var(--mx-bg-rgb);
    --bs-body-color: var(--mx-text);
    --bs-body-color-rgb: var(--mx-text-rgb);
    --bs-body-font-family: var(--mx-font);
    --bs-emphasis-color: var(--mx-strong);
    --bs-primary: var(--mx-a1);
    --bs-primary-rgb: var(--mx-a1-rgb);
    --bs-primary-border-subtle: var(--mx-glow-1);
    --bs-secondary-color: var(--mx-muted);
    --bs-secondary-bg: var(--mx-surface-2);
    --bs-tertiary-bg: var(--mx-surface);
    --bs-border-color: var(--mx-line);
    --bs-border-color-translucent: var(--mx-line);
    --bs-link-color: var(--mx-a1);
    --bs-link-color-rgb: var(--mx-a1-rgb);
    --bs-link-hover-color: var(--mx-a2);
    scroll-behavior: smooth;
}

body.mx {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mx-bg);
    color: var(--mx-text);
    -webkit-font-smoothing: antialiased;
}

.mx ::selection { background: var(--mx-glow-1); }

.mx-skip:focus {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    padding: .5rem .9rem;
    border-radius: 2rem;
    background: var(--mx-a1);
    color: var(--mx-on-accent);
}

/* ── Menu ─────────────────────────────────────────────────────────────── */

.mx-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1030;
    padding: .9rem 0;
    border-bottom: 1px solid transparent;
    transition: background-color .3s ease, padding .3s ease, border-color .3s ease;
}
.mx-nav.is-scrolled,
.mx-nav:has(.navbar-collapse.show) {
    padding: .55rem 0;
    background: var(--mx-glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--mx-line);
}
.mx-nav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .02em;
    color: var(--mx-strong);
}
.mx-nav .nav-link {
    padding: .5rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mx-muted);
}
.mx-nav .nav-link:hover,
.mx-nav .nav-link:focus-visible,
.mx-nav .nav-link.active { color: var(--mx-strong); }
.mx-nav .navbar-toggler { border-color: var(--mx-line); }
.mx-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--mx-glow-1); }
.mx-nav .dropdown-menu { background: var(--mx-surface); border-color: var(--mx-line); }

@media (max-width: 991.98px) {
    .mx-nav .navbar-collapse { margin-top: .5rem; }
    .mx-nav .nav-link { padding: .65rem 0; }
}

/* Korektor przy nazwie — rusza się, gdy gra muzyka. */
.mx-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.mx-eq span {
    display: block;
    width: 3px;
    height: 35%;
    border-radius: 1px;
    background: linear-gradient(var(--mx-a1), var(--mx-a2));
    transform-origin: bottom;
}
.mx-playing .mx-eq span { height: 100%; animation: mx-eq .9s ease-in-out infinite alternate; }
.mx-playing .mx-eq span:nth-child(2) { animation-delay: -.3s; }
.mx-playing .mx-eq span:nth-child(3) { animation-delay: -.6s; }
@keyframes mx-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* ── Wejście ──────────────────────────────────────────────────────────── */

.mx-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: clamp(20rem, 50vh, 32rem);
    padding: 7rem 0 3rem;
    /* Łuna nad horyzontem — ciepłe światło od dołu, jak na okładce „Dreamy Sunset". */
    background: radial-gradient(120% 70% at 50% 108%, var(--mx-glow-1), transparent 70%);
}
.mx-home .mx-hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
    padding-bottom: 7rem;
}
.mx-visual {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
}
.mx-hero-glow {
    position: absolute;
    z-index: -2;
    left: 50%;
    top: 58%;
    width: min(70rem, 150vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--mx-glow-1), var(--mx-glow-2) 50%, transparent 72%);
    opacity: calc(.7 + var(--mx-level, 0) * .3);
    transform: translate(-50%, -50%) scale(calc(1 + var(--mx-level, 0) * .2));
    pointer-events: none;
    animation: mx-drift 18s ease-in-out infinite alternate;
}
@keyframes mx-drift { to { translate: -6% 3%; } }
.mx-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 7rem;
    background: linear-gradient(transparent, var(--mx-bg));
    pointer-events: none;
}
.mx-overline {
    margin: 0 0 1rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--mx-a1);
}
.mx-title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(2.5rem, 7vw, 4.75rem);
    line-height: .95;
    letter-spacing: -.04em;
    color: var(--mx-strong);
    overflow-wrap: anywhere;
}
.mx-home .mx-title {
    font-size: clamp(4rem, 17vw, 12rem);
    line-height: .88;
    letter-spacing: -.055em;
    background: linear-gradient(100deg, var(--mx-title-from) 15%, var(--mx-a1) 52%, var(--mx-a2) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mx-lead {
    max-width: 38rem;
    margin: 1.5rem 0 0;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.55;
    color: var(--mx-soft);
}
.mx-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.mx-cta {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .55rem 1.5rem .55rem .55rem;
    border-radius: 3rem;
    background: var(--mx-cta-bg);
    color: var(--mx-cta-fg);
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.mx-cta:hover { color: var(--mx-cta-fg); transform: translateY(-2px); box-shadow: 0 14px 40px -14px var(--mx-a1); }
.mx-cta:focus-visible { outline: 3px solid var(--mx-a1); outline-offset: 3px; }
.mx-cta-icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mx-a1), var(--mx-a2));
}
.mx-cta-icon::after {
    content: "";
    position: absolute;
    left: 55%;
    top: 50%;
    border-left: .7rem solid var(--mx-on-accent);
    border-top: .45rem solid transparent;
    border-bottom: .45rem solid transparent;
    transform: translate(-50%, -50%);
}

/* ── Treść ────────────────────────────────────────────────────────────── */

.mx-main { flex: 1 0 auto; padding: 1rem 0 5rem; outline: 0; }
.mx-narrow { max-width: 56rem; }
.mx-main h2,
.mx-main h3 { margin-top: 3rem; font-weight: 800; letter-spacing: -.02em; color: var(--mx-strong); }
.mx-main .lead { color: var(--mx-soft); }
.mx-main p { line-height: 1.7; }
.mx .btn-primary {
    --bs-btn-color: var(--mx-on-accent);
    --bs-btn-bg: var(--mx-a1);
    --bs-btn-border-color: var(--mx-a1);
    --bs-btn-hover-color: var(--mx-on-accent);
    --bs-btn-hover-bg: var(--mx-a2);
    --bs-btn-hover-border-color: var(--mx-a2);
    --bs-btn-active-color: var(--mx-on-accent);
    --bs-btn-active-bg: var(--mx-a2);
    --bs-btn-active-border-color: var(--mx-a2);
    padding: .65rem 1.4rem;
    border-radius: 3rem;
    font-weight: 700;
}
.mx-empty { padding: 4rem 0; text-align: center; color: var(--mx-muted); }

/* Blok „Utwory (audio)" w barwach motywu. Selektor z `.mx`, bo styl bloku stoi niżej w dokumencie. */
.mx .k2-tracks { margin: 2.5rem 0; }
.mx .k2-tracks-title { color: var(--mx-strong); }
.mx .k2-track {
    padding: .8rem 1rem;
    border-color: var(--mx-line);
    border-radius: 1rem;
    background: var(--mx-surface);
    transition: border-color .2s ease, box-shadow .3s ease;
}
.mx .k2-track:hover { border-color: var(--mx-glow-1); }
.mx .k2-track.is-playing { border-color: var(--mx-a1); box-shadow: 0 18px 50px -26px var(--mx-a1); }
.mx .k2-track-btn { background: linear-gradient(135deg, var(--mx-a1), var(--mx-a2)); color: var(--mx-on-accent); }
/* Fala: zagrane (akcent) → pobrane (akcent zmieszany z tłem, gdy przeglądarka zna color-mix) → reszta. */
.mx .k2-track-wave {
    background: linear-gradient(90deg, var(--mx-a2) 0%, var(--mx-a1) var(--k2-progress, 0%), var(--mx-wave-rest) var(--k2-progress, 0%));
    background: linear-gradient(90deg, var(--mx-a2) 0%, var(--mx-a1) var(--k2-progress, 0%), color-mix(in srgb, var(--mx-a1) 40%, var(--mx-wave-rest)) var(--k2-progress, 0%) var(--k2-buffered, 0%), var(--mx-wave-rest) var(--k2-buffered, 0%));
}
.mx .k2-track-bar > span,
.mx .k2-player-progress > span { background: linear-gradient(90deg, var(--mx-a2), var(--mx-a1)); }
.mx .k2-player-bar {
    background: var(--mx-glass);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--mx-line);
    box-shadow: 0 20px 60px -20px var(--mx-shadow);
}
.mx .k2-tracks-empty p { border-style: dashed !important; background: var(--mx-surface); }

/* Utwór z okładką: karta na rozmytej okładce (miniatura + zdjęcie w tle + przyciemnienie).
 * Tekst i fala są jasne w obu trybach, bo leżą na zdjęciu, a nie na tle strony. */
.mx .k2-track.has-cover {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 1rem;
    margin-bottom: .75rem;
    padding: 1rem 1.15rem;
    border: 0;
    border-radius: .9rem;
    background: #2b1a18;
    color: #fff6ef;
}
.mx .k2-track.has-cover::before {
    content: "";
    position: absolute;
    inset: -2rem;
    z-index: -2;
    background: var(--k2-cover) center / cover no-repeat;
    filter: blur(28px) saturate(1.3);
    transform: scale(1.1);
}
.mx .k2-track.has-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(20, 11, 10, .74), rgba(20, 11, 10, .42) 60%, rgba(20, 11, 10, .62));
}
.mx .k2-track.has-cover .k2-track-cover {
    width: 5.25rem;
    height: 5.25rem;
    border-radius: .55rem;
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7);
}
.mx .k2-track.has-cover .k2-track-name { font-size: 1.15rem; font-weight: 500; color: #fff; }
.mx .k2-track.has-cover .k2-track-meta,
.mx .k2-track.has-cover .k2-track-time { color: rgba(255, 240, 230, .8); }
.mx .k2-track.has-cover .k2-track-btn {
    width: 3rem;
    height: 3rem;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
}
.mx .k2-track.has-cover.is-playing .k2-track-btn { border-color: #ef4a36; background: #ef4a36; }
.mx .k2-track.has-cover .k2-track-wave {
    height: 2.5rem;
    background: linear-gradient(90deg, #ef4a36 var(--k2-progress, 0%), rgba(255, 154, 60, .8) var(--k2-progress, 0%) var(--k2-buffered, 0%), rgba(255, 244, 236, .74) var(--k2-buffered, 0%));
}
.mx .k2-track.has-cover .k2-track-dl { border-color: rgba(255, 255, 255, .55); color: #fff; }
.mx .k2-track.has-cover.is-playing { box-shadow: 0 0 0 2px #ff9a3c, 0 22px 50px -24px #ef4a36; }
@media (max-width: 575.98px) {
    .mx .k2-track.has-cover { grid-template-columns: auto auto minmax(0, 1fr); gap: .75rem; }
    .mx .k2-track.has-cover .k2-track-cover { width: 3.5rem; height: 3.5rem; }
    .mx .k2-track.has-cover .k2-track-side { grid-column: 2 / -1; justify-content: flex-end; }
}

/* ── Stopka ───────────────────────────────────────────────────────────── */

.mx-footer {
    padding: 2.5rem 0 6.5rem; /* miejsce na pasek odtwarzacza przy dolnej krawędzi */
    border-top: 1px solid var(--mx-line);
    font-size: .9rem;
    color: var(--mx-muted);
}
.mx-footer a,
.mx-footer .nav-link { color: var(--mx-muted); }
.mx-footer .nav-link { padding: .25rem 1rem .25rem 0; }
.mx-footer a:hover { color: var(--mx-strong); }
.mx-footer p { margin-bottom: .35rem; }
.mx-brand-foot { font-weight: 800; letter-spacing: .02em; color: var(--mx-strong); }

@media (prefers-reduced-motion: reduce) {
    :root, html[data-bs-theme] { scroll-behavior: auto; }
    .mx-nav, .mx-cta, .mx .k2-track { transition: none; }
    .mx-hero-glow, .mx-playing .mx-eq span { animation: none; }
}