/* =========================================
   ГЛОБАЛЬНІ НАЛАШТУВАННЯ (РУХАЄШ ТУТ)
   ========================================= */
:root {
  /* Базова розмітка секцій */
  --section-width: 1920px;
  --section-height: 1080px;

  /* HERO: позиції */
  --hero-logo-top: 150px;
  --hero-logo-left: 65%;
  --hero-logo-translate-x: -50%;

  --hero-twitter-top: 60px;
  --hero-twitter-right: 80px;

  --hero-buy-top: 370px;
  --hero-buy-left: 52%;
  --hero-buy-translate-x: -50%;

  --hero-character-bottom: 0px;
  --hero-character-left: 0px;
  --hero-character-width: 500px;

  /* ABOUT+CHART: позиції */
  --about-block-top: 80px;
  --about-block-left: 140px;
  --about-text-max-width: 880px;

  --chart-title-top-offset: 110px;   /* відступ CHART від низу ABOUT-тексту */
  --chart-frame-top-offset: 20px;  /* відступ фрейма від заголовка CHART */

  --chart-frame-left: 140px;
  --chart-frame-width: 1640px;
  --chart-frame-height: 430px;

  --chart-head-top: -70px;
  --chart-head-right: 160px;
  --chart-head-width: 250px;

  /* POS: летающие платы (можеш крутити як хочеш) */
  --board-1-start-x: 5%;
  --board-1-start-y: 10%;

  --board-2-start-x: 80%;
  --board-2-start-y: 18%;

  --board-3-start-x: 15%;
  --board-3-start-y: 65%;

  --board-4-start-x: 88%;
  --board-4-start-y: 70%;

  --board-5-start-x: 40%;
  --board-5-start-y: 15%;

  --board-6-start-x: 60%;
  --board-6-start-y: 75%;

  --board-7-start-x: 12%;
  --board-7-start-y: 15%;

  --board-8-start-x: 82%;
  --board-8-start-y: 22%;

  --board-9-start-x: 25%;
  --board-9-start-y: 70%;

  --board-10-start-x: 75%;
  --board-10-start-y: 68%;

  /* Розміри плат */
  --board-size-small: 120px;
  --board-size-big: 160px;
}

/* =========================================
   БАЗА
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: "Bangers", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

.page-wrapper {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  background: #000;
}

.section {
  position: relative;
  width: var(--section-width);
  height: var(--section-height);
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;
  scroll-snap-align: start;
  overflow: hidden;
}

/* Фон для обох секцій */
.bg-gradient {
  position: absolute;
  inset: 0;
  /* тут твоя картинка фона */
  background: url("img/cyberjak-bg.png") center center / cover no-repeat;
  /* без z-index, щоб не ховалось під body */
}



/* ===================== HERO ===================== */

.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Логотип по центру (позиція через змінні) */
.hero-logo {
  position: absolute;
  top: var(--hero-logo-top);
  left: var(--hero-logo-left);
  transform: translateX(var(--hero-logo-translate-x));
}

.hero-logo img {
  max-width: 520px;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.6));
  animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -10px); }
}

/* Twitter icon кнопка */
.hero-twitter {
  position: absolute;
  top: var(--hero-twitter-top);
  right: var(--hero-twitter-right);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.hero-twitter img {
  width: 80px;
  height: 80px;
}

.hero-twitter:hover {
  transform: scale(1.08) rotate(4deg);
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.7));
}

/* BUY кнопка */
.buy-button {
  position: absolute;
  top: var(--hero-buy-top);
  left: var(--hero-buy-left);
  transform: translateX(var(--hero-buy-translate-x));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: buyBob 3s ease-in-out infinite;
}

.buy-button img {
  max-width: 260px;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.buy-button:hover img {
  transform: scale(1.06) rotate(-1.5deg);
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.9));
}

@keyframes buyBob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}

/* Головний персонаж */
.hero-character {
  position: absolute;
  bottom: var(--hero-character-bottom);
  left: var(--hero-character-left);
}

.hero-character img {
  width: var(--hero-character-width);  /* ← тепер росте/меншає по змінній */
  height: auto;
  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.75));
  animation: heroIdle 5s ease-in-out infinite;
}


@keyframes heroIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===================== ABOUT + CHART ===================== */

.about-section {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.about-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Блок ABOUT + текст */
.about-text-block {
  position: absolute;
  top: var(--about-block-top);
  left: var(--about-block-left);
}

.about-title {
  font-size: 76px;
  letter-spacing: 0.08em;
  color: #008bbf;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  margin-bottom: 12px;
}

.about-text {
  font-size: 24px;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: #008bbf;
  max-width: var(--about-text-max-width);
}

/* CHART блок */
.chart-block {
  position: absolute;
  left: var(--chart-frame-left);
  /* top розрахуємо від about-блоку через offset'и */
  top: calc(var(--about-block-top) + 210px);
}

/* Заголовок CHART */
.chart-title {
  font-size: 72px;
  letter-spacing: 0.08em;
  color: #008bbf;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  margin-top: var(--chart-title-top-offset);
}

/* Фрейм з графіком */
.chart-frame {
  position: relative;
  margin-top: var(--chart-frame-top-offset);
  width: var(--chart-frame-width);
  height: var(--chart-frame-height);
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.4);
}

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

