/* ============================================
   gamelicensor.info - Art Deco Institutional
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --gold: #C9A84C;
    --walnut: #1C1810;
    --cream: #F5F0E4;
    --muted-brass: #8B7D5E;
    --warm-ivory: #D4C9B0;
    --amber: #E8B930;
    --archive-dark: #161210;
    --rose-bronze: #B8725A;
    --text-dark: #3D3628;
    --walnut-ray: #242014;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.85;
    color: var(--text-dark);
    background-color: var(--walnut);
    overflow-x: hidden;
}

/* --- Typography --- */
.title-text {
    font-family: 'Poiret One', 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    line-height: 1.2;
}

.section-heading {
    font-family: 'Poiret One', 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    margin-bottom: 1rem;
}

.section-label {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-brass);
    display: block;
    text-align: center;
    margin-bottom: 0.75rem;
}

.subtitle {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-brass);
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Sections --- */
.section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.section--dark {
    background-color: var(--walnut);
    color: var(--warm-ivory);
}

.section--dark p {
    color: var(--warm-ivory);
}

.section--light {
    background-color: var(--cream);
    color: var(--text-dark);
}

.section--light p {
    color: var(--text-dark);
}

.section--vault {
    background-color: var(--archive-dark);
    color: var(--warm-ivory);
    min-height: 60vh;
}

/* --- Diagonal Clip Paths --- */
.diagonal-top {
    clip-path: polygon(0 8vh, 100% 0, 100% 100%, 0 100%);
    margin-top: -8vh;
    padding-top: calc(8vh + 4rem);
}

/* --- Grand Foyer --- */
#grand-foyer {
    z-index: 2;
}

.brass-border-frame {
    position: absolute;
    top: 2rem;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    border: 1px solid var(--gold);
    pointer-events: none;
    z-index: 3;
    clip-path: inset(100%);
    transition: clip-path 0.8s ease-out;
}

.brass-border-frame.visible {
    clip-path: inset(0%);
}

.sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vmax;
    height: 200vmax;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        #1C1810 0deg, #242014 2.5deg,
        #1C1810 5deg, #242014 7.5deg,
        #1C1810 10deg, #242014 12.5deg,
        #1C1810 15deg, #242014 17.5deg,
        #1C1810 20deg, #242014 22.5deg,
        #1C1810 25deg, #242014 27.5deg,
        #1C1810 30deg, #242014 32.5deg,
        #1C1810 35deg, #242014 37.5deg,
        #1C1810 40deg, #242014 42.5deg,
        #1C1810 45deg, #242014 47.5deg,
        #1C1810 50deg, #242014 52.5deg,
        #1C1810 55deg, #242014 57.5deg,
        #1C1810 60deg, #242014 62.5deg,
        #1C1810 65deg, #242014 67.5deg,
        #1C1810 70deg, #242014 72.5deg,
        #1C1810 75deg, #242014 77.5deg,
        #1C1810 80deg, #242014 82.5deg,
        #1C1810 85deg, #242014 87.5deg,
        #1C1810 90deg, #242014 92.5deg,
        #1C1810 95deg, #242014 97.5deg,
        #1C1810 100deg, #242014 102.5deg,
        #1C1810 105deg, #242014 107.5deg,
        #1C1810 110deg, #242014 112.5deg,
        #1C1810 115deg, #242014 117.5deg,
        #1C1810 120deg, #242014 122.5deg,
        #1C1810 125deg, #242014 127.5deg,
        #1C1810 130deg, #242014 132.5deg,
        #1C1810 135deg, #242014 137.5deg,
        #1C1810 140deg, #242014 142.5deg,
        #1C1810 145deg, #242014 147.5deg,
        #1C1810 150deg, #242014 152.5deg,
        #1C1810 155deg, #242014 157.5deg,
        #1C1810 160deg, #242014 162.5deg,
        #1C1810 165deg, #242014 167.5deg,
        #1C1810 170deg, #242014 172.5deg,
        #1C1810 175deg, #242014 177.5deg,
        #1C1810 180deg, #242014 182.5deg,
        #1C1810 185deg, #242014 187.5deg,
        #1C1810 190deg, #242014 192.5deg,
        #1C1810 195deg, #242014 197.5deg,
        #1C1810 200deg, #242014 202.5deg,
        #1C1810 205deg, #242014 207.5deg,
        #1C1810 210deg, #242014 212.5deg,
        #1C1810 215deg, #242014 217.5deg,
        #1C1810 220deg, #242014 222.5deg,
        #1C1810 225deg, #242014 227.5deg,
        #1C1810 230deg, #242014 232.5deg,
        #1C1810 235deg, #242014 237.5deg,
        #1C1810 240deg, #242014 242.5deg,
        #1C1810 245deg, #242014 247.5deg,
        #1C1810 250deg, #242014 252.5deg,
        #1C1810 255deg, #242014 257.5deg,
        #1C1810 260deg, #242014 262.5deg,
        #1C1810 265deg, #242014 267.5deg,
        #1C1810 270deg, #242014 272.5deg,
        #1C1810 275deg, #242014 277.5deg,
        #1C1810 280deg, #242014 282.5deg,
        #1C1810 285deg, #242014 287.5deg,
        #1C1810 290deg, #242014 292.5deg,
        #1C1810 295deg, #242014 297.5deg,
        #1C1810 300deg, #242014 302.5deg,
        #1C1810 305deg, #242014 307.5deg,
        #1C1810 310deg, #242014 312.5deg,
        #1C1810 315deg, #242014 317.5deg,
        #1C1810 320deg, #242014 322.5deg,
        #1C1810 325deg, #242014 327.5deg,
        #1C1810 330deg, #242014 332.5deg,
        #1C1810 335deg, #242014 337.5deg,
        #1C1810 340deg, #242014 342.5deg,
        #1C1810 345deg, #242014 347.5deg,
        #1C1810 350deg, #242014 352.5deg,
        #1C1810 355deg, #242014 357.5deg,
        #1C1810 360deg
    );
    opacity: 0;
    z-index: 1;
    animation: sunburstSpin 120s linear infinite;
    transition: opacity 1s ease;
}

