/* ===================================================
   hil.st — Glitch-Art Marble Deep-Sea Editorial
   =================================================== */

/* --- CSS Custom Properties --- */
:root {
    --abyssal-navy: #0a1628;
    --midnight-current: #122240;
    --bioluminescent-teal: #00c9b7;
    --thermal-gold: #e8a849;
    --veined-cream: #e2dcd0;
    --quarry-slate: #7a8b99;
    --signal-magenta: #d64090;
    --trench-indigo: #1a3a6e;

    --depth-color: #1a3a6e;
    --depth-warmth: 0.08;

    --font-headline: 'Outfit', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

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

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

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--veined-cream);
    background-color: var(--depth-color);
    overflow-x: hidden;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Marble Base Texture (applied to body) --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background:
        repeating-linear-gradient(135deg, transparent, transparent 60px, rgba(226,220,208,0.04) 60px, rgba(226,220,208,0.04) 61px),
        repeating-linear-gradient(45deg, transparent, transparent 80px, rgba(122,139,153,0.03) 80px, rgba(122,139,153,0.03) 81px),
        radial-gradient(ellipse at 30% 70%, rgba(226,220,208,0.06), transparent 50%);
}

/* --- Sonar Pulse --- */
.sonar-pulse {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border: 1px solid rgba(0, 201, 183, 0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    opacity: 1;
}

.sonar-pulse.active {
    animation: sonarExpand 2.5s ease-out forwards;
}

@keyframes sonarExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    80% {
        opacity: 0.2;
    }
    100% {
        width: 250vmax;
        height: 250vmax;
        opacity: 0;
    }
}

/* --- Depth Indicator --- */
.depth-indicator {
    position: fixed;
    right: 12px;
    top: 10%;
    height: 80%;
    width: 2px;
    background: rgba(122, 139, 153, 0.15);
    z-index: 100;
    border-radius: 1px;
}

.depth-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, var(--bioluminescent-teal), var(--trench-indigo), var(--abyssal-navy));
    border-radius: 1px;
    transition: height 0.15s linear;
}

/* --- Particle Field --- */
.particle-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--bioluminescent-teal);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 201, 183, 0.3);
    pointer-events: none;
}

/* --- Glitch Overlay --- */
.glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
}

.glitch-overlay.active {
    animation: glitchFlash 0.6s ease-out forwards;
}

@keyframes glitchFlash {
    0% { opacity: 0; }
    8% { opacity: 1; }
    10% {
        opacity: 1;
        background:
            linear-gradient(transparent 0%, transparent 20%, rgba(214,64,144,0.08) 20%, rgba(214,64,144,0.08) 20.5%, transparent 20.5%,
            transparent 45%, rgba(214,64,144,0.06) 45%, rgba(214,64,144,0.06) 45.8%, transparent 45.8%,
            transparent 72%, rgba(214,64,144,0.1) 72%, rgba(214,64,144,0.1) 72.3%, transparent 72.3%,
            transparent 100%);
    }
    15% {
        opacity: 1;
        transform: translateX(3px);
    }
    20% {
        transform: translateX(-7px);
    }
    25% {
        transform: translateX(2px);
    }
    30% {
        transform: translateX(-4px);
        opacity: 0.8;
    }
    40% {
        transform: translateX(0);
        opacity: 0.3;
    }
    100% {
        transform: translateX(0);
        opacity: 0;
    }
}

/* --- Blur-Focus Reveal System --- */
[data-reveal] {
    filter: blur(8px);
    opacity: 0.3;
    transition: filter 0.8s ease-out, opacity 0.6s ease-out;
}

[data-reveal].revealed {
    filter: blur(0px);
    opacity: 1;
}

/* ==========================================
   ZONE 1 — Surface Layer
   ========================================== */
.zone-surface {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    padding-bottom: 38vh;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        rgba(26, 58, 110, 0.9) 0%,
        rgba(232, 168, 73, 0.08) 20%,
        var(--midnight-current) 80%,
        var(--abyssal-navy) 100%
    );
}

.waterline {
    position: absolute;
    top: 50vh;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(226, 220, 208, 0.2) 20%,
        rgba(226, 220, 208, 0.2) 80%,
        transparent 100%
    );
    z-index: 5;
}

