/* ==========================================================
   GLOBAL RESET
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    overflow: hidden;

    background: #050403;
    color: #f1e8d5;

    font-family: Georgia, "Times New Roman", serif;
}



/* ==========================================================
   VARIABLES
   ========================================================== */

:root {
    --linework-logo-width: min(40vw, 400px);
    /*
     * Final-poster vertical lift.
     * Increased from 8vh to 14vh to reserve the lower portion
     * of the viewport for the upcoming navigation buttons.
     */
    --poster-shift: 14vh;
    --event-offset: 210px;
}



/* ==========================================================
   INTRO STAGE
   ========================================================== */

.intro {
    width: 100%;
    height: 100%;
}

.intro-stage {
    position: relative;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 220, 150, 0.14) 0%,
            rgba(180, 120, 60, 0.08) 25%,
            rgba(0, 0, 0, 0) 60%
        ),
        linear-gradient(
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.55)
        ),
        url("assets/arena-sand.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    animation:
        arenaAwakens
        2s
        ease-out
        forwards;
}

.intro-stage > * {
    grid-column: 1;
    grid-row: 1;
}


/* ==========================================================
   OPENING BLACK OVERLAY
   ========================================================== */

.fade-overlay {
    position: fixed;
    inset: 0;

    z-index: 1000;

    background: #000;

    pointer-events: none;

    animation:
        tunnelReveal
        0.8s
        ease-out
        forwards;
}


/* ==========================================================
   ARENA TITLE
   ========================================================== */

.arena-title {
    position: relative;
    z-index: 2;

    display: block;

    width: min(70vw, 850px);
    height: auto;

    justify-self: center;
    align-self: center;

    opacity: 0;

    filter:
        drop-shadow(0 0 18px rgba(255, 220, 150, 0.12))
        drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));

    animation:
        arena-title-sequence
        4.5s
        ease-in-out
        2s
        forwards;
}

/* ==========================================================
   HERO CIRCLES — SHARED STYLES
   ========================================================== */

.hero-circle {
    position: absolute;
    z-index: 1;

    width: 320px;
    height: auto;

    opacity: 0;

    pointer-events: none;

    filter:
        blur(4px)
        brightness(0.45)
        contrast(0.75);

    --reveal-delay: 0s;
}

.hero-circle.reveal {
    animation:
        hero-circle-sequence
        5s
        ease-out
        var(--reveal-delay)
        forwards,

        heroCircleFinalGlow
        4.5s
        ease-in-out
        18.5s
        forwards;
}


/* ==========================================================
   HERO CIRCLES — INDIVIDUAL PLACEMENT
   ========================================================== */

.hero1 {
    top: 20%;
    left: 5%;

    width: 250px;

    --reveal-delay: 1.4s;
}

.hero2 {
    right: 25%;
    bottom: 20%;

    width: 380px;

    --reveal-delay: 2.4s;
}

.hero3 {
    top: 5%;
    right: 22%;

    width: 250px;

    --reveal-delay: 3.4s;
}

.hero4 {
    top: 4%;
    left: 18%;

    --reveal-delay: 4.4s;
}

.hero5 {
    right: 6%;
    top: 21%;

    width: 300px;

    --reveal-delay: 5.4s;
}

.hero6 {
    bottom: 23%;
    left: 8%;

    width: 290px;

    --reveal-delay: 6.4s;
}

.hero7 {
    bottom:8%;
    right: 7%;

    width: 250px;

    --reveal-delay: 7.4s;
}

.hero8 {
    bottom: 6%;
    left: 26%;

    width: 380px;

    --reveal-delay: 8.4s;
}


/* ==========================================================
   BACKGROUND LOGO LINEWORK
   ========================================================== */

.background-logo {
    position: absolute;
    top: 35%;
    left: 50%;

    z-index: 1;

    width: var(--linework-logo-width);
    height: auto;

    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(0.98);

    filter:
        blur(4px)
        brightness(0.45)
        contrast(0.75);

    animation:
        backgroundLogoReveal
        5s
        ease-out
        9.4s
        forwards,

        backgroundLogoFade
        1s
        ease-out
        19s
        forwards;
}

/* ==========================================================
   MONOLOGUE CONTAINER
   ========================================================== */

.monologue {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: min(80vw, 760px);

    padding: 2rem;

    color: #f2ead9;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.03em;

    text-align: left;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 14px rgba(0, 0, 0, 0.65);

    opacity: 1;

    transform: translate(-50%, -50%);

    animation:
        monologueFade
        1s
        ease-out
        20s
        forwards;
}

