@font-face {
    font-family: "Libre Baskerville Local";
    src: url("f/LibreBaskerville-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Libre Baskerville Local";
    src: url("f/LibreBaskerville-Italic-Variable.ttf") format("truetype");
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
}

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

:root {
    --moment-flower-duration: 7.8s;
    --moment-soft-laughter-duration: 7.4s;
    --moment-tribute-duration: 7.4s;
    --moment-friendship-duration: 12s;
    --moment-afterglow-duration: 1.2s;
    --quote-transition-duration: 1.5s;
    --night: #060a14;
    --ivory: #e0e6ed;
    --ivory-star: #edf5ff;
    --ivory-bright: #f4f9ff;
    --gold-text: #ebd090;
    --gold-warm: #fff0c5;
    --gold-pale: #fff8df;
    --gold-highlight: #fff4cf;
    --gold-core: #dfb85f;
    --gold-mid: #e8c470;
    --gold-deep: #b98035;
    --gold-dust: #e9c46c;
    --blue-muted: #94a3b8;
    --blue-paint: #527383;
    --blue-soft: #cfdae0;
    --rose-gold: #e0aa98;
    --rose-gold-light: #f0c2ac;
    --gold-rgb: 235, 208, 144;
    --gold-warm-rgb: 255, 240, 197;
    --ivory-star-rgb: 232, 244, 255;
    --blue-glow-rgb: 173, 206, 231;
    --rose-gold-rgb: 224, 170, 152;
    --rose-gold-light-rgb: 240, 194, 172;
    --friend-gold-core-rgb: 247, 205, 118;
    --friend-blue-core-rgb: 165, 211, 242;
    --white-rgb: 255, 255, 255;
    --sky-ivory-rgb: 255, 245, 210;
    --sky-gold-rgb: 240, 216, 158;
    --sky-blue-rgb: 220, 235, 255;
    --meteor-blue-rgb: 226, 237, 248;
    --meteor-head-rgb: 255, 250, 232;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: "Libre Baskerville Local", Baskerville, "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;
    color: var(--ivory);
    background-color: var(--night);
}

/* =========================================================
   1. RUSTIGE STERRENHEMEL
   ========================================================= */

.stars-container {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

/* Een dunne nachtsluier maakt het eerbetoon stiller zonder de tekst te dimmen. */
.stars-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: rgba(1, 4, 11, 0.08);
}

body.tribute-awake .stars-container::before {
    animation: tribute-sky-stillness var(--moment-tribute-duration) ease-in-out both;
}

.stars-layer-1,
.stars-layer-2,
.stars-layer-3,
.twinkle-stars {
    position: absolute;
    inset: 0;
    /*
     * Alleen de gewone websitehemel vervaagt naar de illustratie. De losse
     * citaatthema's blijven ongemaskeerd, zodat hun sterren ook op de volledig
     * gevulde ultrawide-uitsnede zichtbaar blijven.
     */
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 40%,
        rgba(0, 0, 0, 0.58) 54%,
        transparent 69%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 40%,
        rgba(0, 0, 0, 0.58) 54%,
        transparent 69%
    );
}

.stars-layer-1 {
    background-image:
        radial-gradient(2px 2px at 40px 60px, rgba(var(--white-rgb), 0.70), transparent),
        radial-gradient(3px 3px at 250px 180px, rgba(var(--white-rgb), 0.50), transparent),
        radial-gradient(1.5px 1.5px at 120px 300px, rgba(var(--white-rgb), 0.80), transparent),
        radial-gradient(1.2px 1.2px at 315px 82px, rgba(var(--meteor-blue-rgb), 0.62), transparent);
    background-size: 353px 317px;
    background-position: 17px -9px;
    opacity: 0.58;
}

.stars-layer-2 {
    background-image:
        radial-gradient(3px 3px at 150px 40px, rgba(var(--sky-ivory-rgb), 0.80), transparent),
        radial-gradient(2px 2px at 350px 250px, rgba(var(--white-rgb), 0.60), transparent),
        radial-gradient(4px 4px at 80px 180px, rgba(var(--white-rgb), 0.40), transparent),
        radial-gradient(1.4px 1.4px at 410px 365px, rgba(var(--sky-gold-rgb), 0.58), transparent);
    background-size: 467px 421px;
    background-position: -31px 23px;
    opacity: 0.52;
}

.stars-layer-3 {
    background-image:
        radial-gradient(3.5px 3.5px at 200px 200px, rgba(var(--sky-blue-rgb), 0.70), transparent),
        radial-gradient(2.5px 2.5px at 400px 80px, rgba(var(--white-rgb), 0.60), transparent),
        radial-gradient(1.3px 1.3px at 468px 318px, rgba(var(--sky-ivory-rgb), 0.55), transparent);
    background-size: 557px 493px;
    background-position: 53px -37px;
    opacity: 0.50;
}

.sky-twinkle {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: var(--base);
    transform: scale(0.94);
    will-change: opacity, transform;
    --star-color: var(--ivory-star);
    --star-glow-near: rgba(var(--ivory-star-rgb), 0.62);
    --star-glow-far: rgba(var(--blue-glow-rgb), 0.18);
    background: var(--star-color);
    box-shadow:
        0 0 3px var(--star-glow-near),
        0 0 8px var(--star-glow-far);
}

.sky-twinkle--warm {
    --star-color: var(--gold-warm);
    --star-glow-near: rgba(var(--gold-warm-rgb), 0.58);
    --star-glow-far: rgba(var(--gold-rgb), 0.17);
}

.flower-star.flower-awake {
    animation: flower-star-memory var(--moment-flower-duration) cubic-bezier(0.40, 0, 0.25, 1) both;
    isolation: isolate;
}

.flower-star::before,
.flower-star::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    pointer-events: none;
}

.flower-star::before {
    z-index: 2;
    width: clamp(18px, 1.35vw, 26px);
    height: clamp(18px, 1.35vw, 26px);
    transform: translate(-50%, -50%) rotate(-7deg) scale(0.66);
    background:
        linear-gradient(
            to bottom,
            transparent 8%,
            rgba(var(--rose-gold-light-rgb), 0.04) 26%,
            rgba(var(--rose-gold-light-rgb), 0.70) 49%,
            rgba(var(--rose-gold-light-rgb), 0.04) 72%,
            transparent 92%
        ) center / 1px 100% no-repeat,
        linear-gradient(
            to right,
            transparent 10%,
            rgba(var(--rose-gold-light-rgb), 0.03) 29%,
            rgba(var(--rose-gold-light-rgb), 0.58) 50%,
            rgba(var(--rose-gold-light-rgb), 0.03) 70%,
            transparent 90%
        ) center / 100% 1px no-repeat;
    filter: blur(0.2px);
}

