/* =========================
   ROOT
========================= */

:root {
  --scene-width: 1920px;
  --scene-height: 1080px;

  --bg-main-image: url("bg_glitch.gif");

  /* Контракт */
  --contract-top: 40px;
  --contract-left: 50%;
  --contract-width: 900px;

  /* Тайтл */
  --title-1-top: 150px;
  --title-1-left: 50%;
  --title-1-width: 900px;

  /* Главный персонаж (стр.1) */
  --char-main-1-bottom: -25px;
  --char-main-1-left: 30%;
  --char-main-1-width: 650px;

  /* Кнопки (стр.1) */
  --nav-buttons-bottom: 15px;
  --nav-buttons-right: 55px;
  --nav-button-width: 150px;
  --nav-button-height: 60px;
  --nav-buttons-gap: 14px;

  /* ABOUT */
  --about-title-top: 40px;
  --about-title-left: 40%;
  --about-title-width: 400px;

  --about-text-top: 200px;
  --about-text-left: 50%;
  --about-text-width: 1500px;

  --about-main-char-top: 250px;
  --about-main-char-left: 43%;
  --about-main-char-width: 260px;

  --about-row-top: 650px;
  --char-gravity-left: 16%;
  --char-gravity-width: 260px;

  --char-quantum-left: 46%;
  --char-quantum-width: 200px;

  --char-dreamer-left: 72%;
  --char-dreamer-width: 240px;

  /* CHART */
  --chart-char-left-top: 600px;   /* сейчас не используется, но оставляю для гибкости */
  --chart-char-left-left: 0px;
  --chart-char-left-width: 520px;

  --chart-char-right-top: 600px;
  --chart-char-right-right: 1500px;
  --chart-char-right-width: 520px;

  --chart-frame-top: 210px;
  --chart-frame-left: 28%;
  --chart-frame-width: 900px;
  --chart-frame-height: 550px;
}

/* =========================
   БАЗА
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.page-wrapper {
  width: 100%;
}

/* =========================
   ЭКРАН
========================= */

.screen {
  position: relative;
  width: var(--scene-width);
  height: var(--scene-height);
  margin: 0 auto;
  overflow: hidden;

  background-image: var(--bg-main-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  max-width: 100vw;
}

.screen-noise {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px
    );
  background-size: 100% 2px;
  mix-blend-mode: screen;
  opacity: 0.25;
  animation: crt-flicker 3.5s infinite;
  z-index: 0;
}

/* =========================
   КОНТРАКТ
========================= */

.contract-banner {
  position: absolute;
  top: var(--contract-top);
  left: var(--contract-left);
  transform: translateX(-50%);
  width: var(--contract-width);
  text-align: center;
  font-family: "Jockey One", system-ui, sans-serif;
  font-size: 26px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f8f8f8;
  text-shadow: 0 0 18px rgba(0, 255, 255, 0.8);
  white-space: nowrap;
  z-index: 1;
}

.contract-label {
  font-weight: 700;
  margin-right: 8px;
}

.contract-value {
  font-weight: 700;
}

/* =========================
   СТРАНИЦА 1
========================= */

.title-image {
  position: absolute;
  top: var(--title-1-top);
  left: var(--title-1-left);
  transform: translateX(-50%);
  width: var(--title-1-width);
  height: auto;
  image-rendering: crisp-edges;
  z-index: 1;
}

.main-character {
  position: absolute;
  bottom: var(--char-main-1-bottom);
  left: var(--char-main-1-left);
  transform: translateX(-50%);
  width: var(--char-main-1-width);
  height: auto;
  image-rendering: crisp-edges;
  z-index: 1;
}

/* Кнопки в ряд */

.nav-buttons {
  position: absolute;
  right: var(--nav-buttons-right);
  bottom: var(--nav-buttons-bottom);
  display: flex;
  flex-direction: row;
  gap: var(--nav-buttons-gap);
  z-index: 1;
}

