/* =========================
   ROOT
========================= */
:root {
  --scene-width: 1920px;
  --scene-height: 1080px;

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

  /* SCREEN 1 */
  --title-top: 260px;
  --title-left: 50%;
  --title-width: 700px;

  --center-nav-top: 480px;
  --center-nav-left: 50%;
  --center-nav-gap: 40px;
  --center-btn-font-size: 22px;

  /* SCREEN 2 */
  --whoiam-top: 280px;
  --whoiam-left: 50%;
  --whoiam-gap: 80px;
  --whoiam-image-width: 400px;

  /* SCREEN 3 */
  --chart-title-top: 80px;
  --chart-title-left: 50%;
  --chart-title-font-size: 70px;

  --chart-frame-top: 260px;
  --chart-frame-left: 50%;
  --chart-frame-width: 900px;
  --chart-frame-height: 450px;

  --chart-character-top: 145px;
  --chart-character-left: calc(50% - 450px);
  --chart-character-width: 120px;
}

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

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
}

.scene {
  width: 100%;
  min-height: 100vh;
}

.screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-main-image);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.screen-inner {
  position: relative;
  width: var(--scene-width);
  height: var(--scene-height);
  max-width: 100%;
  max-height: 100vh;
  z-index: 1;
}

/* =========================
      RAIN
========================= */
.rain-layer {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--scene-width);
  height: var(--scene-height);
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.rain-drop {
  position: absolute;
  top: -220px;
  animation: rain-fall linear infinite;
}

.rain-drop img {
  width: 100%;
  image-rendering: pixelated;
}

@keyframes rain-fall {
  from { top: -220px; }
  to { top: calc(var(--scene-height) + 220px); }
}

/* =========================
   TITLE + BUTTONS
========================= */
.title-image {
  position: absolute;
  top: var(--title-top);
  left: var(--title-left);
  width: var(--title-width);
  transform: translateX(-50%);
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 2;
}

.center-nav {
  position: absolute;
  top: var(--center-nav-top);
  left: var(--center-nav-left);
  transform: translateX(-50%);
  display: flex;
  gap: var(--center-nav-gap);
  z-index: 2;
}

.nav-word {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  font-size: var(--center-btn-font-size);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: 0.2s;
}

.nav-word:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* =========================
   SCREEN 2
========================= */
.whoiam-row {
  position: absolute;
  top: var(--whoiam-top);
  left: var(--whoiam-left);
  transform: translateX(-50%);
  display: flex;
  gap: var(--whoiam-gap);
}

.whoiam-img {
  width: var(--whoiam-image-width);
  image-rendering: pixelated;
}

/* =========================
   SCREEN 3 — CHART
========================= */
.chart-title {
  position: absolute;
  top: var(--chart-title-top);
  left: var(--chart-title-left);
  transform: translateX(-50%);
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--chart-title-font-size);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 2;
}

.chart-character {
  position: absolute;
  top: var(--chart-character-top);
  left: var(--chart-character-left);
  width: var(--chart-character-width);
  image-rendering: pixelated;
  z-index: 2;
}

.chart-frame {
  position: absolute;
  top: var(--chart-frame-top);
  left: var(--chart-frame-left);
  width: var(--chart-frame-width);
  height: var(--chart-frame-height);
  transform: translateX(-50%);
  background: rgba(10, 0, 20, 0.85);
  border-radius: 8px;
  box-shadow: 0 0 25px #ff40c8, 0 0 60px rgba(0, 255, 255, 0.25);
  overflow: hidden;
  z-index: 1;
}

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

/* ЗАГЛУШКА "SOON" */
.chart-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;

  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 80px;
  letter-spacing: 0.15em;
  color: white;
  z-index: 3;
}

.chart-frame.no-chart iframe {
  display: none;
}

.chart-frame.no-chart .chart-placeholder {
  display: flex;
}