:root {
    --deep-teal: #0d5e6b;
    --coral-magenta: #6b0d5e;
    --amber-bio: #5e6b0d;
    --trench: #070f12;
    --twilight: #0f2b33;
    --foam: #c4e8ef;
    --phosphor: #00e5d0;
    --shell: #e8d5c4;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--trench);
    color: var(--foam);
    overflow-x: hidden;
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
}

/* ---- SECTION BASE ---- */
.section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "top-left top-right"
        "bottom-left bottom-right";
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
}

.z-top-left { grid-area: top-left; display: flex; align-items: flex-start; justify-content: flex-start; padding: clamp(2rem, 5vw, 5rem); }
.z-top-right { grid-area: top-right; display: flex; align-items: flex-start; justify-content: flex-end; padding: clamp(2rem, 5vw, 5rem); }
.z-bottom-left { grid-area: bottom-left; display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(2rem, 5vw, 5rem); }
.z-bottom-right { grid-area: bottom-right; display: flex; align-items: flex-end; justify-content: flex-end; padding: clamp(2rem, 5vw, 5rem); }

/* ---- FADE REVEAL ---- */
.fade-target {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-target.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ---- SECTION 1: THE SURFACE ---- */
.section-surface {
    background: linear-gradient(135deg, var(--deep-teal) 0%, #0a4a55 50%, var(--twilight) 100%);
}

.hero-glyph {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(6rem, 15vw, 12rem);
    color: var(--foam);
    letter-spacing: 0.05em;
    display: block;
    line-height: 1;
}

.hero-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(3.6rem, 9vw, 7.2rem);
    color: var(--phosphor);
    letter-spacing: 0.05em;
    display: block;
    line-height: 1;
    margin-top: 0.2em;
}

.question {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--shell);
    text-align: right;
}

.diagonal-beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(0, 229, 208, 0.04) 48%,
        rgba(0, 229, 208, 0.08) 50%,
        rgba(0, 229, 208, 0.04) 52%,
        transparent 60%
    );
    pointer-events: none;
    animation: beamPulse 6s ease-in-out infinite;
}

@keyframes beamPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ---- SECTION 2: THE THERMOCLINE ---- */
.section-thermocline {
    background: var(--twilight);
}

.collage-panel {
    position: relative;
    width: clamp(180px, 25vw, 320px);
    height: clamp(230px, 32vw, 400px);
}

.collage-piece {
    position: absolute;
    border-radius: 4px;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.fade-target.revealed .collage-piece {
    opacity: 1;
}

.piece-1 {
    width: 70px; height: 90px;
    top: 0; left: 0;
    background: linear-gradient(135deg, var(--deep-teal), var(--coral-magenta));
    clip-path: polygon(0 0, 98% 2%, 100% 97%, 3% 100%);
    transform: rotate(-3deg);
    transition-delay: 0s;
}
.piece-2 {
    width: 80px; height: 103px;
    top: 30px; left: 40px;
    background: linear-gradient(180deg, var(--coral-magenta), var(--amber-bio));
    clip-path: polygon(2% 0, 100% 1%, 97% 100%, 0 98%);
    transform: rotate(4deg);
    transition-delay: 0.3s;
}
.piece-3 {
    width: 65px; height: 84px;
    top: 80px; left: 10px;
    background: linear-gradient(45deg, var(--phosphor), var(--deep-teal));
    clip-path: polygon(0 3%, 97% 0, 100% 100%, 4% 97%);
    transform: rotate(-1deg);
    transition-delay: 0.6s;
}
.piece-4 {
    width: 75px; height: 97px;
    top: 60px; left: 80px;
    background: linear-gradient(200deg, var(--amber-bio), var(--twilight));
    clip-path: polygon(1% 0, 100% 2%, 98% 100%, 0 97%);
    transform: rotate(2deg);
    transition-delay: 0.9s;
}
.piece-5 {
    width: 60px; height: 77px;
    top: 120px; left: 50px;
    background: linear-gradient(90deg, var(--foam), var(--coral-magenta));
    clip-path: polygon(0 0, 100% 3%, 97% 100%, 2% 98%);
    transform: rotate(-5deg);
    transition-delay: 1.2s;
}

.identity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.timeline-word {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--foam);
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-target.revealed .timeline-word {
    opacity: 1;
    transform: translateX(0);
}

/* Fingerprint */
.fingerprint {
    position: relative;
    width: clamp(120px, 15vw, 200px);
    height: clamp(120px, 15vw, 200px);
}

.fingerprint-ring {
    position: absolute;
    border-radius: 48% 52% 50% 50%;
    border: 1px solid;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dot-matrix-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--phosphor) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.03;
    pointer-events: none;
}