/* ==========================================================
   MONOLOGUE PARAGRAPHS
   ========================================================== */

.monologue p {
    margin: 0;

    color: inherit;

    opacity: 0;

    transform: translateY(8px);

    filter: blur(2px);

    animation:
        lineReveal
        1.2s
        ease-out
        forwards;
}

.monologue p + p {
    margin-top: 0.45rem;
}


/* ==========================================================
   SPECIAL MONOLOGUE LINES
   ========================================================== */

.monologue .intro-line,
.monologue .final-line {
    color: #d8bb73;

    font-family: "Cinzel", serif;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    text-shadow:
        0 0 10px rgba(216, 187, 115, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.85);
}

.monologue .intro-line {
    font-size: 1.15em;
}

.monologue .final-line {
    margin-top: 0.8rem;

    font-size: 1.15em;
    font-style: normal;

    letter-spacing: 0.08em;
}


/* ==========================================================
   MONOLOGUE TIMING
   ========================================================== */

.monologue p:nth-child(1) {
    animation-delay: 6s;
}

.monologue p:nth-child(2) {
    animation-delay: 7s;
}

.monologue p:nth-child(3) {
    animation-delay: 9s;
}

.monologue p:nth-child(4) {
    animation-delay: 12.5s;
}

.monologue p:nth-child(5) {
    animation-delay: 15.5s;
}

.monologue p:nth-child(6) {
    animation-delay: 18.5s;
}

/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes arenaAwakens {
    from {
        opacity: 0;
        transform: scale(1.02);
        filter: brightness(0.55);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes tunnelReveal {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes arena-title-sequence {
    0% {
        opacity: 0;

        transform: scale(1.04);

        filter:
            blur(6px)
            drop-shadow(0 0 18px rgba(255, 220, 150, 0.12));
    }

    20% {
        opacity: 1;

        transform: scale(1);

        filter:
            blur(0)
            drop-shadow(0 0 18px rgba(255, 220, 150, 0.12));
    }

    70% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.985);
    }
}

@keyframes hero-circle-sequence {
    from {
        opacity: 0;

        transform: scale(0.98);

        filter:
            blur(4px)
            brightness(0.45)
            contrast(0.75);
    }

    to {
        opacity: 0.14;

        transform: scale(1);

        filter:
            blur(2px)
            brightness(0.6)
            contrast(0.85);
    }
}

@keyframes backgroundLogoReveal {
    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.98);

        filter:
            blur(4px)
            brightness(0.45)
            contrast(0.75);
    }

    60% {
        opacity: 0.14;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter:
            blur(2px)
            brightness(0.6)
            contrast(0.85);
    }

    100% {
        opacity: 0.14;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter:
            blur(2px)
            brightness(0.6)
            contrast(0.85);
    }
}

@keyframes backgroundLogoFade {
    from {
        opacity: 0.14;
    }

    to {
        opacity: 0;
    }
}

@keyframes lineReveal {
    from {
        opacity: 0;

        transform: translateY(8px);

        filter: blur(2px);
    }

    to {
        opacity: 1;

        transform: translateY(0);

        filter: blur(0);
    }
}

@keyframes monologueFade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes heroCircleFinalGlow {
    0% {
        opacity: 0.14;

        transform: scale(1);

        filter:
            blur(2px)
            brightness(0.6)
            contrast(0.85);
    }

    15% {
        opacity: 0.28;

        transform: scale(1);

        filter:
            blur(1px)
            brightness(0.72)
            sepia(0.35)
            saturate(1.35)
            hue-rotate(-10deg)
            drop-shadow(0 0 6px rgba(255, 175, 70, 0.32))
            drop-shadow(0 0 14px rgba(214, 126, 32, 0.25));
    }

    40% {
        opacity: 0.45;

        transform: scale(1);

        filter:
            blur(0.5px)
            brightness(0.86)
            sepia(0.45)
            saturate(1.55)
            hue-rotate(-12deg)
            drop-shadow(0 0 8px rgba(255, 182, 78, 0.42))
            drop-shadow(0 0 20px rgba(204, 116, 26, 0.34));
    }

    65% {
        opacity: 0.65;

        transform: scale(1);

        filter:
            blur(0)
            brightness(1)
            sepia(0.55)
            saturate(1.8)
            hue-rotate(-15deg)
            drop-shadow(0 0 10px rgba(255, 190, 90, 0.55))
            drop-shadow(0 0 26px rgba(194, 108, 22, 0.45));
    }

    /*
     * Reverse the visual language of finalHeroClusterReveal:
     * the circles brighten, soften and expand as though their
     * edges are loosening into illuminated dust.
     */
    78% {
        opacity: 0.46;

        transform: scale(1.012);

        filter:
            brightness(1.2)
            contrast(0.9)
            blur(1.5px)
            drop-shadow(0 0 13px rgba(255, 198, 110, 0.38));
    }

    90% {
        opacity: 0.2;

        transform: scale(1.028);

        filter:
            brightness(1.55)
            contrast(0.72)
            blur(4px)
            drop-shadow(0 0 18px rgba(255, 214, 145, 0.28));
    }

    100% {
        opacity: 0;

        transform: scale(1.045);

        filter:
            brightness(2)
            contrast(0.55)
            blur(10px)
            drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
}

@keyframes logoLineworkIgnite {
    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.98);
    }

    65% {
        opacity: 0.9;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.015);
    }
}

