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

@font-face {
    font-family: "SuisseInt-Bold";
    src: url(./font/SuisseIntl-Bold.otf);
}

html,
body {
    font-size: 62.5%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f4f4f4;
    font-family: "SuisseInt-Bold";
    -webkit-font-smoothing: antialiased;
}

/* ─── Grain overlay ──────────────────────────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.28;
    mix-blend-mode: multiply;
    z-index: 200;
}

/* ─── Navigation Bar ────────────────────────────── */
.navigation-bar {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100svw;
    margin: 1rem 0;
    /* z-index: 1000; */
}

.navigation-bar a {
    font-size: 1rem;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.2);
}

.navigation-bar a:hover {
    color: #000000;
}

/* ─── Hidden canvas (palette extraction) ────────────────────────────── */
#extractor {
    display: none;
}

/* ─── Stage ──────────────────────────────────────────────────────────── */
#stage {
    position: fixed;
    inset: 0;
}

/* ─── Timestamp ──────────────────────────────────────────────────────── */
#timestamp {
    position: fixed;
    top: 1rem;
    left: 1rem;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.2);
    z-index: 150;
    pointer-events: none;
    transition: color 2s ease;
}

#timestamp.pulse {
    color: rgba(0, 0, 0, 0.75);
}

/* ─── About ────────────────────────────── */
.about-page {
    position: fixed;
    top: 1rem;
    right: 1rem;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: color .3s ease-in;
}

.about-page a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.2);
    transition: color .3s ease-in;
}

.about-page a:hover {
    text-decoration: none;
    color: rgb(0, 0, 0);
    transition: color .3s ease-in;
}

/* ─── Scene counter ──────────────────────────────────────────────────── */
#scene-counter {
    position: fixed;
    width: 100svw;
    display: flex;
    justify-content: center;
    bottom: 1rem;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.15);
    z-index: 150;
    pointer-events: none;
}

/* ─── Image ──────────────────────────────────────────────────────────── */
.scene-image {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    overflow: hidden;
}

.scene-image.visible {
    opacity: 1;
}

.scene-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ─── Text block ─────────────────────────────────────────────────────── */
#text-block {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    line-height: 1.8em;
}

#text-block.visible {
    opacity: 1;
}

#text-block.fading {
    opacity: 0;
}

/* ─── Flicker keyframe — opacity stutter + position jitter ───────────── */
@keyframes word-flicker {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    8% {
        opacity: 0.9;
        transform: translate(-1px, 1px);
    }

    16% {
        opacity: 0.05;
        transform: translate(1px, -1px);
    }

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

    33% {
        opacity: 0.1;
        transform: translate(0px, 2px);
    }

    44% {
        opacity: 0.95;
        transform: translate(1px, -1px);
    }

    55% {
        opacity: 0.15;
        transform: translate(-1px, 1px);
    }

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

    78% {
        opacity: 0.7;
        transform: translate(1px, 0px);
    }

    88% {
        opacity: 0.95;
        transform: translate(0px, 0px);
    }

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

/* ─── Character keyframe for typewriter effect ───────────────────────── */
@keyframes char-appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ─── Words ──────────────────────────────────────────────────────────── */
.word-span {
    display: inline-block;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 400;
    letter-spacing: 0.025em;
    opacity: 0;
    margin-right: 0.25em;
    margin-bottom: 0.25em;
    padding: 0.05em 0.22em 0.08em;
    color: #1a1a1a;
}

/* Flicker words — whole word animates as one unit */
.word-span.effect-flicker.revealed {
    animation: word-flicker 0.2s linear forwards;
}

/* Typewriter words — word itself becomes visible immediately as a container;
   individual .char spans inside handle the reveal */
.word-span.effect-typewriter.revealed {
    opacity: 1;
}

/* Each character inside a typewriter word */
.word-span.effect-typewriter .char {
    display: inline-block;
    opacity: 0;
    /* animation-delay set per-char by JS */
    animation: char-appear 0.06s steps(1) forwards;
}

/* ─── Block-level fade out ───────────────────────────────────────────── */
#text-block.fading .word-span,
#text-block.fading .word-span.effect-flicker.revealed,
#text-block.fading .word-span.effect-typewriter.revealed {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#text-block.fading .word-span .char {
    animation: none;
    opacity: 0;
}