:root {

    --navH: 64px;
    --bg: #000;
    --fg: #fff;
    --muted: rgba(255, 255, 255, .72);
    --faint: rgba(255, 255, 255, .10);
    --fainter: rgba(255, 255, 255, .08);
    --max: 1400px;
    --heroShift: 0px;
    --fgDim: #7a7a7a;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--navH) + 18px);
}

/* Prevent layout shift between pages with/without vertical scrollbar */
html {
    scrollbar-gutter: stable;
}

/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable) {
    html {
        overflow-y: scroll;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
}

.wrapNarrow {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px;
}


section {
    padding: 50px 0;
    border-top: 1px solid var(--fainter);
}

section:first-of-type {
    border-top: none;
}


/* Offset anchor jumps so section tops are not hidden behind the fixed top nav */
#stats,
#about,
#books,
#waitlist {
    scroll-margin-top: calc(var(--navH) + 18px);
}

/* remove unwanted divider above stats */
#stats {
    border-top: none;
}


#books {
    border-top: none;
}


/* Section title overrides: keep Books centered, align Stats/About with the left text column */
#stats .sectionTitle,
#about .sectionTitle {
    text-align: left;
    --sectionTitleSize: clamp(28px, 2vw, 42px);
    --sectionTitleGap: 26px;
}

.sectionTitle {
    text-align: center;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sectionTitleGap, 62px);
    font-size: 45px;
    line-height: 1.05;
    font-family: "Space Grotesk";

}

.sectionKicker {
    font-family: "Unbounded", system-ui, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 24px;
    color: rgb(255, 255, 255);
    margin-bottom: 26px;
}

/* HERO */
.hero {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 20vh;
    /* try 6vh–14vh */
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.hero .center {
    text-align: center;
    transform: none;
    /* Reserve space so the call-to-action never overlaps the marquee */
    padding: 0 0 clamp(150px, 18vh, 220px);
}


.title {
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.02;
    font-size: clamp(44px, 6.5vw, 92px);
}

@media (min-width: 980px) {
    .title {
        white-space: nowrap;
    }
}

.subtitle {
    /* keep tighter than the gap to the author */
    margin-top: 12px;
    font-size: clamp(30px, 4.0vw, 54px);
    color: rgb(255, 255, 255);
    letter-spacing: -0.01em;
}

.author {
    /* create a larger separation from the subtitle */
    margin-top: 60px;
    font-size: clamp(30px, 4.0vw, 54px);
    color: rgba(255, 255, 255, .86);
    letter-spacing: -0.01em;
}

.place {
    margin-top: 16px;
    font-size: 18px;
    color: rgba(255, 255, 255, .62);
    font-family: "Unbounded", system-ui, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.explore {
    margin-top: 58px;
    margin-bottom: 120px;
    /* reserve space for marquee so arrow never overlaps */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
}

.explore .label {
    font-family: "Unbounded", system-ui, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 18px;
    color: rgba(255, 255, 255, .66);
}

.arrow {
    display: inline-flex;
    margin-top: 8px;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
}

.arrow span {
    font-size: 22px;
    animation: bounce 1.8s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

/* MARQUEE FULL-BLEED UNDER HERO */
.marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(100% + 80px);
    margin-left: -40px;
    border-top: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    padding: 18px 0;
    overflow: hidden;
}

.track {
    display: flex;
    gap: clamp(12px, 1.6vw, 28px);
    padding: 26px 28px;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}




/* STATS (3 blocks, alternating alignment) */
.statsFlow {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.statsBlock {
    max-width: 980px;
}

.statsBlock.left {
    margin-right: auto;
    text-align: left;
}

.statsBlock.right {
    margin-left: auto;
    text-align: right;
}

.statsBlock.center {
    margin: 0 auto;
    text-align: center;
}

.sline {
    font-size: clamp(14px, 1.4vw, 20px);
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, .82);
}

.sline+.sline {
    margin-top: 14px;
}

/* ABOUT */
.prose {
    max-width: 980px;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .80);
    text-align: left;
}

.prose p {
    margin: 0 0 22px;
}

/* BOOKS */
.books {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 62px;
    align-items: start;
    margin-top: 12px;
}

.card {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    display: block;
}

.cover {
    aspect-ratio: 3 / 4;
    background: rgba(255, 255, 255, .04);
}

.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.body {
    padding: 18px 18px 22px;
}

.bookline {
    font-family: "Unbounded", system-ui, sans-serif;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .60);
}

.btitle {
    margin-top: 15px;
    font-size: 25px;
    /* +33% */
    font-weight: 500;
    letter-spacing: -0.02em;
}

.bsub {
    margin-top: 8px;
    font-size: 19px;
    color: rgb(255, 255, 255);
    line-height: 1.45;
}

.card:last-child {
    grid-column: auto;
    max-width: none;
    justify-self: start;
}

/* Remove hover theatrics */
.card:hover {
    border-color: rgba(255, 255, 255, .10);
    transform: none;
}

.foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 960px) {
    section {
        padding: 92px 0;
    }

    .books {
        grid-template-columns: 1fr;
    }

    .card:last-child {
        grid-column: auto;
        max-width: 100%;
    }

    .title {
        font-size: clamp(52px, 12vw, 92px);
        white-space: normal;
    }

    .subtitle,
    .author {
        font-size: clamp(26px, 6.2vw, 40px);
    }
}

@media (max-width: 520px) {
    .wrap {
        padding: 0 18px;
    }

    .track {
        padding: 20px 18px;
        gap: 46px;
    }
}

