/* style.css */

* {
  box-sizing: border-box;
}

body {
  background-color: black;
  color: white;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  
  font-family: "Foldit", sans-serif;
  font-style: normal;
}

/* Фоновая гифка */
.background-gif {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.3;
}

/* Центрированный блок на всю высоту */
.content-container {
  min-height: 100vh;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: black;
}

h1 {
  margin-top: 0;
  font-size: 2.5em;
  text-align: center;
}

p {
  line-height: 1.6;
  text-align: center;
  max-width: 600px;
}

img.content-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 20px;
}

/* === VHS RETRO EFFECT === */

.vhs-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* чтобы не мешал кликам */
  z-index: 999;
  opacity: 0.85;
}

/* Шум (зернистость) */
.vhs-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAAA1BMVEW10NBjBBbqAAAAH0lEQVRo3u3BAQ0AAADCoPdPbQ43oAAAAAAAAIBLcQ8AAa0eBsgAAAAASUVORK5CYII=");
  opacity: 0.15;
  animation: noise 2s infinite steps(1);
}

/* Мерцающие горизонтальные полосы */
.vhs-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 2px
  );
  animation: scanlineMove 8s linear infinite;
}

/* Цветовой сдвиг (VHS-style RGB split) */
.vhs-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  mix-blend-mode: multiply;
  opacity: 0.7;
  animation: glitch 3s infinite alternate-reverse;
}

/* Анимации */
@keyframes noise {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1px, -1px); }
  20% { transform: translate(1px, 1px); }
  30% { transform: translate(1px, -1px); }
  40% { transform: translate(-1px, 1px); }
  50% { transform: translate(0, 1px); }
  60% { transform: translate(1px, 0); }
  70% { transform: translate(-1px, 0); }
  80% { transform: translate(0, -1px); }
  90% { transform: translate(1px, -1px); }
}

@keyframes scanlineMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

@keyframes glitch {
  0% { clip-path: inset(10% 0 80% 0); transform: translateX(-2px); }
  2% { clip-path: inset(20% 0 70% 0); transform: translateX(2px); }
  4% { clip-path: inset(30% 0 60% 0); transform: translateX(-1px); }
  6% { clip-path: inset(40% 0 50% 0); transform: translateX(1px); }
  8% { clip-path: inset(50% 0 40% 0); transform: translateX(0); }
  10%, 100% { clip-path: inset(0); transform: translateX(0); }
}