/* ===========================================
   HEERLEN: DE STORY VAN HET ZWARTE GOUD
   Main Stylesheet — mobile-first

   Breakpoints:  48em (768px)  tablet
                 64em (1024px) desktop, 2 kolommen
                 90em (1440px) wide
                 120em (1920px) ultra-wide
   =========================================== */

/* --- Design tokens --- */
:root {
    --color-bg: #101010;
    --color-surface: #111111;
    --color-text: #f1efee;
    --color-border: #222222;
    --color-line: #333333;

    --font-display: 'Girdo Black', Impact, 'Arial Narrow Bold', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Vloeiende koppen: 2.2rem op mobiel, groeit mee tot het maximum rond 1200px */
    --fs-display: clamp(2.2rem, 0.96rem + 4.72vw, 4.5rem);
    --fs-title: clamp(2.2rem, 1.37rem + 3.18vw, 3.75rem);
    --fs-heading: clamp(2.2rem, 1.77rem + 1.64vw, 3rem);

    --glow-near: 15px;
    --glow-far: 60px;
}

/* --- Thema's: elk verhaal zet zijn eigen accentkleur ---
   Mijncultuur gebruikt de standaardkleur (geel). */
:root,
[data-theme="cultuur"] {
    --accent: #ffe652;
    --accent-rgb: 255 230 82;
    --accent-dark: #e6cf4a;
}

[data-theme="prehistory"] {
    --accent: #e04a4f;
    --accent-rgb: 224 74 79;
    --accent-dark: #c43e43;
}

[data-theme="welvaart"] {
    --accent: #2db45c;
    --accent-rgb: 45 180 92;
    --accent-dark: #259249;
}

[data-theme="migratie"] {
    --accent: #1eb1eb;
    --accent-rgb: 30 177 235;
    --accent-dark: #189acc;
}

[data-theme="val"] {
    --accent: #ef55ad;
    --accent-rgb: 239 85 173;
    --accent-dark: #d94a9a;
}

/* --- Custom Fonts --- */
@font-face {
    font-family: 'Girdo Black';
    src: url('../assets/Girdo-Black.woff2') format('woff2'),
         url('../assets/Girdo Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.45;
    /* Vangnet; de layout zelf veroorzaakt geen horizontale overflow (hidden = fallback voor iOS < 16) */
    overflow-x: hidden;
    overflow-x: clip;
}

h1, h2, h3, p {
    margin: 0;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.02em;
}

img, video, canvas, svg {
    display: block;
    max-width: 100%;
}

img, video {
    height: auto;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
}

[hidden] {
    display: none !important;
}

/* Alleen voor schermlezers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

/* Views krijgen focus bij navigeren (zie showView); die focus hoeft niet zichtbaar te zijn */
[data-view]:focus {
    outline: none;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ===========================================
   VIEWS
   =========================================== */

/* --- Intro --- */
.intro {
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fade-in 0.6s ease-out;
}

.intro__inner {
    width: min(100%, 56.25rem);
}

.intro__frame {
    position: relative;
    /* Op lage schermen (telefoon liggend) begrenst de hoogte de breedte, zodat de startknop in beeld blijft */
    width: min(80%, (100vh - 12rem) * 1.7);
    width: min(80%, (100svh - 12rem) * 1.7);
    max-height: 70vh;
    margin-inline: auto;
    filter: drop-shadow(0 0 var(--glow-near) var(--accent)) drop-shadow(0 0 var(--glow-far) rgb(var(--accent-rgb) / 0.5));
}

.intro__video {
    width: 100%;
    max-height: 85vh;
    object-fit: cover;
    transform: scale(1.8);
    clip-path: polygon(
        30.65% 32.23%,
        52.30% 24.73%,
        80.69% 32.85%,
        84.67% 50.92%,
        80.08% 67.47%,
        81.81% 75.28%,
        54.65% 68.08%,
        33.61% 75.28%,
        15.33% 67.77%,
        20.33% 56.28%,
        15.33% 34.53%,
        24.11% 24.73%,
        30.65% 32.23%
    );
}

.intro__actions {
    display: flex;
    justify-content: center;
    padding-block: 0.5rem;
}

.intro__start {
    width: clamp(7.5rem, 35vh, 13.75rem);
    width: clamp(7.5rem, 35svh, 13.75rem);
    max-width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 0s linear 1s;
}

.intro__start.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease;
}

@media (min-width: 48em) {
    .intro {
        padding: 2.5rem;
    }
}

/* --- Steenkool Video Overlay --- */
.steenkool {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
}

.steenkool__frame {
    /* Breedte ook begrensd door de hoogte, zodat het masker (1166 x 925) nooit vervormt */
    width: min(90%, 62.5rem, 80vh * 1166 / 925);
    aspect-ratio: 1166 / 925;
    filter: drop-shadow(0 0 var(--glow-near) var(--accent)) drop-shadow(0 0 var(--glow-far) rgb(var(--accent-rgb) / 0.5));
}

.steenkool__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-mask: url('../assets/Intro-Video-Steenkool.svg') center / 100% 100% no-repeat;
    mask: url('../assets/Intro-Video-Steenkool.svg') center / 100% 100% no-repeat;
}

.steenkool__skip {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 10000;
    width: 6.25rem;
    animation: fade-in 0.5s ease both;
}

@media (min-width: 48em) {
    .steenkool__skip {
        right: 1.875rem;
        bottom: 1.875rem;
        width: 9.375rem;
    }
}

/* --- Thema Navigator (hub): een doorsnede van de grond ---
   Bovenin is het nu; hoe dieper je graaft, hoe verder terug in de tijd.
   Elke laag heeft een grillige bovenrand (clip-path) en schuift iets over de laag erboven. */
.hub {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 3rem;
    text-align: center;
    animation: fade-in 0.6s ease-out;
}

.hub__header {
    max-width: 66rem;
    margin-bottom: 2rem;
}

.hub__title {
    font-size: var(--fs-title);
    margin-bottom: 0.75rem;
}

.hub__lead {
    margin-bottom: 1.25rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--accent);
}

/* Korte uitleg hoe het werkt */
.how-to {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: rgb(241 239 238 / 0.85);
}

.how-to li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.how-to__icon {
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    fill: var(--accent);
    color: var(--accent);
}

.strata {
    position: relative;
    width: 100%;
    max-width: 66rem;
    text-align: left;
}

.layer {
    position: relative;
    padding: 2.25rem 1.25rem 2rem;
    clip-path: polygon(0 1.1rem, 7% 0.35rem, 19% 0.9rem, 33% 0, 48% 0.8rem, 61% 0.15rem, 76% 1rem, 89% 0.3rem, 100% 0.85rem, 100% 100%, 0 100%);
    animation: fade-in 0.7s ease-out both;
}

.layer + .layer {
    margin-top: -0.9rem;
}

.layer:nth-child(2) {
    animation-delay: 0.12s;
}

.layer:nth-child(3) {
    animation-delay: 0.24s;
}

.layer__years {
    font-family: var(--font-display);
    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--accent);
}

.layer__title {
    margin: 0.35rem 0 0.5rem;
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
}

.layer__text {
    max-width: 34rem;
    color: rgb(241 239 238 / 0.9);
}

.layer__meta,
.layer__note {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgb(241 239 238 / 0.65);
}

.layer__note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.layer__note svg {
    width: 1rem;
    height: 1rem;
    fill: var(--accent);
}

