/* GILUNG.NET — v0.1
   Заглушка. Ніяких зовнішніх ресурсів: жодного шрифту, жодного запиту. */

:root {
  --ink: #05060a;
  --cyan: #2ee6ff;
  --violet: #a06bff;
  --magenta: #ff5ad0;
  --muted: rgba(190, 205, 230, .52);

  --wm-stack: "Arial Black", "Helvetica Neue", Helvetica, Roboto, system-ui, sans-serif;
  --ui-stack: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: #e8eefc;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--ui-stack);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sr-only {
  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-wrap {
  position: fixed;
  inset: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

#aura, #stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#aura {
  z-index: 0;
  filter: blur(42px) saturate(150%);
  transform: scale(1.25);
  opacity: .85;
}

#stage {
  z-index: 2;
  touch-action: none;
  opacity: 0;
  transition: opacity .5s ease;
}
#stage.is-live { opacity: 1; }

/* світло за курсором — тільки для миші */
#glow {
  position: absolute;
  z-index: 3;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  background: radial-gradient(circle closest-side,
              rgba(120, 200, 255, .13), rgba(120, 200, 255, .05) 45%, transparent 72%);
  mix-blend-mode: screen;
  will-change: transform;
}
#glow.is-on { opacity: 1; }
@media (pointer: coarse) { #glow { display: none; } }

/* ─── напис: перший кадр + фолбек без JS ────────────────────────────── */

.wordmark {
  position: absolute;
  z-index: 1;
  left: 0; right: 0;
  top: 47%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--wm-stack);
  font-weight: 900;
  font-size: min(10.6vw, 30svh);
  line-height: .96;
  letter-spacing: .02em;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--cyan) 0%, #6f8cff 36%, var(--violet) 66%, var(--magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity .6s ease, filter .6s ease;
  user-select: none;
}
.wordmark.is-out {
  opacity: 0;
  filter: blur(14px);
}

/* портрет — у два рядки, як і в канвасі */
@media (max-width: 759px) {
  .wordmark {
    font-size: min(19.6vw, 21svh);
    white-space: normal;
  }
  .wordmark__a, .wordmark__b { display: block; }
}

/* ─── кути ──────────────────────────────────────────────────────────── */

.corner {
  position: absolute;
  z-index: 4;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(190, 205, 230, .28);
  pointer-events: none;
  animation: fade-in 1.4s 1.9s both;
}
.corner--tl { top: max(22px, env(safe-area-inset-top)); left: 24px; }
.corner--br { bottom: max(22px, env(safe-area-inset-bottom)); right: 24px; }

.dot {
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background: #4ade9b;
  vertical-align: middle;
  box-shadow: 0 0 8px 1px rgba(74, 222, 155, .8);
  animation: pulse 2.6s ease-in-out infinite;
}

/* ─── плівка ────────────────────────────────────────────────────────── */

.grain {
  position: absolute;
  inset: -50%;
  z-index: 5;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 5s steps(6) infinite;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 92% at 50% 46%, transparent 40%, rgba(3, 4, 8, .72) 100%);
}

/* ─── анімації ──────────────────────────────────────────────────────── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(4%, -5%); }
  60%  { transform: translate(-3%, -3%); }
  80%  { transform: translate(5%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ─── повага до налаштувань ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .grain { animation: none; }
  #aura { opacity: .6; }
}

/* без JS канвас порожній — залишаємо CSS-напис */
.no-js #stage, .no-js #aura, .no-js #glow { display: none; }