/* ==========================================
   continu.st - Pop Art Geological Narrative
   ========================================== */

/* --- Color Variables --- */
:root {
    --obsidian-night: #1A1118;
    --dusk-plum: #2D1B2E;
    --magenta-pulse: #E91E8C;
    --solar-flare: #FF6B35;
    --tangerine-horizon: #FFB347;
    --bone-white: #F5EDE3;
    --rose-dust: #C9A0B0;
    --neon-lavender: #B967FF;

    --gradient-sunset: linear-gradient(135deg, #E91E8C 0%, #FF6B35 45%, #FFB347 100%);
    --gradient-dusk: linear-gradient(180deg, #1A1118 0%, #2D1B2E 100%);
    --gradient-neon-bloom: radial-gradient(circle at 50% 80%, #B967FF 0%, transparent 60%);

    --gutter: 24px;
    --row-gap: 39px;
    --spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
    background-color: var(--obsidian-night);
    scroll-behavior: smooth;
}

body {
    font-family: 'Lora', serif;
    color: var(--bone-white);
    background-color: var(--obsidian-night);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    position: relative;
}

/* --- Topographic Contour Background --- */
.contour-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    animation: contourDrift 60s linear infinite;
}

@keyframes contourDrift {
    0% { transform: translateY(0); }
    100% { transform: translateY(-120px); }
}

/* --- Typography --- */
h1, h2, h3, .splash-word {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h3 {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    margin-bottom: 0.5em;
    color: var(--bone-white);
}

p {
    font-family: 'Lora', serif;
    font-weight: 400;
    color: var(--bone-white);
}

.card-meta {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rose-dust);
    display: block;
    margin-bottom: 0.75em;
}

/* --- Neon Pulse Animation --- */
@keyframes neonPulse {
    0%, 100% { filter: drop-shadow(0 0 15px #E91E8C) drop-shadow(0 0 30px rgba(233, 30, 140, 0.25)); }
    50% { filter: drop-shadow(0 0 25px #E91E8C) drop-shadow(0 0 45px rgba(233, 30, 140, 0.38)); }
}

@keyframes neonPulseIntense {
    0%, 100% { filter: drop-shadow(0 0 20px #E91E8C) drop-shadow(0 0 40px rgba(233, 30, 140, 0.4)); }
    50% { filter: drop-shadow(0 0 30px #E91E8C) drop-shadow(0 0 55px rgba(233, 30, 140, 0.6)); }
}

@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(233, 30, 140, 0.5); }
    50% { text-shadow: 0 0 35px rgba(233, 30, 140, 0.8); }
}

/* --- Sections (Acts) --- */
.act {
    position: relative;
    z-index: 1;
}

/* --- Splash Cards --- */
.splash-card {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--gradient-dusk);
}

.splash-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-neon-bloom);
    opacity: 0.4;
    pointer-events: none;
}

.splash-mountain-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    z-index: 1;
}

.mountain-silhouette {
    width: 100%;
    height: 100%;
    animation: neonPulse 4s ease-in-out infinite;
}

.splash-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 0 8vw;
}

.splash-text-genesis {
    align-items: flex-start;
}

.splash-text-genesis .splash-word {
    font-size: clamp(3rem, 8vw, 7rem);
    text-transform: uppercase;
    color: var(--bone-white);
    animation: textGlow 4s ease-in-out infinite;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--spring-ease), transform 0.8s var(--spring-ease);
}

.splash-text-genesis .splash-word.visible {
    opacity: 1;
    transform: translateY(0);
}

.splash-word-left {
    align-self: flex-start;
}

.splash-word-right {
    align-self: flex-end;
}

.splash-text-centered {
    align-items: center;
    text-align: center;
}

.splash-text-centered .splash-word {
    font-size: clamp(3rem, 8vw, 7rem);
    text-transform: uppercase;
    color: var(--bone-white);
    animation: textGlow 4s ease-in-out infinite;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--spring-ease), transform 0.8s var(--spring-ease);
}

.splash-text-centered .splash-word.visible {
    opacity: 1;
    transform: translateY(0);
}

.splash-text-continuum .splash-word {
    font-size: clamp(3.5rem, 10vw, 8rem);
}

/* Splash-specific backgrounds */
.splash-genesis {
    background: var(--gradient-sunset);
}

.splash-erosion {
    background: linear-gradient(135deg, #FF6B35 0%, #FFB347 50%, #E91E8C 100%);
}

.splash-stratification {
    background: var(--gradient-dusk);
}

.splash-metamorphosis {
    background: var(--obsidian-night);
}

.splash-continuum {
    background: linear-gradient(180deg, #2D1B2E 0%, #1A1118 50%, #2D1B2E 100%);
}

/* --- Card Grid --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--row-gap) var(--gutter);
    padding: var(--row-gap) var(--gutter);
    max-width: 1400px;
    margin: 0 auto;
}

.card-grid-dense {
    grid-auto-flow: dense;
}

.card-grid-spacious {
    gap: 60px var(--gutter);
    padding: 60px var(--gutter);
}

/* Card Spans */
.card-span-4 { grid-column: span 4; }
.card-span-6 { grid-column: span 6; }
.card-span-8 { grid-column: span 8; }
.card-span-12 { grid-column: span 12; }

/* --- Content Cards --- */
.content-card {
    position: relative;
    background: var(--dusk-plum);
    border: 4px solid var(--magenta-pulse);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
    transition:
        border-color 200ms ease,
        transform 300ms var(--spring-ease),
        box-shadow 300ms ease;
    /* Card entrance animation - start hidden */
    opacity: 0;
    transform: translateY(60px) scale(0.92);
}

.content-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 0.6s var(--spring-ease),
        transform 0.6s var(--spring-ease),
        border-color 200ms ease,
        box-shadow 300ms ease;
}

.content-card:hover {
    border-color: var(--neon-lavender);
    transform: translateY(-4px) scale(1);
    box-shadow: 0 0 12px var(--neon-lavender);
}

.content-card:hover .card-halftone {
    opacity: 0.12;
}

.border-magenta {
    border-color: var(--magenta-pulse);
}

.border-solar {
    border-color: var(--solar-flare);
}

/* Card skew for Metamorphosis */
.card-skew {
    transform: translateY(60px) scale(0.92) skewY(0.5deg);
}

.card-skew.visible {
    transform: translateY(0) scale(1) skewY(0.5deg);
}

.card-skew:hover {
    transform: translateY(-4px) scale(1) skewY(0.5deg);
}

/* Spacious cards for Continuum */
.card-spacious {
    padding: clamp(2rem, 5vw, 4rem);
}

/* --- Ben-Day Dot Halftone Overlay --- */
.card-halftone {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #E91E8C 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.05;
    pointer-events: none;
    transition: opacity 300ms ease;
    z-index: 0;
}

.halftone-solar {
    background-image: radial-gradient(circle, #FF6B35 1px, transparent 1px);
}

.halftone-lavender {
    background-image: radial-gradient(circle, #B967FF 1px, transparent 1px);
}

.halftone-subtle {
    opacity: 0.03;
}

/* Global Ben-Day dot atmosphere on acts */
.act-genesis::after,
.act-erosion::after,
.act-stratification::after,
.act-metamorphosis::after,
.act-continuum::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
}

.act-genesis::after,
.act-stratification::after {
    background-image: radial-gradient(circle, #E91E8C 1px, transparent 1px);
    background-size: 6px 6px;
}

.act-erosion::after,
.act-metamorphosis::after {
    background-image: radial-gradient(circle, #FF6B35 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.07;
}

.act-continuum::after {
    background-image: radial-gradient(circle, #B967FF 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.03;
}

/* Erosion has larger, more visible dots */
.act-erosion .card-halftone {
    background-size: 8px 8px;
    opacity: 0.08;
}

/* --- Speech Bubbles --- */
.speech-bubble {
    position: relative;
    background: var(--bone-white);
    color: var(--obsidian-night);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 3px solid var(--magenta-pulse);
    margin: 0.5rem 0;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 40px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 20px solid var(--magenta-pulse);
}

.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 41px;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 18px solid var(--bone-white);
    z-index: 1;
}

.speech-bubble h3 {
    color: var(--obsidian-night);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.speech-bubble p {
    color: var(--dusk-plum);
    font-weight: 600;
}

.speech-bubble-solar {
    border-color: var(--solar-flare);
}

.speech-bubble-solar::after {
    border-top-color: var(--solar-flare);
}

/* --- Warhol Repetition Grid --- */
.warhol-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    position: absolute;
    inset: 10%;
    z-index: 1;
    opacity: 0.7;
}

.warhol-cell {
    overflow: hidden;
    border: 3px solid var(--magenta-pulse);
}

.warhol-cell svg {
    width: 100%;
    height: 100%;
}

.warhol-cell-1 { border-color: var(--magenta-pulse); }
.warhol-cell-2 { border-color: var(--solar-flare); }
.warhol-cell-3 { border-color: var(--neon-lavender); }
.warhol-cell-4 { border-color: var(--tangerine-horizon); }

/* --- Closing Statement --- */
.closing-statement {
    text-align: center;
    padding: 10vh 2rem 15vh;
}

.closing-text {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--magenta-pulse);
    letter-spacing: -0.02em;
    animation: textGlow 4s ease-in-out infinite;
}

.closing-sub {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rose-dust);
    margin-top: 1rem;
}

/* --- Tablet Responsive --- */
@media (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(12, 1fr);
    }

    .card-span-4 { grid-column: span 6; }
    .card-span-8 { grid-column: span 12; }
    .card-span-6 { grid-column: span 6; }
    .card-span-12 { grid-column: span 12; }

    .warhol-grid {
        inset: 15%;
    }
}

/* --- Mobile Responsive --- */
@media (max-width: 640px) {
    :root {
        --gutter: 16px;
        --row-gap: 24px;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .card-span-4,
    .card-span-6,
    .card-span-8,
    .card-span-12 {
        grid-column: span 1;
    }

    .splash-text-genesis .splash-word,
    .splash-text-centered .splash-word {
        font-size: clamp(2rem, 10vw, 4rem);
    }

    .splash-text-continuum .splash-word {
        font-size: clamp(2.5rem, 12vw, 5rem);
    }

    .splash-word-right {
        align-self: flex-end;
    }

    .warhol-grid {
        inset: 5%;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .mountain-silhouette {
        animation: none;
    }

    .splash-text-genesis .splash-word,
    .splash-text-centered .splash-word {
        animation: none;
    }

    .closing-text {
        animation: none;
    }

    .content-card {
        transition: border-color 200ms ease, box-shadow 200ms ease;
    }

    .content-card.visible {
        transition: border-color 200ms ease, box-shadow 200ms ease;
    }

    .contour-bg {
        animation: none;
    }

    .content-card {
        opacity: 1;
        transform: none;
    }

    .card-skew {
        transform: skewY(0.5deg);
    }

    .splash-text-genesis .splash-word,
    .splash-text-centered .splash-word {
        opacity: 1;
        transform: none;
    }
}