.flower-star::after {
    z-index: 1;
    width: clamp(30px, 2.5vw, 46px);
    height: clamp(23px, 1.8vw, 34px);
    border-radius: 48% 57% 44% 61%;
    transform: translate(-48%, -54%) rotate(-6deg) scale(0.68);
    background: radial-gradient(
        ellipse at 42% 56%,
        rgba(var(--rose-gold-rgb), 0.42) 0%,
        rgba(var(--rose-gold-rgb), 0.18) 31%,
        rgba(var(--rose-gold-rgb), 0.06) 52%,
        transparent 74%
    );
    filter: blur(0.8px);
}

.flower-star.flower-awake::before,
.flower-star.flower-awake::after {
    animation: flower-star-aura var(--moment-flower-duration) cubic-bezier(0.40, 0, 0.25, 1) both;
}

.flower-petal {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 1.2px;
    height: 2.1px;
    border-radius: 62% 38% 58% 42%;
    opacity: 0;
    pointer-events: none;
    background: rgba(var(--rose-gold-light-rgb), 0.76);
    box-shadow: 0 0 4px rgba(var(--rose-gold-rgb), 0.24);
    transform: translate(-50%, -50%) rotate(-12deg) scale(0.5);
    will-change: opacity, transform;
}

.flower-star.flower-awake .flower-petal {
    animation: flower-petal-drift 3.45s cubic-bezier(0.31, 0, 0.25, 1) var(--petal-delay, 2.1s) both;
}

@keyframes flower-star-memory {
    0%, 7%, 100% {
        opacity: var(--base);
        transform: scale(0.94);
        background: var(--star-color);
        box-shadow:
            0 0 3px var(--star-glow-near),
            0 0 8px var(--star-glow-far);
    }

    29%, 52% {
        opacity: 0.94;
        transform: scale(1.20);
        background: var(--rose-gold-light);
        box-shadow:
            0 0 7px rgba(var(--rose-gold-light-rgb), 0.76),
            0 0 21px rgba(var(--rose-gold-rgb), 0.38);
    }

    76% {
        opacity: 0.64;
        transform: scale(1.10);
        background: var(--rose-gold);
        box-shadow:
            0 0 5px rgba(var(--rose-gold-rgb), 0.56),
            0 0 15px rgba(var(--rose-gold-rgb), 0.22);
    }
}

@keyframes flower-star-aura {
    0%, 8%, 100% {
        opacity: 0;
        transform: translate(-48%, -54%) rotate(-6deg) scale(0.68);
    }

    29% {
        opacity: 0.78;
        transform: translate(-48%, -54%) rotate(-3deg) scale(1.06);
    }

    52% {
        opacity: 0.60;
        transform: translate(-48%, -54%) rotate(-5deg) scale(1.13);
    }

    76% {
        opacity: 0.26;
        transform: translate(-48%, -54%) rotate(-6deg) scale(0.94);
    }
}

@keyframes flower-petal-drift {
    0%, 8% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-12deg) scale(0.5);
    }

    24% {
        opacity: 0.38;
    }

    62% {
        opacity: 0.24;
    }

    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--petal-x)),
            calc(-50% + var(--petal-y))
        ) rotate(var(--petal-turn)) scale(0.62);
    }
}

/* =========================================================
   ZACHT LACHENDE STERREN
   ========================================================= */

.stars-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 52% 13%,
            rgba(var(--gold-warm-rgb), 0.11) 0%,
            rgba(var(--gold-rgb), 0.04) 39%,
            transparent 67%
        );
}

.soft-laughter-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.soft-laughter-star {
    --laugh-rgb: var(--ivory-star-rgb);
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.72);
    background: rgb(var(--laugh-rgb));
    will-change: opacity, transform;
}

.soft-laughter-star--warm {
    --laugh-rgb: var(--gold-warm-rgb);
}

.soft-laughter-star::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(12px, 1vw, 18px);
    height: clamp(12px, 1vw, 18px);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-5deg) scale(0.58);
    background:
        linear-gradient(
            to bottom,
            transparent 8%,
            rgba(var(--laugh-rgb), 0.05) 30%,
            rgba(var(--laugh-rgb), 0.52) 50%,
            rgba(var(--laugh-rgb), 0.04) 70%,
            transparent 92%
        ) center / 1px 100% no-repeat,
        linear-gradient(
            to right,
            transparent 12%,
            rgba(var(--laugh-rgb), 0.04) 33%,
            rgba(var(--laugh-rgb), 0.40) 50%,
            rgba(var(--laugh-rgb), 0.03) 68%,
            transparent 88%
        ) center / 100% 1px no-repeat;
}

.soft-laughter-star:nth-child(3n + 2)::before {
    transform: translate(-50%, -50%) rotate(7deg) scale(0.58);
}

body.soft-laughter-awake .stars-container::after {
    animation: soft-laughter-sky-warmth var(--moment-soft-laughter-duration) ease-in-out both;
}

body.soft-laughter-awake .stars-layer-1 {
    animation: soft-laughter-sky-layer-one var(--moment-soft-laughter-duration) ease-in-out both;
}

body.soft-laughter-awake .stars-layer-2 {
    animation: soft-laughter-sky-layer-two var(--moment-soft-laughter-duration) ease-in-out both;
}

body.soft-laughter-awake .stars-layer-3 {
    animation: soft-laughter-sky-layer-three var(--moment-soft-laughter-duration) ease-in-out both;
}

body.soft-laughter-awake .soft-laughter-star {
    animation: soft-laughter-star-smile var(--laugh-duration, 4s) ease-in-out var(--laugh-delay, 0s) both;
}

body.soft-laughter-awake .soft-laughter-star::before {
    animation: soft-laughter-star-rays var(--laugh-duration, 4s) ease-in-out var(--laugh-delay, 0s) both;
}

body.soft-laughter-awake .star-body {
    animation: soft-laughter-main-star var(--moment-soft-laughter-duration) ease-in-out both;
}

body.soft-laughter-awake .star-aura {
    animation: soft-laughter-main-aura var(--moment-soft-laughter-duration) ease-in-out both;
}

@keyframes soft-laughter-sky-warmth {
    0%, 8%, 100% { opacity: 0; }
    31%, 69% { opacity: 0.92; }
    84% { opacity: 0.36; }
}

@keyframes soft-laughter-sky-layer-one {
    0%, 8%, 100% { opacity: 0.58; }
    35%, 58% { opacity: 0.82; }
    78% { opacity: 0.66; }
}

@keyframes soft-laughter-sky-layer-two {
    0%, 13%, 100% { opacity: 0.52; }
    43%, 66% { opacity: 0.78; }
    83% { opacity: 0.60; }
}

@keyframes soft-laughter-sky-layer-three {
    0%, 18%, 100% { opacity: 0.50; }
    51%, 72% { opacity: 0.74; }
    87% { opacity: 0.57; }
}