/* STATS OVERRIDE — single block, left aligned */
.statsBlock.left {
    text-align: left;
}


#statsFlow {
    width: 100%;
}


/* SPLIT SECTIONS (image + text) */
.split {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(22px, 5vw, 64px);
    align-items: center;
}

.split.aboutSplit {
    grid-template-columns: 1fr auto;
}


/* Center the two-column stats composition within the 1400px wrapper */
.statsSplit {
    max-width: 1200px;
    /* adjust 1160–1280 if needed */
    margin: 0 auto;
}

.statsSplit .tcol {
    max-width: 760px;
}

.vcol {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* center image + caption */
    margin: auto;
}

.vcaption {
    margin-top: 14px;
    font-size: 15px;
    /* ~ +33% from 15px */
    line-height: 1.35;
    text-align: center;
    color: rgba(255, 255, 255, .45);
    font-family: "Unbounded", system-ui, sans-serif;
    width: 100%;
    max-width: 520px;
    margin: auto;
}

.aboutSplit .vcol {
    justify-content: flex-end;
}

.tcol {
    min-width: 0;
}

.vignetteMedium {
    width: clamp(320px, 34vw, 520px);
    height: auto;
    display: block;
    opacity: .92;
    filter: drop-shadow(0 18px 44px rgba(0, 0, 0, .55));
    pointer-events: none;
    user-select: none;
}

/* keep text comfortable in split */
.statsSplit .statsBlock {
    max-width: 980px;
}

.aboutSplit .prose {
    max-width: 980px;
}

/* responsive: stack image above text */
@media (max-width: 960px) {

    .split,
    .split.aboutSplit {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .vcol,
    .aboutSplit .vcol {
        justify-content: center;
        align-items: center;
    }

    .vignetteMedium {
        width: clamp(160px, 46vw, 260px);
    }
}




#partners .marquee {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
}


/* Book IV: Three.js scroll-lock section */
#model3d {
    background: transparent;
    padding: 0px 0;
}

#model3d .model3dStage {
    height: 200vh;
    position: relative;
}

#model3d .model3dSticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#model3dCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

#model3d .model3dViewport {
    width: min(1800px, 96vw);
    height: 85vh;
    background: #000;
    border-radius: 0px;
    border: 0px solid #666;
    overflow: hidden;
    position: relative;
    pointer-events: auto;
}

#model3dHint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 10px 14px;
    border-radius: 0px;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}

#model3dHint.show {
    opacity: 1;
}

#model3dHint.hide {
    opacity: 0;
}

body.model3d-lock {
    overscroll-behavior: none;
}

.model3dOverlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.model3dOverlay.is-hidden {
    opacity: 0;
}

.model3dViewport {
    position: relative;
}

/* ------------------------------------------------------------
   Multi-model support (model3d-a, model3d-b, ...)
   Keep your existing #model3d rules; these extend them so
   duplicated sections with suffixed IDs work without renaming CSS.
------------------------------------------------------------ */

section[id^="model3d-"] {
    background: transparent;
    padding: 0px 0;
}

/* Stage/sticky layout */
section[id^="model3d-"] .model3dStage {
    height: var(--model3dStageHeight, 200vh);
    /* adjust per section if needed */
    position: relative;
}

section[id^="model3d-"] .model3dSticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Viewport frame */
section[id^="model3d-"] .model3dViewport {
    width: min(1800px, 96vw);
    height: 85vh;
    background: #000;
    border-radius: 0px;
    border: 0px solid #666;
    overflow: hidden;
    position: relative;
    pointer-events: auto;
}

/* Canvas sizing (works for model3dCanvas-a/b/etc) */
canvas[id^="model3dCanvas-"] {
    width: 100%;
    height: 100%;
    display: block;
}

/* Hint styling (works for model3dHint-a/b/etc) */
[id^="model3dHint-"] {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 10px 14px;
    border-radius: 0px;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}

[id^="model3dHint-"].show {
    opacity: 1;
}

[id^="model3dHint-"].hide {
    opacity: 0;
}

/* Manual reveal, same motion as .reveal, but not controlled by IntersectionObserver */
.revealManual {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 900ms ease, transform 900ms ease;
    will-change: opacity, transform;
}

.revealManual.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3D stats overlay */
/* Center the overlay block in the viewport */
.model3dStatsOverlay {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* horizontal center */
    padding: 0px;
    pointer-events: none;
    text-transform: none;
    font-family: "Asimovian", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 100;
}


.model3dStatsPart {
    grid-area: 1 / 1;
    /* stack both in the same center slot */
}


/* Keep box readable, allow larger type */
.model3dStatsBox {
    display: inline-block;
    /* shrink to content */
    max-width: min(900px, 86vw);
    /* keeps it from becoming too wide */
    width: auto;
    padding: 20px 20px;
    border: 2px solid rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(6px);
    border-radius: 0px;
}

/* Double-size typography */
.model3dStatsList {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0 0 30px 0;
    display: grid;
    gap: 14px;
    letter-spacing: 0.01em;
    line-height: 1.55;
    font-size: 2rem;
    /* doubled feel */
}

/* Optional: slightly reduce on small screens */
@media (max-width: 720px) {
    .model3dStatsList {
        font-size: 1.35rem;
        gap: 10px;
    }
}

/* Slight emphasis for the building name */
.model3dCaption .capBuilding {
    color: rgba(255, 255, 255, 0.92);
}

/* Optional: slightly dim the location */
.model3dCaption .capPlace {
    color: rgba(255, 255, 255, 0.70);
}

