/* =========================================================
   digitaltelomere.com — a meditation on digital impermanence
   Interference: Decorative floating elements layer note.
   Palette:
     #0d0a14  Deep VHS Black
     #1a1528  Twilight Indigo
     #b8a9c9  Faded Lavender
     #5b8a8a  Sodium Teal
     #c9929a  Muted Rose
     #d4708f  Degraded Pink
     #3a7d8a  Phantom Cyan
     #8a3a6b  Memory Magenta
     #e8e0f0  Static White
   ========================================================= */

:root {
    --void: #0d0a14;
    --surface: #1a1528;
    --lavender: #b8a9c9;
    --teal: #5b8a8a;
    --rose: #c9929a;
    --pink: #d4708f;
    --cyan: #3a7d8a;
    --magenta: #8a3a6b;
    --static: #e8e0f0;

    --content-max: 680px;

    --font-display: "Bungee Shade", "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", monospace;
}

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

html, body {
    width: 100%;
    min-height: 100%;
    background: var(--void);
    color: var(--lavender);
    font-family: var(--font-body);
    font-weight: 300;
    overflow-x: hidden;
    perspective: 1200px;
    perspective-origin: 50% 30%;
}

body {
    position: relative;
    min-height: 720vh;
    letter-spacing: 0.01em;
}

/* ---------- Layer 3: Scanlines + grain (topmost, non-blocking) ---------- */
body::before {
    /* Scanlines: 1px line every 3px */
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 2px,
        rgba(232, 224, 240, 0.08) 2px,
        rgba(232, 224, 240, 0.08) 3px
    );
    opacity: 1;
    transition: opacity 1.2s ease;
    mix-blend-mode: overlay;
}

/* Scanline opacity increases via class from JS as user scrolls deeper */
body.scan-mid::before { opacity: 1.35; }
body.scan-heavy::before { opacity: 1.75; }

body::after {
    /* Film grain */
    content: "";
    position: fixed;
    inset: -10%;
    z-index: 9001;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(232,224,240,0.06) 1px, transparent 1px),
        radial-gradient(rgba(184,169,201,0.04) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    opacity: 0.55;
    animation: grain 0.4s steps(4) infinite;
    mix-blend-mode: screen;
}

@keyframes grain {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-1px, 1px); }
    50%  { transform: translate(1px, -1px); }
    75%  { transform: translate(-1px, -1px); }
    100% { transform: translate(1px, 1px); }
}

/* ---------- Layer 0: Substrate (bokeh background) ---------- */
.substrate {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(58,125,138,0.10), transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(138,58,107,0.10), transparent 60%),
        linear-gradient(180deg, #0a0810 0%, #0d0a14 40%, #0b0812 100%);
}

.bokeh {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    will-change: transform;
    opacity: 0.09;
}

