/* A stable viewport with independent distant nebula, dust and near stars. */
.sky-stage,.sky-stage.is-focus{height:clamp(510px,72svh,660px);aspect-ratio:auto;overflow:clip;background:radial-gradient(ellipse at 70% 20%,#0b1228,#030714 70%)}
/* Keep the entire landscape texture at near-native resolution, never cover-crop a portrait. */
.sky-stage .sky-nebula-art,.sky-stage.is-far .sky-nebula-art{inset:auto;left:-32.5%;top:50%;width:165%;height:auto;max-width:none;aspect-ratio:3/2;translate:0 -50%;animation:none;object-fit:contain;transform-origin:center;opacity:.94;pointer-events:none;will-change:transform;z-index:0;filter:none;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.sky-stage.is-open .sky-nebula-art,.sky-stage.is-focus .sky-nebula-art{filter:none}
.sky-stage .sky-tint{inset:0;opacity:.06;pointer-events:none;z-index:0}
.sky-cam{z-index:2}.sky-depth{position:absolute;inset:-35%;z-index:1;pointer-events:none;opacity:.8;background:url('/assets/album/deep-stars-v2.svg') center/100% 100%;will-change:transform}
.sky-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 55px 5px #03071480}
.sky-stage .sky-enter{z-index:4;background:linear-gradient(transparent,#030714b3 80%)}
.star-stage.rv{background:#030714}.star-stage.rv .rv-sky{inset:auto;left:-32.5%;top:50%;width:165%;height:auto;translate:0 -50%;object-fit:contain;opacity:.85;animation:none;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.sky-stage.is-focus .sky-star:not(.is-cur){animation:none;opacity:.1}.sky-focus{z-index:5;background:linear-gradient(transparent 50%,#03071499)}
.sky-fcard{top:30%;width:48%;max-width:218px}.sky-panel{bottom:16px;max-height:35%;background:#101a30ed;border:1px solid #dfc58a40;color:#fff4dc;box-shadow:0 12px 30px #0005;backdrop-filter:blur(12px)}
.sky-panel h3{color:#fff0d0}.sky-panel p{color:#d3d8e5}.sky-panel .sky-panel-kicker{color:#e7c98b}.sky-panel-nav button{background:#ffffff10;border-color:#dfc58a40;color:#f6e5c0}
.sky-focus.in .sky-fcard{animation:skyCardIn .7s cubic-bezier(.16,1,.3,1) forwards}.sky-focus.in .sky-fcard-inner{animation:skyCardFlip .85s cubic-bezier(.4,0,.2,1) .5s both}.sky-focus.in .sky-panel{animation:skyPanelIn .65s ease-out 1.15s forwards}
@keyframes rv-flip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.rv-card{transition:filter .8s}.p4 .rv-card{filter:drop-shadow(0 0 18px #e7c98b30)}
@media(prefers-reduced-motion:reduce){.sky-stage *,.star-stage.rv *{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}.sky-focus.in .sky-fcard{opacity:1;transform:translate(-50%,-50%)}.sky-focus.in .sky-fcard-inner{transform:rotateY(180deg)}.sky-focus.in .sky-panel{opacity:1;transform:none}}

/* Drag without tap-highlight or text-selection flashes; keep layers on the GPU. */
.sky-stage,.sky-stage *{-webkit-tap-highlight-color:transparent}.sky-stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sky-cam,.sky-depth,.sky-stage .sky-nebula-art{backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* Android flashed the whole sky white while panning: big masked/SVG layers ran out of GPU memory.
   Use pre-rendered images, no masks, and let the browser promote layers only while they move. */
.sky-stage .sky-nebula-art,.sky-stage.is-far .sky-nebula-art,.star-stage.rv .rv-sky{-webkit-mask-image:none!important;mask-image:none!important;will-change:auto}
.sky-depth{background-image:url('/assets/album/deep-stars-v3.webp');will-change:auto}
.sky-cam{will-change:auto}

.sky-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:#101a30f7}

/* Vertical swipes scroll the page even over the sky; sideways swipes pan the sky. */
.sky-stage,.sky-stage.is-open,.sky-stage.is-focus{touch-action:pan-y}
.sky-panel-close{display:block;width:100%;margin-top:8px;padding:8px;border:0;background:none;color:#cfc6b0;font-size:.8125rem;text-decoration:underline;text-underline-offset:3px}
/* Flicker test switches (?skyoff=neb,depth,anim,round) */
.sky-stage.off-neb .sky-nebula-art,.sky-stage.off-neb .sky-tint{display:none}
.sky-stage.off-depth .sky-depth{display:none}
.sky-stage.off-anim *{animation:none!important;transition:none!important}
.sky-stage.off-round{border-radius:0!important;transform:none;-webkit-transform:none}

/* Android flicker: the oversized depth layer and rounded clipping of moving layers were the heaviest parts. */
.sky-depth{inset:-12%;opacity:.7}
.sky-stage,.sky-stage.is-focus{border-radius:0;overflow:hidden;margin-left:-20px;margin-right:-20px}
@media(max-width:374px){.sky-stage,.sky-stage.is-focus{margin-left:-16px;margin-right:-16px}}

/* Each friend's star: element colour, polarity shape, its own pulse beat */
.sky-star .sky-spark{stroke:var(--sc);stroke-width:.9;opacity:calc(.35 + var(--glow)*.6)}
.sky-star .sky-spark.is-yin{stroke-width:1.1;stroke-linecap:round}
.sky-star .sky-core,.sky-stage.is-open .sky-star .sky-core{fill:#fffdf6}
.sky-star .sky-burst{stroke:var(--sc)}
.sky-stage.is-open .sky-star-in{animation:skyPop .7s cubic-bezier(.2,.9,.3,1.3) var(--d,0s) both,skyPulse var(--beat,3.4s) ease-in-out calc(var(--d,0s) + .7s) infinite}
.sky-curve{fill:none;stroke:#e9d8a8;stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:1;opacity:.4}
.sky-stage.is-open .sky-curve{animation:skyDraw 1.4s ease-out var(--d,0s) forwards}
.sky-stage.is-far .sky-curve{opacity:0}
.sky-stage.is-focus .sky-curve{opacity:.12;transition:opacity .6s}
.sky-name{font-weight:500}

/* Softer stars: tapered light rays that sway, a small companion constellation per friend, names in the star's colour */
.sky-star .sky-spark,.sky-star .sky-spark.is-yin{stroke:none;opacity:calc(.7 + var(--glow)*.4);transform-box:fill-box;transform-origin:center;rotate:var(--tilt,0deg)}
.sky-star .sky-spark.is-yin{stroke:var(--sc);stroke-width:.6;stroke-linejoin:round;stroke-opacity:.35}
.sky-stage.is-open .sky-star .sky-spark{animation:skySway calc(var(--beat,3.4s)*1.7) ease-in-out var(--d,0s) infinite alternate}
@keyframes skySway{from{transform:rotate(-8deg) scale(.92)}to{transform:rotate(8deg) scale(1.06)}}
.sky-star .sky-halo{opacity:calc(.55 + var(--glow)*.45)}
.sky-mini{opacity:0;pointer-events:none}
.sky-mini path{fill:none;stroke:var(--sc);stroke-width:.6;stroke-opacity:.38;stroke-linecap:round;stroke-linejoin:round}
.sky-mini circle{fill:var(--sc);animation:skyTw 3.2s ease-in-out infinite;animation-delay:var(--tw,0s)}
.sky-stage.is-open .sky-mini{animation:skyAppear 1s ease-out calc(var(--d,0s) + .6s) forwards}
.sky-stage.is-focus .sky-star:not(.is-cur) .sky-mini{opacity:0}
.sky-star .sky-name{fill:var(--sc);fill-opacity:.92}
.sky-star.sky-metal .sky-name{fill:#f3e8cf}
.sky-curve{stroke-width:.7;opacity:.3;stroke-linecap:round}