:root {
    --ink: #060606;
    --gold: #c4922a;
    --gold-2: #a0522d;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--ink);
    color: #e0e0e0;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ── Stage: ambient backdrop the portal sits on ─────────────────────── */
.stage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #2d2d2d 100%);
}

/* ── Portal: the rounded frame everything lives inside ──────────────── */
.portal {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1040px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.rozdroze-header {
    text-align: center;
    padding: 2rem 1rem 1.5rem;
}

.rozdroze-header h1 {
    font-weight: 300;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    letter-spacing: 2px;
    margin: 0;
    color: var(--gold);
}

.rozdroze-header .underline {
    width: 60px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: linear-gradient(45deg, var(--gold), var(--gold-2));
}

/* ── Split layout: N cards, side by side on desktop ──────────────────
   Grid, not flex: column count is one declaration (repeat(N, 1fr)),
   so adding a 4th panel later is a one-line change here instead of
   touching flex-basis math on every breakpoint. */
/* ── Split layout: 2×2 on desktop ─────────────────────────────────── */
.split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2.4vw, 32px);
    padding: 0 clamp(14px, 3vw, 32px) clamp(20px, 3vw, 32px);
    min-height: 56vh;
    perspective: 1200px;
}

.panel {
    --rx: 0deg;
    --ry: 0deg;
    --ty: 0px;
    --tilt-scale: 1;
    --mx: 50%;
    --my: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    border-radius: 16px;
    background: #0d0d0d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)) scale(var(--tilt-scale));
    transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.panel:hover,
.panel:focus-visible {
    --ty: -6px;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(196, 146, 42, 0.35),
        0 0 40px rgba(196, 146, 42, 0.12);
}

.panel:active {
    --tilt-scale: 0.97;
    transition: transform 0.15s ease;
}

.panel:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -4px;
}

.split.has-focus .panel:not(.is-active) {
    filter: brightness(0.6);
}

.panel-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse farthest-corner at 50% 50%, black 55%, transparent 92%);
    mask-image: radial-gradient(ellipse farthest-corner at 50% 50%, black 55%, transparent 92%);
    transition: transform 0.6s ease, filter 0.6s ease;
    filter: blur(2px) brightness(.85) saturate(.9);
}

.panel:hover .panel-bg,
.panel:focus-visible .panel-bg {
    transform: scale(1.08);
    filter: blur(0) brightness(1) saturate(1);
}

/* Slow idle drift so the art doesn't sit frozen while waiting for a hover
   it may never get on touch devices — pure background-position, so it
   never fights the hover/tilt transform above. */
@media (prefers-reduced-motion: no-preference) {
    .panel-bg {
        animation: slow-pan 20s ease-in-out infinite alternate;
    }

    .panel-wyraj .panel-bg {
        animation-duration: 25s;
        animation-delay: 1s;
    }

    .panel-lingwo .panel-bg {
        animation-duration: 22s;
        animation-delay: 0.5s;
    }

    .panel-code .panel-bg {
        animation-duration: 24s;
        animation-delay: 0.8s;
    }
}

@keyframes slow-pan {
    from { background-position: 50% 42%; }
    to   { background-position: 54% 52%; }
}

/* Soft gold sheen that follows the cursor — pure lighting, no motifs */
.panel-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: soft-light;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(212, 165, 53, 0.55), transparent 55%);
    transition: opacity 0.4s ease;
}

.panel:hover .panel-sheen,
.panel:focus-visible .panel-sheen {
    opacity: 1;
}

.panel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.panel-bazg .panel-bg {
    background: #050505 url("../img/bazgrollin-bg.c82440a9e0d0.png") center / cover no-repeat;
}

.panel-wyraj .panel-bg {
    background: #0a0805 url("../img/wyraj-bg.b1698fbde790.png") center / cover no-repeat;
    /* the artwork itself is much darker than bazgrollin's — compensate
       so it doesn't read as a broken/underexposed image */
    filter: blur(2px) brightness(1.35) saturate(1.05) contrast(1.05);
}

.panel-wyraj:hover .panel-bg,
.panel-wyraj:focus-visible .panel-bg {
    filter: blur(0) brightness(1.5) saturate(1.1) contrast(1.05);
}

/* LingwoŁamek's own art hasn't been dropped in yet — this navy is just
   a placeholder base color so the panel doesn't look broken while
   lingwolamek-bg.png is missing. Swap the fallback color once you have
   real art; keep it dark so the veil/title still read the same way. */
.panel-lingwo .panel-bg {
    background: #0a0e18 url("../img/lingwolamek-bg.f6cf3d3156e8.png") center / cover no-repeat;
}

.panel-code .panel-bg {
    background: #070b12 url("../img/code-bg.be57f3f2be90.gif") center / cover no-repeat;
    filter: brightness(0.78) saturate(0.95) blur(0);
}