@keyframes logoWhiteout {
    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.2);
    }

    35% {
        opacity: 0.95;

        transform:
            translate(-50%, -50%)
            scale(2.8);
    }

    60% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(5);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(7);
    }
}

@keyframes fullLogoReveal {
    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.985);
    }

    35% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

@keyframes finalHeroClusterReveal {
    from {
    opacity: 0;

    filter:
        brightness(2)
        blur(10px);

    transform:
        translate(-50%, calc(-50% - 18px))
        scale(1.03);
}

to {
    opacity: 1;

    filter:
        brightness(1)
        blur(0);

    transform:
        translate(-50%, calc(-50% - 18px))
        scale(1);
}
}

/* ==========================================================
   FINAL POSTER COMPOSITION
   ========================================================== */

.final-poster {
    position: absolute;
    top: 58%;
    left: 50%;
    z-index: 7;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(94vw, 1240px);

    transform: translate(-50%, -50%);
}

.poster-logo-area {
    position: relative;
    width: var(--linework-logo-width);
    height: 310px;
    pointer-events: none;
}

.poster-logo-area img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    transform: translate(-50%, -50%);
}

.poster-logo-full {
    z-index: 4;
    width: 125%;
    opacity: 0;
    animation: fullLogoReveal 3s ease-out 21.2s forwards;
}

.poster-logo-linework {
    z-index: 5;
    width: 100%;
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 4px rgba(255, 245, 210, 0.25));
    animation: logoLineworkIgnite 3.2s ease-in 18.5s forwards;
}

.poster-hero-cluster {
    z-index: 2;
    width: min(70vw, 700px);
    opacity: 0;
    filter: blur(4px) brightness(0.7);
    animation: finalHeroClusterReveal 1.8s ease-out 22.3s forwards;
}

.poster-logo-flare {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: 25%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background: #fff;
    transform: translate(-50%, -50%) scale(0.2);
    filter: blur(22px);
    mix-blend-mode: screen;
    animation: logoWhiteout 2s ease-in-out 20.2s forwards;
}

/* ==========================================================
   THREE-LAYER BUTTON COMPONENT
   ========================================================== */

.menu-button {
    position: relative;
    display: block;
    width: clamp(245px, 20vw, 355px);
    aspect-ratio: 3.15 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    text-decoration: none;
}

.menu-button img {
    position: absolute;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

/* Plaque remains the full size of the button container */
.menu-button__frame {
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;
}

/* Colored stained-glass circle */
.menu-button__medallion {
    top: -32%;
    left: 50%;
    z-index: 2;

    width: 32%;
    height: auto;

    transform: translateX(-50%);
}

/* Gold symbol layered over the medallion */
.menu-button__icon {
    top: -10%;
    left: 50%;
    z-index: 3;

    width: 17%;
    height: auto;

    transform: translateX(-50%);
}

/* ==========================================================
   INDIVIDUAL SIDE-BUTTON ICON ADJUSTMENTS
   ========================================================== */

.menu-button--rules .menu-button__icon {
    top: -8%;
    width: 16%;
    left: 49%
}

.menu-button--directions .menu-button__icon {
    top: -8%;
    width: 18%;
}

.menu-button--extralife .menu-button__icon {
    top: -7.5%;
    width: 18%;
    left: 51%;
}

.menu-button--spoils .menu-button__icon {
    top: -8%;
    width: 12%;
}

.menu-button--register {
    z-index: 8;
    width: clamp(320px, 27vw, 480px);
    margin-top: -20px;
    margin-bottom: -2px;
    animation: buttonReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 27.15s both;
}

.menu-button--register .menu-button__medallion {
    top: -22%;
    width: 24%;
}

.menu-button--register .menu-button__icon {
    top: -15.5%;
    width: 19%;
}

.poster-content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(245px, 330px) minmax(430px, 480px) minmax(245px, 330px);
    align-items: center;
    justify-content: center;
    width: 100%;
    column-gap: clamp(8px, 1.4vw, 22px);
}

