/* =====================================================
   lugubrious.dev - Retro-Futuristic Decommissioned Station
   ===================================================== */

/* Design System Reference:
   Typography: Playfair Elegant System**
   - Playfair Display italic at large scale for primary headings
   - Playfair Display" (Google Fonts) at 700 weight italic
   - Playfair Display" at 400 weight regular for secondary headings
   - Playfair Display's high-contrast serif strokes and Nunito's soft rounded forms
   - Playfair's drama. Color: #E8D5C4 (warm parchment) for body text
   - Playfair for labels and dates. The internal structure of each card mirrors the layout of a retro instrument panel: title as the large gauge
   - Space Mono" (Google Fonts) for data readouts
   Interaction Directives:**
   - Interaction: Particles near the cursor drift gently away (repulsion radius 100px)
   - IntersectionObserver` with thresholds at [0.1, 0.3, 0.5, 0.7, 0.9]
*/

/* ----- CSS Custom Properties ----- */
:root {
    --deep-bg: #1A1208;
    --primary-bg: #2A1F14;
    --card-surface: #3D2E1F;
    --amber-phosphor: #F2A65A;
    --terracotta-fade: #D4845A;
    --solar-flare: #E8782A;
    --text-primary: #E8D5C4;
    --text-secondary: #8B6A50;
    --deep-vermillion: #C44B2A;
}

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

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

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    letter-spacing: 0.005em;
    color: var(--text-primary);
    background-color: var(--deep-bg);
    overflow-x: hidden;
}

/* ----- Particle Canvas ----- */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

/* ----- Lens Flare Container ----- */
#lens-flare-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    display: none;
}

/* ----- Lens Flare Elements ----- */
.lens-flare {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flare-streak {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--amber-phosphor) 20%, var(--solar-flare) 50%, var(--amber-phosphor) 80%, transparent 100%);
    filter: blur(2px);
    opacity: 0;
    transition: width 800ms ease-out, opacity 600ms ease-out;
}

.flare-streak.active {
    width: 70vw;
    opacity: 0.9;
}

.flare-streak-fading {
    opacity: 0.3;
}

.flare-hex {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--solar-flare);
    opacity: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: opacity 600ms ease-out;
}

.flare-hex.active {
    opacity: 0.4;
}

.flare-hex-1 { top: 48%; left: 30%; width: 8px; height: 8px; }
.flare-hex-2 { top: 52%; left: 42%; width: 14px; height: 14px; }
.flare-hex-3 { top: 46%; left: 58%; width: 10px; height: 10px; }
.flare-hex-4 { top: 54%; left: 65%; width: 6px; height: 6px; }
.flare-hex-5 { top: 49%; left: 72%; width: 11px; height: 11px; }

.flare-bloom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(242, 166, 90, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 800ms ease-out;
}

.flare-bloom.active {
    opacity: 1;
}

.flare-bloom-fading {
    opacity: 0.15;
}

/* ----- Section Flares ----- */
.section-flare, .approach-flare, .observatory-flare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-flare .flare-streak,
.approach-flare .flare-streak,
.observatory-flare .flare-streak {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section-flare .flare-bloom,
.approach-flare .flare-bloom,
.observatory-flare .flare-bloom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section-flare .flare-hex,
.approach-flare .flare-hex {
    top: auto;
    left: auto;
}

/* ----- Sections ----- */
.section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Section 1: The Approach */
.section-approach {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--deep-bg);
}

.approach-content {
    position: relative;
    text-align: center;
    z-index: 3;
}

.site-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--amber-phosphor);
    opacity: 0;
    transform: translateY(20px);
    animation: titleFadeIn 2s ease-out 3.5s forwards;
}

.site-subtitle {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    margin-top: 1.5rem;
    opacity: 0;
    animation: subtitleFadeIn 2s ease-out 4.5s forwards;
}

@keyframes titleFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtitleFadeIn {
    to { opacity: 0.8; }
}

/* Section 2: The Anteroom */
.section-anteroom {
    min-height: 100vh;
    padding: 6vh 4vw;
    background: linear-gradient(180deg, var(--deep-bg) 0%, var(--primary-bg) 30%, var(--primary-bg) 100%);
}

/* Section 3: The Main Hall */
.section-main-hall {
    min-height: 150vh;
    padding: 8vh 4vw;
    background: linear-gradient(180deg, var(--primary-bg) 0%, var(--deep-bg) 50%, var(--primary-bg) 100%);
}

