/* ==========================================================================
   Glowmigos — Light Show overlay + Glow Mode dock
   Everything here is fixed, pointer-events:none and only paints when armed.
   ========================================================================== */

.show {
  position: fixed; inset: 0; z-index: var(--z-show);
  pointer-events: none;
  contain: layout paint style;
}
.show > * { position: absolute; inset: 0; }

/* --- 1. The dim ---------------------------------------------------------- */
.show__dim {
  background: #01060F;
  opacity: 0;
  transition: opacity 260ms var(--e-inout);
}
.show__dim.is-dim { opacity: 0.62; }

/* --- 2. The power-up pulse ---------------------------------------------- */
.show__pulse {
  inset: auto; inline-size: 10px; block-size: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 213, 42, 0.9);
  box-shadow: 0 0 40px 10px rgba(255, 181, 17, 0.45), inset 0 0 30px rgba(255, 213, 42, 0.5);
  opacity: 0;
}

/* --- 3. Edge bulbs ------------------------------------------------------ */
.show__rail { position: absolute; display: flex; justify-content: space-between; align-items: center; }
.show__rail--top    { inset: 6px 14px auto; }
.show__rail--bottom { inset: auto 14px 6px; }
.show__rail--left   { inset: 34px auto 34px 6px; flex-direction: column; }
.show__rail--right  { inset: 34px 6px 34px auto; flex-direction: column; }

.edge-bulb {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--eb, var(--c-gold));
  opacity: 0; transform: scale(0.2);
  box-shadow: 0 0 12px 2px var(--eb, var(--c-gold));
}
[data-show="on"] .edge-bulb {
  animation: edge-pop 520ms var(--e-pop) forwards, edge-breathe 3.8s var(--e-inout) infinite 620ms;
  animation-delay: calc(var(--i) * 30ms + 2100ms), calc(var(--i) * 30ms + 2700ms);
}
@keyframes edge-pop { to { opacity: 0.9; transform: scale(1); } }
@keyframes edge-breathe { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.42; } }

/* --- 4. The hanging string --------------------------------------------- */
.show__string { inset: 0 0 auto 0; block-size: 190px; opacity: 0; }
.show__string svg { inline-size: 100%; block-size: 100%; }
.show__string .ss-wire { fill: none; stroke: rgba(200, 220, 255, 0.4); stroke-width: 1.6; }
.show__string .ss-bulb { opacity: 0; }
[data-show="on"] .show__string { opacity: 1; transition: opacity 500ms var(--e-out) 1.4s; }
[data-show="on"] .show__string .ss-bulb {
  animation: ss-drop 620ms var(--e-pop) forwards;
  animation-delay: calc(1500ms + var(--i) * 44ms);
}
@keyframes ss-drop { from { opacity: 0; transform: translateY(-16px) scale(0.4); } to { opacity: 1; transform: none; } }

/* --- 5. Dropping graphics ---------------------------------------------- */
.show__drops { overflow: hidden; }
.drop svg { inline-size: 100%; block-size: auto; }
.drop {
  position: absolute; inset-block-start: -14vh;
  inline-size: var(--w, 46px);
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 10px currentColor);
}

/* --- 6. Particles ------------------------------------------------------- */
.show__stage { display: none; inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity 700ms var(--e-out); }
[data-show="on"] .show__stage { display: block; opacity: 1; }

