/* ============================================
   polytical.club - Surrealist Parliamentary Chamber
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --parchment-fog: #F4EDE4;
    --deep-chamber: #1E1A2E;
    --mace-gold: #C5A55A;
    --ink-parliament: #2C2439;
    --vellum-white: #F0EBE1;
    --dispatch-red: #8E3B46;
    --cloud-lilac: #B8A9C9;
    --iron-grate: #6B6178;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Commissioner', 'Segoe UI', sans-serif;
    --font-accent: 'Italiana', Georgia, serif;
}

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

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.02em;
    color: var(--ink-parliament);
    background: var(--parchment-fog);
    overflow-x: hidden;
}

/* --- Chambers (General) --- */
.chamber {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    scroll-snap-align: start;
}

.chamber-light {
    background: var(--parchment-fog);
    color: var(--ink-parliament);
}

.chamber-dark {
    background: var(--deep-chamber);
    color: var(--vellum-white);
}

/* --- Fixed Wordmark --- */
#wordmark {
    position: fixed;
    top: 20px;
    left: 24px;
    font-family: var(--font-accent);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--iron-grate);
    z-index: 100;
    mix-blend-mode: difference;
    filter: invert(0);
    transition: color 0.4s ease;
}

/* --- Chamber Navigation --- */
#chamber-nav {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 100;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--mace-gold);
    background: transparent;
    cursor: pointer;
    position: relative;
    display: block;
    transition: background 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
}

.nav-dot.active {
    background: var(--dispatch-red);
    border-color: var(--dispatch-red);
}

.nav-numeral {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-accent);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--iron-grate);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nav-dot:hover .nav-numeral {
    opacity: 1;
}

/* --- Seal Watermark --- */
.seal-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vmin;
    height: 60vmin;
    opacity: 0.04;
    pointer-events: none;
    animation: seal-rotate 120s linear infinite;
    z-index: 0;
}

.seal-dark {
    opacity: 0.04;
}

.seal-visible {
    opacity: 0.15;
}

.seal-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px double var(--mace-gold);
}

.seal-inner {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 3px ridge var(--mace-gold);
}

.seal-letter {
    position: absolute;
    font-family: var(--font-accent);
    font-size: 3vmin;
    color: var(--mace-gold);
    left: 50%;
    transform: translateX(-50%);
}

.seal-p {
    top: 5%;
}

.seal-c {
    bottom: 5%;
}

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

/* --- Floating Ballots --- */
#ballots-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.ballot {
    position: absolute;
    width: 40px;
    height: 56px;
    clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%);
    border: 1px solid var(--mace-gold);
    background: transparent;
    animation: ballot-drift linear infinite;
}

.ballot::before,
.ballot::after {
    content: '';
    position: absolute;
    background: var(--mace-gold);
    opacity: 0.5;
}

.ballot::before {
    width: 8px;
    height: 1.5px;
    top: 55%;
    left: 30%;
    transform: rotate(45deg);
}

.ballot::after {
    width: 14px;
    height: 1.5px;
    top: 58%;
    left: 35%;
    transform: rotate(-30deg);
}

@keyframes ballot-drift {
    0% {
        transform: translateY(110vh) rotate(0deg);
    }
    100% {
        transform: translateY(-120px) rotate(25deg);
    }
}

/* --- Chandelier Divider --- */
.chandelier-divider {
    position: relative;
    height: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

.chandelier {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
    animation: chandelier-swing 4s ease-in-out infinite alternate;
}

.chandelier-stem {
    width: 1px;
    height: 80px;
    background: var(--mace-gold);
    margin: 0 auto;
}

.chandelier-branch {
    position: absolute;
    height: 1px;
    background: var(--mace-gold);
    left: 50%;
}

.chandelier-branch .chandelier-light {
    position: absolute;
    right: -3px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mace-gold);
    animation: light-pulse 3s ease-in-out infinite;
}

.branch-1 { top: 20px; width: 30px; transform: translateX(-100%); }
.branch-2 { top: 20px; width: 30px; transform: translateX(0); }
.branch-2 .chandelier-light { right: auto; left: -3px; }
.branch-3 { top: 35px; width: 40px; transform: translateX(-100%); }
.branch-4 { top: 35px; width: 40px; transform: translateX(0); }
.branch-4 .chandelier-light { right: auto; left: -3px; }
.branch-5 { top: 50px; width: 25px; transform: translateX(-100%); }
.branch-6 { top: 50px; width: 25px; transform: translateX(0); }
.branch-6 .chandelier-light { right: auto; left: -3px; }
.branch-7 { top: 65px; width: 35px; transform: translateX(-50%); }
.branch-7 .chandelier-light { right: auto; left: 50%; transform: translateX(-50%); top: -3px; }

@keyframes chandelier-swing {
    0% { transform: translateX(-50%) rotate(-2deg); }
    100% { transform: translateX(-50%) rotate(2deg); }
}

