/*
  VHS/CRT look: scanlines, bloom, chromatic aberration, jitter, noise, vignette
  Focus: full-screen centered title "MIDGA3"
*/

:root {
  --bg: #0b0b0b; /* почти чёрный как на VHS снежении */
  --fg: #ececec; /* светлый текст */
  --fg-invert: #0b0b0b;
  --accent: #00ffd0;
  --scanline-opacity: 0.08;
  --vignette: rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  overflow: hidden;
}

.crt {
  position: relative;
  height: 100dvh;
  width: 100vw;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 130% at 50% 50%, #141414 0%, #050505 100%);
  isolation: isolate;
  animation: gray-flicker 5.5s infinite steps(60);
  transform-style: preserve-3d;
  will-change: transform;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0)
             rotateX(calc(var(--ry, 0) * 1deg))
             rotateY(calc(var(--rx, 0) * 1deg));
}

.title {
  font-size: clamp(48px, 16vw, 22rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.9;
  position: relative;
  margin: 0;
  text-align: center;
  color: var(--fg);
  filter: drop-shadow(0 0 0.3rem rgba(255,255,255,0.25)) drop-shadow(0 0 1.2rem rgba(0, 255, 208, 0.2));
  animation: vhs-jitter 2.4s infinite steps(60);
}

/* Intro zoom + flicker for the first 5 seconds */
.title.intro {
  animation:
    intro-zoom 5s ease-in-out forwards,
    blinky 220ms steps(1, end) infinite,
    vhs-jitter 2.4s infinite steps(60);
}

/* Glow/bloom */
.title::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #9affff;
  filter: blur(8px) saturate(150%);
  opacity: 0.35;
  mix-blend-mode: screen;
  transform: translateZ(0);
}

/* Chromatic aberration (RGB split) */
.title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--fg);
  text-shadow:
    -0.06em 0 0 rgba(255, 40, 40, 0.6),
     0.06em 0 0 rgba(40, 160, 255, 0.6),
     0 0 0.06em rgba(0,0,0,0.5);
  mix-blend-mode: screen;
  animation: rgb-shift 3.6s infinite ease-in-out;
}

/* Scanlines layer */
.scanlines {
  position: absolute;
  inset: -2px; /* bleed */
  background:
    linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);
  background-size: 100% 2px; /* line every 2px */
  opacity: var(--scanline-opacity);
  pointer-events: none;
  mix-blend-mode: multiply;
  animation: scan-scroll 6s linear infinite;
}

/* VHS tracking bar (rolling brighter band) */
.tracking {
  position: absolute;
  inset: -2% -3%;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 42%,
      rgba(220,220,220,0.10) 48%,
      rgba(255,255,255,0.22) 50%,
      rgba(220,220,220,0.10) 52%,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,0) 100%
    );
  mix-blend-mode: screen;
  filter: blur(0.6px);
  opacity: 0.25;
  pointer-events: none;
  animation: tracking-roll 9s linear infinite;
}

/* Vignette */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 115% at 50% 45%, rgba(0,0,0,0) 55%, var(--vignette) 100%);
  pointer-events: none;
}

/* Noise canvas sits on top */
.noise {
  position: absolute;
  inset: 0;
  opacity: 0.10; /* белые спеклы на тёмном фоне */
  mix-blend-mode: screen;
  pointer-events: none;
}