/* Section 4: The Control Room */
.section-control-room {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8vh 4vw;
    background: radial-gradient(ellipse at center, var(--primary-bg) 0%, var(--deep-bg) 80%);
    position: relative;
}

/* Section 5: The Observatory */
.section-observatory {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--deep-bg) 0%, #0D0904 100%);
    position: relative;
}

.observatory-content {
    text-align: center;
    z-index: 3;
    position: relative;
}

.observatory-text {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    letter-spacing: 0.01em;
    color: var(--terracotta-fade);
    opacity: 0.8;
}

.observatory-attribution {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* ----- Masonry Grid ----- */
.masonry-grid {
    display: grid;
    grid-template-columns: 41.6% 25% 33.4%;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.masonry-dense {
    gap: 1rem;
}

.masonry-spacious {
    gap: 2.5rem;
}

.masonry-col {
    display: flex;
    flex-direction: column;
    gap: inherit;
}

/* ----- Cards ----- */
.card {
    background: var(--card-surface);
    border: 1px solid rgba(139, 106, 80, 0.2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    transition: filter 400ms ease, opacity 400ms ease, transform 400ms ease;
}

.card-xs { min-height: 10vh; }
.card-sm { min-height: 20vh; }
.card-md { min-height: 30vh; }
.card-lg { min-height: 40vh; }
.card-xl { min-height: 50vh; }

.card-header {
    padding: 1rem 1.25rem 0;
    height: 15%;
    display: flex;
    align-items: flex-start;
}

.card-content {
    padding: 1rem 1.25rem;
    flex: 1;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(139, 106, 80, 0.15);
}

.card-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
}

.card-meta {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 0.7rem;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.card-date {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: rgba(242, 166, 90, 0.8);
}

.card h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--amber-phosphor);
    margin-bottom: 1rem;
}

.card h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--terracotta-fade);
    margin-bottom: 0.75rem;
}