@keyframes soft-laughter-star-smile {
    0%, 6% {
        opacity: 0;
        transform: scale(0.68);
        box-shadow: none;
    }

    29% {
        opacity: var(--laugh-peak, 0.92);
        transform: scale(1.18);
        box-shadow:
            0 0 7px rgba(var(--laugh-rgb), 0.76),
            0 0 20px rgba(var(--laugh-rgb), 0.29);
    }

    47% {
        opacity: 0.50;
        transform: scale(0.96);
        box-shadow:
            0 0 4px rgba(var(--laugh-rgb), 0.42),
            0 0 11px rgba(var(--laugh-rgb), 0.13);
    }

    65% {
        opacity: calc(var(--laugh-peak, 0.92) - 0.06);
        transform: scale(1.11);
        box-shadow:
            0 0 6px rgba(var(--laugh-rgb), 0.66),
            0 0 17px rgba(var(--laugh-rgb), 0.23);
    }

    82% {
        opacity: 0.34;
        transform: scale(0.92);
        box-shadow: 0 0 8px rgba(var(--laugh-rgb), 0.12);
    }

    100% {
        opacity: 0.12;
        transform: scale(0.82);
        box-shadow: 0 0 6px rgba(var(--laugh-rgb), 0.08);
    }
}

@keyframes soft-laughter-star-rays {
    0%, 10% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-5deg) scale(0.58);
    }

    30% {
        opacity: 0.82;
        transform: translate(-50%, -50%) rotate(-2deg) scale(1.04);
    }

    47% {
        opacity: 0.28;
        transform: translate(-50%, -50%) rotate(-4deg) scale(0.82);
    }

    66% {
        opacity: 0.70;
        transform: translate(-50%, -50%) rotate(1deg) scale(0.98);
    }

    83% {
        opacity: 0.16;
        transform: translate(-50%, -50%) rotate(-3deg) scale(0.76);
    }

    100% {
        opacity: 0.04;
        transform: translate(-50%, -50%) rotate(-5deg) scale(0.66);
    }
}

body.theme-afterglow--soft-laughter .soft-laughter-star {
    animation: soft-laughter-afterglow-star var(--moment-afterglow-duration) ease-out both;
}

body.theme-afterglow--soft-laughter .soft-laughter-star::before {
    animation: soft-laughter-afterglow-rays var(--moment-afterglow-duration) ease-out both;
}

@keyframes soft-laughter-afterglow-star {
    from {
        opacity: 0.12;
        transform: scale(0.82);
        box-shadow: 0 0 6px rgba(var(--laugh-rgb), 0.08);
    }

    to {
        opacity: 0;
        transform: scale(0.74);
        box-shadow: none;
    }
}

@keyframes soft-laughter-afterglow-rays {
    from {
        opacity: 0.04;
        transform: translate(-50%, -50%) rotate(-5deg) scale(0.66);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-6deg) scale(0.58);
    }
}

@keyframes soft-laughter-main-star {
    0%, 10%, 100% {
        opacity: 0.84;
        transform: scale(1) rotate(0deg);
    }

    34%, 65% {
        opacity: 0.98;
        transform: scale(1.038) rotate(-0.10deg);
    }

    80% {
        opacity: 0.88;
        transform: scale(1.008) rotate(0.04deg);
    }
}

@keyframes soft-laughter-main-aura {
    0%, 10%, 100% {
        opacity: 0.18;
        transform: scale(1);
    }

    34%, 65% {
        opacity: 0.46;
        transform: scale(1.15);
    }

    80% {
        opacity: 0.23;
        transform: scale(1.035);
    }
}

/* =========================================================
   WOORDLOOS EERBETOON
   ========================================================= */

.tribute-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, filter;
}

.tribute-stars::before {
    content: "";
    position: absolute;
    inset: -8% -4% 40%;
    opacity: 0;
    background: radial-gradient(
        ellipse at 50% 22%,
        rgba(var(--gold-warm-rgb), 0.07) 0%,
        rgba(var(--gold-rgb), 0.025) 42%,
        transparent 72%
    );
}

.tribute-star {
    --tribute-rgb: var(--ivory-star-rgb);
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--size);
    height: var(--size);
    transform-origin: center;
    will-change: transform, filter;
}

.tribute-star--warm {
    --tribute-rgb: var(--gold-warm-rgb);
}

.tribute-star--blue {
    --tribute-rgb: var(--blue-glow-rgb);
}

.tribute-star-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.62);
    background: rgb(var(--tribute-rgb));
    box-shadow:
        0 0 5px rgba(var(--tribute-rgb), 0.58),
        0 0 14px rgba(var(--tribute-rgb), 0.16);
    will-change: opacity, transform;
}

.tribute-star-core::before,
.tribute-star-core::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--lean)) scale(0.64);
    pointer-events: none;
}

.tribute-star-core::before {
    --decoration-peak: 0.72;
    --decoration-rest: 0.30;
    width: clamp(11px, 0.85vw, 16px);
    height: clamp(11px, 0.85vw, 16px);
    background:
        linear-gradient(
            to bottom,
            transparent 6%,
            rgba(var(--tribute-rgb), 0.04) 28%,
            rgba(var(--tribute-rgb), 0.50) 50%,
            rgba(var(--tribute-rgb), 0.03) 72%,
            transparent 94%
        ) center / 1px 100% no-repeat,
        linear-gradient(
            to right,
            transparent 10%,
            rgba(var(--tribute-rgb), 0.03) 31%,
            rgba(var(--tribute-rgb), 0.38) 50%,
            rgba(var(--tribute-rgb), 0.03) 69%,
            transparent 90%
        ) center / 100% 1px no-repeat;
}

.tribute-star-core::after {
    --decoration-peak: 0.54;
    --decoration-rest: 0.24;
    width: clamp(17px, 1.35vw, 26px);
    height: clamp(13px, 1.05vw, 21px);
    border-radius: 52% 43% 57% 46%;
    background: radial-gradient(
        ellipse,
        rgba(var(--tribute-rgb), 0.18) 0%,
        rgba(var(--tribute-rgb), 0.06) 42%,
        transparent 72%
    );
    filter: blur(0.7px);
}

body.tribute-awake .tribute-stars {
    animation: tribute-family-presence var(--moment-tribute-duration) ease-in-out both;
}

body.tribute-awake .tribute-stars::before {
    animation: tribute-sky-embrace var(--moment-tribute-duration) ease-in-out both;
}

body.tribute-awake .tribute-star {
    animation: tribute-family-breath var(--moment-tribute-duration) cubic-bezier(0.40, 0, 0.28, 1) both;
}

body.tribute-awake .tribute-star-core {
    animation: tribute-star-awaken var(--tribute-duration, 2.25s) cubic-bezier(0.34, 0, 0.22, 1) var(--tribute-delay, 0s) both;
}

body.tribute-awake .tribute-star-core::before,
body.tribute-awake .tribute-star-core::after {
    animation: tribute-decoration-awaken var(--tribute-duration, 2.25s) cubic-bezier(0.34, 0, 0.22, 1) var(--tribute-delay, 0s) both;
}