.model3dCaption {
    width: 100%;
    text-align: center;
    padding: 0px 0px 0;
    font-family: "Gugi", system-ui, sans-serif;
    font-weight: 100;
    letter-spacing: 0.03em;
}

.capTitle {
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.92);
}

.capSubtitle {
    font-size: 16px;
    margin: 10px 20px;
    color: rgba(255, 255, 255, 0.75);
}

.capMeta,
.capLocation {
    font-size: 16px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.60);
}

section[model3d-d] {
    padding-top: 0;
    padding-bottom: 0;
}

.model3dCaption {
    padding-top: 0px;
    /* adjust visually */
    padding-bottom: 0px;
}

.model3dCaption {
    margin-top: -60px;
    /* pulls it upward into the stage */
    position: relative;
    z-index: 5;
}

#partners {
    border-top: none;
    margin-bottom: 100px;
}

/* Make scroll CTA clickable above canvas */
.explore {
    position: relative;
    z-index: 40;
    pointer-events: auto;
}

.hero .center {
    position: relative;
    z-index: 40;
}

#about {
    border-top: none;
    padding-top: 150px;
    /* more breathing room */
    padding-bottom: 100px;
}

.aboutSingle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}

#about .prose {
    max-width: 820px;
    text-align: left;
    margin-bottom: 100px;
}


.aboutGlyphColumn {
    position: relative;
    display: flex;
    justify-content: center;
}

#aboutGlyphs {
    width: 40px;
    height: 100%;
    display: block;
    opacity: 0.6;
}

.aboutGlyphColumn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    left: 50%;
    transform: translateX(-50%);
}

.aboutText .prose {
    max-width: 820px;
    text-align: left;
    line-height: 1.7;
}

.aboutImage {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aboutImage .vignetteMedium {
    width: clamp(420px, 45vw, 760px);
    opacity: 0.85;
}

/* ================= Glyph Column (About Section) ================= */

.aboutWithGlyphColumn {
    display: grid;
    grid-template-columns: auto 1fr;
    /* auto-fit left block */
    gap: 10px;
    align-items: start;
}

.glyphColumn {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* needs to be same as in js */
    grid-auto-rows: 30px;
    gap: 4px;
}

.glyphCell {
    width: 24px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: 22px;
}

#about .wrap {
    padding-left: 0px;
    padding-right: 0px;
}

#about .aboutWithGlyphColumn {
    max-width: 980px;
    /* same as prose width */
    margin: 0 auto;
    /* center the entire block */
}

.galaxyWrap {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: auto;
    align-items: center;
    background: black;
}

.galaxyImg {
    display: block;
    width: 100%;
    height: auto;
}

/* 
.galaxyColor {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
            #49ffb3,
            #ff4dc4,
            #ffffff,
            #49ffb3);
    background-size: 300% 300%;
    mix-blend-mode: multiply;
    animation: galaxyShift 14s ease-in-out infinite;
    pointer-events: none;
}

@keyframes galaxyShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
} */


/* =========================================================
   UNIFIED REVEAL SYSTEM — lightweight
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease, transform 650ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Heavy elements: opacity only */
.reveal-heavy {
    opacity: 0;
    transition: opacity 650ms ease;
}

.reveal-heavy.is-visible {
    opacity: 1;
}


/* ============================================================
   Glyph Matrix Hero
   ============================================================ */

/* ---- Glyph Matrix Hero (scoped) ---- */
.hero.heroGlyph {
    padding: 0 !important;
    margin: 0;
}

.hero.heroGlyph .wrap {
    width: 100%;
    max-width: none;
    padding: 0 0 30px 0;
}

.glyphHero {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

.glyphHero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 25;
}

/* WebGL output canvas */
.glyphHero #gl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    /* Prevent iOS text-selection callout and blue highlight on long press */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    image-rendering: crisp-edges;
    z-index: 0;
    cursor: default;
}

.glyphHero #gl.patch-hover {
    cursor: pointer;
}

/* Offscreen source canvas (2D glyph raster), kept in DOM but hidden */
.glyphHero #c {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* --- Intro staging --- */
.glyphHero .stage {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
    transition: opacity 1.25s ease, transform 1.25s ease, filter 1.25s ease;
}

.glyphHero .stage.show {
    opacity: 1;
    transform: translateY(0px);
    filter: blur(0px);
}

/* --- Title block from glyph-matrix --- */
.glyphHero .titleBlock {
    position: absolute;
    inset: 0;
    padding-left: 6vw;
    padding-right: 6vw;
    padding-top: calc(12vh - 20px);
    pointer-events: none;
    z-index: 10;
    font-family: "Unbounded";
    letter-spacing: 0.02em;
    text-align: left;
    --homeHeroTitleSize: clamp(70px, 8.8vw, 160px);
}

#titleGlow {
    position: absolute;
    top: 0;
    left: 0;
    width: 60vw;
    height: 80vh;
    /* background: radial-gradient(ellipse at 35% 40%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 20%); */
    pointer-events: none;
    z-index: 9;
}

.glyphHero .titleLine {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(14px);
    transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s ease;
    transition-delay: calc(520ms - var(--d, 0ms)); /* fade-out: author → subtitle → title */
}

.glyphHero .titleBlock.show .titleLine {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0px);
    transition-delay: var(--d, 0ms); /* fade-in: title → subtitle → author */
}

.glyphHero .titleMain {
    font-weight: 700;
    font-size: var(--homeHeroTitleSize);
    line-height: 1.2;
    margin-bottom: 1.6rem;
}

