:root {
    --orbit-real-duration: 1200000ms;
}

.celestial-stage {
    pointer-events: none;
}

html.celestial-waiting .celestial-stage {
    visibility: hidden;
}

.light-beam {
    --beam-source-radius: 28px;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 48vw;
    height: clamp(110px, 21vh, 230px);
    transform-origin: 0 50%;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    clip-path: polygon(
        0 calc(50% - var(--beam-source-radius)),
        100% 0,
        100% 100%,
        0 calc(50% + var(--beam-source-radius))
    );
    background: radial-gradient(
        ellipse 108% 100% at 0 50%,
        rgba(255, 252, 220, 0.82) 0%,
        rgba(255, 229, 145, 0.38) 21%,
        rgba(255, 202, 104, 0.13) 50%,
        transparent 78%
    );
    -webkit-mask-image: radial-gradient(ellipse 112% 100% at 0 50%, #000 0%, rgba(0,0,0,.82) 48%, rgba(0,0,0,.28) 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 112% 100% at 0 50%, #000 0%, rgba(0,0,0,.82) 48%, rgba(0,0,0,.28) 70%, transparent 100%);
    filter: blur(18px) saturate(108%);
    will-change: width, height, transform, opacity;
}

body[data-phase="night"] .light-beam {
    background: radial-gradient(
        ellipse 108% 100% at 0 50%,
        rgba(240, 253, 255, 0.75) 0%,
        rgba(142, 218, 255, 0.34) 22%,
        rgba(86, 151, 255, 0.11) 51%,
        transparent 79%
    );
}

.celestial-orb {
    z-index: 2;
    width: clamp(38px, 3.5vw, 60px);
    pointer-events: none;
    touch-action: none;
    user-select: none;
    cursor: grab;
    outline: none !important;
    transition: none;
}

.celestial-orb::after {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
}

.celestial-orb.is-visible {
    pointer-events: auto;
}

.celestial-orb.is-visible:hover,
.celestial-orb:focus-visible {
    transform: translate(-50%, -50%) scale(1);
    outline: none !important;
}

.celestial-orb.is-dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.055);
}

.sun-orb.is-dragging {
    box-shadow: 0 0 18px rgba(255, 250, 205, 1), 0 0 52px rgba(255, 219, 112, 0.68), 0 0 104px rgba(255, 174, 92, 0.30);
}

.moon-orb.is-dragging {
    box-shadow: 0 0 18px rgba(239, 252, 255, 0.98), 0 0 54px rgba(122, 207, 255, 0.61), 0 0 106px rgba(75, 133, 255, 0.29);
}

html.celestial-intro-v2 .celestial-orb {
    transition:
        left 2900ms cubic-bezier(.22,.75,.25,1),
        top 2900ms cubic-bezier(.22,.75,.25,1),
        opacity 1700ms ease,
        transform 1700ms ease;
}

html.celestial-intro-v2 .light-beam {
    transition:
        width 2900ms cubic-bezier(.22,.75,.25,1),
        height 2900ms cubic-bezier(.22,.75,.25,1),
        transform 2900ms cubic-bezier(.22,.75,.25,1),
        opacity 1700ms ease;
}

html.is-orbit-returning .celestial-orb {
    transition:
        left 1700ms cubic-bezier(.2,.78,.22,1),
        top 1700ms cubic-bezier(.2,.78,.22,1),
        opacity 800ms ease,
        transform 300ms ease;
}

html.is-orbit-returning .light-beam,
html.is-orbit-returning .line {
    transition-duration: 1700ms !important;
    transition-timing-function: cubic-bezier(.2,.78,.22,1) !important;
}

html.is-orbit-dragging .celestial-orb,
html.is-orbit-dragging .light-beam,
html.is-orbit-dragging .line,
html.is-orbit-dragging body {
    transition: none !important;
}

html.is-orbit-realtime .celestial-orb.is-cruising {
    transition:
        left var(--orbit-real-duration) linear,
        top var(--orbit-real-duration) linear;
}

html.is-orbit-realtime .light-beam {
    transition:
        width var(--orbit-real-duration) linear,
        height var(--orbit-real-duration) linear,
        transform var(--orbit-real-duration) linear,
        opacity 1600ms ease;
}

html.is-orbit-realtime .line {
    transition-duration: var(--orbit-real-duration) !important;
    transition-timing-function: linear !important;
}

html.is-orbit-realtime body {
    transition:
        --lit-core 2600ms ease,
        --lit-edge 2600ms ease,
        --far-core 2600ms ease,
        --far-edge 2600ms ease,
        --light-x var(--orbit-real-duration) linear,
        --light-y var(--orbit-real-duration) linear;
}

.memorial-track:nth-child(4n + 1) .track-content { animation-duration: 940s !important; }
.memorial-track:nth-child(4n + 2) .track-content { animation-duration: 1020s !important; }
.memorial-track:nth-child(4n + 3) .track-content { animation-duration: 1100s !important; }
.memorial-track:nth-child(4n + 4) .track-content { animation-duration: 1180s !important; }

@media (max-width: 640px) {
    .celestial-orb { width: 46px; }
    .light-beam { filter: blur(14px) saturate(106%); }
    .memorial-track:nth-child(n) .track-content { animation-duration: 860s !important; }
}

@media (prefers-reduced-motion: reduce) {
    .celestial-orb,
    .light-beam,
    .line,
    body {
        transition: none !important;
    }
}