body.tribute-awake .star-body {
    animation: tribute-main-star-answer var(--moment-tribute-duration) ease-in-out both;
}

body.tribute-awake .star-aura {
    animation: tribute-main-aura-answer var(--moment-tribute-duration) ease-in-out both;
}

@keyframes tribute-family-presence {
    0%, 13% { opacity: 0; }
    22%, 90% { opacity: 1; }
    96% { opacity: 0.28; }
    100% { opacity: 0.18; }
}

@keyframes tribute-sky-stillness {
    0%, 4%, 100% { opacity: 0; }
    14%, 88% { opacity: 1; }
    96% { opacity: 0.28; }
}

body.theme-afterglow--tribute .tribute-stars {
    animation: tribute-afterglow var(--moment-afterglow-duration) ease-out both;
}

body.theme-afterglow--tribute .tribute-star-core {
    opacity: var(--rest, 0.70);
    transform: scale(1);
}

body.theme-afterglow--tribute .tribute-star-core::before,
body.theme-afterglow--tribute .tribute-star-core::after {
    opacity: var(--decoration-rest, 0.26);
    transform: translate(-50%, -50%) rotate(var(--lean)) scale(1);
}

@keyframes tribute-afterglow {
    from { opacity: 0.18; }
    to { opacity: 0; }
}

@keyframes tribute-star-awaken {
    0%, 8% {
        opacity: 0;
        transform: scale(0.62);
    }

    58% {
        opacity: 0.96;
        transform: scale(1.17);
    }

    100% {
        opacity: var(--rest, 0.70);
        transform: scale(1);
    }
}

@keyframes tribute-decoration-awaken {
    0%, 8% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--lean)) scale(0.64);
    }

    58% {
        opacity: var(--decoration-peak, 0.60);
        transform: translate(-50%, -50%) rotate(var(--lean)) scale(1.12);
    }

    100% {
        opacity: var(--decoration-rest, 0.26);
        transform: translate(-50%, -50%) rotate(var(--lean)) scale(1);
    }
}

@keyframes tribute-family-breath {
    0%, 16% {
        transform: translate3d(var(--gather-x, 0), var(--gather-y, 0), 0) scale(0.86);
        filter: brightness(0.92);
    }

    38%, 48%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }

    62% {
        transform: translate3d(0, 0, 0) scale(1.10);
        filter:
            brightness(1.22)
            drop-shadow(0 0 5px rgba(var(--tribute-rgb), 0.42))
            drop-shadow(0 0 12px rgba(var(--tribute-rgb), 0.15));
    }

    70%, 87% {
        transform: translate3d(0, 0, 0) scale(1.06);
        filter:
            brightness(1.12)
            drop-shadow(0 0 4px rgba(var(--tribute-rgb), 0.28))
            drop-shadow(0 0 10px rgba(var(--tribute-rgb), 0.10));
    }

    94% {
        transform: translate3d(0, 0, 0) scale(1.02);
        filter: brightness(1.05);
    }
}

@keyframes tribute-sky-embrace {
    0%, 40%, 100% { opacity: 0; }
    62% { opacity: 0.82; }
    70%, 87% { opacity: 0.46; }
    94% { opacity: 0.14; }
}

@keyframes tribute-main-star-answer {
    0%, 55%, 100% {
        opacity: 0.84;
        transform: scale(1) rotate(0deg);
    }

    70%, 87% {
        opacity: 0.93;
        transform: scale(1.018) rotate(-0.04deg);
    }

    94% {
        opacity: 0.88;
        transform: scale(1.008) rotate(0.03deg);
    }
}

@keyframes tribute-main-aura-answer {
    0%, 55%, 100% {
        opacity: 0.18;
        transform: scale(1);
    }

    70%, 87% {
        opacity: 0.33;
        transform: scale(1.09);
    }

    94% {
        opacity: 0.23;
        transform: scale(1.035);
    }
}

/* =========================================================
   TWEE VERBONDEN STERREN — VRIENDSCHAP
   ========================================================= */

.friendship-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

.friendship-stars::before {
    content: "";
    position: absolute;
    inset: 5% 11% 55%;
    opacity: 0;
    background:
        radial-gradient(ellipse at 32% 48%, rgba(var(--gold-warm-rgb), 0.07), transparent 45%),
        radial-gradient(ellipse at 70% 58%, rgba(var(--blue-glow-rgb), 0.06), transparent 44%);
}

.friendship-connection {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.friendship-brush-stroke {
    fill: none;
    stroke: url(#friendship-bridge-gradient);
    stroke-width: var(--brush-width, 0.8px);
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: var(--bridge-start, 1000);
    opacity: 0;
    filter:
        url(#friendship-brush-roughness)
        drop-shadow(0 0 1.4px rgba(var(--gold-warm-rgb), 0.24))
        drop-shadow(0 0 3.5px rgba(var(--blue-glow-rgb), 0.10));
    will-change: opacity, stroke-dashoffset;
}

.friendship-brush--mobile {
    display: none;
}

.friend-star,
.friendship-echo,
.friendship-shared-light {
    position: absolute;
    top: var(--y);
    left: var(--x);
    border-radius: 50%;
    pointer-events: none;
}

.friend-star {
    --friend-rgb: var(--ivory-star-rgb);
    --friend-core-rgb: var(--ivory-star-rgb);
    --friend-other-rgb: var(--ivory-star-rgb);
    width: clamp(4.6px, 0.36vw, 6.8px);
    height: clamp(4.6px, 0.36vw, 6.8px);
    opacity: 0;
    transform: scale(0.58);
    background: rgb(var(--friend-core-rgb));
    box-shadow:
        0 0 4px rgba(var(--friend-core-rgb), 0.82),
        0 0 8px rgba(var(--friend-rgb), 0.64),
        0 0 19px rgba(var(--friend-rgb), 0.26);
    isolation: isolate;
    will-change: opacity, transform, filter;
}

.friend-star--gold {
    --friend-rgb: var(--gold-warm-rgb);
    --friend-core-rgb: var(--friend-gold-core-rgb);
    --friend-other-rgb: var(--friend-blue-core-rgb);
}

.friend-star--blue {
    --friend-rgb: var(--blue-glow-rgb);
    --friend-core-rgb: var(--friend-blue-core-rgb);
    --friend-other-rgb: var(--friend-gold-core-rgb);
}

.friend-star-memory {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.76);
    background: rgb(var(--friend-other-rgb));
    box-shadow:
        0 0 6px rgba(var(--friend-other-rgb), 0.52),
        0 0 16px rgba(var(--friend-other-rgb), 0.20);
    pointer-events: none;
    will-change: opacity, transform;
}

.friend-comfort-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: clamp(54px, 4.8vw, 82px);
    height: clamp(42px, 3.7vw, 64px);
    border-radius: 47% 58% 45% 61%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-5deg) scale(0.72);
    background: radial-gradient(
        ellipse at 48% 52%,
        rgba(var(--friend-other-rgb), 0.24) 0%,
        rgba(var(--friend-other-rgb), 0.09) 34%,
        rgba(var(--friend-rgb), 0.035) 56%,
        transparent 76%
    );
    filter: blur(1.1px);
    pointer-events: none;
    will-change: opacity, transform;
}

