/* ---------- Base / Reset ---------- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}


/* Put scroll-snap on the actual scroll container (root). 
   Adding to both covers Safari (body) and others (html). */
html, body {
    scroll-snap-type: y mandatory;
}

@media (pointer: coarse) {
    html, body {
        scroll-snap-type: none;
    }
}

/* Hide all scrollbars globally */
html, body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

    /* For WebKit browsers (Chrome, Safari, Opera) */
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
    }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: 'Roboto', sans-serif;
    color: #fff;
    background: #000;
}

/* ---------- Snap Wrapper (no longer scrolls) ---------- */
.snap { /* wrapper only; no overflow/height here */
}

/* ---------- Panels ---------- */
.panel {
    position: relative;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* stop on each section */
    display: grid;
    place-items: center;
    padding: 6vh 3vh; /* scales with height */
    isolation: isolate;
}

    /* Background images */
    .panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -2;
    }

    /* Subtle vignette for contrast */
    .panel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.05), rgba(0,0,0,0.45));
        z-index: -1;
    }

[data-aos="fade-up"] {
    transform: translate3d(0, 15px, 0);
}

[data-aos="fade-down"] {
    transform: translate3d(0,-15px, 0);
}

[data-aos].aos-animate {
    transform: none;
    opacity: 1;
}

/* Per-section backgrounds */
@media (min-width: 1280px) {
    .bg-brawl::before {
        background-image: url('../Images/BrawlBurrow/BrawlBurrowBG.png');
    }

    .bg-xavier::before {
        background-image: url('../Images/FindingXavier/FindingXavierBG.png');
    }

    .bg-tuck::before {
        background-image: url('../Images/AdventureOfTuck/AdventureOfTuckBG.png');
    }
}

@media (max-width: 1279.98px) {
    .bg-brawl::before {
        background-image: url('../Images/BrawlBurrow/BrawlBurrowBG2.png');
    }

    .bg-xavier::before {
        background-image: url('../Images/FindingXavier/FindingXavierBG2.png');
    }

    .bg-tuck::before {
        background-image: url('../Images/AdventureOfTuck/AdventureOfTuckBG2.png');
    }
}


.bg-main::before {
    background-image: url('../Images/TopBG.png');
}

.bg-about::before {
    background-image: url('../Images/BottomBG.png');
}

.bg-brawl2::before {
    background-image: url('../Images/BrawlBurrow/BrawlBurrowBG2.png');
}

.bg-xavier2::before {
    background-image: url('../Images/FindingXavier/FindingXavierBG2.png');
}

.bg-tuck2::before {
    background-image: url('../Images/AdventureOfTuck/AdventureOfTuckBG2.png');
}

.hero {
    /* Center stack like your other sections, but with precise gaps */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5vh;
    width: min(92vw, 160vh); /* same content frame you use elsewhere */
    margin: 0 auto;
    text-align: center;
    text-shadow: -4px 4px 8px rgba(0,0,0,1);
}

.studio-wordmark {
    width: clamp(92vh, 94vh, 96vh);
    max-width: 82vw;
    height: auto;
    image-rendering: pixelated; /* nice for pixel art */
    filter: drop-shadow(0 1.2vh 2.2vh rgba(0,0,0,.55));
}

/* Tagline underneath */
.tagline {
    margin: 0;
    font-weight: 700;
    line-height: 1.35;
    font-size: clamp(2.6vh, 2.9vh, 3.3vh);
    max-width: 82vw;
}

.studio-logo {
    width: clamp(32vh, 34vh, 36vh);
    max-width: 60vw;
    height: auto;
    image-rendering: pixelated;
    border-radius: 2vh; /* optional soft rounding */
    filter: drop-shadow(0 1.2vh 2.2vh rgba(0,0,0,.55));
    padding-top: 8vh;
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 3vh;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: clamp(1.6vh, 1.8vh, 2vh);
    opacity: .9;
    text-shadow: -2px 2px 8px rgba(0,0,0,.8);
    pointer-events: none;
}

@media (max-width: 640px) {
    .hero {
        gap: 3vh;
    }

    .studio-wordmark {
        width: min(88vw, 48vh);
    }

    .studio-logo {
        width: min(56vw, 32vh);
    }

    .scroll-cue {
        bottom: 2vh;
    }
}

/* ---------- Content Frame & Grid ---------- */
.content {
    width: min(92vw, 160vh);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; /* stacked by default */
    gap: 4vh 6vh;
    align-items: center;
    justify-items: center;
    text-align: center;
    text-shadow: -4px 4px 8px rgba(0,0,0,1);
}