/* Bovenste laag: aarde en straat van nu */
.layer--surface {
    background: linear-gradient(#2e2925, #25211e);
}

/* De kolenlaag: pikzwart met glinsteringen */
.layer--coal {
    padding-block: 2.75rem 2.5rem;
    background:
        radial-gradient(circle at 8% 22%, rgb(255 255 255 / 0.16) 0 1px, transparent 2px),
        radial-gradient(circle at 27% 78%, rgb(255 255 255 / 0.12) 0 1px, transparent 2px),
        radial-gradient(circle at 46% 14%, rgb(255 230 82 / 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 88%, rgb(255 255 255 / 0.12) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 31%, rgb(255 255 255 / 0.15) 0 1px, transparent 2px),
        radial-gradient(circle at 94% 70%, rgb(255 230 82 / 0.14) 0 1px, transparent 2px),
        linear-gradient(#0a0a0a, #121212 50%, #0a0a0a);
    background-size: 23rem 17rem, 19rem 13rem, 29rem 19rem, 17rem 11rem, 31rem 23rem, 13rem 17rem, auto;
}

.theme-list {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

/* Thema als kaart: de steen + uitleg; de hele kaart is de knop.
   Dubbele class: .theme-btn-regels verderop zouden anders winnen. */
.theme-btn.theme-card {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    width: 100%;
    max-width: none;
    text-align: left;
}

.theme-card__stone {
    position: relative;
    display: block;
    transition: transform 0.3s ease;
}

.theme-card__stone img {
    width: 100%;
}

.theme-card__body {
    display: block;
}

.theme-card__text {
    display: block;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-text);
}

.theme-card__meta {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
}

/* Vinkje bij gelezen verhalen: op de steen, niet in de hoek van de hele kaart */
.theme-btn.theme-card.is-read::after {
    content: none;
}

.theme-card.is-read .theme-card__stone::after {
    content: '';
    position: absolute;
    /* De steen vult niet de hele afbeelding: vinkje op de rand van de steen zelf */
    top: 2%;
    right: 12%;
    width: 1.9rem;
    height: 1.9rem;
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23101010' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
    box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.8);
}

/* Diepste laag: rode klei en steen van lang geleden; de hele laag is aanklikbaar */
.layer--deep {
    display: grid;
    gap: 1rem;
    align-items: center;
    padding-bottom: 2.5rem;
    background: linear-gradient(#3a2722, #24160f);
}

.layer__dig {
    justify-self: center;
    width: 100%;
    max-width: 12rem;
}

/* Animatie op de afbeelding: een transform op de knop zou het grote raakvlak (::after) beperken */
.layer__dig img {
    width: 100%;
    animation: float 2s ease-in-out infinite;
}

/* Groot raakvlak: de knop bedekt de hele laag */
.layer__dig::after {
    content: '';
    position: absolute;
    inset: 0;
}

@media (min-width: 48em) {
    .hub {
        padding: 2rem 2.5rem 4rem;
    }

    .hub__header {
        margin-bottom: 2.5rem;
    }

    .layer {
        padding-inline: 2.5rem;
    }

    /* Dieptepijl links langs de lagen */
    .strata::before {
        content: 'dieper = verder terug in de tijd';
        position: absolute;
        top: 50%;
        left: -2rem;
        transform: translate(-50%, -50%) rotate(-90deg);
        font-family: var(--font-display);
        font-size: 0.75rem;
        white-space: nowrap;
        color: rgb(241 239 238 / 0.45);
    }

    .theme-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }

    .theme-btn.theme-card {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        justify-items: center;
        text-align: center;
    }

    .layer__dig {
        max-width: 15rem;
    }

    .theme-card__stone {
        width: 100%;
        max-width: 15rem;
    }

    .layer--deep {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2rem;
    }
}

/* --- Story & Chapters --- */
.story__home {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    /* Op mobiel/tablet schuift de knop over tekst en foto's heen: donkere achtergrond houdt hem leesbaar */
    background: rgb(16 16 16 / 0.8);
    color: var(--accent);
    transition: opacity 0.15s ease;
}

.story__home-icon {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
}

@media (min-width: 64em) {
    .story__home {
        background: none;
    }
}

.chapter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6vh 5%;
    border-bottom: 1px solid var(--color-border);
    animation: fade-in 0.6s ease-out;
}

.chapter__date {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 2.5rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--accent);
}

.chapter__title {
    font-size: var(--fs-display);
    margin-bottom: 1.5rem;
}

.chapter__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.chapter__text {
    max-width: 43.75rem;
}

/* Ruimte links voor de tijdlijn */
@media (min-width: 48em) {
    .chapter {
        min-height: 100vh;
        padding: 8vh 8% 8vh 6.25rem;
    }
}

@media (min-width: 64em) {
    .chapter {
        padding: 10vh 12% 10vh 8.75rem;
    }

    .chapter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chapter__text {
        max-width: 46.875rem;
    }
}

@media (min-width: 90em) {
    .chapter {
        padding: 10vh 15% 10vh 10rem;
    }

    .chapter__text {
        max-width: 53.125rem;
    }
}

@media (min-width: 120em) {
    .chapter {
        padding: 10vh 20% 10vh 11.25rem;
    }

    .chapter__text {
        max-width: 59.375rem;
    }
}

/* --- Outro ("Verken andere verhalen") --- */
.outro {
    text-align: center;
}

.outro__title {
    font-size: var(--fs-heading);
    margin-bottom: 2.5rem;
}

.outro__finish {
    display: block;
    width: 100%;
    max-width: 18.75rem;
    margin: 3rem auto 0;
}

.outro__home {
    display: block;
    width: clamp(3.75rem, 5vw, 5rem);
    margin: 6rem auto 0;
}