.sunburst.visible {
    opacity: 0.35;
}

@keyframes sunburstSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.foyer-content {
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 2rem;
}

/* --- Title Letter Animation --- */
.title-text .letter {
    display: inline-block;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.title-text .letter.visible {
    opacity: 1;
    transform: scale(1);
}

.title-rule {
    width: 0;
    height: 1px;
    background-color: var(--gold);
    margin: 1.5rem auto;
    transition: width 0.4s ease;
}

.title-rule.visible {
    width: min(320px, 60vw);
}

/* --- Scroll Hint --- */
.scroll-hint {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.6s ease 2s;
}

.scroll-hint.visible {
    opacity: 1;
}

.scroll-hint__text {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-brass);
}

.scroll-hint__arrow {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* --- Section Inner --- */
.section-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
}

.section-inner--vault {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

/* --- Brass Rule --- */
.brass-rule {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 1.5rem auto 2.5rem;
    transition: width 0.6s ease;
}

.brass-rule.visible {
    width: min(200px, 40vw);
}

.brass-rule--final {
    margin-top: 2rem;
    margin-bottom: 0;
}

/* --- Content Blocks --- */
.content-block {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.content-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.content-block p {
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.content-block p:last-child {
    margin-bottom: 0;
}

/* --- Terrazzo Texture (Light Sections) --- */
.section--light {
    background-image:
        radial-gradient(circle 2px at 15% 20%, rgba(201, 168, 76, 0.07) 1px, transparent 1px),
        radial-gradient(circle 3px at 45% 60%, rgba(201, 168, 76, 0.05) 1px, transparent 1px),
        radial-gradient(circle 2px at 75% 30%, rgba(201, 168, 76, 0.06) 1px, transparent 1px),
        radial-gradient(circle 4px at 25% 80%, rgba(201, 168, 76, 0.04) 1px, transparent 1px),
        radial-gradient(circle 2px at 85% 70%, rgba(201, 168, 76, 0.07) 1px, transparent 1px),
        radial-gradient(circle 3px at 55% 10%, rgba(201, 168, 76, 0.05) 1px, transparent 1px),
        radial-gradient(circle 2px at 10% 50%, rgba(201, 168, 76, 0.06) 1px, transparent 1px),
        radial-gradient(circle 3px at 90% 40%, rgba(201, 168, 76, 0.05) 1px, transparent 1px),
        radial-gradient(circle 2px at 35% 90%, rgba(201, 168, 76, 0.07) 1px, transparent 1px),
        radial-gradient(circle 4px at 65% 45%, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
    background-size:
        200px 200px,
        300px 300px,
        250px 250px,
        350px 350px,
        180px 180px,
        270px 270px,
        220px 220px,
        310px 310px,
        240px 240px,
        280px 280px;
    background-color: var(--cream);
}

/* --- Glass Overlay (Dark Sections) --- */
.glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(201, 168, 76, 0.03) 0%,
        rgba(184, 114, 90, 0.02) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* --- Medallion Anchors --- */
.medallion-anchor {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    margin-top: -40px;
}

.medallion {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--walnut);
    position: relative;
    z-index: 11;
}

.medallion__inner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(201, 168, 76, 0.15) 0deg,
        rgba(201, 168, 76, 0.05) 15deg,
        rgba(201, 168, 76, 0.15) 30deg,
        rgba(201, 168, 76, 0.05) 45deg,
        rgba(201, 168, 76, 0.15) 60deg,
        rgba(201, 168, 76, 0.05) 75deg,
        rgba(201, 168, 76, 0.15) 90deg,
        rgba(201, 168, 76, 0.05) 105deg,
        rgba(201, 168, 76, 0.15) 120deg,
        rgba(201, 168, 76, 0.05) 135deg,
        rgba(201, 168, 76, 0.15) 150deg,
        rgba(201, 168, 76, 0.05) 165deg,
        rgba(201, 168, 76, 0.15) 180deg,
        rgba(201, 168, 76, 0.05) 195deg,
        rgba(201, 168, 76, 0.15) 210deg,
        rgba(201, 168, 76, 0.05) 225deg,
        rgba(201, 168, 76, 0.15) 240deg,
        rgba(201, 168, 76, 0.05) 255deg,
        rgba(201, 168, 76, 0.15) 270deg,
        rgba(201, 168, 76, 0.05) 285deg,
        rgba(201, 168, 76, 0.15) 300deg,
        rgba(201, 168, 76, 0.05) 315deg,
        rgba(201, 168, 76, 0.15) 330deg,
        rgba(201, 168, 76, 0.05) 345deg,
        rgba(201, 168, 76, 0.15) 360deg
    );
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 50%;
}

/* --- Compass Rose --- */
.compass-rose {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: rotate(-45deg);
    transition: opacity 0.8s ease, transform 0.8s ease-out;
}

.compass-rose.visible {
    opacity: 1;
    transform: rotate(0deg);
}

.compass-rose--final {
    margin-bottom: 2rem;
}

.compass-rose--final svg {
    animation: compassPulse 2s ease-in-out infinite alternate;
}

@keyframes compassPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* --- Vault Section --- */
.vault-border {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    pointer-events: none;
    z-index: 1;
    border: 1px solid rgba(201, 168, 76, 0.15);
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(201, 168, 76, 0.05) 20px,
            rgba(201, 168, 76, 0.05) 21px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 20px,
            rgba(201, 168, 76, 0.05) 20px,
            rgba(201, 168, 76, 0.05) 21px
        );
}