.glyphHero .titleSub {
    font-weight: 600;
    font-size: calc(var(--homeHeroTitleSize) * 0.5625);
    margin-bottom: 6rem;
}

.glyphHero .titleAuthor {
    font-weight: 500;
    font-size: clamp(28px, calc(var(--homeHeroTitleSize) * 0.3), 48px);
}

.glyphHero .titleButtons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 42;
    display: block;
}

/* --- Scroll hint --- */
/* --- Hero buttons --- */
.glyphHero #scrollHint {
    position: absolute;
    right: calc(50% + 8px);
    bottom: 20vh;
    transform: translateY(10px);
    z-index: 42;
}

.glyphHero #booksHint {
    position: absolute;
    left: calc(50% + 8px);
    bottom: 20vh;
    transform: translateY(10px);
    z-index: 42;
}

.glyphHero #scrollHint.stage.show,
.glyphHero #booksHint.stage.show {
    transform: translateY(0);
    pointer-events: auto;
}

.glyphHero #scrollHint,
.glyphHero #booksHint {
    pointer-events: none;
    cursor: pointer;
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    color: rgba(255, 255, 255, 0.92);
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition:
        opacity 1.25s ease,
        transform 1.25s ease,
        filter 1.25s ease,
        background 0.35s ease,
        border-color 0.35s ease;
    text-decoration: none;
    display: block;
}

.glyphHero #scrollHint .scrollContent,
.glyphHero #booksHint .scrollContent {
    display: flex;
    align-items: center;
    gap: 12px;
}

.glyphHero #scrollHint:hover,
.glyphHero #booksHint:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
}

/* --- Unified control container --- */
.glyphHero #unifiedControls {
    position: absolute;
    top: 24px;
    right: 40px;
    z-index: 20;
    display: flex;
    align-items: center;
    width: 280px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    color: rgba(255, 255, 255, 0.9);
    font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
    font-size: 16px;
    letter-spacing: 0.04em;
    overflow: hidden;

    /* keep staged intro transitions */
    transition: opacity 1.25s ease, transform 1.25s ease, filter 1.25s ease;
}

/* --- Audio control (left side) --- */
.glyphHero #audioControl {
    padding: 8px 12px 10px 12px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.glyphHero #audioControl:hover {
    background: rgba(255, 255, 255, 0.09);
}

/* --- Vertical divider --- */
.glyphHero .controlDivider {
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
    align-self: stretch;
}

/* --- Family indicator (right side) --- */
.glyphHero #glyphFamilyIndicator {
    padding: 8px 12px 10px 12px;
    pointer-events: none;
}

.glyphHero #familyIcon {
    margin-right: 10px;
    font-size: 16px;
}

/* --- Player instructions --- */
.glyphHero #matrixInstructions {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 22;
    width: 300px;
    padding: 8px 12px 10px 12px;
    border: 1px solid hsla(318, 100%, 77%, 0.95);
    background:
        linear-gradient(135deg, rgba(10, 0, 8, 0.82), rgba(0, 18, 12, 0.72));
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    color: hsla(137, 100%, 73%, 0.95);
    box-shadow:
        0 0 18px hsla(318, 100%, 77%, 0.24),
        0 0 26px rgba(57, 255, 20, 0.10),
        inset 0 0 10px hsla(318, 100%, 77%, 0.10);
    font-family: "Space Grotesk", sans-serif;
    font-size: 15px;
    letter-spacing: 0.04em;
}

.glyphHero #matrixInstructions .instrHeader {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 0px;
}

.glyphHero #matrixInstructions .instrTitle {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 166, 220, 0.92);
    text-shadow: 0 0 10px rgba(255, 63, 164, 0.20);
}

.glyphHero #matrixInstructions #closeInstructions {
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    color: rgba(255, 166, 220, 0.88);
    opacity: 0.9;
}

.glyphHero #matrixInstructions #closeInstructions:hover {
    opacity: 1;
}

.glyphHero #matrixInstructions .instrDivider {
    height: 1px;
    background: linear-gradient(90deg, hsla(318, 100%, 77%, 0.72), rgba(57, 255, 20, 0.34));
    margin: 6px -12px 10px -12px;
}

.glyphHero #matrixInstructions .instrLine {
    line-height: 1.5;
    color: hsla(137, 100%, 73%, 0.92);
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.16);
}

.glyphHero #matrixInstructions .closeWrap {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 12px;
    margin-right: 12px;
}

.glyphHero #matrixInstructions .closeWrap::after {
    content: "";
    position: absolute;
    right: 0;

    top: calc(-7px - 1px);
    bottom: calc(-5px - 1px);

    width: 1px;
    background: rgba(57, 255, 20, 0.28);
}

/* ================= Prelude Layer ================= */
#preludeLayer {
    position: absolute;
    inset: 0;
    z-index: 35;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0 30px 0;
    text-align: center;
}

#preludeLayer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 3px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 60%);
    mix-blend-mode: screen;
    animation: preludeFlicker 180ms steps(2) infinite;
}

@keyframes preludeFlicker {
    0% {
        opacity: 0.12;
    }

    100% {
        opacity: 0.2;
    }
}

/* ── Mystical loader ─────────────────────────────────────────────────────── */


#mysticLoader {
    position: absolute;
    top: calc(50% - 15px);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(72px, 12vw, 140px);
    /* Explicit Noto Sans chain so special-script glyphs (Khojki 𑈀, Symbols 2 ✳)
       are rendered correctly on Windows/Linux where system fonts lack coverage. */
    font-family: "Noto Sans Supplemental Punctuation", "Noto Sans Math Glyphs", "Noto Sans Coptic Glyphs",
                 "Noto Sans Symbols 2", "Noto Sans Symbols", "Noto Sans Khojki",
                 ui-sans-serif, sans-serif;
    line-height: 1;
    opacity: 1;
    transition: opacity 600ms ease;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 40px currentColor;
}

