/* Shared sky effects; all content stays in front of the decorative layers. */
.home-scene {
    --scene-x: 0px;
    --scene-y: 0px;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
}

.home-scene .home-background {
    inset: -14px;
    transform: translate3d(var(--scene-x), var(--scene-y), 0);
}

.scene-stars, .scene-clouds {
    position: absolute;
    inset: 0;
}

.scene-stars {
    transform: translate3d(calc(var(--scene-x) * .35), calc(var(--scene-y) * .35), 0);
}

.scene-star {
    position: absolute;
    left: var(--star-x);
    top: var(--star-y);
    width: var(--star-size);
    height: var(--star-size);
    border-radius: 50%;
    background: #e0eafa;
    box-shadow: 0 0 5px 1px rgb(170 200 244 / 22%);
    opacity: .25;
    animation: star-shimmer var(--star-duration) ease-in-out var(--star-delay) infinite alternate;
}

@keyframes star-shimmer {
    from { opacity: .15; transform: scale(.8); }
    to { opacity: .8; transform: scale(1.2); }
}

.scene-meteor {
    position: absolute;
    top: var(--meteor-y, 12%);
    left: var(--meteor-x, 76%);
    width: 120px;
    height: 1px;
    opacity: 0;
    transform-origin: left center;
    background: linear-gradient(90deg, #edf4ff, rgb(188 213 249 / 35%) 25%, transparent);
}

.scene-meteor::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #edf4ff;
    box-shadow: 0 0 7px rgb(211 229 255 / 65%);
}

.scene-meteor.is-visible { animation: meteor-pass .7s ease-out both; }

@keyframes meteor-pass {
    0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-32deg); }
    12% { opacity: .8; }
    70% { opacity: .65; }
    100% { opacity: 0; transform: translate3d(-320px, 200px, 0) rotate(-32deg); }
}

.scene-clouds {
    transform: translate3d(calc(var(--scene-x) * 1.6), calc(var(--scene-y) * 1.6), 0);
    /* Fade the images into the existing bank of clouds and protect the text. */
    -webkit-mask-image: linear-gradient(90deg, transparent 16%, #000 56%);
    mask-image: linear-gradient(90deg, transparent 16%, #000 56%);
}

.scene-cloud {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    filter: brightness(.78) saturate(.72);
}

.scene-cloud--wide {
    right: -8%;
    bottom: -13vw;
    width: clamp(720px, 78vw, 1600px);
    opacity: .38;
    animation: cloud-drift-wide 42s ease-in-out -16s infinite alternate;
}

.scene-cloud--tower {
    right: -12%;
    bottom: -20vw;
    width: clamp(500px, 53vw, 1080px);
    opacity: .28;
    animation: cloud-drift-tower 57s ease-in-out -29s infinite alternate;
}

@keyframes cloud-drift-wide {
    from { transform: translate3d(-28px, 5px, 0) scale(1.02); }
    to { transform: translate3d(28px, -9px, 0) scale(1.05); }
}

@keyframes cloud-drift-tower {
    from { transform: translate3d(20px, 10px, 0) scale(1.03); }
    to { transform: translate3d(-24px, -12px, 0) scale(1.07); }
}

.home-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(3 5 7 / 44%), transparent 22%);
}

.home-scene--sky::after { content: none; }

.home-scene.is-paused *, .home-scene.is-paused *::before {
    animation-play-state: paused !important;
}

@media (max-width: 950px) and (orientation: portrait) {
    .scene-clouds {
        -webkit-mask-image: linear-gradient(0deg, #000 12%, transparent 65%);
        mask-image: linear-gradient(0deg, #000 12%, transparent 65%);
    }
    .scene-cloud--wide { right: -37%; bottom: -8vw; width: 180vw; opacity: .32; }
    .scene-cloud--tower { right: -50%; bottom: -35vw; width: 130vw; opacity: .24; }
    .scene-star:nth-child(even) { display: none; }
    .scene-meteor { width: 85px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-scene .home-background, .scene-stars, .scene-clouds { transform: none; }
    .scene-star, .scene-cloud { animation: none; }
    .scene-meteor { display: none; }
}