/* ---------- Logo ---------- */
.logo {
    display: block;
    width: clamp(44vh, 46vh, 48vh); /* big logo (larger than screenshots) */
    height: auto;
    margin: 0 0 20vh; /* your spacing value kept */
    object-fit: contain;
    justify-self: center;
}

/* ---------- Text Block ---------- */
.text-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* center within column */
    text-align: center;
}

    .text-block p {
        font-size: clamp(2vh, 2.2vh, 2.6vh);
        max-width: 62ch;
        font-weight: 700;
        line-height: 1.65;
        margin: 0 0 2vh; /* slightly tighter */
    }

/* ---------- CTA ---------- */
.cta {
    background: none;
    color: #fff;
    font-style: italic;
    text-decoration: underline;
    font-weight: 400;
    display: inline-block;
    text-align: center;
    margin-top: 1.4vh; /* tighter */
    text-shadow: -2px 2px 8px rgba(0,0,0,0.8);
    font-size: clamp(1.8vh, 1.9vh, 2.3vh);
}

    .cta:hover, .cta:focus {
        text-decoration-thickness: 2px;
    }

    .cta:focus-visible {
        outline: 0.35vh solid #fff;
        outline-offset: 0.35vh;
    }

/* ---------- Screenshots ---------- */
.screenshot-row {
    display: flex;
    gap: 6vh;
    align-items: flex-start; /* top align */
    flex-wrap: nowrap;
    justify-content: center;
    transform: none; /* no lift by default => avoids overlap at high zoom */
}

    .screenshot-row img {
        width: 26vh; /* smaller than the logo */
        height: 26vh;
        object-fit: cover;
        border-radius: 1.6vh;
        border: 0.35vh solid rgba(255,255,255,0.9);
        box-shadow: 0 1.8vh 3.4vh rgba(0,0,0,0.45);
    }

/* Desktop: two columns, no transforms */
@media (min-width: 1280px) {
    .content {
        /* left column is ~44vh, right fills remaining space safely */
        grid-template-columns: minmax(0, 44vh) minmax(0, 1fr);
        align-items: start;
        justify-items: stretch;
        text-align: center;
        column-gap: 6vh;
    }

    /* flipped layout: just swap the column order cleanly */
    .content--right {
        grid-template-columns: minmax(0, 1fr) minmax(0, 44vh);
    }

        /* Make sure each block sits in its column, first row, no extra rows created */
        .content--left .text-block,
        .content--left .screenshot-row,
        .content--right .text-block,
        .content--right .screenshot-row {
            grid-row: 1;
        }

    /* Standard pages: text left, screenshots right */
    .content--left .text-block {
        grid-column: 1;
        justify-self: center;
    }

    .content--left .screenshot-row {
        grid-column: 2;
        justify-self: end;
    }

    /* Flipped page: screenshots left, text right */
    .content--right .screenshot-row {
        grid-column: 1;
        justify-self: start;
    }

    .content--right .text-block {
        grid-column: 2;
        justify-self: center;
    }
}

/* ---------- Logo ---------- */
.logo {
    display: block;
    width: clamp(44vh, 46vh, 48vh);
    height: auto;
    margin: 0 0 20vh;
    object-fit: contain;
    justify-self: center;
}

/* ---------- Screenshots ---------- */
.screenshot-row {
    display: flex;
    gap: 6vh;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    transform: none;
    max-width: 100%; /* never overflow parent column */
    flex-shrink: 1; /* allow shrinking */
}

    .screenshot-row img {
        width: 26vh; /* base visual size */
        height: auto;
        aspect-ratio: 1 / 1; /* keep square shape */
        object-fit: cover;
        border-radius: 1.6vh;
        border: 0.35vh solid rgba(255,255,255,0.9);
        box-shadow: 0 1.8vh 3.4vh rgba(0,0,0,0.45);
        flex: 1 1 24vh; /* flex-grow and flex-shrink for scaling */
        max-width: 100%; /* never exceed container */
        min-width: 18vh; /* prevents shrinking to nothing */
        transition: transform 0.2s ease, filter 0.2s ease;
    }

        /* Optional — subtle hover pop */
        .screenshot-row img:hover {
            transform: scale(1.03);
        }

