@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Tangerine:wght@400;700&display=swap');

:root {
    --sky-top: #070b16;
    --sky-bottom: #11182a;

    --paper: #f4eee3;
    --muted: #aeb4c2;

    --lantern-dark: #4b2016;
    --lantern-frame: #6d2c1d;
    --lantern-paper: #d66a32;

    --fire: #ffd56a;
    --fire-hot: #fff1a8;
}

* {
    box-sizing: border-box;
}

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

body {
    overflow: hidden;
    background: var(--sky-top);
    color: var(--paper);

    font-family:
        "Inter",
        system-ui,
        sans-serif;
}

button {
    font: inherit;
}

/* ---------------------------
   Main scene
---------------------------- */

.scene {
    position: relative;

    min-height: 100svh;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 120%,
            rgba(53, 70, 102, 0.32),
            transparent 58%
        ),
        linear-gradient(
            to bottom,
            var(--sky-top),
            var(--sky-bottom)
        );
}

/* faint horizon haze */

.scene::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -20vh;

    height: 45vh;

    background:
        radial-gradient(
            ellipse at center,
            rgba(105, 118, 146, 0.10),
            transparent 67%
        );

    pointer-events: none;
}

/* ---------------------------
   Stars
---------------------------- */

.stars {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.stars-one {
    opacity: 0.75;

    background-image:
        radial-gradient(circle at 7% 16%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 18% 41%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 29% 11%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 38% 33%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 52% 15%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 61% 42%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 23%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 81% 48%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 92% 13%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 95% 61%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 12% 68%, white 0 1px, transparent 1.5px),
        radial-gradient(circle at 45% 61%, white 0 1px, transparent 1.5px);
    
    animation: twinkleSlow 5.5s ease-in-out infinite alternate;    
}

.stars-two {
    opacity: 0.32;

    background-image:
        radial-gradient(circle at 13% 26%, white 0 0.7px, transparent 1px),
        radial-gradient(circle at 22% 57%, white 0 0.7px, transparent 1px),
        radial-gradient(circle at 35% 20%, white 0 0.7px, transparent 1px),
        radial-gradient(circle at 48% 48%, white 0 0.7px, transparent 1px),
        radial-gradient(circle at 57% 27%, white 0 0.7px, transparent 1px),
        radial-gradient(circle at 66% 59%, white 0 0.7px, transparent 1px),
        radial-gradient(circle at 76% 10%, white 0 0.7px, transparent 1px),
        radial-gradient(circle at 84% 36%, white 0 0.7px, transparent 1px),
        radial-gradient(circle at 90% 70%, white 0 0.7px, transparent 1px);

    animation: twinkleFast 3.8s ease-in-out infinite alternate;    
}

.stars-three {
    opacity: 0.45;

    background-image:
        radial-gradient(circle at 4% 35%, white 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 9% 52%, white 0 0.6px, transparent 1.1px),
        radial-gradient(circle at 16% 8%, white 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 21% 75%, white 0 0.7px, transparent 1.2px),
        radial-gradient(circle at 27% 46%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 33% 66%, white 0 0.9px, transparent 1.4px),
        radial-gradient(circle at 41% 8%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 47% 27%, white 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 54% 72%, white 0 0.7px, transparent 1.1px),
        radial-gradient(circle at 59% 54%, white 0 0.8px, transparent 1.2px),
        radial-gradient(circle at 64% 9%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 69% 78%, white 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 74% 52%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 79% 29%, white 0 0.9px, transparent 1.4px),
        radial-gradient(circle at 86% 6%, white 0 0.7px, transparent 1.1px),
        radial-gradient(circle at 89% 44%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 94% 31%, white 0 0.9px, transparent 1.4px),
        radial-gradient(circle at 97% 79%, white 0 0.6px, transparent 1px);

    animation:
        twinkleThird 7.2s ease-in-out infinite;
}

.stars-four {
    opacity: 0.25;

    background-image:
        radial-gradient(circle at 3% 67%, white 0 0.5px, transparent 1px),
        radial-gradient(circle at 11% 24%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 19% 87%, white 0 0.5px, transparent 1px),
        radial-gradient(circle at 25% 31%, white 0 0.5px, transparent 1px),
        radial-gradient(circle at 31% 54%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 39% 82%, white 0 0.5px, transparent 1px),
        radial-gradient(circle at 44% 18%, white 0 0.5px, transparent 1px),
        radial-gradient(circle at 51% 38%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 58% 86%, white 0 0.5px, transparent 1px),
        radial-gradient(circle at 63% 33%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 70% 67%, white 0 0.5px, transparent 1px),
        radial-gradient(circle at 76% 44%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 82% 84%, white 0 0.5px, transparent 1px),
        radial-gradient(circle at 88% 22%, white 0 0.6px, transparent 1px),
        radial-gradient(circle at 93% 54%, white 0 0.5px, transparent 1px);

    animation:
        twinkleFourth 4.6s ease-in-out infinite;
}

@keyframes twinkleThird {
    0%,
    100% {
        opacity: 0.22;
        filter: brightness(0.8);
    }

    30% {
        opacity: 0.55;
        filter: brightness(1.25);
    }

    68% {
        opacity: 0.32;
        filter: brightness(0.95);
    }
}

@keyframes twinkleFourth {
    0%,
    100% {
        opacity: 0.15;
    }

    42% {
        opacity: 0.4;
    }

    73% {
        opacity: 0.22;
    }
}

@keyframes twinkleSlow {
    0%,
    100% {opacity: 0.45;
    filter: brightness(0.85);
    }

    50% {opacity: 0.8;
    filter: brightness(1.35);
    }
    
}

@keyframes twinkleFast {
    0%,
    100% {opacity: 0.2;
    filter: brightness(0.8);
    }

    45% {opacity: 0.5;
    filter: brightness(1.4);
    }

    70% {opacity: 0.28;
    filter: brightness(1);
    }
    
}

.distant-lanterns {
    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: 1;
}

.distant-lantern {
    position: absolute;

    width: 8px;
    height: 12px;

    border-radius: 45% 45% 35% 35%;

    background:
        radial-gradient(
            circle at 50% 55%,
            #fff2a8 0 16%,
            #f6b44a 32%,
            #d46b2e 55%,
            rgba(154, 65, 32, 0.45) 72%,
            transparent 76%
        );

    box-shadow:
        0 0 5px rgba(255, 187, 80, 0.85),
        0 0 12px rgba(255, 150, 50, 0.34);

    opacity: 0.6;

    animation:
        distantLanternFloat 10s ease-in-out infinite,
        distantLanternGlow 3s ease-in-out infinite;
}

.lantern-a {
    left: 12%;
    top: 28%;

    scale: 0.7;

    animation-duration: 11s, 3.4s;
    animation-delay: -2s, -1s;
}

.lantern-b {
    left: 24%;
    top: 58%;

    scale: 0.48;

    animation-duration: 13s, 4.2s;
    animation-delay: -5s, -2s;
}

.lantern-c {
    left: 71%;
    top: 36%;

    scale: 0.62;

    animation-duration: 12s, 3.8s;
    animation-delay: -7s, -0.5s;
}

.lantern-d {
    left: 84%;
    top: 64%;

    scale: 0.42;

    animation-duration: 14s, 4.5s;
    animation-delay: -4s, -2.5s;
}

.lantern-e {
    left: 60%;
    top: 18%;

    scale: 0.34;

    animation-duration: 16s, 5s;
    animation-delay: -8s, -1.5s;
}

.lantern-f {
    left: 37%;
    top: 72%;

    scale: 0.38;

    animation-duration: 15s, 4.7s;
    animation-delay: -6s, -3s;
}

.lantern-g {
    left: 6%;
    top: 52%;
    scale: 0.24;

    animation-duration: 18s, 4.2s;
    animation-delay: -9s, -2s;
}

.lantern-h {
    left: 17%;
    top: 15%;
    scale: 0.3;

    animation-duration: 16s, 5.1s;
    animation-delay: -4s, -1s;
}

.lantern-i {
    left: 31%;
    top: 30%;
    scale: 0.2;

    animation-duration: 20s, 4.8s;
    animation-delay: -12s, -3s;
}

.lantern-j {
    left: 43%;
    top: 12%;
    scale: 0.18;

    animation-duration: 19s, 5.5s;
    animation-delay: -5s, -2s;
}

.lantern-k {
    left: 53%;
    top: 46%;
    scale: 0.26;

    animation-duration: 17s, 4.3s;
    animation-delay: -10s, -1s;
}

.lantern-l {
    left: 68%;
    top: 70%;
    scale: 0.22;

    animation-duration: 21s, 5.2s;
    animation-delay: -7s, -4s;
}

.lantern-m {
    left: 78%;
    top: 19%;
    scale: 0.28;

    animation-duration: 18s, 4.7s;
    animation-delay: -13s, -2s;
}

.lantern-n {
    left: 94%;
    top: 39%;
    scale: 0.19;

    animation-duration: 22s, 5.6s;
    animation-delay: -6s, -3s;
}

@keyframes distantLanternFloat {
    0%,
    100% {
        translate: 0 0;
    }

    25% {
        translate: 4px -10px;
    }

    50% {
        translate: -3px -18px;
    }

    75% {
        translate: 5px -9px;
    }
}

@keyframes distantLanternGlow {
    0%,
    100% {
        opacity: 0.38;

        box-shadow:
            0 0 4px rgba(255, 187, 80, 0.55),
            0 0 10px rgba(255, 150, 50, 0.2);
    }

    50% {
        opacity: 0.72;

        box-shadow:
            0 0 7px rgba(255, 197, 98, 0.9),
            0 0 18px rgba(255, 150, 50, 0.4);
    }
}

/* ---------------------------
   Main content
---------------------------- */

.experience {
    position: relative;
    z-index: 2;

    width: min(90vw, 680px);
    height: 75vh;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro {
    position: absolute;
    top: 6%;

    text-align: center;

    transition:
        opacity 800ms ease,
        transform 800ms ease;
}

.intro h1 {
    margin: 0;

    font-family: "Tangerine", cursive;
    font-size: clamp(3.4rem, 8vw, 5.8rem);
    font-weight: 700;

    line-height: 0.9;
    letter-spacing: 0.01em;
}

.intro p {
    margin: 1rem 0 0;

    color: var(--muted);

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.72rem;
    font-weight: 300;

    letter-spacing: 0.14em;
    text-transform: lowercase;
}

/* ---------------------------
   Lantern
---------------------------- */

.lantern-button {
    position: absolute;

    left: 50%;
    top: 54%;

    width: 140px;
    height: 190px;

    padding: 0;
    border: 0;

    background: transparent;

    cursor: pointer;

    transform: translate(-50%, -50%);

    z-index: 3;

    will-change: transform, opacity;
}

.lantern-button:focus-visible {
    outline: 1px solid rgba(255, 217, 139, 0.75);
    outline-offset: 20px;
    border-radius: 50%;
}

.lantern {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    transform-origin: 50% 30%;

    animation: lanternIdle 5s ease-in-out infinite;

    will-change: transform;
}

.lantern-shell {
    position: absolute;

    left: 50%;
    top: 20px;

    width: 108px;
    height: 145px;

    transform: translateX(-50%);

    overflow: hidden;

    border-radius:
        42% 42% 34% 34% /
        22% 22% 18% 18%;

    clip-path: polygon(
        17% 0,
        83% 0,
        96% 9%,
        100% 22%,
        96% 73%,
        86% 95%,
        70% 100%,
        30% 100%,
        14% 95%,
        4% 73%,
        0 22%,
        4% 9%
    );

    background:
        linear-gradient(
            90deg,
            rgba(81, 35, 25, 0.26) 0%,
            rgba(199, 107, 52, 0.38) 12%,
            rgba(246, 164, 85, 0.86) 35%,
            rgba(255, 194, 103, 0.96) 50%,
            rgba(246, 164, 85, 0.86) 65%,
            rgba(199, 107, 52, 0.38) 88%,
            rgba(81, 35, 25, 0.26) 100%
        ),
        linear-gradient(
            to bottom,
            #9e4729 0%,
            #d77a42 20%,
            #f0a45e 56%,
            #bb5b32 100%
        );

    box-shadow:
        inset 0 0 22px rgba(255, 239, 171, 0.45),
        inset 0 -18px 24px rgba(106, 38, 20, 0.28);
}

.paper-texture {
    position: absolute;
    inset: 0;

    opacity: 0.24;

    background:
        repeating-linear-gradient(
            7deg,
            transparent 0 9px,
            rgba(88, 43, 30, 0.18) 10px,
            transparent 12px
        ),
        repeating-linear-gradient(
            96deg,
            transparent 0 15px,
            rgba(255, 232, 180, 0.08) 16px,
            transparent 18px
        );

    mix-blend-mode: multiply;
}

.inner-glow {
    position: absolute;

    left: 50%;
    bottom: 9px;

    width: 105px;
    height: 110px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at 50% 72%,
            rgba(255, 247, 190, 1) 0%,
            rgba(255, 213, 112, 0.96) 22%,
            rgba(255, 166, 66, 0.72) 47%,
            rgba(255, 115, 45, 0.22) 69%,
            transparent 82%
        );

    filter: blur(2px);

    animation: innerGlowPulse 2.3s ease-in-out infinite;
}

.lantern-flame {
    position: absolute;

    left: 50%;
    bottom: 15px;

    width: 14px;
    height: 33px;

    transform: translateX(-50%);

    border-radius:
        60% 40% 55% 45% /
        74% 65% 35% 26%;

    background:
        linear-gradient(
            to top,
            #d95d19 0%,
            #ff9a31 32%,
            #ffd976 70%,
            #fff7ca 100%
        );

    box-shadow:
        0 0 10px rgba(255, 218, 109, 0.95),
        0 0 28px rgba(255, 142, 38, 0.8);

    animation: flameFlicker 480ms ease-in-out infinite alternate;
}

.lantern-rim {
    position: absolute;

    left: 50%;

    width: 88px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            #4d271c,
            #7b4027
        );

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.35);
}