/* Each bokeh has unique size, position, color, duration (prime seconds) */
.bokeh-1  { width: 360px; height: 360px; top:  -4%; left:  8%;
            background: radial-gradient(circle, #3a7d8a 0%, transparent 70%);
            animation: drift-a 43s ease-in-out infinite; opacity: 0.11; }
.bokeh-2  { width: 220px; height: 220px; top:  18%; left: 70%;
            background: radial-gradient(circle, #8a3a6b 0%, transparent 70%);
            animation: drift-b 37s ease-in-out infinite; opacity: 0.10; }
.bokeh-3  { width: 300px; height: 300px; top:  52%; left: 14%;
            background: radial-gradient(circle, #8a3a6b 0%, transparent 70%);
            animation: drift-c 41s ease-in-out infinite; opacity: 0.08; }
.bokeh-4  { width: 180px; height: 180px; top:  30%; left: 40%;
            background: radial-gradient(circle, #3a7d8a 0%, transparent 70%);
            animation: drift-d 31s ease-in-out infinite; opacity: 0.07; }
.bokeh-5  { width: 400px; height: 400px; top:  68%; left: 58%;
            background: radial-gradient(circle, #3a7d8a 0%, transparent 70%);
            animation: drift-a 29s ease-in-out infinite reverse; opacity: 0.06; }
.bokeh-6  { width: 140px; height: 140px; top:   6%; left: 45%;
            background: radial-gradient(circle, #8a3a6b 0%, transparent 70%);
            animation: drift-b 23s ease-in-out infinite; opacity: 0.09; }
.bokeh-7  { width: 260px; height: 260px; top:  84%; left: 22%;
            background: radial-gradient(circle, #3a7d8a 0%, transparent 70%);
            animation: drift-c 17s ease-in-out infinite; opacity: 0.07; }
.bokeh-8  { width: 200px; height: 200px; top:  40%; left: 86%;
            background: radial-gradient(circle, #8a3a6b 0%, transparent 70%);
            animation: drift-d 13s ease-in-out infinite reverse; opacity: 0.09; }
.bokeh-9  { width: 320px; height: 320px; top:  92%; left: 70%;
            background: radial-gradient(circle, #3a7d8a 0%, transparent 70%);
            animation: drift-a 11s ease-in-out infinite; opacity: 0.05; }
.bokeh-10 { width: 170px; height: 170px; top:  60%; left:  2%;
            background: radial-gradient(circle, #8a3a6b 0%, transparent 70%);
            animation: drift-b 7s ease-in-out infinite; opacity: 0.08; }

@keyframes drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(40px, -30px, 0) scale(1.05); }
}
@keyframes drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-50px, 35px, 0) scale(0.95); }
}
@keyframes drift-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(25px, 40px, 0) scale(1.08); }
    66%      { transform: translate3d(-30px, -20px, 0) scale(0.97); }
}
@keyframes drift-d {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(60px, 50px, 0) scale(1.02); }
}

/* Near the end of the page, bokeh animations slow (paused look via reduced playback) */
body.bokeh-slow .bokeh {
    animation-duration: 120s !important;
}

/* ---------- Layer 2: Interference (ghosts + strands + dust) ---------- */
.interference {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Signal ghosts — large, blurred offset rectangles echoing content shape */
.signal-ghost {
    position: absolute;
    width: 280px;
    height: 120px;
    background: rgba(91, 138, 138, 0.04);
    filter: blur(6px);
    border-radius: 4px;
    transform: translateZ(-100px);
}
.ghost-1 { top: 140vh; left: 12%; width: 320px; height: 140px; }
.ghost-2 { top: 290vh; left: 58%; width: 260px; height: 180px; transform: translate(14px, 18px) translateZ(-100px); }
.ghost-3 { top: 460vh; left: 22%; width: 300px; height: 120px; transform: translate(-12px, 10px) translateZ(-100px); }

/* Telomere strands — horizontal dashed lines drifting up slowly */
.telomere-strand {
    position: absolute;
    height: 0;
    border-top: 3px dashed var(--pink);
    opacity: 0.25;
    width: 90px;
    animation: strand-drift 41s linear infinite;
}
.strand-1 { top: 130vh; left: 80%; width: 110px; animation-duration: 29s; opacity: 0.22; }
.strand-2 { top: 180vh; left:  8%; width: 80px;  animation-duration: 37s; opacity: 0.28; }
.strand-3 { top: 230vh; left: 65%; width: 120px; animation-duration: 43s; opacity: 0.24; }
.strand-4 { top: 280vh; left: 18%; width: 100px; animation-duration: 23s; opacity: 0.30; }
.strand-5 { top: 330vh; left: 72%; width: 70px;  animation-duration: 31s; opacity: 0.26; }
.strand-6 { top: 380vh; left: 12%; width: 90px;  animation-duration: 17s; opacity: 0.28; }
.strand-7 { top: 430vh; left: 60%; width: 80px;  animation-duration: 19s; opacity: 0.22; }
.strand-8 { top: 490vh; left: 30%; width: 60px;  animation-duration: 13s; opacity: 0.24; }

@keyframes strand-drift {
    0%   { transform: translate3d(0, 0, 0);    opacity: 0; }
    10%  { opacity: 0.25; }
    50%  { transform: translate3d(8px, -40vh, 0); opacity: 0.25; }
    90%  { opacity: 0; }
    100% { transform: translate3d(-4px, -80vh, 0); opacity: 0; }
}

/* Strands that shorten visibly (telomere-shortening metaphor) */
.telomere-strand.shortening {
    animation: strand-drift 41s linear infinite, strand-shorten 23s ease-in-out infinite;
}
@keyframes strand-shorten {
    0%, 100% { width: 120px; }
    50%      { width: 40px; }
}

/* Pixel dust — box-shadow array of tiny squares */
.pixel-dust {
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 2px;
    background: transparent;
    box-shadow:
        12vw 18vh 0 0.5px rgba(232,224,240,0.10),
        72vw 32vh 0 0.5px rgba(232,224,240,0.08),
        28vw 55vh 0 0.5px rgba(232,224,240,0.07),
        88vw 82vh 0 0.5px rgba(232,224,240,0.09),
        4vw  110vh 0 0.5px rgba(232,224,240,0.10),
        60vw 138vh 0 0.5px rgba(232,224,240,0.08),
        44vw 165vh 0 0.5px rgba(232,224,240,0.06),
        18vw 195vh 0 0.5px rgba(232,224,240,0.07),
        80vw 220vh 0 0.5px rgba(232,224,240,0.09),
        34vw 250vh 0 0.5px rgba(232,224,240,0.08),
        66vw 278vh 0 0.5px rgba(232,224,240,0.06),
        10vw 305vh 0 0.5px rgba(232,224,240,0.09),
        52vw 330vh 0 0.5px rgba(232,224,240,0.07),
        76vw 360vh 0 0.5px rgba(232,224,240,0.08),
        22vw 390vh 0 0.5px rgba(232,224,240,0.10),
        58vw 420vh 0 0.5px rgba(232,224,240,0.06),
        38vw 448vh 0 0.5px rgba(232,224,240,0.07),
        86vw 478vh 0 0.5px rgba(232,224,240,0.08),
        14vw 505vh 0 0.5px rgba(232,224,240,0.06),
        62vw 540vh 0 0.5px rgba(232,224,240,0.07),
        30vw 568vh 0 0.5px rgba(232,224,240,0.08),
        74vw 598vh 0 0.5px rgba(232,224,240,0.06),
        48vw 625vh 0 0.5px rgba(232,224,240,0.09),
        6vw  652vh 0 0.5px rgba(232,224,240,0.07);
    animation: dust-fall 120s linear infinite;
}

@keyframes dust-fall {
    0%   { transform: translateY(0); }
    100% { transform: translateY(40vh); }
}

/* ---------- Layer 1: Signal (main content) ---------- */
.signal-layer {
    position: relative;
    z-index: 5;
    display: block;
    width: 100%;
    transform: translateZ(0);
}

/* ---- Opening Signal ---- */
.opening-signal {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6vw;
}

.opening-wrap {
    max-width: var(--content-max);
    width: 100%;
    text-align: center;
    transform: translateX(-2px);
}

.domain-name {
    font-family: var(--font-mono);
    font-size: clamp(1.2rem, 3.4vw, 2rem);
    font-weight: 400;
    color: var(--lavender);
    letter-spacing: 0.14em;
    text-transform: lowercase;
    margin-bottom: 2.2rem;
    text-shadow: 0 0 12px rgba(184,169,201,0.20);
    min-height: 1.6em;
}

.cursor-blink {
    display: inline-block;
    color: var(--pink);
    animation: blink 1.1s steps(2) infinite;
    margin-left: 2px;
}
@keyframes blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.tagline {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    line-height: 1.75;
    color: var(--lavender);
    opacity: 0;
    transition: opacity 1.6s ease;
    padding: 0 1rem;
}

.tagline.visible { opacity: 0.88; }
.tagline.shaking { animation: shake-error 0.15s ease-in-out 1; }

@keyframes shake-error {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-2px); }
    50%  { transform: translateX(2px); }
    75%  { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

/* ---- First Depth / Degradation / Fade — shared content styling ---- */
.first-depth,
.degradation-zone,
.fade-section {
    position: relative;
    max-width: 100%;
    padding: 0 6vw;
}

.first-depth { padding-top: 12vh; padding-bottom: 8vh; }
.degradation-zone { padding-top: 18vh; padding-bottom: 14vh; }
.fade-section { padding-top: 24vh; padding-bottom: 12vh; }

.content-block {
    max-width: var(--content-max);
    margin: 8vh auto;
    padding: 1.8rem 1.6rem;
    background: rgba(26, 21, 40, 0.55);
    border: 1px solid rgba(91,138,138,0.10);
    border-radius: 2px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.content-block p {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--lavender);
    font-weight: 300;
}

/* Staggered horizontal offsets — per-section drift */
.offset-left   { margin-left:  max(0px, calc(50% - var(--content-max) / 2 - 3vw)); margin-right: auto; transform: translate(-3vw, 12px); }
.offset-right  { margin-right: max(0px, calc(50% - var(--content-max) / 2 - 3vw)); margin-left:  auto; transform: translate(3vw, 12px); }
.offset-center { margin-left: auto; margin-right: auto; transform: translate(0, 12px); }

/* Progressive spacing in later zones */
.degradation-zone .content-block { margin: 14vh auto; }
.degradation-zone .content-block.sparse { margin: 22vh auto; }
.fade-section .content-block { margin: 28vh auto; }
.fade-section .content-block.sparse { margin: 30vh auto; }

/* Reveal state (IntersectionObserver) */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.1s ease-out, transform 1.1s ease-out;
    will-change: opacity, transform;
}
.offset-left.reveal  { transform: translate(-3vw, 12px); }
.offset-right.reveal { transform: translate(3vw, 12px); }

.reveal.visible,
.offset-center.reveal.visible { transform: translate(0, 0); opacity: 1; }
.offset-left.reveal.visible   { transform: translate(-3vw, 0); opacity: 1; }
.offset-right.reveal.visible  { transform: translate(3vw, 0); opacity: 1; }

/* Signal "lock-on" displacement on reveal — 1px single-frame jog */
.reveal.settling { animation: settle 0.18s steps(2, end); }
@keyframes settle {
    0%   { filter: none; }
    50%  { filter: blur(0.4px) contrast(1.1); }
    100% { filter: none; }
}

/* Divider block */
.divider-block {
    max-width: var(--content-max);
    margin: 10vh auto;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rose);
    opacity: 0.6;
    padding: 1.4rem 0;
    border-top: 1px dashed rgba(201,146,154,0.2);
    border-bottom: 1px dashed rgba(201,146,154,0.2);
}

.timecode-marker {
    max-width: var(--content-max);
    margin: 14vh auto 4vh auto;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0.75;
}

.fade-marker { color: var(--rose); }

.tc { font-family: var(--font-mono); }

/* Entropy word (Bungee Shade huge, per-letter jitter) */
.entropy-word {
    max-width: var(--content-max);
    margin: 16vh auto 14vh auto;
    text-align: center;
    font-family: var(--font-display), "Bungee Shade", sans-serif;
    font-weight: 400;
    font-size: clamp(3.2rem, 12vw, 9rem);
    letter-spacing: 0.06em;
    color: var(--teal);
    text-shadow: 3px 3px 0 rgba(91,138,138,0.25), 6px 6px 0 rgba(58,125,138,0.15);
    line-height: 1;
}

.entropy-word span {
    display: inline-block;
    transition: transform 0.4s ease;
}
.entropy-word span:nth-child(1) { transform: translateY(-2px); }
.entropy-word span:nth-child(2) { transform: translateY(3px); }
.entropy-word span:nth-child(3) { transform: translateY(-1px); }
.entropy-word span:nth-child(4) { transform: translateY(4px); }
.entropy-word span:nth-child(5) { transform: translateY(-2px); }
.entropy-word span:nth-child(6) { transform: translateY(2px); }
.entropy-word span:nth-child(7) { transform: translateY(-3px); }

/* Final line of the Fade */
.final-line {
    max-width: var(--content-max);
    margin: 20vh auto 8vh auto;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    color: var(--rose);
    opacity: 0.6;
}

/* Void — pure empty space at the end */
.void {
    display: block;
    width: 100%;
    height: 100vh;
}

/* ---------- VCR Timecode ---------- */
.vcr-timecode {
    position: fixed;
    right: 1.4rem;
    bottom: 1.4rem;
    z-index: 9100;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    padding: 0.5rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pink);
    background: rgba(13, 10, 20, 0.45);
    border: 1px solid rgba(212,112,143,0.18);
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.85;
    animation: tc-pulse 4s ease-in-out infinite, tc-tremor 0.2s infinite;
    transition: opacity 0.4s ease, background 0.4s ease;
}

