/* ============================================================
   Museum — The motif kit, as CSS
   Three load-bearing elements: the shaft of light, the portal,
   the constellation. Everything here assumes a positioned
   parent with overflow:hidden. Layer order is:
     .mus-world  (z0) -> .mus-stars (z1) -> beams/halos (z2)
     -> portal (z3-5) -> .mus-grain (z6, last) -> content (z7+)
   ============================================================ */

.mus-world {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--mus-night-gradient);
}

.mus-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 11% 14%, rgba(244,241,239,.92), transparent),
    radial-gradient(1.3px 1.3px at 23% 31%, rgba(175,203,227,.8), transparent),
    radial-gradient(1px 1px at 38% 9%, rgba(244,241,239,.7), transparent),
    radial-gradient(1.5px 1.5px at 62% 19%, rgba(244,241,239,.9), transparent),
    radial-gradient(1px 1px at 77% 12%, rgba(174,173,234,.8), transparent),
    radial-gradient(1.4px 1.4px at 88% 27%, rgba(244,241,239,.85), transparent),
    radial-gradient(1px 1px at 16% 47%, rgba(175,203,227,.6), transparent),
    radial-gradient(1.2px 1.2px at 91% 52%, rgba(244,241,239,.7), transparent),
    radial-gradient(1px 1px at 7% 67%, rgba(244,241,239,.5), transparent),
    radial-gradient(1.3px 1.3px at 84% 73%, rgba(174,173,234,.6), transparent),
    radial-gradient(1px 1px at 47% 6%, rgba(244,241,239,.55), transparent),
    radial-gradient(1.2px 1.2px at 69% 41%, rgba(244,241,239,.5), transparent),
    radial-gradient(1px 1px at 33% 78%, rgba(175,203,227,.55), transparent),
    radial-gradient(1.3px 1.3px at 58% 88%, rgba(244,241,239,.6), transparent);
}

/* Stars over Hazy Sky (daylight counterpart) */
.mus-stars--day {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 16%, rgba(244,241,239,.95), transparent),
    radial-gradient(1.3px 1.3px at 24% 33%, rgba(244,241,239,.85), transparent),
    radial-gradient(1px 1px at 39% 11%, rgba(244,241,239,.8), transparent),
    radial-gradient(1.5px 1.5px at 63% 20%, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 78% 13%, rgba(244,241,239,.8), transparent),
    radial-gradient(1.4px 1.4px at 88% 28%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 16% 52%, rgba(244,241,239,.75), transparent),
    radial-gradient(1.2px 1.2px at 91% 56%, rgba(244,241,239,.8), transparent),
    radial-gradient(1px 1px at 8% 74%, rgba(244,241,239,.7), transparent),
    radial-gradient(1.2px 1.2px at 84% 76%, rgba(244,241,239,.8), transparent),
    radial-gradient(1px 1px at 48% 7%, rgba(244,241,239,.75), transparent);
}

/* --- Grain: the glued-poster bone texture, kept subtle --- */
.mus-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../assets/textures/bone-texture-1.png");
  background-size: cover;
  mix-blend-mode: screen;
  opacity: var(--grain-opacity-night);
}
.mus-grain--day { mix-blend-mode: multiply; opacity: var(--grain-opacity-day); }

/* --- The shaft of light. One per frame. Never two. --- */
.mus-beam {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(7px);
  background: linear-gradient(180deg,
    rgba(244,241,239,.34) 0%, rgba(199,198,240,.18) 38%,
    rgba(174,173,234,.06) 70%, rgba(174,173,234,0) 92%);
  clip-path: polygon(43% 0, 57% 0, 80% 100%, 20% 100%);
}
.mus-beam-core {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(3px);
  background: linear-gradient(180deg,
    rgba(247,244,240,.6) 0%, rgba(220,219,247,.16) 55%, transparent 88%);
  clip-path: polygon(46% 0, 54% 0, 64% 100%, 36% 100%);
}
.mus-halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(10px);
  background: radial-gradient(circle,
    rgba(199,198,240,.55) 0%, rgba(175,203,227,.22) 42%, transparent 70%);
}
/* Warm variant of the halo — invitations, save-the-dates, the tender end
   of the programme. One per frame, and never in the same frame as a beam. */
.mus-halo--rose {
  background: radial-gradient(circle,
    rgba(248,216,220,.55) 0%, rgba(230,167,175,.22) 42%, transparent 70%);
}
.mus-mist {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(6px);
  background: linear-gradient(0deg,
    rgba(174,173,234,.22) 0%, rgba(175,203,227,.07) 55%, transparent 100%);
}
.mus-floorglow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(9px);
  background: radial-gradient(ellipse, rgba(199,198,240,.5), transparent 68%);
}
/* Shadow pooled under a lit subject so type reads over the beam */
.mus-floorshade {
  position: absolute;
  pointer-events: none;
  filter: blur(10px);
  background: radial-gradient(ellipse 58% 52% at 50% 56%, rgba(17,5,24,.72), transparent 72%);
}

/* --- The constellation --- */
.mus-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 42% 38%,
    #fbf9f6 0%, #d7d5f1 36%, #9c9ad0 70%, rgba(120,118,170,0) 100%);
  box-shadow: 0 0 24px 5px rgba(174,173,234,.45);
}
.mus-orb--sky {
  background: radial-gradient(circle at 42% 38%,
    #fbfcfd 0%, #cfe0ee 38%, #88b0cd 72%, rgba(120,150,180,0) 100%);
  box-shadow: 0 0 24px 5px rgba(175,203,227,.45);
}
.mus-orb--rose {
  background: radial-gradient(circle at 42% 38%,
    #fefafb 0%, #f4cfd5 38%, #d494a0 72%, rgba(190,140,150,0) 100%);
  box-shadow: 0 0 24px 5px rgba(230,167,175,.45);
}
.mus-orb--twinkle { animation: mus-twinkle var(--dur-twinkle) ease-in-out infinite; }
@keyframes mus-twinkle { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.mus-orb--arriving { animation: mus-arrive .7s cubic-bezier(.2,.9,.3,1.3) both, mus-twinkle var(--dur-twinkle) ease-in-out 1s infinite; }
@keyframes mus-arrive { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* A star's caption — the loved thing, named */
.mus-light-label {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(244,241,239,.88);
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(28,11,41,.92), 0 0 5px rgba(28,11,41,.95);
  pointer-events: none;
}
/* The thread linking the lights */
.mus-thread { stroke: rgba(199,198,240,.38); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mus-thread--dotted { stroke-dasharray: 2 9; }

@media (prefers-reduced-motion: reduce) {
  .mus-orb--twinkle, .mus-orb--arriving { animation: none; }
}