/* Голова персонажа, що торчить з-за графіка */
/* chart-block повинен мати position: relative; – воно вже є, але на всяк */
.chart-block {
  position: absolute;
  left: var(--chart-frame-left);
  top: calc(var(--about-block-top) + 210px);
}

/* голова тепер сидить НАД фреймом, а не всередині нього */
.chart-head {
  position: absolute;
  top: var(--chart-head-top);   /* відносно chart-block */
  right: var(--chart-head-right);
  pointer-events: none;
  z-index: 2;                   /* над білим блоком */
}

.chart-head img {
  width: var(--chart-head-width);
  height: auto;
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.7));
  
}


@keyframes headPeek {
  0%, 100% { transform: translateY(10px); }
  50% { transform: translateY(-6px); }
}

/* ===================== ЛЕТАЮЩИЕ ПЛАТЫ ===================== */

.board {
  position: absolute;
  opacity: 0.45;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

/* для кожної плати – своя стартова позиція, розмір, анімація */

.board-1 {
  top: var(--board-1-start-y);
  left: var(--board-1-start-x);
  width: var(--board-size-small);
  animation: boardDrift1 18s linear infinite;
}

.board-2 {
  top: var(--board-2-start-y);
  left: var(--board-2-start-x);
  width: var(--board-size-big);
  animation: boardDrift2 22s linear infinite;
}

.board-3 {
  top: var(--board-3-start-y);
  left: var(--board-3-start-x);
  width: var(--board-size-small);
  animation: boardDrift3 20s linear infinite;
}

.board-4 {
  top: var(--board-4-start-y);
  left: var(--board-4-start-x);
  width: var(--board-size-big);
  animation: boardDrift4 24s linear infinite;
}

.board-5 {
  top: var(--board-5-start-y);
  left: var(--board-5-start-x);
  width: var(--board-size-small);
  animation: boardDrift5 26s linear infinite;
}

.board-6 {
  top: var(--board-6-start-y);
  left: var(--board-6-start-x);
  width: var(--board-size-small);
  animation: boardDrift6 28s linear infinite;
}

/* для about-екрана */
.board-7 {
  top: var(--board-7-start-y);
  left: var(--board-7-start-x);
  width: var(--board-size-small);
  animation: boardDrift3 22s linear infinite;
}

.board-8 {
  top: var(--board-8-start-y);
  left: var(--board-8-start-x);
  width: var(--board-size-small);
  animation: boardDrift1 24s linear infinite;
}

.board-9 {
  top: var(--board-9-start-y);
  left: var(--board-9-start-x);
  width: var(--board-size-big);
  animation: boardDrift4 26s linear infinite;
}

.board-10 {
  top: var(--board-10-start-y);
  left: var(--board-10-start-x);
  width: var(--board-size-small);
  animation: boardDrift2 30s linear infinite;
}

/* різні траєкторії */

@keyframes boardDrift1 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(40px, -60px) rotate(15deg); }
  50%  { transform: translate(0, -120px) rotate(-10deg); }
  75%  { transform: translate(-40px, -60px) rotate(-20deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes boardDrift2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(-60px, 40px) rotate(-15deg); }
  66%  { transform: translate(30px, 80px) rotate(20deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes boardDrift3 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(30px, 40px) rotate(10deg); }
  40%  { transform: translate(80px, -20px) rotate(25deg); }
  60%  { transform: translate(40px, -60px) rotate(5deg); }
  80%  { transform: translate(-10px, -10px) rotate(-10deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes boardDrift4 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-50px, -40px) rotate(-15deg); }
  50%  { transform: translate(-80px, 10px) rotate(-30deg); }
  75%  { transform: translate(-40px, 50px) rotate(-10deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes boardDrift5 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(70px, -50px) rotate(30deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes boardDrift6 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-60px, 60px) rotate(-25deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ==================== ADAPTIVE (якщо будеш юзати на менших екранах) ==================== */

@media (max-width: 1400px) {
  :root {
    --section-width: 100vw;
    --section-height: 100vh;

    --chart-frame-width: 90vw;
    --chart-frame-height: 40vh;
    --chart-head-max-width: 220px;
  }

  .about-title {
    font-size: 56px;
  }

  .chart-title {
    font-size: 54px;
  }

  .about-text {
    font-size: 18px;
  }
}