.poster-button-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

.poster-button-column--left { align-items: flex-end; }
.poster-button-column--right { align-items: flex-start; }

.menu-button--rules,
.menu-button--extralife {
    animation: buttonReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 27.45s both;
}

.menu-button--directions,
.menu-button--spoils {
    animation: buttonReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 27.7s both;
}

.menu-button--contact {
    position: absolute;
    left: clamp(18px, 4vw, 40px);
    bottom: clamp(10px, 5vh, 24px);
    z-index: 9;
    width: clamp(185px, 15vw, 265px);
    animation: buttonReveal 0.75s ease-out 28s both;
}

.menu-button--contact .menu-button__medallion {
    top: -33%;
    width: 28%;
}

.menu-button--contact .menu-button__icon {
    top: -16%;
    width: 16%;
}

/* ==========================================================
   EVENT INFORMATION
   ========================================================== */

.event-info {
    position: relative;
    z-index: 6;
    width: 100%;
    padding: 12px 8px 8px;
    text-align: center;
    isolation: isolate;
}

.event-info::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 135%;
    height: 145%;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(20, 13, 8, 0.84) 28%,
        rgba(34, 21, 12, 0.60) 52%,
        rgba(18, 10, 6, 0.30) 72%,
        transparent 100%
    );
    transform: translate(-50%, -50%) scale(0.68);
    filter: blur(48px);
    pointer-events: none;
    animation: posterCloudBloom 1.35s cubic-bezier(0.18, 0.84, 0.28, 1) 24.4s forwards;
}

.event-game,
.event-title,
.event-date,
.event-time,
.event-location,
.event-cost,
.event-charity {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    filter: blur(3px);
}

.event-game {
    margin: 0 0 0.3rem;
    color: #d8bb73;
    font-family: "Cinzel", serif;
    font-size: clamp(1rem, 1.55vw, 1.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    text-shadow: 0 0 3px #000, 0 0 8px #000, 0 0 14px rgba(0, 0, 0, 0.95);
    animation: eventLineReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 25.05s both;
}

.event-title {
    margin: 0 0 0.55rem;
    color: #f5f2ea;
    font-family: "Cinzel", serif;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 3px #000, 0 0 8px #000, 0 0 14px rgba(0, 0, 0, 0.95),
        3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000,
        3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000;
    animation: eventLineReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 25.35s both;
}

.event-details {
    color: #ece7dc;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 0 3px #000, 0 0 8px #000, 0 0 14px rgba(0, 0, 0, 0.95),
        3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000,
        3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000;
}

.event-details p { margin: 0; }
.event-details p + p { margin-top: 0.35rem; }
.event-date { animation: eventLineReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 25.65s both; }
.event-time { animation: eventLineReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 25.95s both; }
.event-location {
    margin-top: 0.55rem !important;
    animation: eventLineReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 26.25s both;
}
.event-cost {
    margin-top: 0.55rem !important;
    color: #f0d489;
    font-weight: 600;
    animation: eventLineReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 26.55s both;
}
.event-charity {
    margin-top: 0.6rem !important;
    color: #d8bb73;
    font-family: "Cinzel", serif;
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation:
        eventLineReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 26.85s both,
        charityCandleShimmer 10s ease-in-out 29s infinite;
}

/* ==========================================================
   FINAL POSTER KEYFRAMES
   ========================================================== */

@keyframes posterCloudBloom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.68);
        filter: blur(76px);
    }
    60% { opacity: 0.92; }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(48px);
    }
}

@keyframes eventLineReveal {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        filter: blur(3px);
    }
    1% { visibility: visible; }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes buttonReveal {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        filter: blur(3px);
    }
    1% { visibility: visible; }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        filter: blur(0);
        pointer-events: auto;
    }
}