.outro__home img {
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* ===========================================
   COMPONENTS
   =========================================== */

/* --- Afbeeldingsknoppen (SVG-knoppen) --- */
.img-btn {
    display: inline-block;
    transition: transform 0.3s ease;
}

.img-btn img {
    width: 100%;
    transition: filter 0.3s ease;
}

/* --- Thema-knoppen met gekleurde glow --- */
.theme-grid {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 61.25rem;
    margin-inline: auto;
}

.theme-grid--duo {
    max-width: 48rem;
}

.theme-btn {
    width: 100%;
    max-width: 18.75rem;
}

.theme-btn img {
    filter: drop-shadow(0 0 12px rgb(var(--accent-rgb) / 0.6));
    animation: btn-breathe 3.5s ease-in-out infinite;
}

/* Elke knop ademt in een eigen ritme, zodat ze niet tegelijk pulseren */
.theme-btn:nth-child(2) img {
    animation-delay: -1.2s;
}

.theme-btn:nth-child(3) img {
    animation-delay: -2.4s;
}

@media (min-width: 48em) {
    .theme-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem;
    }

    .theme-grid--duo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* --- Media frame (afbeelding/video met kolenvorm, gelaagde rand en glow) ---
   --shape:        de vorm van de foto (clip-path)
   --shape-closed: dezelfde vorm als klein brokje, beginpunt van de "openbreek"-animatie
   --strata:       gestapelde grijze lagen achter de foto (uit het ontwerp van Kanari.png)
   Vormen, lagen en startvormen zijn gegenereerd uit dezelfde polygonen. */
.media-frame {
    position: relative;
    /* 94% + 3% naar links: kader én uitstekende lagen passen samen precies in de kolom */
    left: -3%;
    width: 94%;
    max-width: 31.25rem;
    margin-inline: auto;
    filter: drop-shadow(0 0 var(--glow-near) var(--accent)) drop-shadow(0 0 var(--glow-far) rgb(var(--accent-rgb) / 0.5));
    animation: glow-breathe 4.5s ease-in-out infinite;
    --shape: polygon(77.14% 81.76%, 46.78% 95.12%, 6.96% 80.67%, 1.38% 48.48%, 7.82% 19.02%, 5.39% 5.11%, 43.48% 17.93%, 72.99% 5.11%, 98.62% 18.48%, 91.6% 38.93%, 98.62% 77.66%, 86.31% 95.12%, 77.14% 81.76%);
    --shape-closed: polygon(58.49% 56.06%, 53.64% 58.2%, 47.26% 55.89%, 46.37% 50.74%, 47.4% 46.02%, 47.01% 43.8%, 53.11% 45.85%, 57.83% 43.8%, 61.93% 45.94%, 60.81% 49.21%, 61.93% 55.4%, 59.96% 58.2%, 58.49% 56.06%);
    --strata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -9 106 109' preserveAspectRatio='none'%3E%3Cpolygon fill='%231e1e1e' points='83.14,72.76 52.78,86.12 12.96,71.67 7.38,39.48 13.82,10.02 11.39,-3.89 49.48,8.93 78.99,-3.89 104.62,9.48 97.60,29.93 104.62,68.66 92.31,86.12 83.14,72.76'/%3E%3Cpolygon fill='%23544e4e' points='81.94,74.56 51.58,87.92 11.76,73.47 6.18,41.28 12.62,11.82 10.19,-2.09 48.28,10.73 77.79,-2.09 103.42,11.28 96.40,31.73 103.42,70.46 91.11,87.92 81.94,74.56'/%3E%3Cpolygon fill='%23847e84' points='80.74,76.36 50.38,89.72 10.56,75.27 4.98,43.08 11.42,13.62 8.99,-0.29 47.08,12.53 76.59,-0.29 102.22,13.08 95.20,33.53 102.22,72.26 89.91,89.72 80.74,76.36'/%3E%3Cpolygon fill='%23b4b4b4' points='79.54,78.16 49.18,91.52 9.36,77.07 3.78,44.88 10.22,15.42 7.79,1.51 45.88,14.33 75.39,1.51 101.02,14.88 94.00,35.33 101.02,74.06 88.71,91.52 79.54,78.16'/%3E%3Cpolygon fill='%23e4e4e4' points='78.34,79.96 47.98,93.32 8.16,78.87 2.58,46.68 9.02,17.22 6.59,3.31 44.68,16.13 74.19,3.31 99.82,16.68 92.80,37.13 99.82,75.86 87.51,93.32 78.34,79.96'/%3E%3C/svg%3E");
}

/* Gelaagde kolenrand: steekt rechtsboven uit achter de foto */
.media-frame::before {
    content: '';
    position: absolute;
    inset: -9% -6% 0 0;
    z-index: -1;
    background: var(--strata) center / 100% 100% no-repeat;
    pointer-events: none;
}

.media-frame--narrow {
    max-width: 25rem;
}

.media-frame__media {
    display: block;
    width: 100%;
    object-fit: cover;
    clip-path: var(--shape);
}

.media-frame--mask-1 {
    --shape: polygon(86.31% 3.26%, 98.62% 21.39%, 91.6% 61.61%, 98.62% 82.85%, 72.99% 96.73%, 43.48% 83.41%, 5.39% 96.73%, 7.82% 82.28%, 1.38% 51.7%, 9.83% 12.11%, 46.78% 7%, 73.5% 11.41%, 86.31% 3.26%);
    --shape-closed: polygon(60.5% 40.18%, 62.47% 43.08%, 61.35% 49.51%, 62.47% 52.91%, 58.37% 55.13%, 53.65% 53%, 47.56% 55.13%, 47.94% 52.82%, 46.91% 47.93%, 48.27% 41.59%, 54.18% 40.78%, 58.45% 41.48%, 60.5% 40.18%);
    --strata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -9 106 109' preserveAspectRatio='none'%3E%3Cpolygon fill='%231e1e1e' points='92.31,-5.74 104.62,12.39 97.60,52.61 104.62,73.85 78.99,87.73 49.48,74.41 11.39,87.73 13.82,73.28 7.38,42.70 15.83,3.11 52.78,-2.00 79.50,2.41 92.31,-5.74'/%3E%3Cpolygon fill='%23544e4e' points='91.11,-3.94 103.42,14.19 96.40,54.41 103.42,75.65 77.79,89.53 48.28,76.21 10.19,89.53 12.62,75.08 6.18,44.50 14.63,4.91 51.58,-0.20 78.30,4.21 91.11,-3.94'/%3E%3Cpolygon fill='%23847e84' points='89.91,-2.14 102.22,15.99 95.20,56.21 102.22,77.45 76.59,91.33 47.08,78.01 8.99,91.33 11.42,76.88 4.98,46.30 13.43,6.71 50.38,1.60 77.10,6.01 89.91,-2.14'/%3E%3Cpolygon fill='%23b4b4b4' points='88.71,-0.34 101.02,17.79 94.00,58.01 101.02,79.25 75.39,93.13 45.88,79.81 7.79,93.13 10.22,78.68 3.78,48.10 12.23,8.51 49.18,3.40 75.90,7.81 88.71,-0.34'/%3E%3Cpolygon fill='%23e4e4e4' points='87.51,1.46 99.82,19.59 92.80,59.81 99.82,81.05 74.19,94.93 44.68,81.61 6.59,94.93 9.02,80.48 2.58,49.90 11.03,10.31 47.98,5.20 74.70,9.61 87.51,1.46'/%3E%3C/svg%3E");
}

.media-frame--mask-2 {
    --shape: polygon(86.31% 3.26%, 98.62% 21.39%, 91.6% 61.61%, 98.62% 82.85%, 77.25% 98.65%, 43.48% 83.41%, 5.39% 96.73%, 7.82% 82.28%, 1.38% 51.7%, 3.42% 4.26%, 20.68% 13.51%, 46.78% 3.26%, 73.5% 11.41%, 86.31% 3.26%);
    --shape-closed: polygon(58.28% 37.58%, 60.25% 40.48%, 59.13% 46.91%, 60.25% 50.31%, 56.83% 52.84%, 51.43% 50.4%, 45.33% 52.53%, 45.72% 50.22%, 44.69% 45.33%, 45.02% 37.74%, 47.78% 39.22%, 51.95% 37.58%, 56.23% 38.88%, 58.28% 37.58%);
    --strata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -9 106 109' preserveAspectRatio='none'%3E%3Cpolygon fill='%231e1e1e' points='92.31,-5.74 104.62,12.39 97.60,52.61 104.62,73.85 83.25,89.65 49.48,74.41 11.39,87.73 13.82,73.28 7.38,42.70 9.42,-4.74 26.68,4.51 52.78,-5.74 79.50,2.41 92.31,-5.74'/%3E%3Cpolygon fill='%23544e4e' points='91.11,-3.94 103.42,14.19 96.40,54.41 103.42,75.65 82.05,91.45 48.28,76.21 10.19,89.53 12.62,75.08 6.18,44.50 8.22,-2.94 25.48,6.31 51.58,-3.94 78.30,4.21 91.11,-3.94'/%3E%3Cpolygon fill='%23847e84' points='89.91,-2.14 102.22,15.99 95.20,56.21 102.22,77.45 80.85,93.25 47.08,78.01 8.99,91.33 11.42,76.88 4.98,46.30 7.02,-1.14 24.28,8.11 50.38,-2.14 77.10,6.01 89.91,-2.14'/%3E%3Cpolygon fill='%23b4b4b4' points='88.71,-0.34 101.02,17.79 94.00,58.01 101.02,79.25 79.65,95.05 45.88,79.81 7.79,93.13 10.22,78.68 3.78,48.10 5.82,0.66 23.08,9.91 49.18,-0.34 75.90,7.81 88.71,-0.34'/%3E%3Cpolygon fill='%23e4e4e4' points='87.51,1.46 99.82,19.59 92.80,59.81 99.82,81.05 78.45,96.85 44.68,81.61 6.59,94.93 9.02,80.48 2.58,49.90 4.62,2.46 21.88,11.71 47.98,1.46 74.70,9.61 87.51,1.46'/%3E%3C/svg%3E");
}

.media-frame--mask-3 {
    --shape: polygon(6.02% 25.55%, 27.06% 12.01%, 62.53% 18.78%, 95.16% 18.78%, 90.67% 36.45%, 95.16% 85.99%, 75.77% 74.76%, 44.09% 87.97%, 19.26% 79.72%, 4.84% 83.68%, 8.38% 52.96%, 6.02% 25.55%);
    --shape-closed: polygon(38.41% 46.24%, 41.78% 44.08%, 47.45% 45.16%, 52.67% 45.16%, 51.95% 47.99%, 52.67% 55.91%, 49.57% 54.12%, 44.5% 56.23%, 40.53% 54.91%, 38.22% 55.54%, 38.79% 50.63%, 38.41% 46.24%);
    --strata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -9 106 109' preserveAspectRatio='none'%3E%3Cpolygon fill='%231e1e1e' points='12.02,16.55 33.06,3.01 68.53,9.78 101.16,9.78 96.67,27.45 101.16,76.99 81.77,65.76 50.09,78.97 25.26,70.72 10.84,74.68 14.38,43.96 12.02,16.55'/%3E%3Cpolygon fill='%23544e4e' points='10.82,18.35 31.86,4.81 67.33,11.58 99.96,11.58 95.47,29.25 99.96,78.79 80.57,67.56 48.89,80.77 24.06,72.52 9.64,76.48 13.18,45.76 10.82,18.35'/%3E%3Cpolygon fill='%23847e84' points='9.62,20.15 30.66,6.61 66.13,13.38 98.76,13.38 94.27,31.05 98.76,80.59 79.37,69.36 47.69,82.57 22.86,74.32 8.44,78.28 11.98,47.56 9.62,20.15'/%3E%3Cpolygon fill='%23b4b4b4' points='8.42,21.95 29.46,8.41 64.93,15.18 97.56,15.18 93.07,32.85 97.56,82.39 78.17,71.16 46.49,84.37 21.66,76.12 7.24,80.08 10.78,49.36 8.42,21.95'/%3E%3Cpolygon fill='%23e4e4e4' points='7.22,23.75 28.26,10.21 63.73,16.98 96.36,16.98 91.87,34.65 96.36,84.19 76.97,72.96 45.29,86.17 20.46,77.92 6.04,81.88 9.58,51.16 7.22,23.75'/%3E%3C/svg%3E");
}

.media-frame--mask-4 {
    --shape: polygon(8% 5%, 35% 12%, 65% 5%, 92% 10%, 88% 35%, 95% 55%, 90% 85%, 70% 95%, 40% 88%, 15% 95%, 5% 75%, 10% 45%, 5% 20%, 8% 5%);
    --shape-closed: polygon(38.84% 38.6%, 43.16% 39.72%, 47.96% 38.6%, 52.28% 39.4%, 51.64% 43.4%, 52.76% 46.6%, 51.96% 51.4%, 48.76% 53%, 43.96% 51.88%, 39.96% 53%, 38.36% 49.8%, 39.16% 45%, 38.36% 41%, 38.84% 38.6%);
    --strata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -9 106 109' preserveAspectRatio='none'%3E%3Cpolygon fill='%231e1e1e' points='14.00,-4.00 41.00,3.00 71.00,-4.00 98.00,1.00 94.00,26.00 101.00,46.00 96.00,76.00 76.00,86.00 46.00,79.00 21.00,86.00 11.00,66.00 16.00,36.00 11.00,11.00 14.00,-4.00'/%3E%3Cpolygon fill='%23544e4e' points='12.80,-2.20 39.80,4.80 69.80,-2.20 96.80,2.80 92.80,27.80 99.80,47.80 94.80,77.80 74.80,87.80 44.80,80.80 19.80,87.80 9.80,67.80 14.80,37.80 9.80,12.80 12.80,-2.20'/%3E%3Cpolygon fill='%23847e84' points='11.60,-0.40 38.60,6.60 68.60,-0.40 95.60,4.60 91.60,29.60 98.60,49.60 93.60,79.60 73.60,89.60 43.60,82.60 18.60,89.60 8.60,69.60 13.60,39.60 8.60,14.60 11.60,-0.40'/%3E%3Cpolygon fill='%23b4b4b4' points='10.40,1.40 37.40,8.40 67.40,1.40 94.40,6.40 90.40,31.40 97.40,51.40 92.40,81.40 72.40,91.40 42.40,84.40 17.40,91.40 7.40,71.40 12.40,41.40 7.40,16.40 10.40,1.40'/%3E%3Cpolygon fill='%23e4e4e4' points='9.20,3.20 36.20,10.20 66.20,3.20 93.20,8.20 89.20,33.20 96.20,53.20 91.20,83.20 71.20,93.20 41.20,86.20 16.20,93.20 6.20,73.20 11.20,43.20 6.20,18.20 9.20,3.20'/%3E%3C/svg%3E");
}

/* Voor hoge (portret) afbeeldingen */
.media-frame--portrait {
    --shape: polygon(5% 3%, 40% 8%, 70% 3%, 95% 8%, 92% 25%, 97% 50%, 93% 75%, 97% 92%, 65% 97%, 35% 93%, 8% 97%, 3% 80%, 7% 50%, 3% 20%, 5% 3%);
    --shape-closed: polygon(40.84% 39.9%, 46.44% 40.7%, 51.24% 39.9%, 55.24% 40.7%, 54.76% 43.42%, 55.56% 47.42%, 54.92% 51.42%, 55.56% 54.14%, 50.44% 54.94%, 45.64% 54.3%, 41.32% 54.94%, 40.52% 52.22%, 41.16% 47.42%, 40.52% 42.62%, 40.84% 39.9%);
    --strata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -9 106 109' preserveAspectRatio='none'%3E%3Cpolygon fill='%231e1e1e' points='11.00,-6.00 46.00,-1.00 76.00,-6.00 101.00,-1.00 98.00,16.00 103.00,41.00 99.00,66.00 103.00,83.00 71.00,88.00 41.00,84.00 14.00,88.00 9.00,71.00 13.00,41.00 9.00,11.00 11.00,-6.00'/%3E%3Cpolygon fill='%23544e4e' points='9.80,-4.20 44.80,0.80 74.80,-4.20 99.80,0.80 96.80,17.80 101.80,42.80 97.80,67.80 101.80,84.80 69.80,89.80 39.80,85.80 12.80,89.80 7.80,72.80 11.80,42.80 7.80,12.80 9.80,-4.20'/%3E%3Cpolygon fill='%23847e84' points='8.60,-2.40 43.60,2.60 73.60,-2.40 98.60,2.60 95.60,19.60 100.60,44.60 96.60,69.60 100.60,86.60 68.60,91.60 38.60,87.60 11.60,91.60 6.60,74.60 10.60,44.60 6.60,14.60 8.60,-2.40'/%3E%3Cpolygon fill='%23b4b4b4' points='7.40,-0.60 42.40,4.40 72.40,-0.60 97.40,4.40 94.40,21.40 99.40,46.40 95.40,71.40 99.40,88.40 67.40,93.40 37.40,89.40 10.40,93.40 5.40,76.40 9.40,46.40 5.40,16.40 7.40,-0.60'/%3E%3Cpolygon fill='%23e4e4e4' points='6.20,1.20 41.20,6.20 71.20,1.20 96.20,6.20 93.20,23.20 98.20,48.20 94.20,73.20 98.20,90.20 66.20,95.20 36.20,91.20 9.20,95.20 4.20,78.20 8.20,48.20 4.20,18.20 6.20,1.20'/%3E%3C/svg%3E");
}

/* --- Mijnlamp: de foto is donker, je muis of vinger is de hoofdlamp ---
   .lamp, .lamp-hint en .lamp-toggle worden door js/effects.js toegevoegd aan [data-lamp]. */
@property --lamp-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
}