/* Controlled flash — two per show, 2.8s apart, well inside safe limits. */
.show__flash { background: #FFF6E6; opacity: 0; }

/* --- Ambient colour wash driven by the show ---------------------------- */
.show__wash {
  opacity: 0;
  transition: opacity 900ms var(--e-inout), background-color 2.4s var(--e-inout);
  background-color: rgba(9, 188, 235, 0.001);
}
[data-show="on"] .show__wash { opacity: 0.5; }

/* --------------------------------------------------------------------------
   Global states
   -------------------------------------------------------------------------- */
[data-glow="on"]  { --glow: 1; --glow-ambient: 1; }
[data-show="on"]  { --glow: 1.6; }

/* Section borders glow in Glow Mode. */
[data-glow="on"] .panel,
[data-glow="on"] .stage,
[data-glow="on"] .form-panel,
[data-show="on"] .panel,
[data-show="on"] .stage,
[data-show="on"] .form-panel {
  border-color: rgba(255, 181, 17, 0.26);
  box-shadow: 0 34px 70px -40px #000, 0 0 34px -22px rgba(255, 181, 17, 0.8);
}

/* Headings pick up a faint edge light. */
[data-show="on"] h2, [data-show="on"] .hero__title {
  text-shadow: 0 0 34px rgba(255, 213, 42, 0.28);
}

/* --- Cursor halo (fine pointers only) ---------------------------------- */
.halo {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 260px; block-size: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, rgba(255, 213, 42, 0.13), rgba(255, 181, 17, 0.05) 45%, transparent 68%);
  opacity: 0; transition: opacity 400ms var(--e-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  [data-glow="on"] .halo, [data-show="on"] .halo { opacity: 1; }
}

/* --------------------------------------------------------------------------
   The dock — Glow Mode lives here, always reachable.
   -------------------------------------------------------------------------- */
.dock {
  position: fixed; inset-block-end: clamp(0.7rem, 2vw, 1.2rem);
  inset-inline-end: clamp(0.7rem, 2vw, 1.2rem);
  z-index: var(--z-dock);
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.85rem 0.4rem 0.55rem;
  border-radius: var(--r-pill);
  background: #061634;
  border: 1px solid rgba(137, 176, 255, 0.18);
  box-shadow: 0 18px 44px -26px #000;
  transition: border-color var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
[data-glow="on"] .dock, [data-show="on"] .dock {
  border-color: rgba(255, 181, 17, 0.4);
  box-shadow: 0 18px 44px -26px #000, 0 0 26px -12px rgba(255, 181, 17, 0.8);
}
.dock .switch { inline-size: auto; padding: 0; }
.dock .switch__track { inline-size: 2.4rem; block-size: 1.35rem; }
.dock .switch__knob { inline-size: 0.95rem; block-size: 0.95rem; }
.dock .switch[aria-pressed="true"] .switch__knob { transform: translate(1.05rem, -50%); }
@media (max-width: 30rem) {
  .dock .switch__state { display: none; }
}

/* Dock CTA — with no navigation, this is the persistent way to convert. */
.dock__cta { white-space: nowrap; }
.dock__rule { inline-size: 1px; block-size: 1.6rem; background: var(--hairline-strong); flex: none; }
@media (max-width: 34rem) {
  .dock { inset-inline: clamp(0.6rem, 2vw, 1rem); justify-content: space-between; padding: 0.35rem 0.7rem 0.35rem 0.45rem; }
  .dock__cta { font-size: 0.58rem; padding: 0.5rem 0.7rem; min-block-size: 2.3rem; }
  .dock .switch__name { font-size: 0.58rem; }
  .dock .switch__state { display: none; }
}

/* --------------------------------------------------------------------------
   Volume — appears with the sound, never before it.
   -------------------------------------------------------------------------- */
.volume {
  display: flex; align-items: center; gap: 0.5rem;
  padding-inline-end: 0.15rem;
}
.volume[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .volume[data-open="true"] { animation: volume-pop 420ms var(--e-pop) both; }
  @keyframes volume-pop {
    from { opacity: 0; transform: translateX(14px) scale(0.9); }
    to   { opacity: 1; transform: none; }
  }
}

.volume__mute {
  inline-size: 34px; block-size: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--c-sun);
}
.volume__mute svg { inline-size: 20px; block-size: 20px; }
.volume__mute path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.volume__horn { fill: currentColor; }
.volume__slash { opacity: 0; }
.volume__mute[data-state="low"]  .volume__wave--2 { opacity: 0.25; }
.volume__mute[data-state="muted"] { color: var(--t-dim); }
.volume__mute[data-state="muted"] .volume__wave { opacity: 0; }
.volume__mute[data-state="muted"] .volume__slash { opacity: 1; }
.volume__mute:hover { color: var(--c-gold); }

/* Track fills to the current level, so the state reads without the number. */
.volume__range {
  inline-size: 84px; block-size: 34px; flex: none;
  appearance: none; background: none; cursor: pointer;
}
.volume__range::-webkit-slider-runnable-track {
  block-size: 5px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-sun) 0 calc(var(--vol, 0.55) * 100%),
                                     rgba(137, 176, 255, 0.24) calc(var(--vol, 0.55) * 100%) 100%);
}
.volume__range::-moz-range-track {
  block-size: 5px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-sun) 0 calc(var(--vol, 0.55) * 100%),
                                     rgba(137, 176, 255, 0.24) calc(var(--vol, 0.55) * 100%) 100%);
}
.volume__range::-webkit-slider-thumb {
  appearance: none; margin-block-start: -5px;
  inline-size: 15px; block-size: 15px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, var(--c-gold));
  box-shadow: 0 0 10px -1px rgba(255, 213, 42, 0.9);
}
.volume__range::-moz-range-thumb {
  inline-size: 15px; block-size: 15px; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, var(--c-gold));
  box-shadow: 0 0 10px -1px rgba(255, 213, 42, 0.9);
}
.volume__range:focus-visible { outline-offset: 6px; }

@media (max-width: 34rem) {
  .volume__range { inline-size: 62px; }
  /* With sound on, the CTA yields room rather than wrapping the dock. */
  .dock:has(.volume[data-open="true"]) .dock__cta { display: none; }
  .dock:has(.volume[data-open="true"]) .dock__rule { display: none; }
}