:root {
    --deep-void: #080C14;
    --frozen-surface: #A0D2EB;
    --crevasse-blue: #1B3A5C;
    --frost-white: #E4F0F8;
    --neural-amber: #D4A843;
    --crystal-edge: rgba(160, 210, 235, 0.15);
    --body-text: #C8D8E8;

    --font-heading: 'IBM Plex Mono', monospace;
    --font-body: 'IBM Plex Sans', sans-serif;
    --font-accent: 'Playfair Display', serif;

    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    background: var(--deep-void);
    background-image: linear-gradient(135deg, #080C14 0%, #0D1B2A 40%, #1B3A5C 100%);
    background-attachment: fixed;
    color: var(--body-text);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.7;
    overflow-x: hidden;
}

/* ===== Voronoi Canvas ===== */
.voronoi-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ===== Cursor Glow ===== */
.cursor-glow {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 168, 67, 0.08) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 400ms ease;
}

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

/* ===== Glassmorphic Panels ===== */
.glass-panel {
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    background: rgba(11, 20, 40, 0.6);
    border: 1px solid var(--crystal-edge);
    border-radius: 2px;
    box-shadow: 0 8px 32px rgba(10, 40, 80, 0.4), inset 0 1px 0 rgba(160, 210, 235, 0.1);
    padding: 2rem;
    transition: box-shadow 300ms var(--ease-smooth);
}

.glass-panel:hover {
    box-shadow: 0 12px 48px rgba(10, 40, 80, 0.6), inset 0 1px 0 rgba(160, 210, 235, 0.15);
}

/* ===== Typography ===== */
.panel-heading {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--frozen-surface);
    margin-bottom: 1rem;
    border-top: 1px solid var(--frozen-surface);
    padding-top: 0.5rem;
    border-top-width: 0;
    position: relative;
}

.panel-heading::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--frozen-surface);
    transition: width 600ms var(--ease-enter), left 600ms var(--ease-enter);
}

.glass-panel.revealed .panel-heading::before {
    width: 100%;
    left: 0;
}

/* ===== Stratum Base ===== */
.stratum {
    position: relative;
    z-index: 2;
}

/* ===== Stratum 1: Surface ===== */
.stratum-surface {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.frost-title {
    display: inline-flex;
    gap: 0;
}

.frost-char {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.8rem, 5vw, 4.5rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(135deg, var(--frost-white), var(--frozen-surface), var(--frost-white));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transition: opacity 400ms var(--ease-enter);
    animation: frostShimmer 6s ease-in-out infinite;
}

.frost-char.visible {
    opacity: 1;
}

@keyframes frostShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.surface-desc {
    max-width: 500px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms var(--ease-enter), transform 800ms var(--ease-enter);
}

.surface-desc.visible {
    opacity: 1;
    transform: translateY(0);
}

.desc-text {
    font-family: var(--font-body);
    font-weight: 200;
    font-size: 1.4rem;
    color: var(--body-text);
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.scroll-line {
    width: 1px;
    height: 50px;
    background: var(--crystal-edge);
}

.scroll-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--frozen-surface);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(10px); }
}

/* ===== Stratum 2: Fracture Zone ===== */
.stratum-fracture {
    min-height: 120vh;
    padding: 4rem 5vw;
}

.fracture-line {
    width: 100%;
    height: 20px;
    margin-bottom: 3rem;
}

.fracture-path {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    transition: stroke-dashoffset 1.2s ease-in-out;
}

.fracture-path.drawn {
    stroke-dashoffset: 0;
}

.fracture-panels {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.fracture-panel {
    opacity: 0;
    transition: opacity 600ms var(--ease-enter), transform 600ms var(--ease-enter);
}

.fp-1 { transform: translateX(-60px); margin-right: 15%; }
.fp-2 { transform: translateX(60px); margin-left: 15%; }
.fp-3 { transform: translateY(40px); margin: 0 8%; }

.fracture-panel.revealed {
    opacity: 1;
    transform: translate(0, 0);
}

/* ===== Stratum 3: Deep Layer ===== */
.stratum-deep {
    min-height: 150vh;
    padding: 4rem 5vw;
}

.deep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.deep-panel {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms var(--ease-enter), transform 600ms var(--ease-enter);
}

.deep-panel.revealed {
    opacity: 1;
    transform: translateY(0);
}

.code-panel {
    grid-column: span 2;
}

.code-block {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--body-text);
    overflow-x: auto;
}

.code-kw { color: var(--frozen-surface); }
.code-fn { color: var(--neural-amber); }
.code-key { color: var(--frost-white); }
.code-val { color: #7EC8E3; }
.code-str { color: #8BC6A5; }

/* ===== Stratum 4: Compression ===== */
.stratum-compression {
    min-height: 100vh;
    padding: 4rem 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 168, 67, 0.03) 100%);
}

.compression-panel {
    max-width: 700px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms var(--ease-enter), transform 800ms var(--ease-enter);
}

.compression-panel.revealed {
    opacity: 1;
    transform: translateY(0);
}

.compression-quote {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: var(--frozen-surface);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.compression-body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--body-text);
}

/* ===== Stratum 5: Neural Core ===== */
.stratum-core {
    min-height: 100vh;
    padding: 4rem 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 168, 67, 0.06) 100%);
}

.core-panel {
    max-width: 500px;
    text-align: center;
    border-color: rgba(212, 168, 67, 0.25);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 800ms var(--ease-enter), transform 800ms var(--ease-enter);
}

.core-panel.revealed {
    opacity: 1;
    transform: scale(1);
}

.core-invitation {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    color: var(--neural-amber);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.core-label {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--neural-amber);
    opacity: 0.6;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .fracture-panels { gap: 1.5rem; }
    .fp-1, .fp-2 { margin: 0; }
    .code-panel { grid-column: span 1; }
    .deep-grid { grid-template-columns: 1fr; }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .frost-char { opacity: 1; }
    .surface-desc, .fracture-panel, .deep-panel, .compression-panel, .core-panel {
        opacity: 1;
        transform: none;
    }
}