@property --lamp-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 45%;
}

[data-lamp] {
    --lamp-size: 5.5rem;
    /* Horizontaal slepen beweegt de lamp, verticaal scrollen blijft werken */
    touch-action: pan-y;
}

.lamp {
    position: absolute;
    inset: 0;
    z-index: 5;
    clip-path: var(--shape);
    background: radial-gradient(
        circle var(--lamp-size) at var(--lamp-x) var(--lamp-y),
        rgb(255 230 140 / 0.12) 0%,
        transparent 50%,
        rgb(8 8 8 / 0.94) 100%
    );
    pointer-events: none;
    animation: lamp-sway 8s ease-in-out infinite;
    transition: opacity 0.6s ease;
}

/* Zodra iemand zelf schijnt, stopt het automatische rondkijken */
.is-lamp-active .lamp {
    animation: none;
}

.is-lit .lamp {
    opacity: 0;
}

.lamp-hint {
    position: absolute;
    top: 14%;
    left: 50%;
    z-index: 6;
    transform: translateX(-50%);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgb(16 16 16 / 0.75);
    font-family: var(--font-display);
    font-size: 0.8rem;
    line-height: 1;
    color: var(--accent);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.is-lamp-active .lamp-hint,
.is-lit .lamp-hint {
    opacity: 0;
}

.lamp-toggle {
    position: absolute;
    bottom: 0.375rem;
    left: 0.375rem;
    z-index: 10;
    display: grid;
    place-items: center;
    min-width: 3rem;
    height: 3rem;
    padding-inline: 0.5rem;
}

/* Zichtbare pil kleiner dan het raakvlak */
.lamp-toggle span {
    padding: 0.4rem 0.7rem;
    border: 2px solid var(--accent);
    border-radius: 999px;
    background: rgb(16 16 16 / 0.8);
    font-family: var(--font-display);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--accent);
    white-space: nowrap;
}

