/* Home page world: a gradient from the cosmos down to the core, one band per layer,
   with neon line art floating at different depths (moved by world.js). */

/* -------------------------
   Background
-------------------------- */

body {
    background: #0b0520;
}

.world {
    position: relative;
    isolation: isolate;
    /* Art drifting past the edges must not grow the page */
    overflow: clip;
}

/* Each layer paints its own band; every band starts with the colour the previous one ended on,
   so the page reads as one continuous gradient. Backgrounds scroll natively and never stutter. */
#universe { background: linear-gradient(#0b0520, #170a38); }
#clouds { background: linear-gradient(#170a38 0%, #22297a 28%, #3a64bd 55%, #5b9be3 80%, #4f8bd6 100%); }
#mountains { background: linear-gradient(#4f8bd6 0%, #2d7f9e 20%, #0f6a5a 42%, #0b6447 70%, #0d5236 100%); }
#earth { background: linear-gradient(#0d5236 0%, #173f22 45%, #382c16 100%); }
#underground { background: linear-gradient(#382c16 0%, #4c1e15 50%, #4a1610 100%); }
#core {
    background:
        radial-gradient(120% 45% at 50% 100%, rgba(255, 120, 50, 0.35), rgba(255, 120, 50, 0) 70%),
        linear-gradient(#4a1610, #3a1209);
}

/* Star field layer, above the bands and below the art */
.world-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Star field over the cosmos and the top of the sky */
.stars {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 260vh;
    background-image:
        radial-gradient(1.5px 1.5px at 22px 38px, #fff, transparent),
        radial-gradient(1px 1px at 140px 92px, #e9dcff, transparent),
        radial-gradient(1.2px 1.2px at 210px 170px, #fff, transparent),
        radial-gradient(1px 1px at 70px 210px, #cfe9ff, transparent),
        radial-gradient(1.6px 1.6px at 180px 20px, #fff, transparent),
        radial-gradient(1px 1px at 100px 140px, #fff, transparent);
    background-size: 240px 240px;
    -webkit-mask-image: linear-gradient(#000 0%, #000 45%, transparent 100%);
    mask-image: linear-gradient(#000 0%, #000 45%, transparent 100%);
    opacity: 0.75;
}

.stars-b {
    background-size: 330px 330px;
    background-position: 60px 90px;
    opacity: 0.5;
    animation: twinkle 5s ease-in-out infinite alternate;
}

@keyframes twinkle {
    from { opacity: 0.15; }
    to { opacity: 0.6; }
}

/* -------------------------
   Layers
-------------------------- */

.zone {
    position: relative;
    min-height: 130vh;
    padding: 26vh 0 14vh;
}

#universe {
    min-height: 120vh;
}

#clouds {
    min-height: 115vh;
    padding-top: 24vh;
}

#core {
    min-height: 120vh;
    padding-bottom: 30vh;
}

.zone-inner {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

/* List and detail panel slide side by side */
.panels {
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.panels .htrack {
    position: relative;
    inset: auto;
    width: 200%;
    height: auto;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.chapter.is-detail .panels .htrack {
    transform: translate3d(-50%, 0, 0);
}

.scene-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

/* -------------------------
   Neon line art
-------------------------- */

/* No z-index here on purpose: each drawing sorts against the content on its own */
.art {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.neon {
    position: absolute;
    z-index: 2;
    width: clamp(calc(var(--w) * 0.45px), calc(var(--w) * 0.0694vw), calc(var(--w) * 1px));
    translate: -50% -50%;
    will-change: transform;
}

/* Foreground: big, fast, and passing over the content near the edges */
.neon.is-front {
    z-index: 20;
    --stroke: 3px;
}

.neon svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    rotate: var(--rot, 0deg);
    fill: none;
    stroke: var(--c);
    stroke-width: var(--stroke, 2px);
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 9px var(--c));
}

.neon svg * {
    vector-effect: non-scaling-stroke;
}

.neon .dot {
    fill: var(--c);
}

.neon .ghost {
    stroke: none;
}

/* Slow idle float, three rhythms so nothing moves in lockstep */
.bob-0 { animation: bob 9s ease-in-out infinite; }
.bob-1 { animation: bob 12s ease-in-out -4s infinite; }
.bob-2 { animation: bob 15s ease-in-out -8s infinite; }

@keyframes bob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
}

/* -------------------------
   Reality glitch: now and then a drawing flickers out
   and its realistic version shows through for a second
-------------------------- */

@property --neon-o {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

.neon svg {
    opacity: var(--neon-o);
}

.neon-real {
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.neon.is-glitch {
    animation: neon-fail 1.2s linear forwards;
}

.neon.is-glitch .neon-real {
    animation: reality 1.2s linear forwards;
}

/* The neon tube stutters, dies, and comes back */
@keyframes neon-fail {
    0% { --neon-o: 1; }
    4% { --neon-o: 0.2; }
    7% { --neon-o: 1; }
    10% { --neon-o: 0; }
    86% { --neon-o: 0; }
    90% { --neon-o: 0.5; }
    93% { --neon-o: 0; }
    97%, 100% { --neon-o: 1; }
}

/* Torn, colour-split frames on the way in and out, a clean realistic image in between */
@keyframes reality {
    0%, 9% {
        opacity: 0;
        clip-path: inset(0);
        transform: none;
        filter: none;
    }
    10% {
        opacity: 1;
        clip-path: inset(18% 0 52% 0);
        transform: translate3d(-8px, 0, 0);
        filter: drop-shadow(-5px 0 0 rgba(255, 0, 90, 0.8)) drop-shadow(5px 0 0 rgba(0, 240, 255, 0.8));
    }
    13% {
        clip-path: inset(58% 0 8% 0);
        transform: translate3d(7px, 0, 0);
    }
    16% {
        clip-path: inset(4% 0 30% 0);
        transform: translate3d(-3px, 0, 0);
        filter: drop-shadow(-2px 0 0 rgba(255, 0, 90, 0.6)) drop-shadow(2px 0 0 rgba(0, 240, 255, 0.6));
    }
    19%, 80% {
        opacity: 1;
        clip-path: inset(0);
        transform: none;
        filter: none;
    }
    83% {
        clip-path: inset(40% 0 28% 0);
        transform: translate3d(9px, 0, 0);
        filter: drop-shadow(-5px 0 0 rgba(255, 0, 90, 0.8)) drop-shadow(5px 0 0 rgba(0, 240, 255, 0.8));
    }
    87% {
        opacity: 1;
        clip-path: inset(8% 0 70% 0);
        transform: translate3d(-6px, 0, 0);
    }
    90%, 100% {
        opacity: 0;
        clip-path: inset(0);
        transform: none;
        filter: none;
    }
}

/* -------------------------
   Headline word reveal
-------------------------- */

[data-reveal] .w {
    display: inline-block;
    opacity: 0.18;
    transition: opacity 0.12s linear;
}

/* -------------------------
   Small screens + reduced motion
-------------------------- */

@media (max-width: 760px) {
    .zone {
        min-height: 110vh;
        padding: 18vh 0 12vh;
    }

    .zone-inner,
    .scene-inner {
        padding: 0 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bob-0,
    .bob-1,
    .bob-2,
    .stars-b {
        animation: none;
    }

    [data-reveal] .w {
        opacity: 1;
    }

    .neon.is-glitch,
    .neon.is-glitch .neon-real {
        animation: none;
    }
}