/* ================================================================
   meltdown.quest — Styles
   Geological depth as spatial metaphor. Japanese minimalism.
   Immersive vertical scroll. Zoom-focus animation. CSS-only marble.
   ================================================================ */

:root {
    /* Palette from DESIGN.md */
    --bg-primary: #0B1D3A;       /* Hadal Blue */
    --bg-secondary: #0F2847;     /* Bathyal Slate */
    --accent-primary: #2A8FBD;   /* Pelagic Cyan */
    --accent-secondary: #1B6B8A; /* Deep Current */
    --text-primary: #E8F0F5;     /* Glacial White */
    --text-secondary: #8BADC4;   /* Drift Grey */
    --text-tertiary: #5B8FA8;    /* Abyssal Teal */
    --marble-warm: #D4C5B2;      /* Calacatta Vein */
    --marble-cool: #A3B5C7;      /* Carrara Mist */
    --magma: #C45C3E;            /* Magma Trace */
    --mid-blue: #2A5A7E;
    --dark-navy: #1a3a5c;

    /* Typography */
    --font-display: 'Bungee Shade', 'Impact', sans-serif;
    --font-label: 'Cormorant SC', 'Georgia', serif;
    --font-body: 'Libre Baskerville', 'Georgia', serif;

    /* Easing */
    --ease-zoom: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.85;
    overflow-x: hidden;
    transition: background-color 1.5s ease;
}

::selection {
    background-color: rgba(42, 143, 189, 0.3);
    color: var(--text-primary);
}

/* ================================================================
   DESCENT CONTAINER
   ================================================================ */
.descent {
    width: 100%;
    position: relative;
}

/* ================================================================
   STRATA (sections)
   Each section: 90-100vh, full viewport commitment
   ================================================================ */
.stratum {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8rem 20%;
    position: relative;
    overflow: hidden;
}

/* Content positioned left-aligned at ~25% from left edge */
.stratum-content {
    max-width: 600px;
    width: 100%;
}

/* ================================================================
   OPENING VOID
   Almost entirely empty. Domain name as geological formation.
   ================================================================ */
.stratum-void {
    background-color: var(--bg-primary);
    min-height: 100vh;
    align-items: center;
    padding: 0;
    justify-content: center;
}

.void-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 12vw, 10rem);
    color: var(--text-primary);
    text-align: center;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1.4s ease, transform 1.4s var(--ease-zoom);
}

.void-title.revealed {
    opacity: 1;
    transform: scale(1);
}

.title-dot {
    color: var(--magma);
}

/* Thin line at bottom of void, barely visible */
.void-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--mid-blue);
    opacity: 0.4;
}

/* ================================================================
   DEPTH INDICATOR (fixed)
   Tracks descent progress with a thin vertical bar
   ================================================================ */
.depth-indicator {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    z-index: 100;
    pointer-events: none;
}

.depth-track {
    width: 2px;
    height: 60px;
    background-color: rgba(42, 143, 189, 0.15);
    position: relative;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.depth-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--accent-primary);
    transition: height 0.3s ease;
}

.depth-label {
    font-family: var(--font-label);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.depth-value {
    font-family: var(--font-label);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--accent-primary);
}

/* ================================================================
   BREATHING GAPS with MON-STYLE DIVIDERS
   15vh of space, centered geometric form.
   ================================================================ */
.breathing-gap {
    height: 15vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--bg-primary);
}

.mon-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: clamp(40px, 5vw, 80px);
    height: clamp(40px, 5vw, 80px);
}

/* Mon: Concentric circles */
.mon-concentric {
    position: relative;
}

.mon-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--accent-primary);
    opacity: 0.3;
}

.mon-circle-outer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.mon-circle-inner {
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
}

/* Mon: Triangle inscribed in circle */
.mon-triangle {
    position: relative;
}

.mon-triangle-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--accent-primary);
    opacity: 0.3;
    top: 0;
    left: 0;
}

.mon-triangle-shape {
    width: 60%;
    height: 60%;
    clip-path: polygon(50% 10%, 10% 90%, 90% 90%);
    background-color: var(--accent-primary);
    opacity: 0.2;
    position: absolute;
    top: 20%;
    left: 20%;
}

/* Mon: Three horizontal lines of decreasing length */
.mon-lines {
    flex-direction: column;
    gap: 6px;
}