/* OSD: PLAY indicator */
.osd {
  position: absolute;
  top: clamp(8px, 2.5vmin, 24px);
  left: clamp(10px, 3vmin, 28px);
  font-size: clamp(12px, 2.6vmin, 22px);
  letter-spacing: 0.08em;
  color: #f4f4f4;
  opacity: 0.85;
  text-shadow: 0 0 1px rgba(255,255,255,0.3), 0 0 6px rgba(255,255,255,0.2);
  filter: drop-shadow(0 0 0.6rem rgba(255,255,255,0.12));
  mix-blend-mode: screen;
  user-select: none;
}
.osd .triangle { margin-right: 0.5em; color: #b4ff6c; }

/* Gray glitch bars */
.glitch-bar {
  position: absolute;
  left: -5%;
  width: 110%;
  height: var(--h, 8px);
  background: linear-gradient(90deg, rgba(200,200,200,0.05), rgba(255,255,255,0.18), rgba(200,200,200,0.05));
  opacity: var(--o, 0.0);
  transform: translateY(var(--y, 0)) skewX(var(--sk, 0deg));
  filter: blur(0.4px);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Subtle vertical roll/distortion */
.crt::after {
  content: '';
  position: absolute;
  inset: -1% -2% -1% -2%;
  background:
    linear-gradient(
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.02) 40%,
      rgba(0,0,0,0.08) 60%,
      rgba(255,255,255,0.04)
    );
  mix-blend-mode: overlay;
  filter: blur(0.4px);
  opacity: 0.35;
  animation: vertical-roll 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scan-scroll {
  0% { background-position-y: 0; }
  100% { background-position-y: 2px; }
}

@keyframes tracking-roll {
  0% { transform: translateY(-60%); opacity: 0.1; }
  35% { opacity: 0.25; }
  50% { transform: translateY(60%); opacity: 0.18; }
  65% { opacity: 0.12; }
  100% { transform: translateY(180%); opacity: 0.06; }
}

@keyframes vertical-roll {
  0%, 100% { transform: translateY(-1%); opacity: 0.25; }
  50% { transform: translateY(1%); opacity: 0.45; }
}

@keyframes vhs-jitter {
  0%, 100% { transform: translate(0, 0) skew(0.05deg); }
  10% { transform: translate(0.6px, 0.2px) skew(-0.05deg); }
  20% { transform: translate(-0.8px, -0.3px) skew(0.1deg); }
  30% { transform: translate(0.4px, -0.1px) skew(-0.1deg); }
  40% { transform: translate(-0.6px, 0.4px) skew(0.05deg); }
  50% { transform: translate(0.2px, -0.5px) skew(0deg); }
  60% { transform: translate(-0.3px, 0.3px) skew(0.1deg); }
  70% { transform: translate(0.5px, -0.2px) skew(-0.05deg); }
  80% { transform: translate(-0.2px, 0.2px) skew(0deg); }
  90% { transform: translate(0.2px, 0.1px) skew(-0.05deg); }
}

@keyframes rgb-shift {
  0%, 100% { transform: translate(0, 0); filter: hue-rotate(0deg); }
  25% { transform: translate(0.8px, -0.3px); filter: hue-rotate(-5deg); }
  50% { transform: translate(-0.6px, 0.4px); filter: hue-rotate(6deg); }
  75% { transform: translate(0.5px, 0.2px); filter: hue-rotate(-3deg); }
}

/* Text burst glitch */
.title.burst {
  animation: vhs-jitter 0.5s steps(20) 2,
             burst-shift 0.4s ease-in-out 2;
}
@keyframes burst-shift {
  0% { transform: translate(0,0); filter: none; }
  20% { transform: translate(-2px, 1px) skew(-0.4deg); }
  40% { transform: translate(2px, -1px) skew(0.4deg); }
  60% { transform: translate(-1px, 2px) skew(0.2deg); }
  80% { transform: translate(1px, -2px) skew(-0.2deg); }
  100% { transform: translate(0,0); filter: none; }
}

/* Subtle gray flicker of the whole scene */
@keyframes gray-flicker {
  0%, 100% { filter: brightness(1) contrast(1.02); }
  10% { filter: brightness(1.02) contrast(1.01); }
  20% { filter: brightness(0.98) contrast(1.03); }
  30% { filter: brightness(1.03) contrast(0.99); }
  40% { filter: brightness(1.01) contrast(1.02); }
  50% { filter: brightness(1.04) contrast(1); }
  60% { filter: brightness(0.99) contrast(1.03); }
  70% { filter: brightness(1.02) contrast(1.01); }
  80% { filter: brightness(1) contrast(1.02); }
  90% { filter: brightness(1.03) contrast(1); }
}

/* Intro animations */
@keyframes intro-zoom {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1.6); }
}
@keyframes blinky {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Responsive fine-tuning */
@media (max-width: 480px) {
  .title { letter-spacing: 0.04em; }
}

/* Start screen */
.start-screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(1.5px) contrast(1.02);
  z-index: 10;
}
.start-btn {
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0a0a0a;
  background: #f1f1f1;
  border: 1px solid #9a9a9a;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  cursor: pointer;
}
.start-btn:hover { background: #fff; }
.hint { margin-top: 0.6rem; font-size: 0.8rem; color: #444; }

/* Links page */
.links {
  position: absolute;
  bottom: min(12vh, 120px);
  display: flex;
  gap: clamp(12px, 3vw, 28px);
}

/* Profile screen after intro */
.profile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center; /* центрируем весь блок */
  grid-template-rows: auto auto auto;
  gap: 1.4rem;
  padding: 0;
  text-align: center;
}
.hello {
  color: #f5f5f5;
  font-size: clamp(24px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
}
.hello strong { color: #ffffff; text-shadow: 0 0 10px rgba(255,255,255,0.1); }

.social {
  display: flex;
  gap: clamp(20px, 6vw, 60px);
  justify-content: center; /* центр иконок */
}
.btn {
  width: clamp(56px, 10vw, 96px);
  height: clamp(56px, 10vw, 96px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111;
  border: 2px solid #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 0 0 4px #fff;
  transition: transform 160ms ease, filter 160ms ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.btn svg { width: 60%; height: 60%; fill: #fff; }
.btn.github { background: #000; }
.btn.telegram { background: #2AABEE; border-color: #2AABEE; box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 0 0 4px rgba(255,255,255,0.9); }

.tagline {
  color: #d6d6d6;
  font-size: clamp(14px, 3vw, 20px);
  letter-spacing: 0.08em;
  opacity: 0.9;
  margin: 0.4rem 0 0 0;
}