.friend-star::before,
.friend-star::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.friend-star::before {
    width: clamp(22px, 1.8vw, 34px);
    height: clamp(22px, 1.8vw, 34px);
    transform: translate(-50%, -50%) rotate(-5deg);
    background:
        linear-gradient(
            to bottom,
            transparent 5%,
            rgba(var(--friend-rgb), 0.04) 28%,
            rgba(var(--friend-rgb), 0.62) 50%,
            rgba(var(--friend-rgb), 0.04) 72%,
            transparent 95%
        ) center / 1px 100% no-repeat,
        linear-gradient(
            to right,
            transparent 9%,
            rgba(var(--friend-rgb), 0.03) 31%,
            rgba(var(--friend-rgb), 0.48) 50%,
            rgba(var(--friend-rgb), 0.03) 69%,
            transparent 91%
        ) center / 100% 1px no-repeat;
}

.friend-star--blue::before {
    transform: translate(-50%, -50%) rotate(7deg);
}

.friend-star::after {
    width: clamp(38px, 3.2vw, 60px);
    height: clamp(29px, 2.5vw, 48px);
    border-radius: 46% 57% 43% 61%;
    transform: translate(-50%, -50%) rotate(-4deg);
    background: radial-gradient(
        ellipse,
        rgba(var(--friend-rgb), 0.18) 0%,
        rgba(var(--friend-rgb), 0.07) 42%,
        transparent 74%
    );
    filter: blur(0.8px);
}

.friend-star--blue::after {
    border-radius: 58% 42% 53% 47%;
    transform: translate(-50%, -50%) rotate(6deg);
}

.friendship-echo {
    width: clamp(2px, 0.16vw, 3px);
    height: clamp(2px, 0.16vw, 3px);
    opacity: 0;
    transform: scale(0.62);
    background: var(--gold-pale);
    box-shadow:
        0 0 5px rgba(var(--gold-warm-rgb), 0.58),
        0 0 12px rgba(var(--blue-glow-rgb), 0.18);
    will-change: opacity, transform;
}

.friendship-echo:nth-of-type(even) {
    background: var(--ivory-star);
}

.friendship-shared-light {
    width: clamp(2.8px, 0.21vw, 4px);
    height: clamp(2.8px, 0.21vw, 4px);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    background: var(--ivory-bright);
    box-shadow:
        0 0 6px rgba(var(--ivory-star-rgb), 0.52),
        0 0 15px rgba(var(--gold-warm-rgb), 0.16),
        0 0 19px rgba(var(--blue-glow-rgb), 0.13);
    will-change: opacity, transform, filter;
}

.friendship-shared-light::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(34px, 3vw, 54px);
    height: clamp(22px, 2vw, 38px);
    border-radius: 53% 47% 59% 41%;
    transform: translate(-50%, -50%) rotate(-4deg);
    background: radial-gradient(
        ellipse,
        rgba(var(--ivory-star-rgb), 0.12) 0%,
        rgba(var(--gold-warm-rgb), 0.045) 38%,
        rgba(var(--blue-glow-rgb), 0.025) 56%,
        transparent 76%
    );
    filter: blur(0.8px);
}

body.friendship-awake .friendship-stars {
    animation: friendship-scene-presence var(--moment-friendship-duration) ease-in-out both;
}

body.friendship-awake .friendship-stars::before {
    animation: friendship-shared-sky var(--moment-friendship-duration) ease-in-out both;
}

body.friendship-awake .friend-star.is-first {
    animation: friendship-first-star var(--moment-friendship-duration) cubic-bezier(0.37, 0, 0.23, 1) both;
}

body.friendship-awake .friend-star.is-second {
    animation: friendship-second-star var(--moment-friendship-duration) cubic-bezier(0.37, 0, 0.23, 1) both;
}

body.friendship-awake .friend-star.is-first .friend-star-memory,
body.friendship-awake .friend-star.is-second .friend-star-memory {
    animation: friendship-color-memory var(--moment-friendship-duration) cubic-bezier(0.37, 0, 0.23, 1) both;
}

body.friendship-awake .friend-star.is-second .friend-comfort-aura {
    animation: friendship-comfort-hold var(--moment-friendship-duration) cubic-bezier(0.37, 0, 0.23, 1) both;
}

body.friendship-awake .friendship-echo {
    animation:
        friendship-light-answer 1.95s cubic-bezier(0.37, 0, 0.23, 1) var(--echo-delay, 1.5s) both,
        friendship-light-return 1.55s cubic-bezier(0.37, 0, 0.23, 1) var(--echo-return-delay, 5.9s) none;
}

body.friendship-awake .friendship-shared-light {
    animation: friendship-shared-light var(--moment-friendship-duration) cubic-bezier(0.37, 0, 0.23, 1) both;
}

body.friendship-awake .friendship-brush-stroke {
    animation: friendship-brush-reveal 9.5s cubic-bezier(0.37, 0, 0.23, 1) var(--bridge-delay, 0.7s) both;
}

body.friendship-awake .twinkle-stars {
    animation: friendship-rest-twinkles var(--moment-friendship-duration) ease-in-out both;
}

body.friendship-awake .stars-layer-1 {
    animation: friendship-rest-layer-one var(--moment-friendship-duration) ease-in-out both;
}

body.friendship-awake .stars-layer-2 {
    animation: friendship-rest-layer-two var(--moment-friendship-duration) ease-in-out both;
}

body.friendship-awake .stars-layer-3 {
    animation: friendship-rest-layer-three var(--moment-friendship-duration) ease-in-out both;
}

@keyframes friendship-scene-presence {
    0% { opacity: 0; }
    4%, 96% { opacity: 1; }
    100% { opacity: 0.18; }
}

body.theme-afterglow--friendship .friendship-stars {
    animation: friendship-afterglow var(--moment-afterglow-duration) ease-out both;
}

body.theme-afterglow--friendship .friend-star {
    opacity: 0.76;
    transform: scale(1.02);
    filter: brightness(1.04);
}

body.theme-afterglow--friendship .friend-star-memory {
    opacity: 0.27;
    transform: scale(1);
}

body.theme-afterglow--friendship .friend-comfort-aura {
    opacity: 0.08;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1.02);
}

body.theme-afterglow--friendship .friendship-shared-light {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.96);
}

body.theme-afterglow--friendship .friendship-brush-stroke {
    opacity: 0.12;
    stroke-dashoffset: 0;
}

@keyframes friendship-afterglow {
    from { opacity: 0.18; }
    to { opacity: 0; }
}