.vcr-timecode:hover {
    opacity: 1;
    color: var(--rose);
    background: rgba(26,21,40,0.7);
}

.tc-record {
    color: var(--pink);
    opacity: 0.95;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
}

.tc-time {
    color: var(--pink);
}

@keyframes tc-pulse {
    0%, 100% { opacity: 0.96; }
    50%      { opacity: 0.72; }
}

@keyframes tc-tremor {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(0.5px, -0.3px); }
    50%  { transform: translate(-0.3px, 0.4px); }
    75%  { transform: translate(0.4px, 0.2px); }
    100% { transform: translate(-0.2px, -0.4px); }
}

/* ---------- VHS Tracking Bar ---------- */
.tracking-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: -20px;
    height: 9px;
    z-index: 9050;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(232,224,240,0.02),
        rgba(232,224,240,0.22),
        rgba(232,224,240,0.02)
    );
    backdrop-filter: hue-rotate(40deg) contrast(1.3) brightness(1.1);
    -webkit-backdrop-filter: hue-rotate(40deg) contrast(1.3) brightness(1.1);
    opacity: 0;
    transform: translateY(0);
    will-change: transform, opacity;
}

.tracking-bar.sweep {
    animation: tracking-sweep 0.8s linear 1;
}

@keyframes tracking-sweep {
    0%   { transform: translateY(0);     opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(110vh); opacity: 0; }
}

/* ---------- Static Burst (when timecode clicked) ---------- */
.static-burst {
    position: fixed;
    inset: 0;
    z-index: 9200;
    pointer-events: none;
    opacity: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(232,224,240,0.08) 0 1px,
            transparent 1px 2px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(201,146,154,0.06) 0 1px,
            transparent 1px 3px
        );
    mix-blend-mode: screen;
}

.static-burst.active {
    animation: static-burst-anim 0.6s steps(6) 1;
}

@keyframes static-burst-anim {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- Responsiveness ---------- */
@media (max-width: 640px) {
    .content-block {
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 1.4rem 1.2rem;
        transform: translate(0, 12px) !important;
    }
    .offset-left.reveal.visible,
    .offset-right.reveal.visible,
    .offset-center.reveal.visible {
        transform: translate(0, 0) !important;
    }
    .vcr-timecode {
        right: 0.8rem;
        bottom: 0.8rem;
        font-size: 0.65rem;
        padding: 0.4rem 0.55rem;
    }
    .entropy-word {
        font-size: clamp(2.6rem, 14vw, 6rem);
    }
}

/* ---------- Selection color — on-theme ---------- */
::selection {
    background: rgba(212,112,143,0.35);
    color: var(--static);
}