#mysticLoader.hide {
    opacity: 0;
}

#preludeStatus,
#preludeInstruction,
#preludeTransmission,
#preludeHover {
    position: relative;
    z-index: 1;
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    text-transform: none;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
}



#preludeStatus {
    width: 90vw;
    max-width: 640px;
    font-size: clamp(16px, 1.25vw, 18px);
    white-space: nowrap;
    overflow: hidden;
    height: 3.6em;
    padding: 0 36px;
    opacity: 1;
    clip-path: inset(0 50% 0 50%);
    transition: clip-path 550ms cubic-bezier(0.22, 1, 0.36, 1), max-width 400ms ease;
    /* fixed readable frame — never resizes */
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#preludeStatus.show {
    clip-path: inset(0 0% 0 0%);
}

#preludeStatus.show.narrow {
    clip-path: inset(0 0% 0 0%);
}

#preludeStatus.narrow {
    max-width: 460px;
}

#preludeStatus.solid {
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

#preludeStatus.red {
    color: rgb(255, 60, 60);
    text-shadow: 0 0 18px rgba(255, 40, 40, 0.5);
}

#preludeStatus.alert {
    width: auto;
    min-height: 0;
    white-space: nowrap;
    font-size: clamp(22px, 4.8vw, 48px);
    color: rgb(255, 0, 0);
    text-shadow: none;
    letter-spacing: 0.06em;
    line-height: 1;
    background: rgba(0, 0, 0, 1);
    border: 2px solid rgba(255, 0, 0, 1);
    padding: 26px 48px;
    position: absolute;
    left: 50%;
    top: calc(50% - 15px);
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 60px);
    clip-path: none;
    overflow: visible;
    opacity: 1;
}

#preludeStatus.unsealed {
    font-size: clamp(22px, 2.2vw, 34px);
    color: rgba(255, 220, 100, 0.95);
    text-shadow: 0 0 30px rgba(255, 200, 60, 0.6), 0 0 80px rgba(255, 180, 0, 0.25);
    letter-spacing: 0.12em;
    text-align: center;
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    background: rgba(0, 0, 0, 1);
    border: none;
    padding: 0 0 30px 0;
    max-width: none;
    white-space: nowrap;
    /* cover entire screen with black */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#preludeTransmission {
    margin-top: 0;
    display: grid;
    gap: 1.1vh;
    max-width: min(92vw, 1180px);
    min-height: 0;
}

#preludeTransmission .line {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(6px);
    transition: opacity 700ms ease, transform 700ms ease, filter 700ms ease;
    font-size: clamp(16px, 1.35vw, 22px);
    line-height: 1.45;
    background: rgba(0, 0, 0, 0.78);
    padding: 10px 14px;
}

#preludeTransmission .line.show {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

#preludeInstruction {
    position: absolute;
    top: calc(50% + 65px);
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(13px, 1.1vw, 14px);
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.80);
    opacity: 0;
    background: rgba(0, 0, 0, 0.92);
    padding: 7px 14px;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 1200ms ease;
}

#preludeInstruction.show {
    opacity: 1;
}

#preludeHover {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    font-size: 15px;
    letter-spacing: 0.06em;
    padding: 6px 11px;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    white-space: nowrap;
    pointer-events: none;
}

#preludeHover.show {
    opacity: 1;
}

.cursor {
    display: inline-block;
    margin-left: 0.08em;
    animation: preludeCursor 900ms steps(1) infinite;
}

@keyframes preludeCursor {
    50% {
        opacity: 0;
    }
}



body.archive-unsealed #preludeLayer {
    opacity: 0;
    transition: opacity 900ms ease;
    /* Belt-and-suspenders: CSS-level guarantee that the overlay is inert
       once the archive is unsealed, regardless of any JS timing race. */
    pointer-events: none !important;
}

/* Instant hide when ?skip=1 nav triggers the inline script before JS loads */
html[data-skip-prelude="1"] #preludeLayer {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}
html[data-skip-prelude="1"] #entryScreen,
html[data-skip-prelude="1"] #mysticLoader,
html[data-skip-prelude="1"] #skipIntro {
    display: none !important;
}

body.archive-unsealed #preludeLayer::before {
    animation: none;
}

/* ============================================================
   GLITCH EFFECT — Protocol Apocalypse interrupt
   ============================================================ */

#glitchOverlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
}

/* Phase 1: Red flash pulses (0–300ms) */
@keyframes glitchRedFlash {
    0% {
        opacity: 0;
        background: transparent;
    }

    8% {
        opacity: 1;
        background: rgba(255, 255, 255, 0.13);
    }

    14% {
        opacity: 0;
        background: transparent;
    }

    22% {
        opacity: 1;
        background: rgba(255, 255, 255, 0.10);
    }

    28% {
        opacity: 0;
        background: transparent;
    }

    38% {
        opacity: 1;
        background: rgba(255, 255, 255, 0.09);
    }

    44% {
        opacity: 0;
    }

    52% {
        opacity: 1;
        background: rgba(255, 255, 255, 0.25);
    }

    56% {
        opacity: 0;
    }

    64% {
        opacity: 1;
        background: rgba(255, 255, 255, 0.10);
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
        background: rgba(255, 255, 255, 0.08);
    }

    88% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        background: transparent;
    }
}

