/* Frequency & Sonic Sanctuary — the celestial layer
   Pairs with celestial.js. Loaded after style.css, so the colour enrichment
   at the bottom wins over the base layers without !important.

   Presented by Mahal Kita Marshall, CRT-CPP
   Confidential; NDA-bound. (c) Quantum Melanin Media */

/* the solar band is wider than the 560px column; clip, never scroll sideways */
html, body { overflow-x: clip; }

/* ============================================================
   The solar system, strung on vibrating super strings
   ============================================================ */
.celestial-system {
  position: relative;
  width: min(1120px, 100vw);
  margin: -6px 0 4px 50%;
  translate: -50% 0;
  /* the bodies live in the middle band of the 1584x672 art; the transparent
     top and bottom overhang instead of costing layout height */
  aspect-ratio: 1584 / 420;
  pointer-events: none;
}
.cs-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  aspect-ratio: 1584 / 672;
  translate: 0 -50%;
}
.cs-stage > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.cs-strings {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cs-strand-glow, .cs-strand-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-strand-glow { stroke-width: 9; stroke-opacity: 0.16; transition: stroke-opacity 0.8s ease; }
.cs-strand-core {
  stroke-width: 2.1;
  stroke-opacity: calc(0.6 + var(--cs-amp, 0) * 0.45);
}
.cs-strand-glow.gold,   .cs-strand-core.gold   { stroke: #f5dc8e; }
.cs-strand-glow.violet, .cs-strand-core.violet { stroke: #c4a1ff; }
.cs-strand-glow.teal,   .cs-strand-core.teal   { stroke: #74e6d8; }
.cs-playing .cs-strand-glow { stroke-opacity: 0.3; }

/* little translucent notes: a soft gold body with a wider halo stroke */
.cs-note-glyph {
  fill: rgba(250, 232, 170, 0.78);
  stroke: rgba(245, 220, 142, 0.32);
  stroke-width: 3.2;
  paint-order: stroke;
}

.cs-sun-glow, .cs-moon-glow {
  position: absolute;
  z-index: 0;
  top: 49.85%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
}
.cs-sun-glow {
  width: 40%;
  background: radial-gradient(circle,
    rgba(255, 222, 140, 0.50) 0%,
    rgba(255, 176, 70, 0.22) 34%,
    rgba(217, 70, 239, 0.06) 56%,
    transparent 70%);
  animation: cs-sun-breathe 7s ease-in-out infinite;
}
.cs-moon-glow {
  width: 14%;
  background: radial-gradient(circle,
    rgba(214, 196, 255, 0.34) 0%,
    rgba(139, 92, 246, 0.14) 45%,
    transparent 70%);
  animation: cs-sun-breathe 9s ease-in-out infinite reverse;
}
@keyframes cs-sun-breathe {
  0%, 100% { scale: 0.94; opacity: 0.85; }
  50%      { scale: 1.06; opacity: 1; }
}
.cs-playing .cs-sun-glow { animation-duration: 3.6s; }

/* ============================================================
   The fixed sky behind everything
   ============================================================ */
.celestial-layer {
  position: fixed;
  inset: 0;
  z-index: 1;               /* over the smear (0), under the content (2) */
  pointer-events: none;
  overflow: hidden;
}
/* enrichment: magenta and gold warmth laid over the existing cosmic ramp */
.celestial-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42vmax 30vmax at 74% 10%, rgba(217, 70, 239, 0.15), transparent 62%),
    radial-gradient(36vmax 28vmax at 16% 34%, rgba(232, 194, 90, 0.08), transparent 62%),
    radial-gradient(40vmax 30vmax at 82% 78%, rgba(139, 92, 246, 0.13), transparent 62%);
}

.cs-sky {
  position: absolute;
  inset: 0;
  background-size: 320px 320px, 510px 510px;
  opacity: 0.85;
}
/* the twinkle lives on a few tiny stars, never on a full-screen layer */
.cs-glints i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff6dc;
  box-shadow: 0 0 6px 1px rgba(255, 236, 170, 0.75);
  animation: cs-twinkle 3.4s ease-in-out infinite alternate;
}
@keyframes cs-twinkle { from { opacity: 0.1; } to { opacity: 1; } }

/* ---- resonance: generated cymatics, slowly turning and breathing ---- */
.cs-res {
  position: absolute;
  aspect-ratio: 1;
  height: auto;
  opacity: 0.2;
  animation:
    cs-spin var(--spin, 240s) linear infinite,
    cs-breathe 14s ease-in-out infinite;
  transition: opacity 1.2s ease;
}
.cs-res-cymatics { width: 56vmin; left: -12vmin; top: 50vh; }
.cs-res-torus    { width: 48vmin; right: -13vmin; top: 9vh; --spin: 180s; animation-direction: reverse, normal; opacity: 0.17; }
.cs-playing .cs-res { opacity: 0.32; }
@keyframes cs-spin    { to { rotate: 360deg; } }
@keyframes cs-breathe { 0%, 100% { scale: 0.97; } 50% { scale: 1.05; } }

/* ---- the live Chladni plate: the pattern IS the tone ----
   A halo behind the practitioner inside the hero stage, centred on her
   chest; sized past the stage so its rim fades out beyond the mandala. */
.cs-plate {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 38%;
  width: 112%;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0.24;
  animation: cs-spin 320s linear infinite;
  transition: opacity 1.2s ease;
}
.cs-plate-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.cs-plate-canvas.on { opacity: 1; }
.cs-playing .cs-plate { opacity: calc(0.4 + var(--cs-amp, 0) * 0.35); }

/* ---- the home page's gold crescent ---- */
.cs-crescent {
  position: absolute;
  left: 5%;
  top: 15vh;
  width: clamp(44px, 6vw, 72px);
  opacity: 0.78;
  animation: cs-float 18s ease-in-out infinite;
}
.cs-crescent svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 14px rgba(232, 194, 90, 0.55)); }
@keyframes cs-float {
  0%, 100% { translate: 0 0;     rotate: 0deg; }
  50%      { translate: 0 -16px; rotate: 4deg; }
}