@keyframes light-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* --- Impossible Columns --- */
.impossible-column {
    position: fixed;
    bottom: 0;
    width: 28px;
    height: 100vh;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        var(--mace-gold) 0%,
        rgba(197, 165, 90, 0.3) 30%,
        rgba(197, 165, 90, 0.05) 60%,
        transparent 100%
    );
    opacity: 0.15;
}

.impossible-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    border-radius: 50% 50% 0 0;
    background: var(--mace-gold);
    opacity: 0.3;
}

#architecture-column-left {
    left: 0;
}

#architecture-column-right {
    right: 0;
}

/* ===========================================
   CHAMBER 1: THE ROTUNDA
   =========================================== */

.rotunda-layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas:
        ".     .     hex1  hex1  .     .    "
        "hex6  hex6  .     .     hex2  hex2 "
        "hex6  hex6  cntr  cntr  hex2  hex2 "
        "hex5  hex5  cntr  cntr  hex3  hex3 "
        "hex5  hex5  .     .     hex3  hex3 "
        ".     .     hex4  hex4  .     .    ";
    padding: 2vh 4vw;
    z-index: 1;
}

.rotunda-center {
    grid-area: cntr;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
}

.domain-name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 8rem);
    font-weight: 600;
    line-height: 0.9;
    color: var(--ink-parliament);
    opacity: 0;
    animation: domain-fade-in 1200ms ease-out 300ms forwards;
}

.domain-club {
    font-family: var(--font-accent);
    font-size: clamp(1rem, 2.5vw, 2rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--mace-gold);
    opacity: 0;
    animation: domain-fade-in 1200ms ease-out 500ms forwards;
}

@keyframes domain-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hexagonal blocks */
.hex-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5vw;
    opacity: 0;
    z-index: 1;
}

.hex-block h3 {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    font-weight: 600;
    margin-bottom: 0.5em;
    color: var(--mace-gold);
}

.hex-block p {
    font-size: clamp(0.7rem, 1vw, 0.88rem);
    line-height: 1.55;
    color: var(--ink-parliament);
}

.hex-1 {
    grid-area: hex1;
    text-align: center;
    animation: hex-slide-in 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 400ms forwards;
    transform: translateY(-60px);
}

.hex-2 {
    grid-area: hex2;
    animation: hex-slide-in-right 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 520ms forwards;
    transform: translateX(60px);
}

.hex-3 {
    grid-area: hex3;
    animation: hex-slide-in-right 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 640ms forwards;
    transform: translateX(60px);
}

.hex-4 {
    grid-area: hex4;
    text-align: center;
    animation: hex-slide-in-bottom 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 760ms forwards;
    transform: translateY(60px);
}

.hex-5 {
    grid-area: hex5;
    animation: hex-slide-in-left 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 880ms forwards;
    transform: translateX(-60px);
}

.hex-6 {
    grid-area: hex6;
    animation: hex-slide-in-left 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1000ms forwards;
    transform: translateX(-60px);
}

@keyframes hex-slide-in {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes hex-slide-in-right {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes hex-slide-in-bottom {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes hex-slide-in-left {
    to { opacity: 1; transform: translateX(0); }
}

/* ===========================================
   CHAMBER 2: THE INVERTED HALL
   =========================================== */

.inverted-hall {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6vh 8vw;
    transform: rotate(180deg);
    transition: transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1;
    position: relative;
}

.inverted-hall.flipped {
    transform: rotate(0deg);
}

.chamber-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 3rem);
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--vellum-white);
    text-align: center;
}

.inverted-content {
    max-width: 900px;
    width: 100%;
}

.inverted-pullquote {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    font-weight: 300;
    font-style: italic;
    text-align: center;
    color: var(--cloud-lilac);
    margin-bottom: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--mace-gold);
    border-bottom: 1px solid var(--mace-gold);
}

.inverted-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
}

.inverted-col h3 {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    font-weight: 600;
    color: var(--mace-gold);
    margin-bottom: 1rem;
}

.inverted-col p {
    color: var(--vellum-white);
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    line-height: 1.72;
}

/* Rotate Control Button */
#rotate-control {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--mace-gold);
    background: transparent;
    color: var(--mace-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.3s ease, transform 0.3s ease;
}

#rotate-control:hover {
    background: rgba(197, 165, 90, 0.15);
}

#rotate-control svg {
    width: 24px;
    height: 24px;
}

/* ===========================================
   CHAMBER 3: THE GALLERY OF PERSPECTIVES
   =========================================== */

#chamber-3 {
    scroll-snap-align: start;
}

.gallery-title {
    position: absolute;
    top: 3vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 3rem);
    font-weight: 600;
    color: var(--ink-parliament);
    z-index: 5;
    white-space: nowrap;
}

