/* The sky: a fixed layer behind everything. The base is a static
   gradient; .glow is the breathing glow; #starfield is the star field —
   the painted canvas plus a few twinkling stars, each its own CSS pulse.
   The compositor turns them — see starfield.js, which drives the
   animations (Web Animations) so a visit can resume them in place. */

.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.sky .glow { position: absolute; inset: 0; }
#starfield { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
#starfield canvas { display: block; }

/* The reveal: the your-hat card settles in when the room closes. */
.reveal {
  animation: reveal .6s ease-out both;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}

/* A twinkling star: a soft bloom. JS gives each one its own size,
   position (percentages of the field), duration and a negative delay, so
   no two twinkle in sync. */
.sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(199,222,255,.3) 40%, transparent 70%);
  animation-name: twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes twinkle {
  from { opacity: .15; transform: scale(.75); }
  to { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; opacity: .6; }
}

@media (prefers-color-scheme: light) {
  .sky { background: linear-gradient(180deg, #fafaf9 0%, #f5f5f4 100%); }
  .sky .glow { background: radial-gradient(1100px 420px at 50% -8%, rgba(254, 243, 199, 0.55), transparent 70%); }
  #starfield { display: none; }
}

@media (prefers-color-scheme: dark) {
  .sky { background: linear-gradient(180deg, #020617 0%, #0a1020 55%, #101a30 100%); }
  .sky .glow { background:
    radial-gradient(900px 420px at 85% -10%, rgba(56,189,248,.3), transparent 65%),
    radial-gradient(700px 340px at 12% 110%, rgba(244,63,94,.18), transparent 65%); }
}

/* The watching pulse: a face breathes while its window is connected. */
.watching [data-face] {
  animation: watching 2.4s ease-in-out infinite;
}
@keyframes watching {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .watching [data-face] { animation: none; }
}