/* the sky quietly changes as the page moves */
.journey-background {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    background: var(--night);
    pointer-events: none;
}

.journey-background > div:not(.journey-plane) {
    position: absolute;
    inset: 0;
}

.journey-background__night {
    background:
        radial-gradient(circle at 20% 18%, rgba(134, 179, 255, 0.32), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(190, 119, 166, 0.2), transparent 29%),
        linear-gradient(180deg, #111a35 0%, #233b68 56%, #416fa5 100%);
    opacity: clamp(0, calc(1.2 - var(--journey) * 2.4), 1);
}

.journey-background__dawn {
    background:
        radial-gradient(circle at 20% 72%, rgba(255, 204, 122, 0.5), transparent 29%),
        linear-gradient(180deg, #101f46 0%, #345f9f 46%, #e39180 78%, #ffd7a2 100%);
    opacity: clamp(0, calc(var(--journey) * 4.2), 1);
}

.journey-background__day {
    background:
        radial-gradient(circle at 16% 30%, rgba(255, 255, 226, 0.84), transparent 19%),
        linear-gradient(180deg, #4e91d5 0%, #8bc9ef 47%, #d9f0fb 78%, #f7e8ce 100%);
    opacity: clamp(0, calc((var(--journey) - 0.2) * 7), 1);
}

.journey-background__twilight {
    background:
        radial-gradient(circle at 82% 22%, rgba(255, 155, 109, 0.28), transparent 24%),
        linear-gradient(180deg, #172b58 0%, #37598c 34%, #8b668b 67%, #111a38 100%);
    opacity: clamp(0, calc((var(--journey) - 0.79) * 5.8), 1);
}

.journey-stars {
    opacity: clamp(0, calc(1.1 - var(--journey) * 3), 1);
    transform: translateY(calc(var(--journey) * -8vh));
}

.journey-stars span {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(169, 225, 255, 0.45);
    animation: star-breathe var(--star-speed, 4s) ease-in-out var(--star-delay, 0s) infinite;
}

.journey-sun {
    top: calc(76% - var(--journey) * 61%) !important;
    right: auto !important;
    bottom: auto !important;
    left: 13% !important;
    width: clamp(9rem, 16vw, 15rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff4c7;
    box-shadow:
        0 0 0 2rem rgba(255, 236, 174, 0.12),
        0 0 8rem rgba(255, 201, 113, 0.64);
    opacity: clamp(0, calc((var(--journey) - 0.08) * 5), 0.88);
}

.journey-mountains {
    top: auto !important;
    bottom: -7vh !important;
    height: 58vh;
    opacity: clamp(0, calc((var(--journey) - 0.12) * 5), 0.86);
    transform: translate3d(calc(var(--journey) * -3vw), calc(4vh - var(--journey) * 6vh), 0) scale(1.04);
    transform-origin: bottom center;
}

.journey-mountains svg {
    width: 103%;
    height: 100%;
    overflow: visible;
}

.journey-mountains__far {
    fill: rgba(38, 76, 112, 0.25);
}

.journey-mountains__near {
    fill: rgba(24, 55, 88, 0.4);
}

.journey-mountains__snow {
    fill: rgba(244, 250, 255, 0.36);
}

.journey-mountains__ridge {
    fill: none;
    stroke: rgba(223, 239, 250, 0.17);
    stroke-width: 2;
}

.journey-birds {
    color: rgba(17, 47, 74, 0.62);
    opacity: clamp(0, calc((var(--journey) - 0.19) * 7), 0.82);
    transform: translate3d(calc(var(--journey) * 8vw), calc(var(--journey) * -3vh), 0);
    transition: color 500ms ease, opacity 500ms ease;
}

.journey-bird {
    position: absolute;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(25, 55, 83, 0.1));
    animation: bird-drift 4.8s ease-in-out infinite alternate;
}

.journey-bird svg {
    width: 100%;
    overflow: visible;
    animation: bird-wing 2.4s ease-in-out infinite alternate;
}

.journey-bird path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.journey-bird--one {
    top: 21%;
    left: 57%;
    width: clamp(2.6rem, 4.4vw, 4.3rem);
}

.journey-bird--two {
    top: 29%;
    left: 66%;
    width: clamp(1.9rem, 3.2vw, 3.1rem);
    animation-delay: -1.3s;
}

.journey-bird--two svg {
    animation-delay: -0.8s;
}

.journey-bird--three {
    top: 17%;
    left: 73%;
    width: clamp(1.5rem, 2.5vw, 2.5rem);
    animation-delay: -2.7s;
}

.journey-bird--three svg {
    animation-delay: -1.5s;
}

.journey-bird--four {
    top: 34%;
    left: 79%;
    width: clamp(1.25rem, 2vw, 2rem);
    animation-delay: -3.4s;
}

.journey-wind {
    overflow: hidden;
    color: rgba(244, 250, 255, 0.62);
    opacity: clamp(0, calc((var(--journey) - 0.14) * 5.5), 0.72);
    transition: color 500ms ease, opacity 500ms ease;
}

.wind-streak {
    position: absolute;
    left: -32vw;
    display: block;
    width: clamp(8rem, 17vw, 17rem);
    height: clamp(1.2rem, 2.4vw, 2.4rem);
    border-top: 1px solid currentColor;
    border-radius: 50%;
    filter: drop-shadow(0 2px 5px rgba(33, 72, 102, 0.08));
    opacity: 0.76;
    animation: wind-sweep var(--wind-speed, 10s) linear var(--wind-delay, 0s) infinite;
}

.wind-streak::after {
    content: "";
    position: absolute;
    top: 0.48rem;
    right: 9%;
    width: 58%;
    height: 58%;
    border-top: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.46;
}

.wind-streak--one { top: 14%; --wind-speed: 9.5s; --wind-delay: -3.5s; }
.wind-streak--two { top: 31%; width: clamp(6rem, 13vw, 13rem); --wind-speed: 12s; --wind-delay: -8.2s; }
.wind-streak--three { top: 48%; width: clamp(10rem, 21vw, 20rem); --wind-speed: 10.8s; --wind-delay: -1.7s; }
.wind-streak--four { top: 64%; width: clamp(7rem, 15vw, 15rem); --wind-speed: 13.4s; --wind-delay: -10.1s; }
.wind-streak--five { top: 77%; width: clamp(9rem, 18vw, 18rem); --wind-speed: 11.6s; --wind-delay: -6.4s; }
.wind-streak--six { top: 88%; width: clamp(5rem, 11vw, 11rem); --wind-speed: 14.2s; --wind-delay: -12.6s; }

body[data-stage="day"] .journey-wind {
    color: rgba(25, 74, 108, 0.3);
}

body[data-stage="twilight"] .journey-birds {
    color: rgba(229, 236, 247, 0.5);
    opacity: 0.34;
}

body[data-stage="twilight"] .journey-mountains {
    filter: saturate(0.74) brightness(0.68);
}

body[data-stage="twilight"] .journey-wind {
    color: rgba(225, 236, 248, 0.34);
    opacity: 0.38;
}

.journey-clouds {
    top: auto !important;
    height: 52vh;
    opacity: clamp(0, calc((var(--journey) - 0.12) * 3.8), 0.92);
}

.journey-clouds--far {
    bottom: -18vh;
    background:
        radial-gradient(ellipse at 8% 72%, rgba(240, 249, 255, 0.6) 0 13%, transparent 14%),
        radial-gradient(ellipse at 24% 62%, rgba(231, 245, 255, 0.58) 0 17%, transparent 18%),
        radial-gradient(ellipse at 45% 76%, rgba(248, 252, 255, 0.52) 0 18%, transparent 19%),
        radial-gradient(ellipse at 72% 64%, rgba(239, 248, 255, 0.6) 0 16%, transparent 17%),
        radial-gradient(ellipse at 92% 72%, rgba(226, 240, 252, 0.58) 0 16%, transparent 17%);
    filter: blur(10px);
    transform: translate3d(calc(-6vw + var(--journey) * 11vw), calc(var(--journey) * -4vh), 0) scale(1.12);
}

.journey-clouds--near {
    bottom: -31vh;
    background:
        radial-gradient(ellipse at 4% 70%, rgba(255, 255, 255, 0.82) 0 16%, transparent 17%),
        radial-gradient(ellipse at 31% 82%, rgba(242, 248, 255, 0.78) 0 22%, transparent 23%),
        radial-gradient(ellipse at 63% 70%, rgba(255, 252, 244, 0.78) 0 21%, transparent 22%),
        radial-gradient(ellipse at 96% 80%, rgba(236, 245, 255, 0.78) 0 19%, transparent 20%);
    filter: blur(4px);
    transform: translate3d(calc(8vw - var(--journey) * 16vw), calc(var(--journey) * -9vh), 0) scale(1.15);
}

.journey-horizon {
    top: auto !important;
    bottom: 8vh !important;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
    opacity: clamp(0, calc((var(--journey) - 0.2) * 3), 0.7);
}

.journey-plane {
    --plane-x: 12vw;
    --plane-y: 72vh;
    --plane-rotation: -16deg;
    position: fixed;
    top: var(--plane-y);
    left: var(--plane-x);
    z-index: 1;
    width: clamp(4.8rem, 8vw, 7.5rem);
    color: rgba(245, 251, 255, 0.88);
    filter: drop-shadow(0 10px 22px rgba(8, 24, 47, 0.2));
    opacity: clamp(0, calc(1 - (var(--journey) - 0.84) * 8), 0.94);
    transform: translate(-50%, -50%) rotate(var(--plane-rotation));
    transition: color 400ms ease;
}

body[data-stage="day"] .journey-plane {
    color: rgba(12, 47, 83, 0.68);
}

.journey-plane svg {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: visible;
}

.journey-plane__body {
    fill: rgba(255, 255, 255, 0.1);
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linejoin: round;
}

.journey-plane__fold {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}

.journey-plane__trail {
    position: absolute;
    top: 54%;
    right: 78%;
    width: clamp(7rem, 14vw, 13rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
    opacity: 0.45;
}

@keyframes star-breathe {
    0%, 100% { opacity: 0.28; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.18); }
}

@keyframes bird-wing {
    from { transform: scaleY(0.72) rotate(-1deg); }
    to { transform: scaleY(1.08) rotate(1deg); }
}

@keyframes bird-drift {
    from { transform: translate3d(0, -0.2rem, 0); }
    to { transform: translate3d(0.8rem, 0.35rem, 0); }
}

@keyframes wind-sweep {
    from { transform: translate3d(0, 0, 0) scaleX(0.82); }
    18% { opacity: 0.82; }
    82% { opacity: 0.68; }
    to { transform: translate3d(164vw, -1.2vh, 0) scaleX(1.08); opacity: 0; }
}