/* ============================================
   political.bar — Scandinavian Celestial Almanac
   ============================================ */

/* CSS Custom Properties */
:root {
    --bg-primary: #f5efe4;
    --bg-warm: #efe5d4;
    --text-primary: #3d3529;
    --text-secondary: #7a6b55;
    --accent-gold: #c4a55a;
    --accent-copper: #b8a88a;
    --highlight-amber: #d4a843;
    --deep-bg: #2e2820;

    --offset-left-near: 8vw;
    --offset-left-mid: 22vw;
    --offset-right-mid: 55vw;
    --offset-right-far: 68vw;

    --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    position: relative;
}

/* Paper Grain Overlay */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ============================================
   SECTION 1: Observatory Entrance
   ============================================ */
.observatory-entrance {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 5vw;
}

.hero-star {
    position: absolute;
    top: 12vh;
    right: 18vw;
    animation: rotate 60s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.title-block {
    margin-left: 30%;
    margin-top: -10vh;
}

.site-title {
    font-family: 'Special Elite', cursive;
    font-size: clamp(2.8rem, 8vw, 7rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.08;
    color: var(--text-primary);
    white-space: nowrap;
}

.cursor {
    display: inline-block;
    color: var(--text-primary);
    animation: blink 530ms steps(1) infinite;
    font-weight: 400;
}

.cursor.fade-out {
    animation: blink 530ms steps(1) 3, cursorFade 1.2s ease-out 1.59s forwards;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes cursorFade {
    to { opacity: 0; }
}

.subtitle {
    margin-top: 1.5rem;
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.8s var(--ease-gentle);
    letter-spacing: 0.005em;
    line-height: 1.75;
}

.subtitle.visible {
    opacity: 1;
}

/* Decorative stars in entrance */
.deco-star {
    position: absolute;
}

.deco-star-1 {
    top: 22vh;
    left: 12vw;
}

.deco-star-2 {
    bottom: 28vh;
    right: 25vw;
}

.deco-star-3 {
    top: 65vh;
    left: 72vw;
}

/* ============================================
   Constellation Layer
   ============================================ */
.constellation-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.constellation-line {
    transition: stroke-dashoffset 1.8s var(--ease-gentle);
}

/* ============================================
   SECTION 2: Star Chart Zone
   ============================================ */
.star-chart-zone {
    position: relative;
    z-index: 2;
    padding-bottom: 10vh;
}

.entry {
    position: relative;
    padding: 2rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-gentle), transform 0.8s var(--ease-gentle);
}

.entry.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Asymmetric positioning */
.entry-left-near {
    margin-left: var(--offset-left-near);
    max-width: 55%;
}

.entry-left-mid {
    margin-left: var(--offset-left-mid);
    max-width: 50%;
}

.entry-right-mid {
    margin-left: var(--offset-right-mid);
    max-width: 38%;
}

.entry-right-far {
    margin-left: var(--offset-right-far);
    max-width: 28%;
}

/* Large spacing between entries */
.entry + .compass-rose-divider,
.entry + .entry {
    margin-top: 15vh;
}

.compass-rose-divider + .entry {
    margin-top: 15vh;
}

.entry-star {
    margin-bottom: 1rem;
}

.entry-star svg:hover {
    transform: scale(1.15);
    opacity: 1;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.entry-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(1.6rem, 4vw, 3rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
}

.entry-desc {
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.75;
}

/* Margin stars */
.margin-star {
    position: absolute;
}

.ms-1 { top: 0; right: -30px; }
.ms-2 { bottom: 10px; right: -50px; }
.ms-3 { top: 20px; left: -25px; }
.ms-4 { top: -10px; right: -20px; }
.ms-5 { bottom: 30px; right: -40px; }
.ms-6 { bottom: -5px; left: -15px; }
.ms-7 { top: 50%; right: -35px; }
.ms-8 { bottom: 0; right: -25px; }

/* Compass Rose Divider */
.compass-rose-divider {
    display: flex;
    justify-content: center;
    margin: 18vh 0;
}

.compass-rose {
    transition: transform 0.6s var(--ease-gentle);
}

.compass-rose.rotated {
    transform: rotate(45deg);
}

/* ============================================
   SECTION 3: Typewriter Desk
   ============================================ */
.typewriter-desk {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 10vh 5vw;
    background-color: var(--bg-warm);
    z-index: 2;
}

.closing-quote {
    margin-left: 15vw;
    max-width: 55%;
    font-family: 'Special Elite', cursive;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--text-primary);
}

.quote-cursor {
    display: inline-block;
    animation: blink 530ms steps(1) infinite;
    opacity: 0;
}

.quote-cursor.active {
    opacity: 1;
}

.quote-cursor.fade-out {
    animation: blink 530ms steps(1) 3, cursorFade 1.2s ease-out 1.59s forwards;
}

/* Desk stars */
.desk-star {
    position: absolute;
    z-index: 3;
}

.ds-1 { top: 12%; left: 8%; }
.ds-2 { top: 8%; right: 22%; }
.ds-3 { bottom: 15%; right: 10%; }
.ds-4 { top: 35%; right: 8%; }
.ds-5 { bottom: 25%; left: 5%; }
.ds-6 { top: 18%; left: 45%; }

/* ============================================
   SECTION 4: Colophon
   ============================================ */
.colophon {
    position: relative;
    padding: 15vh 5vw 10vh;
    background-color: var(--bg-warm);
    z-index: 2;
}

.colophon-star {
    margin-left: 8vw;
    margin-bottom: 1.5rem;
}

.colophon-domain {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-left: 8vw;
}

.colophon-year {
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-left: 8vw;
    margin-top: 0.3rem;
}

/* ============================================
   Floating Stars (Atmospheric Scatter)
   ============================================ */
.floating-star {
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

.fs-1 { top: 15%; left: 5%; }
.fs-2 { top: 8%; right: 8%; }
.fs-3 { top: 32%; left: 88%; }
.fs-4 { top: 45%; left: 3%; }
.fs-5 { top: 55%; right: 5%; }
.fs-6 { top: 68%; left: 92%; }
.fs-7 { top: 78%; left: 7%; }
.fs-8 { top: 25%; right: 12%; }
.fs-9 { top: 40%; left: 95%; }
.fs-10 { top: 60%; left: 2%; }
.fs-11 { top: 85%; right: 15%; }
.fs-12 { top: 92%; left: 10%; }

/* ============================================
   Responsive adjustments
   ============================================ */
@media (max-width: 768px) {
    .entry-left-near,
    .entry-left-mid,
    .entry-right-mid,
    .entry-right-far {
        margin-left: 6vw;
        max-width: 85%;
    }

    .title-block {
        margin-left: 8%;
    }

    .closing-quote {
        margin-left: 6vw;
        max-width: 85%;
    }

    .hero-star {
        right: 8vw;
        top: 8vh;
    }

    .margin-star {
        display: none;
    }
}