:root {
  --bg: #0a0a0a;
  --neon: #00ff41;
  --neon-dim: #0aff9d;
  --magenta: #ff003c;
  --cyan: #00e5ff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Матричный дождь на фоне */
#matrix {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Контент по центру */
.overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 3vw, 2rem);
  text-align: center;
  padding: 1rem;
}

/* Заголовок ASTAHOV DEV — адаптивный огромный шрифт + glitch */
.glitch {
  position: relative;
  font-weight: 700;
  font-size: clamp(2.6rem, 13vw, 12rem);
  line-height: 0.95;
  letter-spacing: clamp(2px, 1vw, 14px);
  color: var(--neon);
  text-shadow:
    0 0 6px rgba(0, 255, 65, 0.8),
    0 0 22px rgba(0, 255, 65, 0.5),
    0 0 48px rgba(0, 255, 65, 0.3);
  animation: flicker 3.5s infinite steps(1);
  user-select: none;
}

/* Glitch-каналы через псевдоэлементы. Основной текст остаётся читаемым:
   каналы скрыты и вспыхивают короткими «сбоями» дважды за цикл. */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: var(--bg);
  clip-path: inset(0 0 100% 0);
  opacity: 0.9;
}

.glitch::before {
  color: var(--cyan);
  animation: glitch-b 6s infinite steps(1);
}

.glitch::after {
  color: var(--magenta);
  animation: glitch-a 6s infinite steps(1);
}

/* Первый всплеск ~30%, второй ~85%; в остальное время каналы спрятаны */
@keyframes glitch-b {
  0%, 28%, 33%, 83%, 88%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  29% { clip-path: inset(8% 0 66% 0); transform: translate(-5px, 0); }
  30% { clip-path: inset(38% 0 35% 0); transform: translate(5px, 0); }
  31% { clip-path: inset(66% 0 12% 0); transform: translate(-3px, 0); }
  32% { clip-path: inset(20% 0 55% 0); transform: translate(3px, 0); }
  84% { clip-path: inset(52% 0 24% 0); transform: translate(4px, 0); }
  85% { clip-path: inset(14% 0 70% 0); transform: translate(-4px, 0); }
  86% { clip-path: inset(74% 0 8% 0); transform: translate(3px, 0); }
  87% { clip-path: inset(34% 0 40% 0); transform: translate(-2px, 0); }
}

@keyframes glitch-a {
  0%, 28%, 33%, 83%, 88%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
  29% { clip-path: inset(60% 0 15% 0); transform: translate(5px, 0); }
  30% { clip-path: inset(22% 0 52% 0); transform: translate(-5px, 0); }
  31% { clip-path: inset(44% 0 33% 0); transform: translate(4px, 0); }
  32% { clip-path: inset(78% 0 6% 0); transform: translate(-3px, 0); }
  84% { clip-path: inset(18% 0 62% 0); transform: translate(-4px, 0); }
  85% { clip-path: inset(56% 0 22% 0); transform: translate(4px, 0); }
  86% { clip-path: inset(30% 0 44% 0); transform: translate(-3px, 0); }
  87% { clip-path: inset(68% 0 10% 0); transform: translate(2px, 0); }
}

@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.55; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}

/* Терминальный подзаголовок */
.term {
  font-size: clamp(0.85rem, 2.6vw, 1.6rem);
  color: var(--neon-dim);
  letter-spacing: 2px;
  opacity: 0.9;
}

.prompt {
  color: var(--neon);
  margin-right: 0.4em;
}

.cursor {
  display: inline-block;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Лёгкая виньетка для глубины */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
}

/* Уважаем настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .glitch,
  .glitch::before,
  .glitch::after,
  .cursor {
    animation: none;
  }
  .glitch::before,
  .glitch::after {
    display: none;
  }
}