.lamp-toggle[aria-pressed="true"] span {
    background: var(--accent);
    color: var(--color-bg);
}

@media (min-width: 48em) {
    [data-lamp] {
        --lamp-size: 7.5rem;
    }
}

/* --- Voorlezen (js/narration.js) --- */
.chapter__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.listen-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 3rem;
    padding: 0 0.9rem;
    border: 2px solid rgb(var(--accent-rgb) / 0.6);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.listen-btn svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
}

.listen-btn.is-playing {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--color-bg);
}

/* De tekst die nu wordt voorgelezen krijgt een lichtende balk ernaast */
.chapter__text {
    position: relative;
}

.is-narrating .chapter__text::before {
    content: '';
    position: absolute;
    top: 0.2em;
    bottom: 0.2em;
    left: -0.75rem;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    animation: narrate-glow 1.6s ease-in-out infinite;
}

/* Zwevende speler onderin het midden, alleen in de verhalen */
.narrator {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    z-index: 55;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: calc(100% - 2rem);
    padding: 0.25rem;
    border: 2px solid var(--accent);
    border-radius: 999px;
    background: rgb(22 22 22 / 0.92);
    box-shadow: 0 0 24px rgb(var(--accent-rgb) / 0.35), 0 8px 30px rgb(0 0 0 / 0.5);
}

.narrator__main {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 3rem;
    padding: 0 1.1rem 0 0.9rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
}

.narrator__main svg,
.narrator__btn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.narrator__now {
    display: none;
    min-width: 0;
    max-width: 14rem;
    padding-inline: 0.5rem;
    overflow: hidden;
    font-size: 0.85rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.narrator__btn {
    display: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
}

.narrator.is-active .narrator__now {
    display: block;
}

.narrator.is-active .narrator__btn {
    display: grid;
}

/* Kleine telefoons: titel weglaten zodat de knoppen op één regel passen */
@media (max-width: 30em) {
    .narrator.is-active .narrator__now {
        display: none;
    }
}

@media (min-width: 48em) {
    .is-narrating .chapter__text::before {
        left: -1.25rem;
    }

    .narrator {
        bottom: 1.5rem;
    }
}

@media (hover: hover) {
    .listen-btn:hover {
        border-color: var(--accent);
    }

    .narrator__btn:hover {
        background: rgb(var(--accent-rgb) / 0.15);
    }
}

/* --- Tellers ("6.300 inwoners"): kolenbrok met gestapelde lagen, naar Inwoners-1899.svg --- */
.chapter__body {
    display: grid;
    gap: 2rem;
    justify-items: start;
}

.stat {
    position: relative;
    display: inline-grid;
    justify-items: center;
    margin: 0.5rem 0 0;
    padding: 1.25rem 2.25rem 1.1rem;
}

/* De brok zelf; de lagen ontstaan door gestapelde schaduwen in de grijzen van Kanari.png */
.stat__rock {
    position: absolute;
    inset: 0;
    z-index: -1;
    filter:
        drop-shadow(5px -4px 0 #e4e4e4)
        drop-shadow(5px -4px 0 #b4b4b4)
        drop-shadow(5px -4px 0 #847e84)
        drop-shadow(5px -4px 0 #544e4e);
}

.stat__rock::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #231f20;
    clip-path: polygon(3% 10%, 28% 0, 66% 7%, 100% 3%, 95% 52%, 100% 96%, 62% 100%, 24% 93%, 0 100%, 4% 52%);
}

.stat__value {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.stat__label {
    margin-top: 0.35rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    line-height: 1;
    color: var(--color-text);
}

/* --- Bevolkingsgrafiek (lijn tekent zich bij in beeld komen) --- */
.pop-chart {
    margin: 3rem 0 0;
    padding: 1.25rem 1rem 1rem;
    background: var(--color-surface);
}

.pop-chart__title {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--accent);
}

.pop-chart__svg {
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--font-body);
}

.pop-chart__grid line {
    stroke: var(--color-line);
    stroke-width: 1;
}

.pop-chart__axis {
    font-size: 12px;
    fill: rgb(241 239 238 / 0.6);
}

.pop-chart__event line {
    stroke: rgb(241 239 238 / 0.35);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

.pop-chart__event text {
    font-family: var(--font-display);
    font-size: 13px;
    fill: rgb(241 239 238 / 0.8);
}

.pop-chart__area {
    fill: rgb(var(--accent-rgb) / 0.15);
    transition: opacity 0.8s ease 0.8s;
}

.pop-chart__line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 0.7));
    transition: stroke-dashoffset 1.5s ease-in-out;
}

.pop-chart__points circle {
    fill: var(--accent);
    stroke: var(--color-bg);
    stroke-width: 2;
}

.pop-chart__note {
    font-family: var(--font-display);
    font-size: 15px;
    fill: var(--color-text);
}

.pop-chart__note--peak {
    font-size: 18px;
    fill: var(--accent);
}

.pop-chart__points,
.pop-chart__note {
    transition: opacity 0.5s ease 1.3s;
}

.pop-chart__caption {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgb(241 239 238 / 0.6);
}

/* Bij onthullen: lijn tekent zich, daarna vlak en punten */
.has-reveal .pop-chart[data-reveal] .pop-chart__line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.has-reveal .pop-chart[data-reveal].is-revealed .pop-chart__line {
    stroke-dashoffset: 0;
}

.has-reveal .pop-chart[data-reveal] :is(.pop-chart__area, .pop-chart__points, .pop-chart__note) {
    opacity: 0;
}

.has-reveal .pop-chart[data-reveal].is-revealed :is(.pop-chart__area, .pop-chart__points, .pop-chart__note) {
    opacity: 1;
}

/* De SVG schaalt mee met de breedte: op telefoons de tekst in de grafiek groter maken */
@media (max-width: 47.99em) {
    .pop-chart__axis {
        font-size: 20px;
    }

    .pop-chart__event text {
        font-size: 19px;
    }

    .pop-chart__note {
        font-size: 24px;
    }

    .pop-chart__note--peak {
        font-size: 28px;
    }
}

@media (min-width: 48em) {
    .pop-chart {
        padding: 1.75rem 2rem 1.25rem;
    }
}

/* --- Woordenboek: mijnwoorden in de tekst (js/discover.js) --- */
.term {
    position: relative;
    text-decoration: underline dotted var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    cursor: help;
    transition: color 0.2s ease;
}

/* Groter raakvlak zonder de regelhoogte te veranderen */
.term::after {
    content: '';
    position: absolute;
    inset: -0.8125rem -0.25rem;
}

.term[aria-expanded="true"] {
    color: var(--accent);
}

/* --- Hotspots op foto's --- */
.hotspot {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 8;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    transform: translate(-50%, -50%);
}

.hotspot::before {
    content: '';
    width: 1.1rem;
    height: 1.1rem;
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    background: var(--accent);
    animation: hotspot-pulse 2.2s ease-out infinite;
}

.hotspot[aria-expanded="true"]::before {
    background: var(--color-text);
    animation: none;
}

/* --- Mijnenkaart (gemeentegrens Heerlen + de vier mijnen) --- */
.mine-map-block {
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
}

.mine-map {
    margin: 0;
    padding: 1rem;
    background: var(--color-surface);
}

.mine-map__title {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--accent);
}