.lantern-rim-top {
    top: 17px;

    height: 8px;

    border-radius: 50%;
}

.lantern-rim-bottom {
    top: 159px;

    height: 10px;

    border-radius: 50%;
}

.lantern-halo {
    position: absolute;

    left: 50%;
    top: 54%;

    width: 230px;
    height: 250px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 170, 77, 0.30) 0%,
            rgba(255, 132, 52, 0.14) 35%,
            rgba(203, 98, 74, 0.05) 56%,
            transparent 72%
        );

    filter: blur(14px);

    z-index: -1;

    animation: haloBreath 3.2s ease-in-out infinite;
}

@keyframes lanternIdle {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1.1deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(1.3deg);
    }
}

@keyframes innerGlowPulse {
    0%,
    100% {
        opacity: 0.82;
        transform:
            translateX(-50%)
            scale(0.95);
    }

    50% {
        opacity: 1;
        transform:
            translateX(-50%)
            scale(1.06);
    }
}

@keyframes flameFlicker {
    from {
        transform:
            translateX(-50%)
            rotate(-5deg)
            scaleY(0.92);
    }

    to {
        transform:
            translateX(-50%)
            rotate(6deg)
            scaleY(1.08);
    }
}

@keyframes haloBreath {
    0%,
    100% {
        opacity: 0.55;
        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    50% {
        opacity: 0.92;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}

/* ---------------------------
   Instruction
---------------------------- */

.hint {
    position: absolute;

    top: calc(51% + 110px);

    margin: 0;

    color: #89909e;

    font-family:
        system-ui,
        sans-serif;

    font-size: 0.69rem;

    letter-spacing: 0.15em;
    text-transform: lowercase;

    transition:
        opacity 500ms ease,
        transform 500ms ease;
}

/* ---------------------------
   Positive message
---------------------------- */

.message {
    position: absolute;

    left: 50%;
    top: 57%;

    width: min(90vw, 520px);

    transform: translate(-50%, 20px);

    text-align: center;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1.4s ease,
        transform 1.4s ease;
}

.message.visible {
    opacity: 1;
    visibility: visible;

    transform: translate(-50%, 0);
}

.message p {
    margin: 0;

    color: #f5d9a6;

    font-family: "Tangerine", cursive;

    font-size: clamp(2.7rem, 7vw, 4.5rem);
    font-weight: 700;

    line-height: 1.05;
}

.again-button {
    margin-top: 2rem;

    padding: 0.45rem 0;

    border: 0;
    border-bottom: 1px solid rgba(222, 225, 231, 0.25);

    color: #949ba8;
    background: transparent;

    font-family:
        system-ui,
        sans-serif;

    font-size: 0.68rem;

    letter-spacing: 0.12em;

    cursor: pointer;

    transition:
        color 250ms ease,
        border-color 250ms ease;
}

.again-button:hover {
    color: #e5ded1;
    border-color: rgba(229, 222, 209, 0.7);
}

/* ---------------------------
   Footer
---------------------------- */

.footer {
    position: absolute;

    left: 50%;
    bottom: 22px;

    margin: 0;

    transform: translateX(-50%);

    color: rgba(184, 189, 201, 0.45);

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.61rem;

    letter-spacing: 0.1em;

    white-space: nowrap;
}

/* ---------------------------
   Release state
---------------------------- */

.scene.releasing .intro {
    opacity: 0;

    transform: translateY(-10px);
}

.scene.releasing .hint {
    opacity: 0;

    transform: translateY(8px);
}

.scene.releasing .lantern-button {
    pointer-events: none;
}

.scene.releasing .lantern {
    animation: lanternFlightWobble 3.2s ease-in-out infinite;
}

.scene.releasing .lantern {
    animation: flyingWobble 2.2s ease-in-out infinite;
}

/* ---------------------------
   Animations
---------------------------- */

@keyframes lanternFlightWobble {
    0%,
    100% {
        transform: rotate(-1deg);
    }

    50% {
        transform: rotate(1.4deg);
    }
}

@keyframes idleLantern {
    0%,
    100% {
        transform: rotate(-1.5deg) translateY(0);
    }

    50% {
        transform: rotate(1.5deg) translateY(-5px);
    }
}

@keyframes glowPulse {
    from {
        opacity: 0.72;
        transform: translateX(-50%) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes outerGlow {
    0%,
    100% {
        opacity: 0.65;
        transform: translate(-50%, -50%) scale(0.9);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes flame {
    from {
        transform:
            translateX(-50%)
            rotate(-4deg)
            scaleY(0.92);
    }

    to {
        transform:
            translateX(-50%)
            rotate(5deg)
            scaleY(1.08);
    }
}

@keyframes flyingWobble {
    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

/* ---------------------------
   Small screens
---------------------------- */

@media (max-height: 650px) {
    .experience {
        height: 88vh;
    }

    .intro {
        top: 2%;
    }

    .lantern-button {
        top: 52%;
        transform: translate(-50%, -50%) scale(0.86);
        will-change: transform, opacity;
    }
}

/* respect accessibility preference */

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