.surface-content {
    position: relative;
    z-index: 10;
    padding-left: clamp(2rem, 8vw, 8rem);
}

.domain-title {
    font-family: var(--font-headline);
    font-weight: 300;
    font-size: clamp(8rem, 20vw, 16rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--veined-cream);
    position: relative;
    left: clamp(-2rem, -4vw, -5rem);
}

.marble-surface {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    opacity: 0.06;
    z-index: 1;
    background:
        repeating-linear-gradient(135deg, transparent, transparent 40px, rgba(226,220,208,0.08) 40px, rgba(226,220,208,0.08) 41px),
        repeating-linear-gradient(45deg, transparent, transparent 60px, rgba(122,139,153,0.06) 60px, rgba(122,139,153,0.06) 61px),
        radial-gradient(ellipse at 50% 50%, rgba(226,220,208,0.12), transparent 60%);
}

/* ==========================================
   ZONE 2 — Mid-Depth Editorial Spreads
   ========================================== */
.zone-mid {
    position: relative;
    z-index: 10;
    padding: 8vh 0;
}

/* --- Editorial Spreads --- */
.spread {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 6rem);
    padding: 0 clamp(2rem, 6vw, 8rem);
    margin-bottom: 8vh;
}

.spread:nth-child(3n+1) { margin-bottom: 14vh; }
.spread:nth-child(3n+2) { margin-bottom: 6vh; }
.spread:nth-child(3n) { margin-bottom: 12vh; }

.spread-left {
    flex-direction: row;
    justify-content: flex-start;
}

.spread-right {
    flex-direction: row;
    justify-content: flex-end;
}

.spread-left .spread-text {
    width: clamp(280px, 45vw, 550px);
    transform: rotate(-0.5deg);
}

.spread-right .spread-text {
    width: clamp(280px, 45vw, 550px);
    transform: rotate(0.3deg);
}

.spread-heading {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--veined-cream);
    margin-bottom: 1.2rem;
    position: relative;
    left: clamp(-1rem, -2vw, -3rem);
}

.spread-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.005em;
    color: rgba(226, 220, 208, 0.85);
}

/* --- Bracket Frame --- */
.bracket-frame {
    position: relative;
    padding: 1.5rem 1.2rem;
}

.bracket {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--quarry-slate);
    opacity: 0.6;
    line-height: 1;
}

.bracket-tl {
    top: 0;
    left: 0;
}

.bracket-br {
    bottom: 0;
    right: 0;
}

/* --- Marble Texture Blocks --- */
.spread-marble {
    width: clamp(180px, 35vw, 400px);
    height: clamp(220px, 30vw, 360px);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(122, 139, 153, 0.1);
}

.marble-block-1 {
    background:
        repeating-linear-gradient(120deg, transparent, transparent 30px, rgba(226,220,208,0.06) 30px, rgba(226,220,208,0.06) 31px),
        repeating-linear-gradient(60deg, transparent, transparent 50px, rgba(0,201,183,0.03) 50px, rgba(0,201,183,0.03) 51px),
        radial-gradient(ellipse at 40% 60%, rgba(226,220,208,0.1), transparent 55%),
        linear-gradient(180deg, var(--midnight-current), var(--abyssal-navy));
    transform: rotate(-0.8deg);
}

.marble-block-2 {
    background:
        repeating-linear-gradient(150deg, transparent, transparent 45px, rgba(226,220,208,0.05) 45px, rgba(226,220,208,0.05) 46px),
        repeating-linear-gradient(30deg, transparent, transparent 70px, rgba(232,168,73,0.03) 70px, rgba(232,168,73,0.03) 71px),
        radial-gradient(ellipse at 60% 30%, rgba(226,220,208,0.08), transparent 50%),
        linear-gradient(170deg, var(--midnight-current), var(--trench-indigo));
    transform: rotate(0.3deg);
}

.marble-block-3 {
    background:
        repeating-linear-gradient(100deg, transparent, transparent 25px, rgba(214,64,144,0.03) 25px, rgba(214,64,144,0.03) 26px),
        repeating-linear-gradient(170deg, transparent, transparent 55px, rgba(226,220,208,0.05) 55px, rgba(226,220,208,0.05) 56px),
        radial-gradient(ellipse at 35% 55%, rgba(0,201,183,0.06), transparent 45%),
        linear-gradient(185deg, var(--trench-indigo), var(--abyssal-navy));
    transform: rotate(0.5deg);
}