@keyframes friendship-first-star {
    0% {
        opacity: 0.46;
        transform: scale(0.96);
        filter: brightness(1);
    }

    8% {
        opacity: 0.58;
        transform: scale(1.01);
        filter: brightness(1.02);
    }

    18% {
        opacity: 0.90;
        transform: scale(1.11);
        filter:
            brightness(1.10)
            drop-shadow(0 0 6px rgba(var(--friend-rgb), 0.30));
    }

    28%, 58% {
        opacity: 0.74;
        transform: scale(1.03);
        filter: brightness(1.04);
    }

    68% {
        opacity: 0.84;
        transform: scale(1.05);
        filter: brightness(1.07);
    }

    76% {
        opacity: 0.96;
        transform: scale(1.11);
        filter:
            brightness(1.13)
            drop-shadow(0 0 7px rgba(var(--friend-rgb), 0.32));
    }

    84% {
        opacity: 0.80;
        transform: scale(1.03);
        filter: brightness(1.05);
    }

    92% {
        opacity: 0.96;
        transform: scale(1.11);
        filter:
            brightness(1.13)
            drop-shadow(0 0 7px rgba(var(--friend-rgb), 0.32));
    }

    100% {
        opacity: 0.78;
        transform: scale(1.03);
        filter: brightness(1.04);
    }
}

@keyframes friendship-second-star {
    0% {
        opacity: 0.48;
        transform: scale(0.96);
        filter: brightness(1);
    }

    9% {
        opacity: 0.44;
        transform: scale(0.94);
        filter: brightness(0.98);
    }

    20%, 27% {
        opacity: 0.26;
        transform: scale(0.88);
        filter: brightness(0.88);
    }

    39% {
        opacity: 0.42;
        transform: scale(0.93);
        filter: brightness(0.96);
    }

    50% {
        opacity: 0.62;
        transform: scale(0.99);
        filter: brightness(1.02);
    }

    60% {
        opacity: 0.76;
        transform: scale(1.03);
        filter: brightness(1.05);
    }

    68% {
        opacity: 0.84;
        transform: scale(1.05);
        filter: brightness(1.07);
    }

    76% {
        opacity: 0.96;
        transform: scale(1.11);
        filter:
            brightness(1.13)
            drop-shadow(0 0 7px rgba(var(--friend-rgb), 0.32));
    }

    84% {
        opacity: 0.80;
        transform: scale(1.03);
        filter: brightness(1.05);
    }

    92% {
        opacity: 0.96;
        transform: scale(1.11);
        filter:
            brightness(1.13)
            drop-shadow(0 0 7px rgba(var(--friend-rgb), 0.32));
    }

    100% {
        opacity: 0.78;
        transform: scale(1.03);
        filter: brightness(1.04);
    }
}

@keyframes friendship-light-answer {
    0%, 100% {
        opacity: 0;
        transform: scale(0.72);
    }

    42%, 58% {
        opacity: 0.68;
        transform: scale(1.10);
    }

    76% {
        opacity: 0.34;
        transform: scale(1.01);
    }
}

@keyframes friendship-light-return {
    0%, 100% {
        opacity: 0;
        transform: scale(0.70);
    }

    43%, 58% {
        opacity: 0.46;
        transform: scale(1.04);
    }

    78% {
        opacity: 0.20;
        transform: scale(0.94);
    }
}

@keyframes friendship-comfort-hold {
    0%, 27%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-5deg) scale(0.72);
    }

    38% {
        opacity: 0.36;
        transform: translate(-50%, -50%) rotate(-3deg) scale(1.02);
    }

    48% {
        opacity: 0.30;
        transform: translate(-50%, -50%) rotate(-5deg) scale(1.10);
    }

    58% {
        opacity: 0.18;
        transform: translate(-50%, -50%) rotate(-4deg) scale(1.04);
    }

    66% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-5deg) scale(0.96);
    }
}

@keyframes friendship-shared-light {
    0%, 29% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
        filter: brightness(1);
    }

    39% {
        opacity: 0.34;
        transform: translate(-50%, -50%) scale(1.04);
        filter: brightness(1.08);
    }

    52%, 67% {
        opacity: 0.26;
        transform: translate(-50%, -50%) scale(0.96);
        filter: brightness(1.03);
    }

    76%, 92% {
        opacity: 0.42;
        transform: translate(-50%, -50%) scale(1.08);
        filter: brightness(1.10);
    }

    100% {
        opacity: 0.22;
        transform: translate(-50%, -50%) scale(0.96);
        filter: brightness(1.02);
    }
}

@keyframes friendship-brush-reveal {
    0%, 4% {
        opacity: 0;
        stroke-dashoffset: var(--bridge-start, 1000);
    }

    18% {
        opacity: var(--brush-peak, 0.30);
        stroke-dashoffset: 0;
    }

    34%, 74% {
        opacity: var(--brush-rest, 0.20);
        stroke-dashoffset: 0;
    }

    82% {
        opacity: var(--brush-peak, 0.30);
        stroke-dashoffset: 0;
    }

    92% {
        opacity: var(--brush-rest, 0.20);
        stroke-dashoffset: 0;
    }

    100% {
        opacity: 0.14;
        stroke-dashoffset: 0;
    }
}

@keyframes friendship-color-memory {
    0%, 44% {
        opacity: 0;
        transform: scale(0.76);
    }

    58% {
        opacity: 0.14;
        transform: scale(0.92);
    }

    76%, 92% {
        opacity: 0.40;
        transform: scale(1.08);
    }

    100% {
        opacity: 0.27;
        transform: scale(1);
    }
}

@keyframes friendship-shared-sky {
    0%, 16%, 100% { opacity: 0; }
    32% { opacity: 0.22; }
    48%, 64% { opacity: 0.28; }
    76%, 92% { opacity: 0.38; }
    97% { opacity: 0.18; }
}

@keyframes friendship-rest-twinkles {
    0%, 5%, 100% { opacity: 1; }
    14%, 95% { opacity: 0.72; }
    98% { opacity: 0.88; }
}

@keyframes friendship-rest-layer-one {
    0%, 5%, 100% { opacity: 0.58; }
    14%, 95% { opacity: 0.46; }
    98% { opacity: 0.54; }
}

@keyframes friendship-rest-layer-two {
    0%, 5%, 100% { opacity: 0.52; }
    14%, 95% { opacity: 0.41; }
    98% { opacity: 0.48; }
}

@keyframes friendship-rest-layer-three {
    0%, 5%, 100% { opacity: 0.50; }
    14%, 95% { opacity: 0.40; }
    98% { opacity: 0.46; }
}

@media (max-width: 768px) {
    .soft-laughter-star,
    .tribute-star {
        top: var(--y-mobile, var(--y));
        left: var(--x-mobile, var(--x));
    }

    .friend-star,
    .friendship-echo,
    .friendship-shared-light {
        top: var(--y-mobile, var(--y));
        left: var(--x-mobile, var(--x));
    }

    .friendship-brush--desktop {
        display: none;
    }

    .friendship-brush--mobile {
        display: block;
    }
}