@keyframes charityCandleShimmer {
    0%, 78%, 100% { filter: brightness(1); }
    88% { filter: brightness(1.06); }
}

/* ==========================================================
   RESPONSIVE LAYOUT
   ========================================================== */

@media (max-height: 820px) and (min-width: 901px) {
    .final-poster {
        top: 42%;
        transform: translate(-50%, -50%) scale(0.86);
    }
}

@media (max-width: 900px) {
    body { overflow-y: auto; }

    .intro,
    .intro-stage {
        min-height: 100vh;
    }

    .final-poster {
        top: 48%;
        width: 96vw;
        transform: translate(-50%, -50%) scale(0.84);
    }

    .poster-logo-area {
        width: min(68vw, 400px);
        height: 285px;
    }

    .poster-content {
        grid-template-columns: minmax(190px, 0.9fr) minmax(330px, 1.2fr) minmax(190px, 0.9fr);
        column-gap: 4px;
    }

    .menu-button { width: min(29vw, 250px); }
    .menu-button--register { width: min(58vw, 420px); }

    .event-game {
        font-size: clamp(0.88rem, 2.4vw, 1.05rem);
        letter-spacing: 0.22em;
        text-indent: 0.22em;
    }
    .event-title {
        font-size: clamp(1.05rem, 3vw, 1.35rem);
        letter-spacing: 0.08em;
    }
    .event-details {
        font-size: clamp(1rem, 2.5vw, 1.2rem);
        line-height: 1.2;
    }
}

@media (max-width: 700px) {
    .arena-title { width: 86vw; }

    .monologue {
        width: 92vw;
        padding: 2rem 6vw;
        font-size: clamp(1.12rem, 4.8vw, 1.5rem);
    }

    .hero-circle { width: 210px; }
    .hero2, .hero8 { width: 250px; }
    .hero5, .hero6 { width: 220px; }

    .final-poster {
        top: 50%;
        width: 118vw;
        transform: translate(-50%, -50%) scale(0.67);
    }

    .poster-content {
        grid-template-columns: 250px 430px 250px;
        column-gap: 8px;
    }

    .menu-button { width: 245px; }
    .menu-button--register { width: 420px; }

    .menu-button--contact {
        left: 12px;
        bottom: 12px;
        width: min(38vw, 210px);
    }
}
/* =========================================================
   SKIP INTRO BUTTON
   ========================================================= */

.skip-intro {
  position: fixed;
  right: 28px;
  bottom: 22px;
  z-index: 1000;

  padding: 6px 0;

  border: none;
  background: transparent;

  color: rgba(235, 214, 164, 0.48);
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;

  cursor: pointer;

  opacity: 0;
  animation: skipButtonReveal 0.8s ease 2s forwards;

  transition:
    color 0.25s ease,
    opacity 0.25s ease,
    text-shadow 0.25s ease;
}

.skip-intro:hover,
.skip-intro:focus-visible {
  color: rgba(255, 232, 177, 0.95);
  text-shadow: 0 0 10px rgba(225, 175, 80, 0.45);
}

.skip-intro:focus-visible {
  outline: 1px solid rgba(255, 232, 177, 0.45);
  outline-offset: 6px;
}

@keyframes skipButtonReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
   SKIPPED INTRO — FINAL LANDING STATE
   ========================================================= */

body.intro-skipped *,
body.intro-skipped *::before,
body.intro-skipped *::after {
  animation-delay: 0s !important;
  animation-duration: 0.01s !important;
  transition-duration: 0.01s !important;
}

/* Hide all intro-only elements */
body.intro-skipped .arena-title,
body.intro-skipped .monologue,
body.intro-skipped .background-logo,
body.intro-skipped .hero-circle,
body.intro-skipped .logo-linework,
body.intro-skipped .fade-overlay {
  display: none !important;
}

/* Show final poster elements immediately */
body.intro-skipped .logo-full,
body.intro-skipped .hero-cluster,
body.intro-skipped .event-info,
body.intro-skipped .button-layer,
body.intro-skipped .poster-buttons {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Remove the button once the intro is skipped */
body.intro-skipped .skip-intro {
  animation: none !important;
  opacity: 0 !important;
  pointer-events: none;
}
.skip-intro {
    animation:
        skipButtonReveal 0.8s ease 2s forwards,
        skipButtonHide 1s ease 25s forwards;
}

@keyframes skipButtonHide {
    to {
        opacity: 0;
        pointer-events: none;
    }
}