.mine-map__area {
    position: relative;
    aspect-ratio: 420 / 340;
}

.mine-map__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 0.5));
    /* Het zuiden van Heerlen valt buiten de uitsnede: zacht laten weglopen */
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
}

.mine-map__land {
    fill: rgb(var(--accent-rgb) / 0.12);
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
}

/* Staatsmijn als vierkantje, particuliere mijnen als rondje (zoals de badges in de tabel) */
.mine-map__mine--staats::before,
.mine-map__key.mine-map__key--staats {
    border-radius: 2px;
}

.mine-map__name {
    position: absolute;
    top: 50%;
    left: 72%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-text);
    text-shadow: 0 0 4px var(--color-bg), 0 0 8px var(--color-bg);
    pointer-events: none;
}

.mine-map__caption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: rgb(241 239 238 / 0.75);
}

.mine-map__key {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.25rem;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: -0.05em;
}

.mine-map__source {
    flex-basis: 100%;
}

.mine-map__details {
    margin-top: 0.5rem;
}

.mine-map__details summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
}

.mine-map__details summary::-webkit-details-marker {
    display: none;
}

/* Eigen uitklappijltje (het standaardpijltje verdwijnt met display: flex) */
.mine-map__details summary::before {
    content: '';
    border: 0.35em solid transparent;
    border-left-color: currentColor;
    border-right: 0;
    transition: transform 0.2s ease;
}

.mine-map__details[open] summary::before {
    transform: rotate(90deg);
}

/* --- Infokaart (woordenboek, hotspots, mijnenkaart) --- */
.info-card {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 70;
    max-width: 26rem;
    margin-inline: auto;
    padding: 1.25rem 3.25rem 1.25rem 1.25rem;
    border: 2px solid var(--accent);
    background: #161616;
    box-shadow: 0 0 30px rgb(var(--accent-rgb) / 0.35), 0 10px 40px rgb(0 0 0 / 0.6);
    animation: fade-in 0.3s ease-out;
}

.info-card:focus {
    outline: none;
}

.info-card__kicker {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.info-card__title {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.info-card__text {
    font-size: 0.95rem;
    line-height: 1.5;
}

.info-card__close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 3rem;
    height: 3rem;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--accent);
}

@media (min-width: 48em) {
    .info-card {
        right: 1.5rem;
        bottom: 1.5rem;
        left: auto;
        width: 24rem;
        margin: 0;
    }
}

/* --- Voortgang & houwersdiploma (js/progress.js) --- */
.theme-btn {
    position: relative;
}

/* Vinkje op gelezen verhalen */
.theme-btn.is-read::after {
    content: '';
    position: absolute;
    top: 6%;
    right: 10%;
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23101010' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
    box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.8);
}

.progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 2rem auto 0;
    text-align: center;
}

.outro .progress {
    margin: 0 auto 2.5rem;
}

/* Drie brokjes kool, elk in de kleur van zijn verhaal */
.progress__pips {
    display: flex;
    gap: 0.6rem;
}

.progress__pips span {
    width: 1.4rem;
    height: 1.1rem;
    background: var(--color-line);
    clip-path: polygon(18% 0, 100% 14%, 86% 100%, 0 82%);
    transition: background-color 0.4s ease;
}

.progress__pips .is-on {
    background: var(--accent);
}

.progress__text {
    max-width: 28rem;
    font-size: 0.95rem;
    color: rgb(241 239 238 / 0.85);
}

.progress__diploma {
    animation: alarm-pulse 2s ease-in-out infinite;
}

.progress__reset {
    min-height: 3rem;
    padding-inline: 0.75rem;
    font-size: 0.8rem;
    text-decoration: underline;
    color: rgb(241 239 238 / 0.55);
}

.diploma-dialog {
    width: min(100% - 2rem, 46rem);
    max-width: none;
    max-height: calc(100vh - 2rem);
    max-height: calc(100svh - 2rem);
    overflow: auto;
    padding: 1.5rem;
    border: 2px solid var(--accent);
    background: #161616;
    color: inherit;
}

.diploma-dialog::backdrop {
    background: rgb(0 0 0 / 0.85);
}

.diploma-dialog__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
}

.diploma-dialog__close img {
    width: 1.75rem;
}

.diploma-dialog__title {
    margin: 0 3rem 0.5rem 0;
    font-size: var(--fs-heading);
    color: var(--accent);
}

.diploma-dialog__intro {
    margin-bottom: 1.25rem;
}

.diploma-dialog__label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

/* 1rem of groter: voorkomt dat iOS inzoomt bij het typen */
.diploma-dialog__input {
    width: 100%;
    min-height: 3rem;
    padding: 0.6rem 0.9rem;
    border: 2px solid var(--color-line);
    border-radius: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 1rem;
}

.diploma-dialog__input:focus {
    border-color: var(--accent);
    outline: none;
}