.marble-block-4 {
    background:
        repeating-linear-gradient(140deg, transparent, transparent 35px, rgba(226,220,208,0.07) 35px, rgba(226,220,208,0.07) 36px),
        repeating-linear-gradient(50deg, transparent, transparent 65px, rgba(122,139,153,0.04) 65px, rgba(122,139,153,0.04) 66px),
        radial-gradient(ellipse at 55% 45%, rgba(232,168,73,0.05), transparent 50%),
        linear-gradient(175deg, var(--abyssal-navy), #080f1e);
    transform: rotate(-0.3deg);
}

/* Glitch bands on marble blocks */
.spread-marble::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    mix-blend-mode: difference;
    background:
        linear-gradient(transparent 0%, transparent 19%, rgba(214,64,144,0.15) 19%, rgba(214,64,144,0.15) 20%, transparent 20%,
        transparent 44%, rgba(0,201,183,0.1) 44%, rgba(0,201,183,0.1) 45.5%, transparent 45.5%,
        transparent 71%, rgba(214,64,144,0.12) 71%, rgba(214,64,144,0.12) 72%, transparent 72%,
        transparent 100%);
    animation: marbleGlitch 12s step-end infinite;
}

@keyframes marbleGlitch {
    0%, 92% {
        opacity: 0;
        transform: translateX(0);
    }
    92.5% {
        opacity: 1;
        transform: translateX(3px);
    }
    93.5% {
        transform: translateX(7px);
    }
    95% {
        transform: translateX(2px);
    }
    96% {
        transform: translateX(-4px);
    }
    97% {
        opacity: 0.5;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

/* Offset marble glitch timing */
.marble-block-2::before { animation-delay: -3s; }
.marble-block-3::before { animation-delay: -6s; }
.marble-block-4::before { animation-delay: -9s; }

/* --- Marble Vein Separator --- */
.marble-vein {
    width: 80%;
    max-width: 600px;
    height: 1px;
    margin: 2vh auto;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(226, 220, 208, 0.2) 30%,
        rgba(226, 220, 208, 0.2) 70%,
        transparent 100%
    );
}

/* --- Depth Coordinates --- */
.depth-coord {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quarry-slate);
    margin-bottom: 1rem;
    opacity: 0.7;
}

/* ==========================================
   ZONE 3 — Deep Stratum
   ========================================== */
.zone-deep {
    position: relative;
    padding: 12vh 0 8vh;
    z-index: 10;
}

.deep-marble-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.04;
    background:
        repeating-linear-gradient(135deg, transparent, transparent 80px, rgba(226,220,208,0.06) 80px, rgba(226,220,208,0.06) 81px),
        repeating-linear-gradient(45deg, transparent, transparent 120px, rgba(122,139,153,0.04) 120px, rgba(122,139,153,0.04) 121px),
        radial-gradient(ellipse at 50% 50%, rgba(226,220,208,0.08), transparent 60%);
}

.deep-content {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 2rem;
}

.deep-text p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.8;
    color: rgba(226, 220, 208, 0.8);
    margin-bottom: 1.8rem;
}

.deep-closing {
    text-align: center;
    margin-top: 6vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.closing-mark {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--quarry-slate);
    opacity: 0.5;
}

.deep-closing .marble-vein {
    width: 120px;
}

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 768px) {
    .spread {
        flex-direction: column;
        padding: 0 clamp(1.5rem, 4vw, 3rem);
    }

    .spread-right {
        flex-direction: column;
    }

    .spread-left .spread-text,
    .spread-right .spread-text {
        width: 100%;
        transform: none;
    }

    .spread-marble {
        width: 85%;
        height: 200px;
    }

    .spread-heading {
        left: 0;
    }

    .domain-title {
        font-size: clamp(4rem, 18vw, 10rem);
        left: 0;
    }

    .surface-content {
        padding-left: clamp(1.5rem, 5vw, 3rem);
    }

    .depth-indicator {
        right: 6px;
    }
}