.mon-line {
    height: 1px;
    background-color: var(--accent-primary);
    opacity: 0.3;
}

.mon-line-1 {
    width: 100%;
}

.mon-line-2 {
    width: 70%;
}

.mon-line-3 {
    width: 40%;
}

/* Mon: Chevron */
.mon-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mon-chevron-shape {
    width: 50%;
    height: 50%;
    border-bottom: 1px solid var(--accent-primary);
    border-right: 1px solid var(--accent-primary);
    transform: rotate(45deg);
    opacity: 0.3;
}

/* Mon: Single dot */
.mon-dot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mon-single-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    opacity: 0.3;
}

/* Mon: Cross */
.mon-cross {
    position: relative;
}

.mon-cross-h,
.mon-cross-v {
    position: absolute;
    background-color: var(--accent-primary);
    opacity: 0.25;
}

.mon-cross-h {
    width: 60%;
    height: 1px;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
}

.mon-cross-v {
    width: 1px;
    height: 60%;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

/* ================================================================
   SECTION LABELS (Cormorant SC)
   ================================================================ */
.section-label {
    display: block;
    font-family: var(--font-label);
    font-size: clamp(0.75rem, 1.4vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.7s ease, transform 0.7s var(--ease-zoom);
}

.section-label.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ================================================================
   SECTION TITLES (Bungee Shade)
   ================================================================ */
.stratum-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4.5rem);
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 2rem;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s ease, transform 0.8s var(--ease-zoom);
}

.stratum-title.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ================================================================
   BODY TEXT (Libre Baskerville)
   ================================================================ */
.stratum-body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 400;
    line-height: 1.85;
    color: #C8D8E4;
    max-width: 600px;
    margin-bottom: 3rem;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.9s ease, transform 0.9s var(--ease-zoom);
}

.stratum-body.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ================================================================
   FAULT LINES
   Thin decorative lines at 30% and 70% vertical positions
   ================================================================ */
.fault-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--accent-secondary);
    opacity: 0.15;
    pointer-events: none;
}

.fault-line-top {
    top: 30%;
}

.fault-line-bottom {
    top: 70%;
}

/* ================================================================
   MARBLE INSET PANELS
   3:2 aspect ratio, CSS-only marble textures
   Zoom-focus reveal animation
   ================================================================ */
.marble-inset {
    width: 100%;
    max-width: 540px;
    aspect-ratio: 3 / 2;
    position: relative;
    margin-top: 2rem;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1s ease, transform 1s var(--ease-zoom);
}

.marble-inset.revealed {
    opacity: 1;
    transform: scale(1);
}

.marble-panel {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    filter: contrast(1.05) brightness(0.98);
}