.nav-btn {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  width: var(--nav-button-width);
  height: var(--nav-button-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: crisp-edges;
}

.nav-btn.disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* =========================
   СТРАНИЦА 2 (ABOUT)
========================= */

.about-title-img {
  position: absolute;
  top: var(--about-title-top);
  left: var(--about-title-left);
  transform: translateX(-50%);
  width: var(--about-title-width);
  height: auto;
  z-index: 1;
}

.about-text-img {
  position: absolute;
  top: var(--about-text-top);
  left: var(--about-text-left);
  transform: translateX(-50%);
  width: var(--about-text-width);
  height: auto;
  z-index: 1;
}

.about-main-char {
  position: absolute;
  top: var(--about-main-char-top);
  left: var(--about-main-char-left);
  transform: translateX(-50%);
  width: var(--about-main-char-width);
  height: auto;
  z-index: 1;
}

.about-characters-row {
  position: absolute;
  top: var(--about-row-top);
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

.about-char {
  position: absolute;
  height: auto;
  image-rendering: crisp-edges;
}

.about-char-gravity {
  left: var(--char-gravity-left);
  transform: translateX(-50%);
  width: var(--char-gravity-width);
}

.about-char-quantum {
  left: var(--char-quantum-left);
  transform: translateX(-50%);
  width: var(--char-quantum-width);
}

.about-char-dreamer {
  left: var(--char-dreamer-left);
  transform: translateX(-50%);
  width: var(--char-dreamer-width);
}

/* =========================
   СТРАНИЦА 3 (CHART)
========================= */

.chart-char {
  position: absolute;
  height: auto;
  image-rendering: crisp-edges;
  z-index: 1;
}

/* Левый класс оставлен на будущее, но сейчас не используется */
/* .chart-char-left { ... } */

.chart-char-right {
  top: var(--chart-char-right-top);
  right: var(--chart-char-right-right);
  width: var(--chart-char-right-width);
  transform: scaleX(-1);
}

.chart-frame-wrapper {
  position: absolute;
  top: var(--chart-frame-top);
  left: var(--chart-frame-left);
  transform: translateX(-50%);
  width: var(--chart-frame-width);
  height: var(--chart-frame-height);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Рисуем «рамку» стилями */
.chart-embed-holder {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  border: 3px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 18px rgba(0, 255, 255, 0.5),
    0 0 32px rgba(255, 0, 128, 0.3);
  overflow: hidden;
}

.chart-embed-holder iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* =========================
   ГЛИТЧ
========================= */

.glitch-soft {
  animation: glitch-soft-move 4s infinite;
}

.glitch-strong {
  position: relative;
}

.glitch-strong::before,
.glitch-strong::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-image: inherit;
  mix-blend-mode: screen;
  opacity: 0.6;
}

.glitch-strong::before {
  filter: drop-shadow(-2px 0 0 #ff0040);
  animation: glitch-strong-shift 2.3s infinite steps(2, end);
}

.glitch-strong::after {
  filter: drop-shadow(2px 0 0 #00f6ff);
  animation: glitch-strong-shift 1.9s infinite steps(2, end);
}

/* =========================
   АНИМАЦИИ
========================= */

@keyframes crt-flicker {
  0%,
  100% {
    opacity: 0.2;
  }
  10% {
    opacity: 0.35;
  }
  20% {
    opacity: 0.18;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.32;
  }
  60% {
    opacity: 0.25;
  }
  70% {
    opacity: 0.27;
  }
  80% {
    opacity: 0.2;
  }
  90% {
    opacity: 0.3;
  }
}

@keyframes glitch-soft-move {
  0% {
    transform: translate3d(0, 0, 0);
  }
  8% {
    transform: translate3d(1px, -1px, 0);
  }
  16% {
    transform: translate3d(-1px, 1px, 0);
  }
  24% {
    transform: translate3d(1px, 1px, 0);
  }
  32% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes glitch-strong-shift {
  0% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
  20% {
    clip-path: inset(10% 0 40% 0);
    transform: translate(-2px, -1px);
  }
  40% {
    clip-path: inset(40% 0 20% 0);
    transform: translate(2px, 1px);
  }
  60% {
    clip-path: inset(20% 0 30% 0);
    transform: translate(-1px, 2px);
  }
  80% {
    clip-path: inset(0 0 0 0);
    transform: translate(1px, -2px);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
}