/* Phase 2: Horizontal scan tears */
@keyframes glitchScanLines {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    11% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    31% {
        opacity: 0;
    }

    55% {
        opacity: 1;
    }

    57% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    77% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Phase 3: Canvas RGB-split shake */
@keyframes glitchCanvasSplit {
    0% {
        transform: translate(0, 0) skewX(0deg);
        filter: none;
    }

    7% {
        transform: translate(-4px, 0) skewX(-1.5deg);
        filter: hue-rotate(90deg) saturate(3);
    }

    10% {
        transform: translate(5px, 1px) skewX(1deg);
        filter: hue-rotate(-60deg) saturate(4);
    }

    14% {
        transform: translate(-3px, 0) skewX(0.5deg);
        filter: hue-rotate(180deg) saturate(2);
    }

    18% {
        transform: translate(0, 0) skewX(0deg);
        filter: none;
    }

    32% {
        transform: translate(6px, -1px) skewX(-2deg);
        filter: hue-rotate(120deg) saturate(5);
    }

    36% {
        transform: translate(-6px, 0) skewX(2deg);
        filter: hue-rotate(-90deg) saturate(3);
    }

    40% {
        transform: translate(2px, 1px) skewX(-0.5deg);
        filter: hue-rotate(45deg);
    }

    44% {
        transform: translate(0, 0) skewX(0deg);
        filter: none;
    }

    60% {
        transform: translate(-8px, 0) skewX(-3deg);
        filter: hue-rotate(200deg) saturate(4);
    }

    63% {
        transform: translate(8px, 0) skewX(3deg);
        filter: hue-rotate(-120deg) saturate(5);
    }

    66% {
        transform: translate(-3px, 0) skewX(1deg);
        filter: hue-rotate(90deg);
    }

    70% {
        transform: translate(0, 0) skewX(0deg);
        filter: none;
    }

    85% {
        transform: translate(3px, 0) skewX(-1deg);
        filter: hue-rotate(60deg) saturate(2);
    }

    88% {
        transform: translate(-2px, 0) skewX(0.5deg);
        filter: none;
    }

    92% {
        transform: translate(0, 0) skewX(0deg);
        filter: none;
    }

    100% {
        transform: translate(0, 0) skewX(0deg);
        filter: none;
    }
}

/* Phase 4: Whole-hero positional shake */
@keyframes glitchHeroShake {
    0% {
        transform: translate(0, 0);
    }

    12% {
        transform: translate(-3px, 1px);
    }

    18% {
        transform: translate(4px, -1px);
    }

    24% {
        transform: translate(-2px, 0);
    }

    30% {
        transform: translate(0, 0);
    }

    48% {
        transform: translate(5px, 2px);
    }

    52% {
        transform: translate(-4px, -1px);
    }

    56% {
        transform: translate(2px, 0);
    }

    60% {
        transform: translate(0, 0);
    }

    78% {
        transform: translate(-3px, 1px);
    }

    82% {
        transform: translate(3px, -1px);
    }

    86% {
        transform: translate(-1px, 0);
    }

    90% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

.glyphHero.glitch-active #glitchOverlay {
    animation: glitchRedFlash 1300ms steps(1) forwards;
}

.glyphHero.glitch-active #glitchOverlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(255, 255, 255, 0.07) 3px,
            rgba(255, 255, 255, 0.07) 4px);
    animation: glitchScanLines 1300ms steps(1) forwards;
}

.glyphHero.glitch-active #glitchOverlay::after {
    content: "";
    position: absolute;
    /* A few sharp horizontal tears at random vertical positions */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(transparent 23%, rgba(255, 255, 255, 0.45) 23.2%, rgba(255, 255, 255, 0.45) 23.4%, transparent 23.4%),
        linear-gradient(transparent 51%, rgba(255, 255, 255, 0.38) 51.15%, rgba(255, 255, 255, 0.38) 51.35%, transparent 51.35%),
        linear-gradient(transparent 78%, rgba(255, 255, 255, 0.42) 78.1%, rgba(255, 255, 255, 0.42) 78.3%, transparent 78.3%);
    animation: glitchScanLines 1300ms steps(1) forwards;
    animation-delay: 40ms;
}

.glyphHero.glitch-active #gl {
    animation: glitchCanvasSplit 1300ms steps(1) forwards;
}

.glyphHero.glitch-active {
    animation: glitchHeroShake 1300ms steps(1) forwards;
}

/* ============================================================
   TRANSMISSION WINDOW — appears after shield is fully grown
   ============================================================ */

#transmissionWindow {
    position: absolute;
    left: 50%;
    top: calc(50% - 15px);
    transform: translate(-50%, -50%);
    width: min(68vw, 820px);
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
    /* fully invisible until .open */
    opacity: 0;
    visibility: hidden;
    /* fixed size — does not change as text types */
    height: 520px;
    padding: 48px 52px 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* grow animation via scale + opacity */
    transform: translate(-50%, -50%) scaleY(0.05);
    transition: opacity 700ms ease,
        visibility 700ms ease,
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

#transmissionWindow.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scaleY(1);
}

#transmissionWarning {
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    font-size: clamp(13px, 1.1vw, 17px);
    letter-spacing: 0.35em;
    color: rgba(255, 255, 255, 0.28);
    text-align: center;
    margin-bottom: 36px;
}

#transmissionText {
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    font-size: clamp(15px, 1.45vw, 17px);
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.90);
    letter-spacing: 0.02em;
    text-align: center;
    position: absolute;
    top: 130px;
    left: 52px;
    right: 52px;
}