/* ---- SECTION 3: THE MESOPELAGIC ---- */
.section-mesopelagic {
    background: linear-gradient(180deg, var(--twilight), var(--trench));
}

.crt-terminal {
    position: relative;
    width: clamp(200px, 25vw, 350px);
    height: clamp(160px, 20vw, 250px);
    background: rgba(7, 15, 18, 0.9);
    border: 1px solid var(--deep-teal);
    border-radius: 4px;
    padding: 1rem;
    overflow: hidden;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    color: var(--phosphor);
}

.crt-scanlines {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 229, 208, 0.03) 0px,
        rgba(0, 229, 208, 0.03) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
}

.crt-text {
    position: relative;
    z-index: 1;
    line-height: 1.6;
    letter-spacing: 0.15em;
}

.crt-line {
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.crt-line.visible {
    opacity: 1;
}

/* ID Cards SVG */
.id-cards-svg {
    width: clamp(180px, 22vw, 300px);
    height: auto;
}

.id-card {
    fill: none;
    stroke-width: 1;
    opacity: 0.6;
}

.id-card-1 {
    stroke: var(--deep-teal);
    animation: cardRotate1 12s ease-in-out infinite;
}
.id-card-2 {
    stroke: var(--coral-magenta);
    animation: cardRotate2 15s ease-in-out infinite;
}
.id-card-3 {
    stroke: var(--amber-bio);
    animation: cardRotate3 18s ease-in-out infinite;
}

@keyframes cardRotate1 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(3deg) translate(5px, -5px); }
}
@keyframes cardRotate2 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(-4deg) translate(-8px, 3px); }
}
@keyframes cardRotate3 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(5deg) translate(3px, 8px); }
}

/* Ensō */
.enso-svg {
    width: clamp(120px, 15vw, 200px);
    height: auto;
}

.enso-circle {
    fill: none;
    stroke: var(--coral-magenta);
    stroke-width: 3;
    stroke-dasharray: 487;
    stroke-dashoffset: 487;
    filter: drop-shadow(0 0 4px var(--coral-magenta));
    transition: stroke-dashoffset 8s ease-in-out;
}

.fade-target.revealed .enso-circle {
    stroke-dashoffset: 20;
}

/* ---- SECTION 4: THE ABYSS ---- */
.section-abyss {
    background: var(--trench);
}

.bioluminescent-field {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bio-dot {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--phosphor) 0%, transparent 70%);
    opacity: 0;
}

.bio-dot.active {
    animation: bioGlow var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes bioGlow {
    0% { opacity: 0; transform: translateY(0); }
    20% { opacity: 0.8; }
    50% { opacity: 0; transform: translateY(-10px); }
    75% { opacity: 0.4; transform: translateY(-15px); }
    100% { opacity: 0; transform: translateY(-20px); }
}

.abyss-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    color: var(--foam);
    letter-spacing: 0.15em;
    opacity: 0.7;
}

.domain-glow {
    display: block;
    margin-top: 2rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--phosphor);
    text-shadow: 0 0 10px var(--phosphor), 0 0 30px var(--phosphor), 0 0 60px rgba(0, 229, 208, 0.3);
    animation: domainPulse 4s ease-in-out infinite;
}

@keyframes domainPulse {
    0%, 100% { text-shadow: 0 0 10px var(--phosphor), 0 0 30px var(--phosphor); opacity: 0.8; }
    50% { text-shadow: 0 0 20px var(--phosphor), 0 0 50px var(--phosphor), 0 0 80px rgba(0, 229, 208, 0.4); opacity: 1; }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .section {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "top-left"
            "top-right"
            "bottom-left"
            "bottom-right";
        height: auto;
        min-height: 100vh;
    }

    .z-top-left, .z-top-right, .z-bottom-left, .z-bottom-right {
        padding: clamp(1.5rem, 4vw, 3rem);
    }

    .z-top-right:empty, .z-bottom-left:empty {
        display: none;
    }

    .collage-piece {
        transform: scale(0.8);
    }
}