.gallery-scroll {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.gallery-scroll::-webkit-scrollbar {
    height: 4px;
}

.gallery-scroll::-webkit-scrollbar-track {
    background: var(--parchment-fog);
}

.gallery-scroll::-webkit-scrollbar-thumb {
    background: var(--mace-gold);
    border-radius: 2px;
}

.gallery-panel {
    flex: 0 0 80vw;
    height: 100vh;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vh 6vw;
    perspective: 1200px;
}

.panel-light {
    background: var(--parchment-fog);
    color: var(--ink-parliament);
}

.panel-dark {
    background: var(--deep-chamber);
    color: var(--vellum-white);
}

.panel-inner {
    max-width: 560px;
    text-align: center;
    transition: transform 0.6s ease;
}

.panel-1 .panel-inner { transform: rotateY(0deg); }
.panel-2 .panel-inner { transform: rotateY(-15deg); }
.panel-3 .panel-inner { transform: rotateY(15deg); }
.panel-4 .panel-inner { transform: rotateY(-30deg); }
.panel-5 .panel-inner { transform: rotateY(30deg); }

.panel-inner h3 {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--mace-gold);
}

.panel-statement {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--mace-gold);
}

.panel-light .panel-statement { color: var(--ink-parliament); }
.panel-dark .panel-statement { color: var(--cloud-lilac); }

.panel-inner p:last-child {
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    line-height: 1.72;
}

/* Typography scales inversely with rotation */
.panel-4 .panel-inner p:last-child,
.panel-5 .panel-inner p:last-child {
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
}

.panel-4 .panel-statement,
.panel-5 .panel-statement {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
}

/* ===========================================
   CHAMBER 4: THE READING ROOM
   =========================================== */

.chamber-reading {
    overflow-y: auto;
    scroll-snap-align: start;
}

.reading-room {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: 8vh 2rem 10vh;
    min-height: 100vh;
    box-shadow: inset 0 0 120px rgba(197, 165, 90, 0.08);
    z-index: 1;
}

.reading-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 3rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--ink-parliament);
    opacity: 0;
    animation: reading-fade 1200ms ease-out forwards;
}

.reading-content {
    opacity: 0;
    animation: reading-fade 1200ms ease-out 300ms forwards;
}

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

.reading-pullquote {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.85;
    color: var(--iron-grate);
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--mace-gold);
    border-bottom: 1px solid var(--mace-gold);
}

.reading-content p {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.85;
    margin-bottom: 1.5rem;
    color: var(--ink-parliament);
}

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

/* ===========================================
   CHAMBER 5: THE MEMBERS' REGISTER
   =========================================== */

.chamber-register {
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-content {
    text-align: center;
    z-index: 1;
    position: relative;
}

.register-name {
    font-family: var(--font-accent);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--vellum-white);
    display: block;
    margin-bottom: 1.5rem;
}

.register-motto {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    color: var(--cloud-lilac);
    margin-bottom: 2rem;
}

.register-dots {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.register-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mace-gold);
}

/* ===========================================
   HORIZONTAL SPLIT LINE
   =========================================== */

.chamber::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--mace-gold);
    opacity: 0.3;
    z-index: 10;
}

.chamber::before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(
        to bottom,
        rgba(244, 237, 228, 0.3) 0%,
        transparent 40%,
        transparent 60%,
        rgba(244, 237, 228, 0.3) 100%
    );
    z-index: 9;
    pointer-events: none;
}

.chamber-dark::before {
    background: linear-gradient(
        to bottom,
        rgba(30, 26, 46, 0.5) 0%,
        transparent 40%,
        transparent 60%,
        rgba(30, 26, 46, 0.5) 100%
    );
}

/* Last chamber has no divider */
.chamber-register::after,
.chamber-register::before {
    display: none;
}

/* ===========================================
   STAIRCASE DECORATION (CSS-only impossible architecture)
   =========================================== */

.chamber-light::after {
    opacity: 0.2;
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

@media (max-width: 768px) {
    .rotunda-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 3vh 5vw;
        overflow-y: auto;
    }

    .rotunda-center {
        margin: 2vh 0;
    }

    .hex-block {
        width: 100%;
        max-width: 400px;
        padding: 1rem;
        text-align: center;
    }

    .inverted-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gallery-panel {
        flex: 0 0 90vw;
    }

    #chamber-nav {
        right: 12px;
        gap: 14px;
    }

    .nav-dot {
        width: 10px;
        height: 10px;
    }

    .impossible-column {
        display: none;
    }
}

@media (max-width: 480px) {
    .domain-name {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .domain-club {
        font-size: clamp(0.8rem, 4vw, 1.2rem);
    }

    .hex-block p {
        font-size: 0.78rem;
    }

    .reading-room {
        padding: 6vh 1.2rem 8vh;
    }

    .gallery-panel {
        flex: 0 0 95vw;
        padding: 10vh 4vw;
    }
}