/*
  Экран векторного монитора из 80-х: тёмный фон, тонкая сетка и рамка из прямых линий,
  неоновая надпись. Анимации две и обе слабые: мигающий курсор и редкое мерцание трубки.
*/

:root {
  --bg: #05070d;
  --neon: #3df2ff;      /* основной неон: голубой */
  --neon-deep: #19c9ff;
  --pink: #ff3d9a;      /* вторичный неон: только курсор */
  --ink: #d9fbff;       /* «раскалённая» середина трубки */
  --grid: 61, 242, 255; /* RGB линий сетки */
}

@font-face {
  font-family: "Mark";
  src: url("fonts/mark.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- Сетка и рамка ---------- */

.screen,
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--grid), 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid), 0.3) 1px, transparent 1px),
    linear-gradient(rgba(var(--grid), 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid), 0.11) 1px, transparent 1px);
  background-size: 256px 256px, 256px 256px, 64px 64px, 64px 64px;
  background-position: center;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(75% 65% at 50% 50%, #000 0%, transparent 100%);
}

.frame {
  position: absolute;
  inset: clamp(14px, 2.6vw, 34px);
  border: 1px solid rgba(var(--grid), 0.2);
}

.frame i {
  position: absolute;
  width: clamp(16px, 2.2vw, 26px);
  height: clamp(16px, 2.2vw, 26px);
  border: 2px solid var(--neon);
  box-shadow: 0 0 8px rgba(var(--grid), 0.55);
}

.frame i:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.frame i:nth-child(2) { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.frame i:nth-child(3) { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.frame i:nth-child(4) { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---------- Надпись ---------- */

main {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 5vw;
}

.sign {
  position: relative;
  margin: 0;
  font-family: "Mark", "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
  font-weight: 400;
  font-size: clamp(1.5rem, 9vw, 6.2rem);
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--ink);
}

.text {
  display: inline-block;
  text-shadow:
    0 0 4px var(--neon),
    0 0 14px rgba(var(--grid), 0.85),
    0 0 36px rgba(25, 201, 255, 0.55),
    0 0 80px rgba(25, 201, 255, 0.3);
  will-change: opacity;
  animation: tube 12s linear infinite;
}

/* Две прямые линии над и под надписью, как на титульной карточке. */
.sign::before,
.sign::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(92vw, 1400px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--grid), 0.7) 18%, rgba(var(--grid), 0.7) 82%, transparent);
  box-shadow: 0 0 10px rgba(var(--grid), 0.45);
}

.sign::before { top: -0.85em; }
.sign::after { bottom: -0.85em; }

/* Курсор терминала: подчёркивание на линии строки. */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.1em;
  margin-left: 0.1em;
  background: var(--pink);
  box-shadow: 0 0 6px var(--pink), 0 0 18px rgba(255, 61, 154, 0.6);
  animation: blink 1.1s steps(1, end) infinite;
}

/* ---------- Строки развёртки и тёмные края ---------- */

.crt {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0.55;
}

/* ---------- Анимации ----------
   Мерцание трубки редкое: два быстрых провала раз в 12 секунд, не больше
   трёх вспышек в секунду. */

@keyframes blink {
  0%, 55%   { opacity: 1; }
  56%, 100% { opacity: 0; }
}

@keyframes tube {
  0%, 71%   { opacity: 1; }
  71.4%     { opacity: 0.45; }
  72.2%     { opacity: 1; }
  73.2%     { opacity: 0.3; }
  74.2%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .text,
  .cursor {
    animation: none;
  }
}