.mobile-footer {
    display: none;
}

#transmissionFooter {
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    font-size: clamp(15px, 1.1vw, 16px);
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.32);
    text-align: center;
    position: absolute;
    bottom: 48px;
    left: 52px;
    right: 52px;
    min-height: 1.4em;
}

/* Temporary Firebase launch page mode. Keeps the original glyph loader/canvas,
   then opens the same transmission UI with launch copy only. */
body[data-launch="coming-soon"] #entryScreen,
body[data-launch="coming-soon"] #titleBlock,
body[data-launch="coming-soon"] #skipIntro,
body[data-launch="coming-soon"] #matrixInstructions,
body[data-launch="coming-soon"] #mobileInstructions,
body[data-launch="coming-soon"] #transmissionWarning,
body[data-launch="coming-soon"] #transmissionFooter,
body[data-launch="coming-soon"] #transmissionFooterMobile {
    display: none !important;
}

body[data-launch="coming-soon"] #transmissionWindow {
    width: fit-content;
    min-width: min(78vw, 430px);
    max-width: calc(100vw - 48px);
    height: auto;
    min-height: 0;
    padding: clamp(17px, 2.5vw, 29px);
}

body[data-launch="coming-soon"] #transmissionText {
    position: static;
    inset: auto;
    width: max-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 3.3vh, 28px);
    font-size: clamp(13px, 1.65vw, 20px);
    line-height: 1.5;
    text-align: left;
}

body[data-launch="coming-soon"] #transmissionText p {
    margin: 0 !important;
    min-height: 1.5em;
    text-align: left;
}

body[data-launch="coming-soon"] #transmissionText p.launch-green {
    color: hsla(137, 100%, 73%, 0.92);
}

body[data-launch="coming-soon"] #transmissionText p.launch-pink {
    color: hsla(318, 100%, 77%, 0.92);
}

@media (max-width: 640px) {
    body[data-launch="coming-soon"] #mysticLoader {
        font-size: clamp(108px, 18vw, 210px);
    }

    body[data-launch="coming-soon"] #transmissionWindow {
        width: fit-content;
        min-width: min(calc(100vw - 34px), 310px);
        max-width: calc(100vw - 34px);
        height: auto;
        min-height: 0;
        padding: 28px 24px;
    }

    body[data-launch="coming-soon"] #transmissionText {
        gap: 24px;
        font-size: clamp(15px, 4.45vw, 18px);
    }
}

/* ── Star border frame around screen during Protocol Apocalypse ─────────────── */
#preludeLayer.has-alert::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
    z-index: 2;
    animation: alertFrameFlash 900ms steps(1) infinite;
}

/* Outer dot corners */
#preludeLayer.has-alert::before {
    content: "* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.55em;
    color: rgba(255, 255, 255, 0.22);
    overflow: hidden;
    height: 1.6em;
    top: 18px;
    pointer-events: none;
    z-index: 2;
    animation: alertFrameFlash 900ms steps(1) infinite;
    animation-delay: 450ms;
    white-space: nowrap;
    line-height: 1;
}

@keyframes alertFrameFlash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

/* ── Skip intro button ───────────────────────────────────────────────────── */

#skipIntro {
    position: absolute;
    top: 22px;
    right: 14px;
    z-index: 60;
    background: black;
    border: none;
    padding: 6px 0px;
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    font-size: clamp(11px, 1vw, 13px);
    color: rgb(158, 158, 158);
    letter-spacing: 0.08em;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    transition: color 200ms ease, opacity 200ms ease;
    opacity: 1;
}

#skipIntro:hover {
    color: rgba(255, 255, 255, 0.85);
}

#skipIntro.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   Entry Selection Screen
   ══════════════════════════════════════════════════════════════ */

#entryScreen {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease;
}

#entryScreen.visible {
    opacity: 1;
    pointer-events: auto;
}

#entryScreen.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}

#entryInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.entryBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.entryLabel {
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

.entryOptions {
    display: flex;
    gap: 10px;
}

.entryOption {
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    font-size: clamp(14px, 1.2vw, 16px);
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 9px 22px;
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease, text-shadow 200ms ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.entryOption:hover {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.3);
}

.entryOption.selected {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.55);
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}

#entrySoundToggle {
    width: 46px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.entryOption.sound-on {
    color: hsla(137, 100%, 73%, 0.95);
    border-color: hsla(137, 100%, 73%, 0.5);
    text-shadow: 0 0 14px hsla(137, 100%, 73%, 0.4);
}

.entryDivider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

#entryConfirm {
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 11px 36px;
    cursor: pointer;
    margin-top: 10px;
    transition: color 200ms ease, border-color 200ms ease, text-shadow 200ms ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#entryConfirm:hover {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.3);
}

/* ── Mobile-only instruction bar ───────────────────────────────────────── */

#mobileInstructions {
    display: none;
}

@media (max-width: 640px) {
    #mobileInstructions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        background: #000;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding: 12px 16px;
        font-family: "Space Mono", ui-monospace, "Courier New", monospace;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
        white-space: nowrap;
        opacity: 0;
        transform: translateY(10px);
        filter: blur(6px);
        transition: opacity 1.25s ease, transform 1.25s ease, filter 1.25s ease;
        pointer-events: none;
    }

    #mobileInstructions.show {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        pointer-events: auto;
    }

    #mobileInstructions .mobileInstrDash {
        opacity: 0.5;
    }
}

