/* =========================================
   ROOT ЗМІННІ — РУХАЄШ ЗВІДСИ
   ========================================= */
:root {
  /* Базовий розмір слайдів */
  --section-width: 1920px;
  --section-height: 1080px;

  /* HERO позиції */
  --hero-logo-left: 200px;
  --hero-logo-top: 90px;
  --hero-logo-width: 800px;

  --hero-jelp-right: 220px;
  --hero-jelp-bottom: 150px;
  --hero-jelp-width: 700px;

  --hero-nav-bottom: 40px;
  --hero-nav-left: 50%;
  --hero-nav-translate-x: -50%;

  /* ABOUT позиції */
  --about-title-top: 90px;
  --about-title-left: 50%;
  --about-title-translate-x: -50%;

  --about-text-top: 220px;
  --about-text-left: 50%;
  --about-text-translate-x: -50%;
  --about-text-max-width: 950px;

  --about-jelp-left: 80px;
  --about-jelp-bottom: 80px;
  --about-jelp-width: 500px;

  --about-todo-right: 0px;
  --about-todo-bottom: -10px;
  --about-todo-width: 500px;

  /* CHART позиції */
  --chart-title-top: 40px;
  --chart-title-left: 50%;
  --chart-title-translate-x: -50%;

  /* прямокутник, де сидить DexScreener */
  --chart-screen-width: 1080px;
  --chart-screen-height: 540px;
  --chart-screen-left: 50%;
  --chart-screen-top: 50%;
  --chart-screen-translate-x: -50%;
  --chart-screen-translate-y: -40%;

  --chart-jelp-right: 160px;
  --chart-jelp-bottom: 90px;
  --chart-jelp-width: 260px;
}

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: "Luckiest Guy", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: #000;
  overflow: hidden;
}

/* Скролл по 3 екранам */
.page-wrapper {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

/* Кожна секція = екран */
.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;
}

/* Фон для кожної секції */
.section-bg {
  position: absolute;
  inset: 0;
  background: url("img/jelp-bg.png") center center / cover no-repeat;
  z-index: -2;
}

/* Легка хвильова анімація фона */
.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 55%);
  mix-blend-mode: screen;
  animation: waterGlow 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes waterGlow {
  0%, 100% { opacity: 0.5; transform: translate3d(0, 0, 0); }
  50%      { opacity: 1;   transform: translate3d(10px, -8px, 0); }
}

/* =========================================
   КНОПКА МУЗИКИ
   ========================================= */

.music-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 5px 0 #e4323e, 0 0 10px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.music-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #e4323e, 0 0 14px rgba(0, 0, 0, 0.8);
}

.music-toggle:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #e4323e, 0 0 8px rgba(0, 0, 0, 0.7);
}

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

.hero-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Лого JELP */
.hero-logo {
  position: absolute;
  left: var(--hero-logo-left);
  top: var(--hero-logo-top);
}

.hero-logo img {
  width: var(--hero-logo-width);
  height: auto;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
  animation: logoFloat 5s ease-in-out infinite;
}

/* Персонаж */
.hero-jelp {
  position: absolute;
  right: var(--hero-jelp-right);
  bottom: var(--hero-jelp-bottom);
}

.hero-jelp img {
  width: var(--hero-jelp-width);
  height: auto;
  filter:
    drop-shadow(0 0 14px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));
  animation: jellyFloat 4.5s ease-in-out infinite;
}

/* Навігація знизу */
.hero-nav {
  position: absolute;
  bottom: var(--hero-nav-bottom);
  left: var(--hero-nav-left);
  transform: translateX(var(--hero-nav-translate-x));
  display: flex;
  gap: 32px;
}

.nav-btn {
  border: none;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 26px;
  letter-spacing: 0.08em;
  background: #ffffff;
  color: #ff4f5b;
  cursor: pointer;
  box-shadow: 0 6px 0 #e4323e, 0 0 12px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.nav-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 #e4323e, 0 0 16px rgba(0, 0, 0, 0.8);
  filter: brightness(1.05);
}

.nav-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #e4323e, 0 0 10px rgba(0, 0, 0, 0.7);
}

/* окремий колір для твіттер-кнопки */
.nav-twitter-btn {
  background: #1da1f2;
  color: #ffffff;
  box-shadow: 0 6px 0 #0e5a8c, 0 0 12px rgba(0, 0, 0, 0.6);
}

/* Анімації логотипа/медузи */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

@keyframes jellyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

/* =========================================
   ABOUT
   ========================================= */

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

/* Заголовок ABOUT */
.about-title {
  position: absolute;
  top: var(--about-title-top);
  left: var(--about-title-left);
  transform: translateX(var(--about-title-translate-x));
  font-size: 80px;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
}

/* Текст */
.about-text {
  position: absolute;
  top: var(--about-text-top);
  left: var(--about-text-left);
  transform: translateX(var(--about-text-translate-x));
  max-width: var(--about-text-max-width);
  text-align: center;
  font-size: 30px;
  line-height: 1.35;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

/* Jelp зліва внизу */
.about-jelp {
  position: absolute;
  left: var(--about-jelp-left);
  bottom: var(--about-jelp-bottom);
}

.about-jelp img {
  width: var(--about-jelp-width);
  height: auto;
  filter:
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.5));
  animation: jellyFloat 4.5s ease-in-out infinite;
}

/* To-do лист справа — БЕЗ анімації, статичний */
.about-todo {
  position: absolute;
  right: var(--about-todo-right);
  bottom: var(--about-todo-bottom);
}

.about-todo img {
  width: var(--about-todo-width);
  height: auto;
  filter:
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));
}

/* =========================================
   CHART
   ========================================= */

.chart-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Заголовок CHART зверху */
.chart-title {
  position: absolute;
  top: var(--chart-title-top);
  left: var(--chart-title-left);
  transform: translateX(var(--chart-title-translate-x));
  font-size: 72px;
  letter-spacing: 0.18em;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
  z-index: 5;
}

/* Прямокутник під DexScreener, по центру */
.chart-screen {
  position: absolute;
  width: var(--chart-screen-width);
  height: var(--chart-screen-height);
  left: var(--chart-screen-left);
  top: var(--chart-screen-top);
  transform: translate(
    var(--chart-screen-translate-x),
    var(--chart-screen-translate-y)
  );
  background: #000000;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
  z-index: 1; /* під теліком, але над фоном */
}

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

/* Персонаж справа біля теліка (під рамкою) */
.chart-jelp {
  position: absolute;
  right: var(--chart-jelp-right);
  bottom: var(--chart-jelp-bottom);
  z-index: 2;
}

.chart-jelp img {
  width: var(--chart-jelp-width);
  height: auto;
  filter:
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.5));
  animation: jellyFloat 4.5s ease-in-out infinite;
}

/* Телевізор-рамка на весь екран, поверх всього */
.tv-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.tv-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* розтягується на весь екран */
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.9));
}

/* =========================================
   АДАПТИВ
   ========================================= */

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

    --chart-screen-width: 80vw;
    --chart-screen-height: 40vh;
  }

  .about-title,
  .chart-title {
    font-size: 52px;
  }

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