.panel-code:hover .panel-bg,
.panel-code:focus-visible .panel-bg {
    filter: brightness(1) saturate(1) blur(0);
}

.panel-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.45) 45%, rgba(0,0,0,.65));
    pointer-events: none;
}

.panel-wyraj .panel-veil {
    /* lighter veil — the source art needs less crushing to stay legible */
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.22) 45%, rgba(0,0,0,.48));
}

.panel-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 2rem;
    text-align: center;
}

.panel-title {
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    margin: 0;
    color: var(--gold);
    transition: letter-spacing 0.35s ease;
}

.panel:hover .panel-title,
.panel:focus-visible .panel-title {
    letter-spacing: 5.5px;
}

.panel-tag {
    font-weight: 300;
    font-size: 0.95rem;
    color: #c4c4c4;
    opacity: 0.85;
    margin: 0;
    max-width: 24ch;
}

.panel-cta {
    position: relative;
    overflow: hidden;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(45deg, var(--gold), var(--gold-2));
    padding: 8px 18px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(196, 146, 42, 0.3);
    transition: all 0.3s ease;
}

.panel-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}

.panel:hover .panel-cta::after,
.panel:focus-visible .panel-cta::after {
    left: 130%;
}

.panel:hover .panel-cta,
.panel:focus-visible .panel-cta {
    background: linear-gradient(45deg, #d4a535, #8b4513);
    box-shadow: 0 6px 20px rgba(196, 146, 42, 0.5);
}

.cta-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.panel:hover .cta-arrow,
.panel:focus-visible .cta-arrow {
    animation: none;
    transform: translateX(4px);
}

/* ── Motion (respect prefers-reduced-motion) ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .rozdroze-header,
    .panel {
        animation: fade-up 0.7s ease both;
    }

    .panel-wyraj {
        animation-delay: 0.1s;
    }

    .panel-lingwo {
        animation-delay: 0.2s;
    }

    .panel-code {
        animation-delay: 0.3s;
    }

    /* Gentle hint that the arrow — and the card — is clickable */
    .cta-arrow {
        animation: nudge 2.8s ease-in-out infinite;
    }

    .panel-wyraj .cta-arrow {
        animation-delay: 0.4s;
    }

    .panel-lingwo .cta-arrow {
        animation-delay: 0.7s;
    }

    .panel-code .cta-arrow {
        animation-delay: 1s;
    }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

/* ── Mobile: 2 across, 3rd spans full width below ────────────────────
   Three columns at once got too narrow to read on real phone widths
   (titles wrapping, the CTA pill nearly touching the panel edge), so
   below 640px the grid drops to 2 columns and .panel-lingwo — the most
   recently added panel — spans both, sitting as its own row underneath.
   If a 4th panel shows up, this is the spot to revisit (a straight
   2×2 grid is probably cleaner than a 2-up-then-2-more stack). */
/* ── Mobile: keep the 2×2, just tighten spacing ──────────────────── */
@media (max-width: 640px) {
    .stage {
        padding: 16px 10px;
    }

    .portal {
        border-radius: 18px;
    }

    .rozdroze-header {
        padding: 1.8rem 0.8rem 1.1rem;
    }

    .split {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, minmax(21vh, 1fr));
        gap: 10px;
        padding: 0 10px 14px;
        min-height: 46vh;
    }

    .panel {
        border-radius: 12px;
    }

    .panel-content {
        padding: 1rem 0.5rem;
        gap: 0.35rem;
    }

    .panel-title {
        font-size: clamp(1rem, 5.5vw, 1.3rem);
        letter-spacing: 1.5px;
    }

    .panel:hover .panel-title,
    .panel:focus-visible .panel-title {
        letter-spacing: 2.5px;
    }

    .panel-tag {
        display: none;
    }

    .panel-cta {
        font-size: 0.68rem;
        padding: 6px 14px;
    }

    .panel-code .panel-bg {
        background-position: left center;
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    .panel-code .panel-bg {
        animation: slow-pan-code-mobile 24s ease-in-out infinite alternate;
        animation-delay: 0.8s;
    }
}

@keyframes slow-pan-code-mobile {
    from { background-position: left 42%; }
    to   { background-position: left 52%; }
}


@media (hover: none) {
    /* No hover on touch, so the "reveal" state has to be the resting
       state — nothing should be sitting there blurred and dimmed. */
    .panel-bg {
        filter: brightness(1) saturate(1) blur(0);
    }

    .panel-wyraj .panel-bg {
        filter: brightness(1.4) saturate(1.05) contrast(1.05) blur(0);
    }

    .panel-code .panel-bg {
        filter: brightness(1) saturate(1) blur(0);
    }
}