.answering-star {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.78);
    pointer-events: none;
    will-change: opacity, transform;
}

/* =========================================================
   2. VALLENDE STERREN
   ========================================================= */

.shooting-star {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    will-change: transform;

    /*
     * De ster beweegt nu met een constante snelheid van begin
     * tot eind. Daardoor ontstaat nergens meer een korte pauze.
     */
    animation: meteor-flight var(--duration, 1.1s) linear forwards;
}

.shooting-star::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--trail-length, 105px);
    height: var(--trail-width, 1.4px);
    border-radius: 999px;
    transform-origin: right center;
    transform: translateY(-50%) rotate(var(--angle, 25deg)) scaleX(0.28);
    opacity: 0;

    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(var(--white-rgb), 0.06) 18%,
        rgba(var(--meteor-blue-rgb), 0.28) 55%,
        var(--meteor-color, rgba(var(--gold-rgb), 0.96)) 100%
    );

    box-shadow: 0 0 4px rgba(var(--gold-rgb), 0.12);
    animation: meteor-tail var(--duration, 1.1s) ease-in-out forwards;
}

.shooting-star::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--head-size, 3.8px);
    height: var(--head-size, 3.8px);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.72);
    opacity: 0;
    background: var(--meteor-head, var(--gold-pale));

    box-shadow:
        0 0 5px rgba(var(--meteor-head-rgb), 0.95),
        0 0 13px rgba(var(--gold-rgb), 0.52),
        0 0 22px rgba(var(--gold-rgb), 0.18);

    animation: meteor-head var(--duration, 1.1s) ease-in-out forwards;
}

@keyframes meteor-flight {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(
            var(--travel-x, 430px),
            var(--travel-y, 190px),
            0
        );
    }
}

@keyframes meteor-tail {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotate(var(--angle, 25deg)) scaleX(0.28);
    }

    14% {
        opacity: var(--meteor-opacity-soft, 0.58);
        transform: translateY(-50%) rotate(var(--angle, 25deg)) scaleX(0.62);
    }

    32% {
        opacity: var(--meteor-opacity, 0.84);
        transform: translateY(-50%) rotate(var(--angle, 25deg)) scaleX(1);
    }

    74% {
        opacity: var(--meteor-opacity, 0.84);
        transform: translateY(-50%) rotate(var(--angle, 25deg)) scaleX(0.92);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%) rotate(var(--angle, 25deg)) scaleX(0.44);
    }
}

@keyframes meteor-head {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
    }

    14% {
        opacity: var(--meteor-opacity-soft, 0.58);
        transform: translate(-50%, -50%) scale(0.92);
    }

    32%,
    72% {
        opacity: var(--meteor-opacity, 0.84);
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.48);
    }
}

/* =========================================================
   3. AFBEELDING MET DE KLEINE PRINS
   ========================================================= */

.bottom-illustration {
    --illustration-opacity: 0.90;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 78vh;
    height: 78dvh;
    max-height: none;
    z-index: 1;
    pointer-events: none;
    background-image: url("i/kleine-prins-sterrenveld-desktop.webp");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: var(--illustration-opacity);
    transition: opacity 1.4s ease-in-out;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.16) 12%,
        rgba(0, 0, 0, 0.68) 28%,
        black 42%,
        black 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.16) 12%,
        rgba(0, 0, 0, 0.68) 28%,
        black 42%,
        black 100%
    );
}

/*
 * De ultrawide uitsnede is een echte 3:1-versie van hetzelfde sterrenveld.
 * Daardoor blijven de drie figuren klein en volledig zichtbaar, terwijl de
 * bovenste lucht rustig in de geanimeerde websitehemel overvloeit.
 */
@media (min-width: 1200px) and (min-aspect-ratio: 2 / 1) {
    .bottom-illustration {
        --illustration-opacity: 0.92;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        background-image: url("i/kleine-prins-sterrenveld-ultrawide.webp");
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        opacity: var(--illustration-opacity);
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.18) 10%,
            rgba(0, 0, 0, 0.72) 24%,
            black 40%,
            black 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.18) 10%,
            rgba(0, 0, 0, 0.72) 24%,
            black 40%,
            black 100%
        );
    }
}

/* Tijdens de meest verstilde themamomenten wijkt het landschap heel licht terug. */
body.flower-moment-awake .bottom-illustration,
body.tribute-awake .bottom-illustration,
body.friendship-awake .bottom-illustration {
    opacity: calc(var(--illustration-opacity) - 0.04);
}

/* =========================================================
   4. HANDGESCHILDERDE STER RECHTSBOVEN
   ========================================================= */

.top-right-star {
    position: fixed;
    top: clamp(3.5rem, 8vh, 6.5rem);
    right: clamp(2.5rem, 7vw, 9rem);
    width: clamp(72px, 6vw, 112px);
    height: clamp(72px, 6vw, 112px);
    z-index: 5;
    opacity: 0.88;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.top-right-star::after {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transform: rotate(-7deg) scale(0.90);
    filter: blur(2.8px);
    transition: opacity 260ms ease, transform 480ms ease;
    background:
        radial-gradient(
            ellipse at 27% 42%,
            rgba(var(--gold-rgb), 0.38) 0%,
            rgba(var(--gold-rgb), 0.14) 18%,
            transparent 47%
        ),
        radial-gradient(
            ellipse at 76% 34%,
            rgba(var(--gold-warm-rgb), 0.30) 0%,
            rgba(var(--gold-rgb), 0.11) 17%,
            transparent 44%
        ),
        radial-gradient(
            ellipse at 57% 79%,
            rgba(var(--gold-rgb), 0.24) 0%,
            rgba(var(--gold-rgb), 0.08) 19%,
            transparent 42%
        );
}

.top-right-star:focus-visible:not(.pointer-focus)::after {
    opacity: 0.88;
    transform: rotate(-4deg) scale(1);
}

.top-right-star:focus-visible:not(.pointer-focus) svg {
    filter:
        drop-shadow(0 0 5px rgba(var(--gold-rgb), 0.30))
        drop-shadow(0 0 13px rgba(var(--gold-rgb), 0.16));
}

.top-right-star svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 7px rgba(var(--gold-rgb), 0.12));
}

.star-composition {
    transform-box: fill-box;
    transform-origin: center;
    animation: star-drift 18s ease-in-out infinite;
}

.star-aura,
.star-body,
.star-dust {
    transform-box: view-box;
    transform-origin: 60px 60px;
}

.star-aura {
    opacity: 0.18;
}

.star-body {
    opacity: 0.84;
}

.star-dust {
    filter: drop-shadow(0 0 1.4px rgba(var(--gold-rgb), 0.42));
}

@keyframes star-drift {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-0.35deg);
    }
    37% {
        transform: translate3d(-0.7px, -1.1px, 0) rotate(0.18deg);
    }
    73% {
        transform: translate3d(0.45px, -0.3px, 0) rotate(-0.08deg);
    }
}

