/* One persistent sky. Twinkling keeps its original animated transform;
   individual translate/scale longhands add Shop motion without replacing it.
   Surface transforms remain exclusively owned by desktop mouse parallax. */
#wardrobe-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.living-starfield,
.star-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.living-starfield { contain: layout paint; }
.star-layer--distant { --dim: .06; --middle: .24; --bright: .68; }
.star-layer--foreground { --dim: .04; --middle: .3; --bright: .94; }
.celestial-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: calc(var(--size) * 1.4);
  color: var(--tone, #f1f3f8);
  opacity: var(--middle);
  pointer-events: none;
  transform-origin: center;
  animation: var(--twinkle, celestial-twinkle) var(--cycle) ease-in-out var(--phase) infinite;
}
.celestial-star::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
}
/* A prepainted radial glow avoids animated filters, shadows, or blur passes. */
.celestial-star::after {
  content: "";
  position: absolute;
  inset: -55%;
  background: radial-gradient(ellipse, #eff4ff66 0%, #dfe9fa1f 18%, transparent 66%);
}
.star-layer--distant .celestial-star::after { opacity: .35; }
.celestial-star--pinpoint { height: var(--size); }
.celestial-star--pinpoint::before { clip-path: none; border-radius: 50%; }
.celestial-star--sparkle { --twinkle: celestial-flare; }
.celestial-star--desktop, .celestial-star--edge { display: none; }
@keyframes celestial-twinkle {
  0%, 100% { opacity: var(--dim); transform: scale(.72); }
  19% { opacity: var(--middle); transform: scale(.88); }
  39% { opacity: var(--bright); transform: scale(var(--peak-scale, 1.1)); }
  58% { opacity: var(--middle); transform: scale(.92); }
  77% { opacity: var(--dim); transform: scale(.76); }
}
@keyframes celestial-flare {
  0%, 23%, 69%, 100% { opacity: var(--dim); transform: scale(.7); }
  34% { opacity: var(--middle); transform: scale(.9); }
  43% { opacity: var(--bright); transform: scale(var(--peak-scale, 1.24)); }
  53% { opacity: var(--middle); transform: scale(.94); }
}
/* A quieter CSS sky is visible through the splash. Keep these same nodes and
   phases; only the background artwork fills in during the existing reveal. */
#entrance { background: transparent; }
body:is([data-entry="idle"],[data-entry="entering"],[data-entry="gliding"]) #twin-world > #shop-backdrop {
  visibility: visible;
}
#wardrobe-sky { transition: opacity 600ms cubic-bezier(.4,0,.2,1); }
.living-starfield { opacity: 1; transition: opacity 600ms cubic-bezier(.4,0,.2,1); }
body:is([data-entry="idle"],[data-entry="entering"],[data-entry="gliding"]) #wardrobe-sky { opacity: 0; }
body:is([data-entry="idle"],[data-entry="entering"],[data-entry="gliding"]) .living-starfield { opacity: .55; }
.starfield-paused .celestial-star {
  animation-play-state: paused;
}
@media (min-width: 800px) {
  .celestial-star--desktop:not(.celestial-star--edge) { display: block; }
}
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  /* Only four-point foreground stars grow, smoothly by distance from center.
     The glitter stays tiny; oversized edge sprites never appear on phones. */
  .star-layer--foreground .celestial-star {
    width: var(--edge-size, var(--size));
    height: calc(var(--edge-size, var(--size)) * 1.4);
    margin-left: calc(var(--edge-size, var(--size)) * -.5);
    margin-top: calc(var(--edge-size, var(--size)) * -.7);
  }
  .celestial-star--edge { display: block; }
}
@media (min-width: 800px) and (hover: hover) and (pointer: fine) {
  /* Repeat the original at its intrinsic 941 × 1672 size. A larger desktop
     reveals more of the sky rather than magnifying a portrait cover image. */
  #wardrobe-sky {
    background-image: var(--shop-image, none);
    background-size: auto;
    background-repeat: repeat;
    background-position: 50% 50%;
    opacity: .8;
  }
  #wardrobe-backdrop { visibility: hidden; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* The same surface carries either mobile cover or desktop repeating tiles.
     Overscan by more than the maximum shift so no edge is exposed. */
  .starfield-parallax-ready #wardrobe-sky {
    inset: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 28px);
    will-change: transform;
  }
  .starfield-parallax-ready .star-layer { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  #wardrobe-sky, .living-starfield { transition: none; }
  .celestial-star { animation: none; transform: none; }
  .star-layer--distant .celestial-star { opacity: .26; }
  .star-layer--foreground .celestial-star { opacity: .42; }
  .star-layer, #wardrobe-sky { transform: none !important; }
}