.card p {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

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

.card em {
    color: var(--amber-phosphor);
    font-style: italic;
}

/* ----- Card Modifiers ----- */
.card-image {
    background: linear-gradient(135deg, var(--card-surface) 0%, rgba(42, 31, 20, 0.9) 100%);
}

/* ----- Blur-Focus Transitions ----- */
.blur-focus {
    filter: blur(8px);
    opacity: 0.3;
    transition: filter 600ms ease, opacity 600ms ease;
}

.blur-focus.in-view-10 {
    filter: blur(6px);
    opacity: 0.4;
}

.blur-focus.in-view-30 {
    filter: blur(4px);
    opacity: 0.6;
}

.blur-focus.in-view-50 {
    filter: blur(2px);
    opacity: 0.8;
}

.blur-focus.in-view-70 {
    filter: blur(1px);
    opacity: 0.9;
}

.blur-focus.in-view-90 {
    filter: blur(0px);
    opacity: 1;
}

/* ----- Mono / Data Text ----- */
.mono-text {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    color: rgba(242, 166, 90, 0.8);
}

.highlight-text {
    color: var(--amber-phosphor);
}

.data-readout {
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
}

.data-readout .mono-text,
.data-readout span {
    color: rgba(242, 166, 90, 0.8);
}

/* ----- Gauge Displays ----- */
.gauge-display {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

.gauge-large {
    padding: 1.5rem 0;
}

.ring-gauge {
    width: 100%;
    max-width: 120px;
    height: auto;
}

.gauge-large .ring-gauge {
    max-width: 160px;
}

.gauge-ring {
    fill: none;
    stroke-dasharray: 8 6;
}

.gauge-ring-outer {
    stroke: rgba(139, 106, 80, 0.3);
    stroke-width: 1;
}

.gauge-ring-mid {
    stroke: rgba(212, 132, 90, 0.25);
    stroke-width: 0.8;
    stroke-dasharray: 12 4;
}

.gauge-ring-inner {
    stroke: rgba(242, 166, 90, 0.2);
    stroke-width: 0.6;
    stroke-dasharray: 4 8;
}

.gauge-ring-core {
    stroke: rgba(232, 120, 42, 0.15);
    stroke-width: 0.5;
    stroke-dasharray: 2 10;
}

/* Gauge Animations */
.gauge-animate {
    animation: gaugeRotate 60s linear infinite;
    transform-origin: center;
}

.gauge-animate-reverse {
    animation: gaugeRotateReverse 60s linear infinite;
    transform-origin: center;
}

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

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

/* ----- Scanline Overlay ----- */
.scanline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(242, 166, 90, 0.03) 3px,
        rgba(242, 166, 90, 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* ----- Grid Pattern Overlay ----- */
.grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(61, 46, 31, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 46, 31, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 1;
}

/* ----- Control Room ----- */
.control-room-gauges {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.bg-gauge {
    position: absolute;
    opacity: 0.15;
}

.bg-gauge-1 {
    width: 400px;
    height: 400px;
    top: 10%;
    left: 5%;
}

.bg-gauge-2 {
    width: 300px;
    height: 300px;
    bottom: 10%;
    right: 8%;
}

.bg-gauge-3 {
    width: 250px;
    height: 250px;
    top: 50%;
    right: 30%;
    transform: translateY(-50%);
}

/* ----- Terminal Card ----- */
.terminal-card {
    background: var(--card-surface);
    border: 1px solid rgba(139, 106, 80, 0.3);
    border-radius: 2px;
    max-width: 900px;
    width: 90%;
    position: relative;
    z-index: 5;
    box-shadow:
        0 0 60px rgba(242, 166, 90, 0.08),
        0 0 120px rgba(242, 166, 90, 0.04),
        inset 0 0 60px rgba(26, 18, 8, 0.5);
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(139, 106, 80, 0.2);
}

.terminal-indicators {
    display: flex;
    gap: 8px;
}

.indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.indicator-active {
    background: var(--amber-phosphor);
    box-shadow: 0 0 8px rgba(242, 166, 90, 0.6);
    animation: indicatorPulse 2s ease-in-out infinite;
}

.indicator-dim {
    background: var(--text-secondary);
    opacity: 0.3;
}

@keyframes indicatorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.terminal-content {
    padding: 2.5rem 2rem;
}

.terminal-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--amber-phosphor);
    margin-bottom: 1.5rem;
}

.terminal-body p {
    margin-bottom: 1rem;
    color: var(--text-primary);
    line-height: 1.7;
}

.terminal-body p:last-child {
    margin-bottom: 0;
}

.terminal-readout {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(139, 106, 80, 0.15);
}

.terminal-readout .mono-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.terminal-readout .highlight-text {
    color: var(--amber-phosphor);
}

.terminal-footer {
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(139, 106, 80, 0.15);
}

/* ----- Color Transitions ----- */
a, span, p, h1, h2, h3, h4 {
    transition: color 400ms ease, background-color 400ms ease;
}

/* ----- Responsive: Mobile ----- */
@media (max-width: 768px) {
    .masonry-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .masonry-spacious {
        gap: 1.5rem;
    }

    .section-anteroom {
        padding: 4vh 3vw;
    }

    .section-main-hall {
        padding: 4vh 3vw;
    }

    .section-control-room {
        padding: 4vh 3vw;
    }

    .terminal-card {
        width: 95%;
    }

    .terminal-content {
        padding: 1.5rem 1.25rem;
    }

    .terminal-readout {
        flex-direction: column;
        gap: 0.75rem;
    }

    .bg-gauge-1 { width: 200px; height: 200px; }
    .bg-gauge-2 { width: 150px; height: 150px; }
    .bg-gauge-3 { width: 120px; height: 120px; }

    .card-lg, .card-xl {
        min-height: auto;
    }

    .approach-flare .flare-streak.active {
        width: 90vw;
    }
}

/* ----- Wireframe Ghost State (for anteroom reveal) ----- */
.card.card-ghost {
    background: transparent;
    border-color: rgba(139, 106, 80, 0.2);
}

.card.card-ghost .card-content,
.card.card-ghost .card-header,
.card.card-ghost .card-footer {
    opacity: 0;
}

.card.card-reveal {
    animation: cardReveal 600ms ease-out forwards;
}

@keyframes cardReveal {
    from {
        background: transparent;
        border-color: rgba(139, 106, 80, 0.2);
    }
    to {
        background: var(--card-surface);
        border-color: rgba(139, 106, 80, 0.3);
    }
}

.card.card-reveal .card-content,
.card.card-reveal .card-header,
.card.card-reveal .card-footer {
    animation: contentReveal 600ms ease-out 200ms forwards;
    opacity: 0;
}

@keyframes contentReveal {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0px); }
}

/* ----- Selection Color ----- */
::selection {
    background: rgba(242, 166, 90, 0.3);
    color: var(--text-primary);
}

/* ----- Scrollbar ----- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--deep-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--terracotta-fade);
}