/* ============================================================
   freedom.compare — Surreal Cartographic Observatory
   ============================================================ */

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

:root {
    --deep-indigo: #1B1464;
    --parchment-cream: #E8E0D4;
    --warm-bronze: #C4956A;
    --vermillion-ember: #D94F30;
    --cerulean-liberty: #2E86AB;
    --dusk-violet: #5C4B8A;
    --bone-white: #F5F0E8;
    --charcoal-depth: #0D0B1E;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--charcoal-depth);
    color: var(--parchment-cream);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 18px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Grain Overlay --- */
.grain-filter {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

body::after {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 800ms ease-out;
}

body.grain-visible::after {
    opacity: 0.06;
}

/* --- Hero Section: Split Screen (0-100vh) --- */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    overflow: hidden;
    background: var(--charcoal-depth);
}

.hero-map {
    position: relative;
    width: 55%;
    height: 100%;
    background: var(--deep-indigo);
    transform: translateX(-100%);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}

.hero-map.animate-in {
    transform: translateX(0);
}

/* Continent silhouettes */
.continent {
    position: absolute;
    opacity: 0.85;
}

.continent::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 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.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    pointer-events: none;
}

.continent-1 {
    width: 45%;
    height: 35%;
    top: 10%;
    left: 5%;
    background: var(--cerulean-liberty);
    clip-path: polygon(20% 0%, 80% 5%, 95% 25%, 85% 50%, 100% 70%, 75% 90%, 50% 100%, 25% 85%, 10% 95%, 0% 60%, 5% 30%);
}

.continent-2 {
    width: 30%;
    height: 25%;
    top: 55%;
    left: 15%;
    background: var(--dusk-violet);
    clip-path: polygon(15% 0%, 60% 5%, 90% 15%, 100% 45%, 85% 80%, 60% 100%, 30% 90%, 5% 70%, 0% 35%);
}

.continent-3 {
    width: 25%;
    height: 30%;
    top: 20%;
    left: 55%;
    background: var(--warm-bronze);
    clip-path: polygon(30% 0%, 70% 10%, 100% 30%, 90% 60%, 100% 85%, 65% 100%, 35% 90%, 10% 100%, 0% 65%, 15% 30%);
}

.continent-4 {
    width: 20%;
    height: 18%;
    top: 65%;
    left: 60%;
    background: var(--vermillion-ember);
    clip-path: polygon(25% 0%, 75% 5%, 100% 35%, 85% 70%, 95% 100%, 50% 85%, 15% 100%, 0% 55%, 10% 20%);
}

.continent-5 {
    width: 15%;
    height: 12%;
    top: 40%;
    left: 40%;
    background: var(--cerulean-liberty);
    opacity: 0.5;
    clip-path: polygon(20% 10%, 80% 0%, 100% 40%, 75% 100%, 25% 90%, 0% 50%);
}

/* Coastline divider */
.coastline-divider {
    position: absolute;
    left: 54%;
    top: 0;
    width: 3%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.coastline-divider path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 2s ease-in-out;
}

.coastline-divider.animate-in {
    opacity: 1;
}

.coastline-divider.animate-in path {
    stroke-dashoffset: 0;
}

/* Hero quote */
.hero-quote {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out 0.6s, transform 1s ease-out 0.6s;
}

.hero-quote.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.quote-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--warm-bronze);
    margin-bottom: 2rem;
    display: block;
}

.quote-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 64px;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--parchment-cream);
    max-width: 14ch;
}

/* --- Floating Glyphs --- */
.floating-glyphs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400vh;
    pointer-events: none;
    z-index: 5;
}

.glyph {
    position: absolute;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--warm-bronze);
    opacity: 0.25;
    animation: drift var(--drift-duration, 12s) ease-in-out var(--drift-delay, 0s) infinite;
    will-change: transform;
}

@keyframes drift {
    0% { transform: translateY(0); }
    50% { transform: translateY(var(--drift-amplitude, 12px)); }
    100% { transform: translateY(0); }
}

/* --- Territories Section (100-300vh) --- */
.territories {
    position: relative;
    min-height: 200vh;
    padding: 10vh 5vw;
    background: var(--deep-indigo);
}

.horizon-line {
    width: 100%;
    height: 4px;
    margin-bottom: 8vh;
    display: block;
}

.horizon-line-bottom {
    margin-bottom: 0;
    margin-top: 8vh;
}

.territories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 4vw;
    max-width: 1400px;
    margin: 0 auto;
}

/* Territory card flip */
.territory-card {
    perspective: 1200px;
    height: 380px;
    cursor: pointer;
    filter: blur(8px);
    opacity: 0.3;
    transition: filter 0.8s ease-out, opacity 0.8s ease-out;
}

.territory-card.in-view {
    filter: blur(0);
    opacity: 1;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
}

.territory-card:hover .card-inner,
.territory-card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid var(--warm-bronze);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem;
}

.card-front {
    background: var(--deep-indigo);
    text-align: center;
}

.card-front::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 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.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    pointer-events: none;
    border-radius: 2px;
}