.diploma-dialog__canvas {
    width: 100%;
    height: auto;
    margin: 1.25rem 0;
}

.diploma-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Dubbele class: deze regel staat vóór .game-btn in het bestand */
.game-btn.game-btn--ghost {
    background: transparent;
    color: var(--accent);
    box-shadow: inset 0 0 0 3px var(--accent);
}

/* --- Kanarie-minigame (js/canary-game.js) --- */
.canary-game {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    margin-top: 3rem;
    padding: 1.5rem;
    border: 2px solid var(--color-line);
    background: var(--color-surface);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 94% 100%, 0 100%);
}

.canary-game__stage {
    position: relative;
    width: 100%;
    max-width: 15rem;
    margin-inline: auto;
    aspect-ratio: 16 / 15;
}

.canary-game__cage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #6b6b6b;
    stroke-width: 3;
    stroke-linecap: round;
}

.canary-game__perch {
    stroke: #8a6a3a;
    stroke-width: 5;
}

.canary-game__floor {
    stroke: #444444;
}

.canary-game__bird {
    position: absolute;
    top: 30%;
    left: 22%;
    width: 56%;
    transform-origin: 50% 50%;
    transition: transform 0.9s cubic-bezier(0.5, 0, 0.75, 0);
}

.canary-game__body {
    fill: var(--accent);
}

.canary-game__wing,
.canary-game__tail {
    fill: var(--accent-dark);
}

.canary-game__beak {
    fill: #f4a21d;
}

.canary-game__eye {
    fill: var(--color-bg);
}

.canary-game__legs {
    stroke: #c9a227;
    stroke-width: 3;
    stroke-linecap: round;
}

.canary-game__notes {
    position: absolute;
    top: 8%;
    right: 4%;
    display: flex;
    gap: 0.25rem;
    font-size: 1.4rem;
    color: var(--accent);
    opacity: 0;
}

.is-singing .canary-game__bird {
    animation: canary-hop 0.6s ease-in-out infinite;
}

.is-singing .canary-game__notes {
    opacity: 1;
}

.is-singing .canary-game__notes span {
    animation: canary-note 1.2s ease-out infinite;
}

.is-singing .canary-game__notes span:nth-child(2) {
    animation-delay: 0.4s;
}

.is-singing .canary-game__notes span:nth-child(3) {
    animation-delay: 0.8s;
}

/* Van zijn stokje gevallen: ondersteboven op de bodem van de kooi */
.is-fallen .canary-game__bird {
    transform: translateY(34%) rotate(160deg);
}

.canary-game__title {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    color: var(--accent);
}

.canary-game__text {
    min-height: 4.4em;
    margin-bottom: 1rem;
}

.canary-game__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.canary-game__rounds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.canary-game__rounds li {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-line);
    font-size: 0.8rem;
    font-weight: 700;
}

.canary-game__rounds .is-good {
    border-color: var(--accent);
    color: var(--accent);
}

.canary-game__rounds .is-bad {
    border-color: #e04a4f;
    color: #e04a4f;
}

/* Knoppen voor spelletjes: hoekig, in de themakleur */
.game-btn {
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1;
    text-transform: uppercase;
    clip-path: polygon(4% 0, 100% 6%, 96% 100%, 0 92%);
    transition: transform 0.15s ease, filter 0.15s ease;
}

.game-btn:active {
    transform: scale(0.96);
}

.game-btn--alarm {
    background: #e04a4f;
    color: var(--color-text);
    animation: alarm-pulse 1s ease-in-out infinite;
}

.game-sound {
    min-height: 3rem;
    padding-inline: 0.75rem;
    color: rgb(241 239 238 / 0.7);
    font-size: 0.85rem;
    text-decoration: underline;
}

.game-sound[aria-pressed="false"] {
    text-decoration: line-through;
}

@media (min-width: 48em) {
    .canary-game {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: 2.5rem;
        padding: 2rem 2.5rem;
    }
}

/* --- Tabellen (hoekig/steen-achtig) --- */
.data-table {
    max-width: 100%;
    padding: 0.75rem 0.5rem;
    background: var(--color-surface);
    /* Smalle schermen: tabel scrolt binnen het kader i.p.v. de pagina te verbreden */
    overflow-x: auto;
}

.data-table table {
    width: 100%;
    border-collapse: collapse;
}

.data-table__caption {
    padding-bottom: 0.75rem;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    text-align: left;
    text-transform: uppercase;
    color: var(--accent);
}

.data-table thead {
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

.data-table th {
    padding: 0.5rem 0.25rem;
    border-bottom: 2px solid var(--color-bg);
    color: var(--color-bg);
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-align: left;
    text-transform: uppercase;
}

.data-table td {
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--color-line);
    color: #e0e0e0;
    font-size: 0.75rem;
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background-color 0.2s ease;
}

.data-table__row--highlight {
    background: rgb(var(--accent-rgb) / 0.05);
}

.data-table__accent {
    color: var(--accent);
}

@media (min-width: 48em) {
    .data-table {
        padding: 1rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.4rem;
    }
}

@media (min-width: 90em) {
    .data-table {
        max-width: 56.25rem;
    }

    .data-table th {
        padding: 0.6rem 0.5rem;
        font-size: 0.75rem;
    }

    .data-table td {
        padding: 0.6rem 0.5rem;
        font-size: 0.85rem;
    }
}

/* Badges voor eigendom */
.badge {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}

@media (min-width: 48em) {
    .badge {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }
}

.badge--privaat {
    background: #444444;
    color: var(--color-text);
}

.badge--staats {
    background: var(--accent);
    color: var(--color-bg);
}

/* --- Audio --- */
.audio-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border: 2px solid var(--color-surface);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
}

.audio-player__title {
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    color: var(--accent);
}

.audio-btn {
    transition: transform 0.3s ease;
}

.audio-btn img {
    width: 5rem;
    height: 5rem;
}

/* Kleine knop over een afbeelding/video: icoon 2.25rem, raakvlak 3rem */
.audio-btn--overlay {
    position: absolute;
    right: 0.375rem;
    bottom: 0.375rem;
    z-index: 10;
    padding: 0.375rem;
}

.audio-btn--overlay img {
    width: 2.25rem;
    height: 2.25rem;
}

/* --- Grafiek --- */
.chart {
    position: relative;
    width: 100%;
    max-width: 37.5rem;
    height: 13.75rem;
    margin: 2rem auto;
}

@media (min-width: 48em) {
    .chart {
        height: 15.625rem;
    }
}

@media (min-width: 90em) {
    .chart {
        max-width: 43.75rem;
        height: 18.75rem;
    }
}

/* --- Tekstlink (opent de Molenberg-video) --- */
.text-link {
    position: relative;
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.3s ease;
}

/* Vergroot het raakvlak tot 3rem hoog zonder de regelhoogte te veranderen */
.text-link::after {
    content: '';
    position: absolute;
    inset: -0.8125rem -0.25rem;
}

/* --- Tijdlijn (scrollvoortgang) ---
   Mobiel: dunne balk bovenaan. Vanaf tablet: verticale rail links met markers.
   --progress (0–1) wordt gezet door updateProgress() in script.js */
.timeline {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 60;
    height: 3px;
    background: rgb(var(--accent-rgb) / 0.2);
}

.timeline__fill {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    transition: transform 0.1s ease-out;
}

/* "Afdalen in de mijn": diepte + jaartal. Mobiel een label linksboven (naast de home-knop),
   vanaf tablet een liftkooi die langs de schacht zakt. */