/* ---------- Mobile / Tablet Tweaks ---------- */
@media (max-width: 1279.98px) {
    .content {
        padding: 0;
    }

    .panel {
        padding: 0vh 0vh;
    }

    .screenshot-row {
        gap: 2vh;
        justify-content: center;
    }

        .screenshot-row img {
            width: 42vw;
            height: 42vw;
            max-width: 300px;
            max-height: 300px;
        }

    .logo {
        margin-bottom: 5vh;
        width: min(80vw, 36vh);
    }
}


/* ---------- About Section Layout ---------- */
.about {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* center the pair horizontally */
    align-items: center; /* center vertically */
    gap: 2vh; /* space between left and right sides */
}

/* LEFT COLUMN — portrait + socials */
.about-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vh;
    flex: 0 1 30%; /* only take up ~30% of the width */
}

/* Portrait styling */
.about-portrait {
    width: 32vh;
    height: 32vh;
    object-fit: cover;
    border-radius: 999px;
    border: 0.6vh solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 1.8vh 3.6vh rgba(0, 0, 0, 0.45);
}

/* ---------- Social Links ---------- */
.about-socials {
    display: flex;
    gap: 2vh;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

    .about-socials img {
        width: clamp(4.4vh, 6vh, 6vh);
        height: auto;
        object-fit: contain;
        display: block;
    }

    .about-socials a {
        display: inline-block;
        transition: transform 0.15s ease, filter 0.15s ease;
    }

        .about-socials a:hover,
        .about-socials a:focus-visible {
            transform: translateY(-0.6vh);
            filter: brightness(1.1);
            outline: none;
        }

/* ---------- RIGHT COLUMN — Text ---------- */
.about-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.2vh;
    flex: 0 1 30%; /* also ~30% width */
    text-shadow: -4px 4px 8px rgba(0,0,0,1);
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
}

    .about-right h1,
    .about-right h2,
    .about-blurb {
        max-width: 42ch;
        width: 100%;
        margin: 0;
    }

    .about-right h1 {
        font-size: clamp(4.4vh, 4.8vh, 5.2vh);
        line-height: 1.1;
        font-weight: 800;
    }

    .about-right h2 {
        font-size: clamp(2.2vh, 2.4vh, 2.6vh);
        opacity: .95;
        font-weight: 800;
        color: #c8c8c8;
    }

.about-blurb {
    font-size: clamp(1.6vh, 1.8vh, 2vh);
    line-height: 1.5;
    opacity: .9;
    width: 30ch;
    color: #8c8b8b;
}

/* ---------- Mobile / Tablet ---------- */
@media (max-width: 1280px) {
    .about {
        flex-direction: column;
        gap: 6vh;
        text-align: center;
    }

    .about-left,
    .about-right {
        flex: 0 1 auto;
    }
}




/* ===== Games Showcase ===== */
.game-wrap {
    width: min(92vw, 160vh);
    margin: 0 auto;
    display: grid;
    /* 33% / 67% on desktop */
    grid-template-columns: 0.33fr 0.67fr;
    align-items: center; /* vertical centering of both columns */
    justify-items: center; /* horizontal centering of column contents */
    column-gap: 6vh;
    justify-content: center;
}

/* LEFT COLUMN */
.game-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 4vh;
    width: 100%;
}

/* Logo */
.game-logo {
    /* Shrinks on narrow widths, stays big on tall/wide screens */
    width: clamp(28vh, 32vw, 50vh);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 1.2vh 2.2vh rgba(0,0,0,.55));
}

/* 16:9 video */
.game-video {
    width: clamp(28vh, 32vw, 50vh);
    max-width: 100%;
    aspect-ratio: 16/9;
    border-radius: 1.6vh;
    box-shadow: 0 1.8vh 3.4vh rgba(0,0,0,.45);
    overflow: hidden;
}

    .game-video iframe {
        width: 100%;
        height: 100%;
        display: block;
    }

/* Steam CTA */
.game-cta {
    display: flex;
    align-items: center;
    gap: 2vh;
    margin-top: 2vh;
}

.game-steam-icon {
    width: 8vh;
    height: auto;
    display: block;
}

.game-cta-text {
    font-weight: 800;
    font-size: clamp(1.8vh, 2.2vh, 2.4vh);
    line-height: 1.25;
    text-shadow: -4px 4px 8px rgba(0,0,0,1);
}

/* RIGHT COLUMN */
.game-right {
    display: grid;
    /* Allow columns to actually shrink without overflowing */
    grid-template-columns: 2fr 1fr;
    column-gap: 4vh;
    /* Center both columns vertically and keep your horizontal centering */
    align-items: center; /* was: start */
    justify-items: center;
}

/* Pitch subcolumn */
.game-pitch-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
    width: 100%;
}