.card-back {
    background: var(--parchment-cream);
    color: var(--deep-indigo);
    transform: rotateY(180deg);
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.5rem;
}

.card-back p {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 16px;
    line-height: 1.65;
    max-width: 38ch;
    color: var(--deep-indigo);
}

.territory-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--warm-bronze);
    margin-bottom: 1.5rem;
    display: block;
}

.territory-label-back {
    color: var(--dusk-violet);
    margin-bottom: 1.5rem;
}

.territory-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--parchment-cream);
    margin-bottom: 2rem;
}

/* Territory shapes inside cards */
.territory-shape {
    width: 80px;
    height: 60px;
    opacity: 0.4;
}

.shape-press {
    background: var(--cerulean-liberty);
    clip-path: polygon(10% 0%, 90% 5%, 100% 40%, 80% 100%, 20% 90%, 0% 50%);
}

.shape-movement {
    background: var(--dusk-violet);
    clip-path: polygon(0% 20%, 40% 0%, 100% 15%, 90% 70%, 60% 100%, 10% 80%);
}

.shape-economic {
    background: var(--warm-bronze);
    clip-path: polygon(20% 0%, 80% 10%, 100% 50%, 70% 100%, 30% 85%, 0% 40%);
}

.shape-expression {
    background: var(--vermillion-ember);
    clip-path: polygon(5% 10%, 50% 0%, 95% 20%, 100% 60%, 60% 100%, 0% 75%);
}

.shape-assembly {
    background: var(--cerulean-liberty);
    clip-path: polygon(15% 0%, 85% 5%, 100% 45%, 75% 100%, 25% 90%, 0% 35%);
}

.shape-digital {
    background: var(--dusk-violet);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 85% 100%, 15% 85%, 0% 25%);
}

/* --- Closing Panorama (300-400vh) --- */
.panorama {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(
        180deg,
        var(--charcoal-depth) 0%,
        var(--deep-indigo) 30%,
        var(--dusk-violet) 60%,
        var(--warm-bronze) 100%
    );
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(
        180deg,
        var(--parchment-cream) 0%,
        var(--bone-white) 100%
    );
}

/* Mountain silhouette layers */
.mountain-far {
    position: absolute;
    bottom: 38%;
    left: 0;
    width: 100%;
    height: 25%;
    background: var(--deep-indigo);
    clip-path: polygon(
        0% 100%, 0% 70%, 5% 55%, 12% 40%, 18% 50%, 25% 30%, 30% 20%, 35% 35%,
        40% 15%, 45% 25%, 50% 10%, 55% 20%, 60% 5%, 65% 25%, 70% 15%,
        75% 30%, 80% 20%, 85% 40%, 90% 25%, 95% 45%, 100% 35%, 100% 100%
    );
    z-index: 1;
    will-change: transform;
}

.mountain-mid {
    position: absolute;
    bottom: 37%;
    left: 0;
    width: 100%;
    height: 22%;
    background: var(--dusk-violet);
    clip-path: polygon(
        0% 100%, 0% 60%, 8% 45%, 15% 55%, 22% 35%, 28% 50%, 35% 30%,
        42% 45%, 48% 25%, 55% 40%, 62% 20%, 68% 35%, 75% 45%, 82% 30%,
        88% 50%, 95% 40%, 100% 55%, 100% 100%
    );
    z-index: 2;
    will-change: transform;
}

.mountain-near {
    position: absolute;
    bottom: 36%;
    left: 0;
    width: 100%;
    height: 18%;
    background: var(--cerulean-liberty);
    clip-path: polygon(
        0% 100%, 0% 50%, 10% 40%, 20% 55%, 30% 35%, 40% 50%,
        50% 30%, 60% 45%, 70% 35%, 80% 50%, 90% 40%, 100% 55%, 100% 100%
    );
    z-index: 3;
    will-change: transform;
}

.panorama-title {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
}

.panorama-domain {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 72px;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--parchment-cream);
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}

/* --- Wordmark --- */
.wordmark {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--warm-bronze);
    z-index: 100;
    opacity: 0.7;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    .hero-map {
        transform: translateX(0);
    }

    .hero-quote {
        opacity: 1;
        transform: translateY(0);
    }

    .coastline-divider {
        opacity: 1;
    }

    .coastline-divider path {
        stroke-dashoffset: 0;
    }

    body::after {
        opacity: 0.06;
    }

    .territory-card {
        filter: blur(0);
        opacity: 1;
    }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .territories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3vw;
    }

    .quote-text {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
    }

    .hero-map {
        width: 100%;
        height: 50%;
    }

    .hero-quote {
        width: 100%;
        height: 50%;
        padding: 2rem;
    }

    .quote-text {
        font-size: 36px;
        max-width: 100%;
    }

    .coastline-divider {
        display: none;
    }

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

    .territory-card {
        height: 300px;
    }

    .panorama-domain {
        font-size: 36px;
    }

    .wordmark {
        bottom: 1rem;
        right: 1rem;
        font-size: 10px;
    }
}