.vault-inscription {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    color: var(--muted-brass);
    text-align: center;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.vault-inscription.visible {
    opacity: 1;
}

/* --- Filigree Border Decoration --- */
.section--light .section-inner::before,
.section--light .section-inner::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(960px, 90vw);
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        var(--gold) 0px,
        var(--gold) 4px,
        transparent 4px,
        transparent 8px,
        rgba(201, 168, 76, 0.4) 8px,
        rgba(201, 168, 76, 0.4) 10px,
        transparent 10px,
        transparent 14px
    );
    opacity: 0.4;
}

.section--light .section-inner::before {
    top: 0;
}

.section--light .section-inner::after {
    bottom: 0;
}

/* --- Hover Effects --- */
.compass-rose svg:hover {
    filter: drop-shadow(0 0 6px rgba(232, 185, 48, 0.4));
    transition: filter 0.2s ease;
}

.medallion:hover {
    border-color: var(--amber);
    transition: border-color 0.2s ease;
}

.medallion:hover .medallion__inner {
    border-color: rgba(232, 185, 48, 0.5);
    transition: border-color 0.2s ease;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .brass-border-frame {
        top: 1rem;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .section-inner {
        padding: 3rem 1.5rem;
    }

    .diagonal-top {
        clip-path: polygon(0 4vh, 100% 0, 100% 100%, 0 100%);
        margin-top: -4vh;
        padding-top: calc(4vh + 3rem);
    }

    .medallion-anchor {
        margin-top: -30px;
    }

    .medallion {
        width: 60px;
        height: 60px;
    }

    .medallion__inner {
        width: 44px;
        height: 44px;
    }

    .vault-border {
        top: 1rem;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .title-text {
        font-size: clamp(1.6rem, 8vw, 2.4rem);
    }

    .section-heading {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }
}