/* “Gifs” (webm) — keep same width as pitch text */
.game-gif {
    width: clamp(36vh, 40vw, 56vh);
    max-width: 100%;
    border-radius: 1.6vh;
    border: .35vh solid rgba(255,255,255,.9);
    box-shadow: 0 1.8vh 3.4vh rgba(0,0,0,.45);
    display: block;
}

/* Pitch paragraph */
.game-pitch {
    max-width: clamp(36vh, 40vw, 56vh);
    width: 100%;
    font-size: clamp(1.6vh, 1.8vh, 2vh);
    line-height: 1.6;
    font-weight: 800;
    margin: 0;
    text-align: left;
    text-shadow: -4px 4px 8px rgba(0,0,0,1);
}

/* Screenshot stack */
.game-shots {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    align-items: center;
    width: 100%;
}

.game-shot {
    width: clamp(18vh, 20vw, 26vh);
    max-width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 1.6vh;
    border: .35vh solid rgba(255,255,255,.9);
    box-shadow: 0 1.8vh 3.4vh rgba(0,0,0,.45);
    display: block;
}

/* ===== Narrow / tall-narrow viewports ===== */
/* If width gets tight or aspect ratio is tall, stack cleanly */
@media (max-width: 1280px), (max-aspect-ratio: 4/5) {
    .game-wrap {
        grid-template-columns: 1fr;
        row-gap: 6vh;
        padding-top: 12vh;
        justify-items: center;
    }

    .game-right {
        grid-template-columns: 1fr;
        row-gap: 4vh;
    }

    /* Make media widths friendlier on narrow screens */
    .game-logo,
    .game-video {
        width: min(80vw, 50vh);
    }

    .game-gif {
        width: min(82vw, 50vh);
    }

    .game-pitch {
        max-width: min(82vw, 50vh);
        text-align: center;
    }

    .game-shot {
        width: min(82vw, 50vh);
    }

    .game-shots {
        padding-bottom: 4vh;
    }
}

:root {
    --header-h: clamp(56px, 6vh, 74px);
}

/* Fixed header overlay */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    z-index: 9999;
    padding: 0 clamp(14px, 2.4vw, 28px);
}

/* Left section: logo + nav inline */
.header-left {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 40px);
}

/* Logo */
.site-header .brand img {
    height: calc(var(--header-h) - 16px);
    width: auto;
    image-rendering: pixelated;
    display: block;
    transition: transform 0.15s ease;
}

.site-header .brand:hover img {
    transform: scale(1.05);
}

/* Nav links */
.main-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 32px);
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    position: relative;
    transition: opacity 0.2s ease;
}

    .nav-link:hover,
    .nav-link:focus-visible {
        opacity: 0.8;
    }

/* Dropdown container */
.has-menu {
    position: relative;
    display: flex;
    align-items: center;
}

/* The dropdown menu itself */
.menu {
    position: absolute;
    top: calc(100%); /* small 4px offset for breathing room */
    left: 50%;
    transform: translateX(-50%); /* center under GAMES text */
    display: none;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.95);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    min-width: 200px;
    z-index: 10000;
}

    /* Dropdown links */
    .menu a {
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        padding: 10px 12px;
        border-radius: 8px;
        white-space: nowrap;
        transition: background 0.15s ease;
    }

        .menu a:hover,
        .menu a:focus-visible {
            background: rgba(255, 255, 255, 0.08);
        }

/* Show menu on hover/focus */
.has-menu:hover .menu,
.has-menu:focus-within .menu {
    display: flex;
}

/* Overlay behavior (no layout offset) */
.panel {
    scroll-margin-top: 0;
}

:root {
    --header-h: clamp(56px, 6vh, 74px);
}

@media (max-width: 768px) {
    :root {
        --header-h: 64px;
    }

    body {
        padding-top: var(--header-h);
    }
}

.site-header {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    z-index: 10000;
    height: var(--header-h);
}

/* Mobile: disable hover opening and enable click-based open state */
@media (max-width: 768px) {
    /* Turn off hover menus */
    .has-menu:hover .menu {
        display: none;
    }

    /* Allow toggling via .open class */
    .has-menu .menu {
        display: none;
    }

        .has-menu .menu.open {
            display: flex;
        }

    /* Optional: make it look nicer on mobile */
    .has-menu .menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: auto;
        transform: none;
        background: rgba(0, 0, 0, 0.95);
        border-radius: 0 0 10px 10px;
        padding: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    }
}


.panel::before,
.panel::after {
    z-index: -1;
}