/* ============================================================
   Music on translucent sheets
   ============================================================ */
.cs-sheets { position: absolute; inset: 0; perspective: 900px; }
.cs-sheet {
  position: absolute;
  left: var(--x-wide);
  bottom: -20vh;
  width: calc(124px * var(--sz, 1));
  aspect-ratio: 120 / 84;
  opacity: 0;
  animation: cs-sheet-rise var(--dur, 56s) linear var(--delay, 0s) infinite;
  transform-style: preserve-3d;
}
.cs-sheet-face {
  width: 100%;
  height: 100%;
  border-radius: 4px 4px 10px 4px;
  /* frosted vellum: a lit top edge fading down, no hard box */
  background:
    linear-gradient(180deg, rgba(255, 246, 220, 0.16), rgba(255, 246, 220, 0) 22%),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.12),
      rgba(200, 170, 255, 0.07) 46%,
      rgba(116, 230, 216, 0.05));
  border: 1px solid rgba(245, 220, 142, 0.18);
  border-top-color: rgba(255, 240, 200, 0.38);
  box-shadow:
    0 0 26px rgba(168, 119, 230, 0.22),
    inset 0 0 18px rgba(255, 255, 255, 0.05);
  animation: cs-sheet-sway var(--sway, 11s) ease-in-out infinite alternate;
}
.cs-sheet-face svg { display: block; width: 100%; height: 100%; }
.sh-staff line { stroke: rgba(245, 220, 142, 0.55); stroke-width: 0.6; }
.sh-notes { fill: rgba(250, 232, 170, 0.88); }

@keyframes cs-sheet-rise {
  0%   { transform: translate3d(0, 0, 0);                opacity: 0; }
  8%   { opacity: 0.85; }
  84%  { opacity: 0.6; }
  100% { transform: translate3d(var(--drift, 0), -128vh, 0); opacity: 0; }
}
/* rotateY swings the sheet through the light so its translucency shows */
@keyframes cs-sheet-sway {
  from { transform: rotate(var(--tilt, 0deg))                rotateY(-30deg) rotateX(8deg); }
  to   { transform: rotate(calc(var(--tilt, 0deg) * -1))     rotateY(30deg)  rotateX(-6deg); }
}

/* ============================================================
   Colour: same scheme, richer
   ============================================================ */
.cosmos-smear { opacity: 0.95; filter: blur(90px) saturate(1.35); }
.cosmos-layer { z-index: 1; }

/* ---- no side gutters: sheets share the column, so fewer and fainter ---- */
@media (max-width: 900px) {
  .cs-sheet { left: var(--x-narrow); }
  .cs-sheet:nth-child(n+5) { display: none; }
  .cs-sheets { opacity: 0.5; }
}

/* ---- phones ---- */
@media (max-width: 600px) {
  /* bigger bodies: the band runs a little past the screen edges, which the
     art's own transparent margin absorbs; sun and moon both stay whole */
  .celestial-system { width: 110vw; aspect-ratio: 1584 / 470; }
  .cs-sheet { width: calc(96px * var(--sz, 1)); }
  .cs-res { opacity: 0.14; }
  .cs-res-cymatics { width: 70vmin; left: -22vmin; }
  .cs-res-torus { width: 60vmin; right: -24vmin; }
  .cs-crescent { top: 11vh; left: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-sun-glow, .cs-moon-glow, .cs-glints i, .cs-res, .cs-plate, .cs-crescent { animation: none; }
}