/* VPZ — Coming Soon
   Figma: VPZ_Comingsoon, frame 1:31 "Spectral Signal" (1440 × 1024).
   The composition (rings, logo, lens distortion, chromatic aberration, bloom) is rendered by main.js. */

:root {
  --bg: #000000;

  /* Composition size: the 378px outer ring is the design's reference box.
     main.js reads this box to scale the render. */
  --size: min(378px, 72vw, 46svh);
  --u: calc(var(--size) / 378); /* 1 design px */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stage {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.signal {
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
}

/* The canvas covers 720 × 720 design px around the composition so the bloom can fall off. */
.signal__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(720 * var(--u));
  height: calc(720 * var(--u));
  translate: -50% -50%;
  opacity: 0;
  transition: opacity 0.8s ease-out;
  pointer-events: none;
}

.signal.is-ready .signal__canvas {
  opacity: 1;
}

/* ---------- Fallback (no WebGL2 / no JS) ---------- */

.signal__fallback {
  display: none;
  position: absolute;
  inset: 0;
}

.signal.is-fallback .signal__canvas {
  display: none;
}

.signal.is-fallback .signal__fallback {
  display: block;
}

.signal__layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--w, 378) * var(--u));
  height: auto;
  max-width: none;
  translate: -50% -50%;
}

.signal__layer:nth-child(2) { --w: 318; }
.signal__layer:nth-child(3) { --w: 266; }

.signal__layer--logo {
  --w: 207;
  translate: calc(-50% - 0.5 * var(--u)) -50%;
}

/* ---------- "Кликни, за да чуеш" (unlocks the background audio, see audio.js) ---------- */

.listen {
  position: fixed;
  left: 50%;
  top: calc(50% + var(--size) / 2 + 48px); /* just below the composition */
  translate: -50% 0;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 16px 12px 18px; /* right side absorbs the trailing letter-spacing */
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.35);
  color: rgb(255 255 255 / 0.8);
  font: 500 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Delayed so it never flashes when the browser lets the audio start on its own */
  animation: listen-in 0.8s ease-out 0.6s backwards;
  transition: opacity 0.5s ease-out, border-color 0.2s, color 0.2s;
}

.listen[hidden] {
  display: none;
}

.listen:hover,
.listen:focus-visible {
  border-color: rgb(255 255 255 / 0.6);
  color: #ffffff;
}

.listen:focus-visible {
  outline: 1px solid #ffffff;
  outline-offset: 3px;
}

.listen.is-hidden {
  opacity: 0;
  animation: none;
  pointer-events: none;
}

.listen__icon {
  flex: none;
}

@keyframes listen-in {
  from { opacity: 0; }
}

.listen__touch {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .listen__pointer { display: none; }
  .listen__touch { display: inline; }
}