@media (min-width: 1200px) and (min-aspect-ratio: 2 / 1) {
    .top-right-star {
        top: clamp(4rem, 9vh, 8rem);
        right: clamp(6rem, 11vw, 18rem);
    }
}

/* =========================================================
   5. VERBORGEN SCHAAPCONSTELLATIE
   ========================================================= */

.sheep-easter-egg {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: start center;
    padding-top: clamp(4.5rem, 8vh, 6.5rem);
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.sheep-constellation-frame {
    width: min(92vw, 580px);
    text-align: center;
}

.sheep-constellation-svg {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    overflow: hidden;
    filter: drop-shadow(0 0 5px rgba(var(--gold-rgb), 0.08));
    will-change: opacity, transform;
}

.sheep-painted-art {
    opacity: 0.90;
}

.sheep-mask-segment {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.sheep-mask-point {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

body.sheep-visible .sheep-mask-segment {
    animation: sheep-painted-line-draw 480ms cubic-bezier(0.42, 0, 0.23, 1) var(--line-delay) both;
}

body.sheep-visible .sheep-mask-point {
    animation: sheep-painted-point-appear 760ms ease-out var(--point-delay) both;
}

.sheep-whisper {
    margin-top: clamp(-2.8rem, -5vw, -1.8rem);
    font-size: clamp(0.94rem, 1.35vw, 1.15rem);
    font-style: italic;
    letter-spacing: 0.055em;
    color: rgba(var(--gold-rgb), 0.82);
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.86);
    opacity: 0;
    transform: translateY(4px);
    will-change: opacity, transform;
}

body.sheep-visible .sheep-easter-egg {
    visibility: visible;
    animation: sheep-scene-presence 15s ease-in-out both;
}

body.sheep-visible .sheep-constellation-svg {
    animation: sheep-constellation-presence 15s ease-in-out both;
}

body.sheep-visible .sheep-whisper {
    animation: sheep-whisper-appearance 15s ease-in-out both;
}

body.sheep-visible #quote-container {
    opacity: 0;
}

@keyframes sheep-scene-presence {
    0% { opacity: 0; }
    9%, 84% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes sheep-constellation-presence {
    0%, 4% {
        opacity: 0;
        transform: translateY(3px);
    }

    12%, 84% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-2px);
    }
}

@keyframes sheep-painted-line-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes sheep-painted-point-appear {
    0% {
        opacity: 0;
        transform: scale(0.45);
    }

    62% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sheep-whisper-appearance {
    0%, 78% {
        opacity: 0;
        transform: translateY(4px);
    }

    83%, 91% {
        opacity: 0.82;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-2px);
    }
}

/* =========================================================
   6. TEKST
   ========================================================= */

.content-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 110rem;
    padding: 2.5rem;
    margin-bottom: 40vh;
    text-align: center;
}

#quote-container {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity var(--quote-transition-duration) ease-in-out;
}

#quote-container.faded-out {
    opacity: 0;
}

#quote-container.is-entering {
    animation: quote-first-appearance var(--quote-transition-duration) ease-in-out 350ms both;
}

@keyframes quote-first-appearance {
    from { opacity: 0; }
    to { opacity: 1; }
}

blockquote {
    width: min(100%, 34ch);
    margin-inline: auto;
    font-size: clamp(1.35rem, 2.25vw, 2.1rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    text-wrap: balance;
    color: var(--gold-text);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.80);
}

/*
 * Een klein, zacht penseelstreepje vervangt de aanhalingstekens.
 * Het is decoratief, maar blijft rustiger dan een zichtbaar symbool.
 */
blockquote::before {
    content: "";
    display: block;
    width: clamp(34px, 3.5vw, 44px);
    height: 7px;
    margin: 0 auto 1rem;
    opacity: 0.48;
    transform: rotate(-2.2deg) skewX(-4deg);
    clip-path: polygon(
        0 47%, 7% 27%, 19% 33%, 34% 10%, 51% 27%, 72% 18%, 100% 42%,
        92% 60%, 71% 55%, 55% 77%, 37% 59%, 18% 84%, 5% 67%
    );
    filter: blur(0.12px);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--gold-rgb), 0.22) 6%,
        rgba(var(--gold-rgb), 0.72) 24%,
        rgba(var(--gold-warm-rgb), 0.54) 47%,
        rgba(var(--gold-rgb), 0.30) 72%,
        rgba(var(--gold-rgb), 0.08) 91%,
        transparent 100%
    );
}

cite {
    display: block;
    margin-top: 1.5rem;
    font-size: clamp(0.90rem, 1.25vw, 1.15rem);
    font-style: normal;
    letter-spacing: 0.035em;
    color: var(--blue-muted);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.60);
}

@media (max-width: 768px) {
    .top-right-star {
        top: clamp(2rem, 6vh, 3.5rem);
        right: clamp(1.25rem, 6vw, 2.25rem);
        width: 64px;
        height: 64px;
    }

    .content-wrapper {
        padding: 1.5rem;
        margin-bottom: 35vh;
    }

    .bottom-illustration {
        height: 62vh;
        height: 62dvh;
        background-image: url("i/kleine-prins-sterrenveld-mobiel.webp");
        background-position: center bottom;
    }

    .sheep-easter-egg {
        padding-top: clamp(7.25rem, 17vh, 9rem);
    }

}

/*
 * Op lage, liggende schermen krijgt de hoofdster haar eigen rustige hoek.
 * De tekstkolom blijft bewust vrij van die zone, ook bij lange citaten.
 */
@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
    .top-right-star {
        top: 1rem;
        right: 1.25rem;
        width: 56px;
        height: 56px;
    }

    .content-wrapper {
        padding: 1rem clamp(5rem, 12vw, 7rem);
        margin-bottom: 28vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stars-layer-1,
    .stars-layer-2,
    .stars-layer-3,
    .sky-twinkle,
    .top-right-star,
    .star-composition {
        animation: none !important;
    }

    .shooting-star {
        display: none;
    }

    #quote-container {
        transition: none;
    }

    #quote-container.is-entering {
        animation: none !important;
        opacity: 1;
    }

    .top-right-star::after {
        transition: none;
    }

    body.sheep-visible .sheep-easter-egg,
    body.sheep-visible .sheep-constellation-svg,
    body.sheep-visible .sheep-whisper,
    body.sheep-visible .sheep-mask-segment,
    body.sheep-visible .sheep-mask-point {
        animation: none !important;
    }

    body.sheep-visible .sheep-easter-egg {
        visibility: visible;
        opacity: 1;
    }

    body.sheep-visible .sheep-constellation-svg {
        opacity: 1;
        transform: none;
    }

    body.sheep-visible .sheep-mask-segment {
        stroke-dashoffset: 0;
    }

    body.sheep-visible .sheep-mask-point {
        opacity: 1;
        transform: none;
    }

    body.sheep-visible .sheep-whisper {
        opacity: 0.82;
        transform: none;
    }
}