/* Marble Panel 1: warm veins on ocean-deep background */
.marble-panel-1 {
    background:
        radial-gradient(ellipse at 20% 40%, rgba(212, 197, 178, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(163, 181, 199, 0.4) 0%, transparent 45%),
        radial-gradient(ellipse at 45% 80%, rgba(212, 197, 178, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(163, 181, 199, 0.15) 0%, transparent 40%),
        linear-gradient(135deg, #0F2847 0%, #1a3a5c 100%);
}

/* Marble Panel 2: shifted positions, denser */
.marble-panel-2 {
    background:
        radial-gradient(ellipse at 60% 25%, rgba(212, 197, 178, 0.5) 0%, transparent 45%),
        radial-gradient(ellipse at 30% 70%, rgba(163, 181, 199, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 55%, rgba(212, 197, 178, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse at 15% 90%, rgba(163, 181, 199, 0.2) 0%, transparent 40%),
        linear-gradient(150deg, #0F2847 0%, #1a3a5c 100%);
}

/* Marble Panel 3: denser veining, more contrast */
.marble-panel-3 {
    background:
        radial-gradient(ellipse at 35% 30%, rgba(212, 197, 178, 0.55) 0%, transparent 40%),
        radial-gradient(ellipse at 75% 50%, rgba(163, 181, 199, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 75%, rgba(212, 197, 178, 0.35) 0%, transparent 45%),
        radial-gradient(ellipse at 10% 60%, rgba(163, 181, 199, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 20%, rgba(212, 197, 178, 0.2) 0%, transparent 35%),
        linear-gradient(120deg, #0F2847 0%, #1a3a5c 100%);
}

/* Marble Panel 4: cooler tones, with magma hint */
.marble-panel-4 {
    background:
        radial-gradient(ellipse at 40% 35%, rgba(163, 181, 199, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 65% 65%, rgba(196, 92, 62, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 25% 75%, rgba(212, 197, 178, 0.4) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 25%, rgba(163, 181, 199, 0.35) 0%, transparent 55%),
        linear-gradient(160deg, #0F2847 0%, #1a3a5c 100%);
}

/* Marble Panel 5: fractured, with stronger magma presence */
.marble-panel-5 {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(196, 92, 62, 0.12) 0%, transparent 35%),
        radial-gradient(ellipse at 20% 55%, rgba(163, 181, 199, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 30%, rgba(212, 197, 178, 0.35) 0%, transparent 45%),
        radial-gradient(ellipse at 40% 80%, rgba(163, 181, 199, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 70%, rgba(196, 92, 62, 0.08) 0%, transparent 40%),
        linear-gradient(175deg, #0a1428 0%, #070f20 100%);
}

/* ================================================================
   GEOMETRIC COMPOSITIONS inside marble panels
   ================================================================ */
.geo-composition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Comp 1: Two concentric circles with marble-gradient fills, offset */
.geo-comp-circles {
    position: relative;
}

.geo-circle {
    position: absolute;
    border-radius: 50%;
}

.geo-circle-1 {
    width: 55%;
    height: 80%;
    left: 15%;
    top: 10%;
    background:
        radial-gradient(ellipse at 40% 40%, rgba(212, 197, 178, 0.3) 0%, transparent 70%);
    border: 1px solid rgba(163, 181, 199, 0.25);
}

.geo-circle-2 {
    width: 45%;
    height: 65%;
    right: 15%;
    top: 18%;
    background:
        radial-gradient(ellipse at 60% 50%, rgba(163, 181, 199, 0.25) 0%, transparent 70%);
    border: 1px solid rgba(212, 197, 178, 0.2);
}

.geo-intersect {
    position: absolute;
    width: 80%;
    height: 1px;
    background-color: var(--accent-primary);
    opacity: 0.4;
    top: 50%;
    left: 10%;
    transform: rotate(-15deg);
}

/* Comp 2: Stratification rectangles at slight rotations */
.geo-comp-strata {
    position: relative;
}

.geo-rect {
    position: absolute;
    width: 70%;
    height: 25%;
    left: 15%;
}

.geo-rect-1 {
    top: 15%;
    transform: rotate(-2deg);
    background:
        radial-gradient(ellipse at 30% 50%, rgba(212, 197, 178, 0.3) 0%, transparent 80%);
    border: 1px solid rgba(163, 181, 199, 0.15);
}

.geo-rect-2 {
    top: 38%;
    transform: rotate(1deg);
    background:
        radial-gradient(ellipse at 60% 40%, rgba(163, 181, 199, 0.25) 0%, transparent 75%);
    border: 1px solid rgba(212, 197, 178, 0.15);
}

.geo-rect-3 {
    top: 60%;
    transform: rotate(-3deg);
    background:
        radial-gradient(ellipse at 50% 60%, rgba(212, 197, 178, 0.2) 0%, transparent 70%);
    border: 1px solid rgba(163, 181, 199, 0.1);
}

/* Comp 3: Pentagon (faceted gemstone) */
.geo-comp-pentagon {
    position: relative;
}

.geo-pentagon {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    background:
        conic-gradient(
            from 0deg at 50% 50%,
            rgba(212, 197, 178, 0.35) 0deg,
            rgba(163, 181, 199, 0.25) 72deg,
            rgba(212, 197, 178, 0.3) 144deg,
            rgba(163, 181, 199, 0.2) 216deg,
            rgba(212, 197, 178, 0.35) 288deg,
            rgba(163, 181, 199, 0.25) 360deg
        );
}

.geo-pentagon-inner {
    position: absolute;
    width: 30%;
    height: 30%;
    top: 35%;
    left: 35%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    border: 1px solid rgba(42, 143, 189, 0.3);
    background: transparent;
}

/* Comp 4: Fracture lines / seismograph traces */
.geo-comp-fracture {
    position: relative;
}

.geo-fracture-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--magma),
        var(--accent-primary),
        var(--magma),
        transparent
    );
    opacity: 0.4;
}

.geo-fracture-1 {
    width: 80%;
    left: 10%;
    top: 35%;
    transform: rotate(-5deg);
}

.geo-fracture-2 {
    width: 60%;
    left: 25%;
    top: 55%;
    transform: rotate(3deg);
}

.geo-fracture-3 {
    width: 45%;
    left: 15%;
    top: 70%;
    transform: rotate(-8deg);
}

.geo-fracture-node {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--magma);
    opacity: 0.5;
}

.geo-fracture-node-1 {
    top: 33%;
    left: 45%;
}

.geo-fracture-node-2 {
    top: 53%;
    left: 60%;
}

/* Comp 5: Crystal shards - fractured geometry */
.geo-comp-crystal {
    position: relative;
}

.geo-crystal-shard {
    position: absolute;
    border: 1px solid rgba(163, 181, 199, 0.2);
}

.geo-shard-1 {
    width: 35%;
    height: 55%;
    top: 10%;
    left: 20%;
    clip-path: polygon(30% 0%, 100% 25%, 80% 100%, 0% 70%);
    background:
        radial-gradient(ellipse at 50% 50%, rgba(212, 197, 178, 0.25) 0%, transparent 70%);
    transform: rotate(-8deg);
}

.geo-shard-2 {
    width: 30%;
    height: 50%;
    top: 20%;
    right: 18%;
    clip-path: polygon(20% 0%, 100% 15%, 70% 100%, 0% 80%);
    background:
        radial-gradient(ellipse at 40% 60%, rgba(163, 181, 199, 0.2) 0%, transparent 65%);
    transform: rotate(5deg);
}

.geo-shard-3 {
    width: 25%;
    height: 40%;
    bottom: 15%;
    left: 38%;
    clip-path: polygon(50% 0%, 100% 40%, 80% 100%, 10% 85%, 0% 30%);
    background:
        radial-gradient(ellipse at 60% 40%, rgba(196, 92, 62, 0.1) 0%, transparent 60%);
    transform: rotate(-3deg);
}

.geo-crystal-core {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 48%;
    left: 48%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 92, 62, 0.6) 0%, rgba(196, 92, 62, 0) 70%);
}

/* ================================================================
   SECTION BACKGROUNDS
   Deepening color as user descends
   ================================================================ */
.stratum-surface {
    background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
}

.stratum-mantle {
    background: linear-gradient(to bottom, var(--bg-secondary), var(--dark-navy));
}

.stratum-core {
    background: linear-gradient(to bottom, var(--dark-navy), #0a1428);
}

.stratum-threshold {
    background: linear-gradient(to bottom, #0a1428, #080e1e);
}

.stratum-phase {
    background: linear-gradient(to bottom, #080e1e, #070f20);
}

.stratum-terminal {
    background: linear-gradient(to bottom, #070f20, #030810);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 3rem;
    position: relative;
    overflow: hidden;
}

/* ================================================================
   TERMINAL SECTION: Fragmented domain name
   Letters scattered across viewport with varying vertical offsets
   ================================================================ */
.terminal-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    min-height: 40vh;
    position: relative;
}

.frag,
.frag-dot {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 6rem);
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-block;
    opacity: 0;
    transform: scale(0.85) translate(0, 0);
    transition: opacity 1.2s ease, transform 1.8s var(--ease-zoom);
    position: relative;
}

.terminal-title.revealed .frag {
    opacity: 0.6;
    transform: scale(1) translate(var(--frag-x), var(--frag-y));
}

.terminal-title.revealed .frag-dot {
    opacity: 0.8;
    transform: scale(1) translate(var(--frag-x), var(--frag-y));
    color: var(--magma);
}

/* Stagger the fragment animations */
.frag:nth-child(1)  { transition-delay: 0s; }
.frag:nth-child(2)  { transition-delay: 0.08s; }
.frag:nth-child(3)  { transition-delay: 0.16s; }
.frag:nth-child(4)  { transition-delay: 0.24s; }
.frag:nth-child(5)  { transition-delay: 0.32s; }
.frag:nth-child(6)  { transition-delay: 0.4s; }
.frag:nth-child(7)  { transition-delay: 0.48s; }
.frag:nth-child(8)  { transition-delay: 0.56s; }
.frag-dot            { transition-delay: 0.64s; }
.frag:nth-child(10) { transition-delay: 0.72s; }
.frag:nth-child(11) { transition-delay: 0.8s; }
.frag:nth-child(12) { transition-delay: 0.88s; }
.frag:nth-child(13) { transition-delay: 0.96s; }
.frag:nth-child(14) { transition-delay: 1.04s; }

.terminal-sig {
    margin-top: 4rem;
    text-align: center;
}

.sig-year {
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    opacity: 0.3;
}

/* ================================================================
   MELTDOWN PARTICLES
   12 small circles with #C45C3E, drifting downward slowly
   Only in the terminal section
   ================================================================ */
.meltdown-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background-color: var(--magma);
    opacity: 0;
    animation: particleDrift 12s linear infinite;
}

.particle-1  { width: 5px; height: 5px; left: 8%;  top: -5%;  animation-delay: 0s;    animation-duration: 14s; }
.particle-2  { width: 4px; height: 4px; left: 15%; top: -8%;  animation-delay: 1.5s;  animation-duration: 11s; }
.particle-3  { width: 6px; height: 6px; left: 25%; top: -3%;  animation-delay: 3s;    animation-duration: 16s; }
.particle-4  { width: 4px; height: 4px; left: 35%; top: -6%;  animation-delay: 0.8s;  animation-duration: 13s; }
.particle-5  { width: 7px; height: 7px; left: 45%; top: -4%;  animation-delay: 4.5s;  animation-duration: 15s; }
.particle-6  { width: 5px; height: 5px; left: 55%; top: -7%;  animation-delay: 2s;    animation-duration: 12s; }
.particle-7  { width: 4px; height: 4px; left: 65%; top: -5%;  animation-delay: 5.5s;  animation-duration: 14s; }
.particle-8  { width: 8px; height: 8px; left: 72%; top: -3%;  animation-delay: 1s;    animation-duration: 17s; }
.particle-9  { width: 5px; height: 5px; left: 80%; top: -6%;  animation-delay: 3.5s;  animation-duration: 13s; }
.particle-10 { width: 4px; height: 4px; left: 88%; top: -8%;  animation-delay: 6s;    animation-duration: 11s; }
.particle-11 { width: 6px; height: 6px; left: 20%; top: -4%;  animation-delay: 7s;    animation-duration: 15s; }
.particle-12 { width: 5px; height: 5px; left: 60%; top: -5%;  animation-delay: 8s;    animation-duration: 14s; }

@keyframes particleDrift {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    8% {
        opacity: 0.55;
    }
    25% {
        transform: translateY(28vh) translateX(8px);
        opacity: 0.45;
    }
    50% {
        transform: translateY(55vh) translateX(-5px);
        opacity: 0.35;
    }
    75% {
        transform: translateY(82vh) translateX(12px);
        opacity: 0.2;
    }
    100% {
        transform: translateY(110vh) translateX(3px);
        opacity: 0;
    }
}

/* ================================================================
   REVEAL ANIMATION SYSTEM
   Zoom-focus: scale(0.85) -> scale(1), opacity 0 -> 1
   ================================================================ */
[data-reveal] {
    will-change: opacity, transform;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .stratum {
        padding: 6rem 12%;
    }
}

@media (max-width: 768px) {
    .stratum {
        padding: 5rem 8%;
    }

    .void-title {
        font-size: clamp(2.2rem, 10vw, 5rem);
    }

    .stratum-title {
        font-size: clamp(1.6rem, 6vw, 3rem);
    }

    .depth-indicator {
        bottom: 1rem;
        right: 1rem;
    }

    .depth-track {
        height: 40px;
    }

    .frag,
    .frag-dot {
        font-size: clamp(1.8rem, 6vw, 3.5rem);
    }

    .marble-inset {
        max-width: 100%;
    }

    .breathing-gap {
        height: 10vh;
    }
}

@media (max-width: 480px) {
    .stratum {
        padding: 4rem 6%;
    }

    .void-title {
        font-size: clamp(1.8rem, 9vw, 3.5rem);
    }

    .stratum-title {
        font-size: clamp(1.4rem, 5vw, 2.5rem);
    }

    .breathing-gap {
        height: 8vh;
    }

    .depth-track {
        height: 30px;
    }
}