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

  /* NAV (about / chart / twitter) */
  --nav-top: 40px;
  --nav-right: 80px;
  --nav-gap: 18px;

  /* HERO (1 екран) */
  --hero-main-bottom: 200px;
  --hero-main-left: 360px;
  --hero-main-width: 540px;

  --hero-logo-bottom: 80px;
  --hero-logo-left: 260px;
  --hero-logo-offset-y: 0px;  /* додатковий зсув логотипа */

  /* ABOUT (2 екран) */
  --about-title-top: 120px;
  --about-title-left: 50%;
  --about-title-translate-x: -50%; /* щоб по центру */

  --about-text-top: 260px;
  --about-text-left: 50%;
  --about-text-translate-x: -50%;
  --about-text-max-width: 1200px;

  --about-face-bottom: 60px;
  --about-face-right: 140px;
  --about-face-width: 640px;

  /* CHART (3 екран) */
  --chart-frame-left: 170px;
  --chart-frame-top: 250px;
  --chart-frame-width: 1100px;
  --chart-frame-height: 520px;

  --chart-title-left: 1350px;
  --chart-title-top: 380px;

  --chart-face-top: 25px;   /* наскільки високо над чартом */
  --chart-face-left: 260px;
  --chart-face-width: 360px;

  /* Галстуки */
  --tie-base-size: 130px;
}

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

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

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

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

/* Скрол по секціях */
.page-wrapper {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

/* Кожна секція = екран 1920×1080 зі скейлом під в'юпорт */
.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/jimjak-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(0, 0, 0, 0.06) 0%,
    transparent 40%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* =========================================
   ТОП-НАВІГАЦІЯ
   ========================================= */

.top-nav {
  position: fixed;
  top: var(--nav-top);
  right: var(--nav-right);
  z-index: 50;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav-link {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 32px;
  font-weight: 900;
  text-transform: lowercase;
  cursor: pointer;
  color: #000;
  transition: transform 0.2s ease, text-shadow 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
  transform: translateY(-2px);
  color: #333;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.nav-twitter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.nav-twitter img {
  width: 56px;
  height: 56px;
}

.nav-twitter:hover {
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
}

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

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

/* Великий Jimjak */
.hero-main-image {
  position: absolute;
  left: var(--hero-main-left);
  bottom: var(--hero-main-bottom);
}

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

/* Напис Jimjak (окрема картинка) */
.hero-logo {
  position: absolute;
  left: var(--hero-logo-left);
  bottom: calc(var(--hero-logo-bottom) - var(--hero-logo-offset-y));
}

.hero-logo img {
  width: calc(var(--hero-main-width) + 60px);
  height: auto;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}

/* Дихання персонажа (можеш прибрати, якщо не треба) */
@keyframes heroBreath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* =========================================
   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: 96px;
  font-weight: 900;
}

/* Текст по центру */
.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: 32px;
  line-height: 1.35;
  color: #555;
}

/* Персонаж справа внизу */
.about-face {
  position: absolute;
  bottom: var(--about-face-bottom);
  right: var(--about-face-right);
}

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

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

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

/* Білий блок під DexScreener */
.chart-frame {
  position: absolute;
  left: var(--chart-frame-left);
  top: var(--chart-frame-top);
  width: var(--chart-frame-width);
  height: var(--chart-frame-height);
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

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

/* Напис "chart" праворуч */
.chart-title {
  position: absolute;
  left: var(--chart-title-left);
  top: var(--chart-title-top);
  font-size: 96px;
  font-weight: 900;
}

/* Персонаж над білим блоком, НЕ в ньому */
.chart-face {
  position: absolute;
  left: var(--chart-face-left);
  top: var(--chart-face-top);
  pointer-events: none;
  z-index: 3;
}

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

/* =========================================
   ЛЕТАЮЩІ ГАЛСТУКИ (ОДНІ ДЛЯ ВСЬОГО САЙТУ)
   ========================================= */

#ties-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;  /* під персонажами/текстом, але над фоном */
}

/* Базові стилі для кожного tie */
.tie {
  position: absolute;
  top: -20vh;
  opacity: 0.4;
  transform-origin: center;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
  animation-name: tieFall, tieSpin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* анімація падіння/плавання вниз */
@keyframes tieFall {
  0% {
    transform: translate3d(0, -120vh, 0) rotate(0deg) scale(var(--tie-scale, 1));
    opacity: 0;
  }
  10% {
    opacity: 0.45;
  }
  90% {
    opacity: 0.45;
  }
  100% {
    transform: translate3d(0, 140vh, 0) rotate(360deg) scale(var(--tie-scale, 1));
    opacity: 0;
  }
}

/* легке обертання */
@keyframes tieSpin {
  0%   { transform: translate3d(0, -120vh, 0) rotate(0deg) scale(var(--tie-scale, 1)); }
  100% { transform: translate3d(0, 140vh, 0) rotate(360deg) scale(var(--tie-scale, 1)); }
}

/* Адаптив легенький (на всяк випадок) */
@media (max-width: 1400px) {
  :root {
    --section-width: 100vw;
    --section-height: 100vh;

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

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

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