@media (max-width: 640px) {

    /* ── Title block — flex centered ────────────────────────── */
    /* Use flex centering so the gap above "Empire of Clouds" and the gap
       below "Open the Books" are equal, making the scene look balanced. */

    .glyphHero .titleBlock {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 5vw 80px !important;
        text-align: center;
    }



    .glyphHero .titleSub {
        font-size: 32px !important;
        margin-bottom: 4rem;
    }

    .glyphHero .titleAuthor {
        font-size: 28px !important;
    }

    /* ── Buttons — in-flow below author ─────────────────────── */
    .glyphHero .titleButtons {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        align-items: center !important;
        gap: 40px !important;
        margin-top: 4rem !important;
        width: 100% !important;
        pointer-events: none !important;
        z-index: auto !important;
    }

    .glyphHero #scrollHint,
    .glyphHero #booksHint {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        width: 220px !important;
        padding: 14px 16px !important;
        text-align: center !important;
        background: #000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        letter-spacing: 0.2cap;
        transform: translateY(10px) !important;
        opacity: 0;
        filter: blur(6px);
        pointer-events: none !important;
        transition: opacity 1.25s ease, transform 1.25s ease, filter 1.25s ease !important;
    }

    .glyphHero #scrollHint.stage.show,
    .glyphHero #booksHint.stage.show {
        transform: translateY(0) !important;
        opacity: 1;
        filter: blur(0);
        pointer-events: auto !important;
    }

    .glyphHero #scrollHint .scrollContent,
    .glyphHero #booksHint .scrollContent {
        justify-content: center;
    }

    /* ── Instructions — hide the desktop panel on mobile ───────── */

    .glyphHero #matrixInstructions {
        display: none !important;
    }

    .glyphHero .titleMain {
        color: #ffffff;
        font-size: 53px !important;
        font-weight: 500;
        line-height: 1.45;
        margin-bottom: 1rem;
        /* gap below title */
    }

    .glyphHero .titleSub {
        color: rgba(255, 255, 255, 1);
        font-size: 30px !important;
        font-weight: 400;
        line-height: 1.35;
        margin-bottom: 2.5rem;
        /* gap below subtitle */
    }

    .glyphHero .titleAuthor {
        color: rgba(255, 255, 255, 1);
        font-size: 28px !important;
        font-weight: 300;
        line-height: 1.2;
        letter-spacing: 0.2em;

    }

    /* ── Hide the desktop instructions panel on mobile ──────────── */
    .glyphHero #matrixInstructions {
        display: none !important;
    }

    /* ── Transmission window — mobile ───────────────────────────── */
    #transmissionWindow {
        width: 88vw !important;
        height: 58vh !important;
        padding: 32px 24px 28px !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    #transmissionWarning {
        font-size: 15px !important;
        letter-spacing: 0.25em !important;
        margin-bottom: 24px !important;
    }

    #transmissionText {
        position: static !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
        margin-bottom: 0 !important;
    }

    .mobile-footer {
        display: none;
    }

    #transmissionFooter {
        position: static !important;
        margin-top: 28px !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
        letter-spacing: 0.14em !important;
        bottom: auto !important;
    }

    .desktop-footer {
        display: none !important;
    }

    .mobile-footer {
        position: static !important;
        margin-top: 40px !important;
        font-family: "Space Mono", ui-monospace, "Courier New", monospace;
        font-size: 13px !important;
        line-height: 1.8 !important;
        letter-spacing: 0.14em !important;
        color: rgba(255, 255, 255, 0.32);
        text-align: center;
    }

    /* ── "Click the code" hint — pin to bottom on mobile ───────── */
    #preludeInstruction {
        bottom: 20px !important;
        top: auto !important;
        transform: translateX(-50%) !important;
    }

    /* ── Boot status bar — more breathing room on mobile ───────── */
    #preludeStatus {
        padding: 0 24px;
        letter-spacing: 0.03em;
        font-size: 14px;
    }

    /* ── Entry screen: larger text, tighter button padding ─────── */
    .entryLabel {
        font-size: 13px;
        letter-spacing: 0.18em;
    }

    .entryOption {
        font-size: 15px;
        padding: 9px 10px;
    }

    #entryConfirm {
        font-size: 14px;
        padding: 13px 40px;
    }

    /* ── Skip button ────────────────────────────────────────────── */
    #skipIntro {
        top: 22px !important;
        right: 14px !important;
        font-size: 13px;
    }

    /* ── Prevent any scrolling — index.html is a full-screen app ── */
    html,
    body {
        overflow: hidden !important;
        height: 100% !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    /* Use dynamic viewport height so the URL bar never causes overflow */
    .glyphHero {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    /* Remove the bottom padding that pushes the wrap taller than the screen */
    .hero.heroGlyph .wrap {
        padding-bottom: 0 !important;
        overflow: hidden !important;
        height: 100% !important;
    }

    .hero.heroGlyph {
        height: 100dvh !important;
        overflow: hidden !important;
    }
}

@media (max-width: 640px) {
    body[data-launch="coming-soon"] #transmissionWindow {
        box-sizing: border-box !important;
        width: calc(100vw - 28px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 28px 24px !important;
    }

    body[data-launch="coming-soon"] #transmissionText {
        width: 100% !important;
        max-width: 100% !important;
        gap: 24px !important;
        font-size: clamp(15px, 4.5vw, 20px) !important;
        line-height: 1.5 !important;
    }

    body[data-launch="coming-soon"] #transmissionText p {
        box-sizing: border-box;
        white-space: nowrap;
        padding-right: 1ch;
    }
}