/* ===========================================
   Windchant Studios - wspólna część motywów gier
   Ładowany na KAŻDEJ stronie serwisu (po pages.css / home.css). Strona
   gry ładuje do tego swój motyw: theme-gym.css, theme-airport.css,
   theme-czolem.css (klasa html.theme-* z inline snippetu w <head>,
   przejścia między motywami: js/theme.js).

   Tu mieszka to, co musi być wszędzie:
   - kurtyna przejścia w barwach KAŻDEGO motywu (strona wyjściowa rysuje
     kurtynę motywu DOCELOWEGO, strona docelowa tę samą od pierwszego renderu),
   - lightbox galerii zrzutów (js/lightbox.js) na zmiennych --lb-*, które
     motywy nadpisują pod html.theme-*.
   =========================================== */

/* ===========================================
   Kurtyna przejścia między motywami
   .theme-curtain = element dodawany przed nawigacją (js/theme.js),
   html.curtain-* body::before = ta sama kurtyna na stronie docelowej,
   widoczna od pierwszego renderu, zdejmowana klasą curtain-lift.
   =========================================== */

.theme-curtain,
html.curtain-gym body::before,
html.curtain-airport body::before,
html.curtain-czolem body::before,
html.curtain-studio body::before {
    content: '';
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}

.theme-curtain {
    opacity: 0;
    transition: opacity 0.38s ease-in;
}

.theme-curtain.show {
    opacity: 1;
}

html.curtain-gym body::before,
html.curtain-airport body::before,
html.curtain-czolem body::before,
html.curtain-studio body::before {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

html.curtain-lift body::before {
    opacity: 0;
}

/* Gym Garden: noc w ogrodzie + ikona gry (obła, z ramką jak w „O grze" – icon-256-round) */
.theme-curtain.gym,
html.curtain-gym body::before {
    background:
        url('/img/gym-garden/icon-256-round.png') center 45% / 96px 96px no-repeat,
        radial-gradient(circle at 50% 45%, rgba(79, 154, 60, 0.28) 0%, transparent 42%) #16241a;
    animation: curtain-pulse 1.4s ease-in-out infinite;
}

/* Airport Bowling: granat hali odlotów + ikona gry w żółtej poświacie */
.theme-curtain.airport,
html.curtain-airport body::before {
    background:
        url('/img/airport-bowling/icon-256-round.png') center 45% / 96px 96px no-repeat,
        radial-gradient(circle at 50% 45%, rgba(245, 197, 24, 0.24) 0%, transparent 42%) #0e1a2b;
    animation: curtain-pulse 1.4s ease-in-out infinite;
}

/* Czołem Clemensianum: noc „Dwudziestki" + złote C+ */
.theme-curtain.czolem,
html.curtain-czolem body::before {
    background:
        url('/img/czolem-clemensianum/cplus-256.png') center 45% / auto 104px no-repeat,
        radial-gradient(circle at 50% 45%, rgba(230, 184, 74, 0.22) 0%, transparent 42%) #091c21;
    animation: curtain-pulse-tall 1.4s ease-in-out infinite;
}

/* Studio: morski z złotą kreską */
.theme-curtain.studio,
html.curtain-studio body::before {
    background:
        linear-gradient(90deg, transparent, #c9a227, transparent) center 47% / 140px 1px no-repeat,
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(42, 112, 128, 0.35) 0%, transparent 50%) #0a1820;
    animation: curtain-line 1.6s ease-in-out infinite;
}

@keyframes curtain-pulse {
    0%, 100% { background-size: 96px 96px, auto; }
    50% { background-size: 106px 106px, auto; }
}

@keyframes curtain-pulse-tall {
    0%, 100% { background-size: auto 104px, auto; }
    50% { background-size: auto 114px, auto; }
}

@keyframes curtain-line {
    0%, 100% { background-size: 140px 1px, auto; }
    50% { background-size: 220px 1px, auto; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-curtain,
    html.curtain-gym body::before,
    html.curtain-airport body::before,
    html.curtain-czolem body::before,
    html.curtain-studio body::before {
        transition: none;
        animation: none;
    }
}

/* ===========================================
   Lightbox galerii zrzutów (js/lightbox.js)
   Domyślne zmienne = styl studia; motywy gier nadpisują je pod
   html.theme-* w swoich plikach.
   =========================================== */

:root {
    --lb-backdrop: rgba(6, 14, 20, 0.92);
    --lb-font: 'Cinzel', Georgia, serif;
    --lb-text: #f0ede6;
    --lb-img-border: #c9a227;
    --lb-img-radius: 4px;
    --lb-img-bg: #0d2530;
    --lb-btn-bg: rgba(10, 24, 32, 0.9);
    --lb-btn-border: #c9a227;
    --lb-btn-stroke: 1px;
    --lb-btn-lip: 1px;
    --lb-btn-lip-color: #c9a227;
    --lb-btn-text: #c9a227;
    --lb-btn-radius: 2px;
    --lb-btn-hover: rgba(201, 162, 39, 0.18);
}

.shot-link {
    display: block;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

html.lightbox-open {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 76px;
    background: var(--lb-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

.lightbox-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    max-height: 100%;
}

.lightbox-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 96px);
    border: 3px solid var(--lb-img-border);
    border-radius: var(--lb-img-radius);
    background: var(--lb-img-bg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    transform: scale(0.96);
    transition: transform 0.25s ease;
}

.lightbox.open .lightbox-img {
    transform: scale(1);
}

.lightbox-caption {
    font-family: var(--lb-font);
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--lb-text);
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.lightbox-btn {
    position: absolute;
    z-index: 1;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lb-font);
    font-size: 1.1rem;
    color: var(--lb-btn-text);
    background: var(--lb-btn-bg);
    border: var(--lb-btn-stroke) solid var(--lb-btn-border);
    border-bottom: var(--lb-btn-lip) solid var(--lb-btn-lip-color);
    border-radius: var(--lb-btn-radius);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-btn:hover,
.lightbox-btn:focus-visible {
    background: var(--lb-btn-hover);
    transform: translateY(-1px);
    outline: none;
}

.lightbox-close {
    top: 16px;
    right: 16px;
}

.lightbox-prev {
    left: 16px;
    top: 50%;
    margin-top: -26px;
}

.lightbox-next {
    right: 16px;
    top: 50%;
    margin-top: -26px;
}

@media (max-width: 600px) {
    .lightbox {
        padding: 76px 12px 84px;
    }

    .lightbox-img {
        max-height: calc(100vh - 200px);
    }

    .lightbox-prev,
    .lightbox-next {
        top: auto;
        bottom: 16px;
        margin-top: 0;
    }

    .lightbox-prev {
        left: 16px;
    }

    .lightbox-next {
        right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox-img {
        transition: none;
    }
}