.timeline__cage {
    position: fixed;
    top: 1.6rem;
    left: 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: rgb(16 16 16 / 0.8);
    font-family: var(--font-display);
    font-size: 0.85rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.timeline.is-scrolling .timeline__cage {
    opacity: 1;
}

.timeline__depth::before {
    content: '';
    display: inline-block;
    margin-right: 0.35em;
    border: 0.3em solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
    vertical-align: 0.1em;
}

.timeline__year {
    color: var(--color-text);
}

.timeline__marker {
    display: none;
    position: absolute;
    left: -0.5625rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.625rem;
    background: var(--color-bg);
    border: 3px solid var(--color-line);
    transform: rotate(45deg);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.timeline__marker.is-active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent);
}

@media (min-width: 48em) {
    .timeline {
        right: auto;
        bottom: 0;
        left: 2.5rem;
        z-index: 40;
        width: 2px;
        height: auto;
    }

    .timeline__fill {
        transform: scaleY(var(--progress, 0));
        transform-origin: top;
    }

    .timeline__marker {
        display: block;
    }

    .timeline__cage {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        padding: 0;
        background: none;
        opacity: 1;
        transform: translateY(calc(var(--progress, 0) * 100vh));
        transition: transform 0.1s ease-out;
    }

    /* De liftkooi zelf */
    .timeline__cage::before {
        content: '';
        position: absolute;
        top: 0;
        left: 1px;
        width: 0.875rem;
        height: 1.125rem;
        transform: translate(-50%, -50%);
        border: 2px solid var(--accent);
        border-radius: 2px;
        background: var(--color-bg);
        box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.7);
    }

    .timeline__depth,
    .timeline__year {
        position: absolute;
        left: 1rem;
        white-space: nowrap;
    }

    .timeline__depth {
        top: -0.95rem;
        font-size: 0.75rem;
    }

    .timeline__year {
        top: 0.2rem;
        font-family: var(--font-body);
        font-size: 0.7rem;
        color: rgb(241 239 238 / 0.7);
    }
}

/* --- Kolenstof (canvas achter de content, getekend door js/effects.js) --- */
.dust {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --- Video popup --- */
.video-dialog {
    /* Ook begrensd door de hoogte (video 688 x 464 + sluitknop), anders valt de sluitknop liggend buiten beeld */
    width: min(100% - 2rem, 56rem, (100vh - 9rem) * 688 / 464);
    width: min(100% - 2rem, 56rem, (100svh - 9rem) * 688 / 464);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
}

.video-dialog::backdrop {
    background: rgb(0 0 0 / 0.9);
}

.video-dialog__close {
    position: absolute;
    top: -3.5rem;
    right: 0;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    transition: opacity 0.15s ease;
}

.video-dialog__close img {
    width: 2rem;
}

.video-dialog__frame {
    max-width: 50rem;
}

/* ===========================================
   SCROLL-ONTHULLINGEN
   Alleen actief als js/effects.js draait en beweging is toegestaan (html.has-reveal);
   zonder JS of met "minder beweging" is alles direct zichtbaar.
   =========================================== */

.has-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
        opacity 0.7s ease var(--reveal-delay, 0s),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0s);
}

.has-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* Foto's: het brokje kool breekt open, daarna schuiven de lagen erachter uit */
.has-reveal .media-frame[data-reveal] {
    opacity: 1;
    transform: none;
}

.has-reveal .media-frame[data-reveal] .media-frame__media {
    clip-path: var(--shape-closed);
    transition: clip-path 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0s);
}

.has-reveal .media-frame[data-reveal].is-revealed .media-frame__media {
    clip-path: var(--shape);
}

.has-reveal .media-frame[data-reveal]::before,
.has-reveal .media-frame[data-reveal] > :not(.media-frame__media) {
    opacity: 0;
    transition:
        opacity 0.6s ease calc(var(--reveal-delay, 0s) + 0.5s),
        transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--reveal-delay, 0s) + 0.4s);
}

.has-reveal .media-frame[data-reveal]::before {
    transform: translate(-5%, 8%);
}

.has-reveal .media-frame[data-reveal].is-revealed::before,
.has-reveal .media-frame[data-reveal].is-revealed > :not(.media-frame__media) {
    opacity: 1;
    transform: none;
}

/* Lichte diepte: de lagen bewegen iets mee met scrollen (alleen waar de browser scroll-animaties kent) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .media-frame.is-revealed::before {
            animation: strata-parallax linear both;
            animation-timeline: view();
        }
    }
}

/* --- Hover-effecten alleen op apparaten met een muis (voorkomt "plakkende" hover op touch) --- */
@media (hover: hover) {
    .img-btn:hover {
        transform: scale(1.05);
    }

    .img-btn:hover img {
        filter: brightness(1.2);
    }

    .theme-btn:hover img {
        animation: none;
        filter: drop-shadow(0 0 24px rgb(var(--accent-rgb) / 0.9)) brightness(1.15);
    }

    .theme-card:hover .theme-card__stone {
        transform: translateY(-4px) scale(1.03);
    }

    .layer--deep:hover .layer__dig img {
        animation-play-state: paused;
    }

    .outro__home:hover img {
        transform: rotate(360deg);
    }

    .story__home:hover,
    .video-dialog__close:hover {
        opacity: 0.8;
    }

    .audio-btn:hover {
        transform: scale(1.1);
    }

    .audio-btn--overlay:hover {
        transform: scale(1.15);
    }

    .text-link:hover {
        color: #ffffff;
    }

    .data-table tbody tr:hover {
        background: rgb(var(--accent-rgb) / 0.1);
    }

    .data-table tbody .data-table__row--highlight:hover {
        background: rgb(var(--accent-rgb) / 0.15);
    }
}

/* ===========================================
   ANIMATIONS
   =========================================== */

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glow die zacht aan- en uitgaat, als een lamp in het donker */
@keyframes glow-breathe {
    0%, 100% {
        filter: drop-shadow(0 0 var(--glow-near) var(--accent)) drop-shadow(0 0 var(--glow-far) rgb(var(--accent-rgb) / 0.5));
    }
    50% {
        filter: drop-shadow(0 0 9px var(--accent)) drop-shadow(0 0 36px rgb(var(--accent-rgb) / 0.3));
    }
}

@keyframes btn-breathe {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgb(var(--accent-rgb) / 0.6));
    }
    50% {
        filter: drop-shadow(0 0 20px rgb(var(--accent-rgb) / 0.85));
    }
}

@keyframes narrate-glow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

@keyframes hotspot-pulse {
    0% {
        box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.7);
    }
    70%, 100% {
        box-shadow: 0 0 0 0.9rem rgb(var(--accent-rgb) / 0);
    }
}

@keyframes canary-hop {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-4%) rotate(-4deg);
    }
}

@keyframes canary-note {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }
    to {
        opacity: 0;
        transform: translate(0.75rem, -1.5rem);
    }
}

@keyframes alarm-pulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.35);
    }
}

/* De hoofdlamp kijkt rond zolang niemand hem bestuurt */
@keyframes lamp-sway {
    0%, 100% {
        --lamp-x: 30%;
        --lamp-y: 42%;
    }
    25% {
        --lamp-x: 60%;
        --lamp-y: 34%;
    }
    50% {
        --lamp-x: 72%;
        --lamp-y: 60%;
    }
    75% {
        --lamp-x: 42%;
        --lamp-y: 66%;
    }
}

@keyframes strata-parallax {
    from {
        transform: translate(-2.5%, 4%);
    }
    to {
        transform: translate(2.5%, -4%);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.625rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}