/* ========= НАСТРОЙКА ЭЛЕМЕНТОВ ЧЕРЕЗ ПЕРЕМЕННЫЕ ========= */

:root {
  /* Верхний логотип (title-top.png) */
  --topbar-x: 0px;
  --topbar-y: 0px;
  --topbar-scale: 1;
  --topbar-rotate: 0deg;

  /* Центральный круг (logo-main.png) */
  --logo-x: 20px;
  --logo-y: 0px;
  --logo-scale: 2;
  --logo-rotate: 0deg;

  /* Кнопка X */
  --x-btn-x: -100px;
  --x-btn-y: 350px;
  --x-btn-scale: 1;
  --x-btn-rotate: +16deg;

  /* Кнопка CA */
  --ca-btn-x: -40px;
  --ca-btn-y: 320px; /* ← выровняли по высоте с X */
  --ca-btn-scale: 1;
  --ca-btn-rotate: -21deg;

  /* Центральная надпись (title-main.png) */
  --title-x: 0px;
  --title-y: 80px;
  --title-scale: 2;
  --title-rotate: 0deg;

  /* Зелёная линия */
  --line-y: 40px;
  --line-scale: 1;

  /* Зелёная стрелка */
  --arrow-up-x: 13%;
  --arrow-up-y: 80px;
  --arrow-up-scale: 1;
  --arrow-up-rotate: 0deg;

  /* Красная стрелка */
  --arrow-down-x: 24%;
  --arrow-down-y: 500px;
  --arrow-down-scale: 1;
  --arrow-down-rotate: 0deg;

  /* FOMO-надпись (стрелка) — независимая */
  --fomo-x: 80%;
  --fomo-y: 100px; /* расстояние от низа */
  --fomo-scale: 1;
  --fomo-rotate: 0deg;

  /* Wojak — независимый от FOMO */
  --wojak-x: 85%;   /* горизонталь */
  --wojak-y: 1px;   /* вертикаль от низа */
  --wojak-scale: 1;
  --wojak-rotate: 0deg;
}

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

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

html,
body {
  height: 100%;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: #000000;
  overflow: hidden;
  opacity: 0;
  animation: fade-in 1.2s ease forwards;
}

.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #ffffff;
}

/* ========= ВЕРХНИЙ ЛОГОТИП ========= */

.topbar {
  position: absolute;
  top: var(--topbar-y);
  left: var(--topbar-x);
  transform: scale(var(--topbar-scale)) rotate(var(--topbar-rotate));
  padding: 0 12px;
  display: flex;
  align-items: center;
  z-index: 10;
}

.topbar-title {
  height: 44px;
  width: auto;
}

/* ========= ЦЕНТРАЛЬНЫЙ БЛОК ========= */

.main {
  position: absolute;
  top: 18vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  z-index: 5;
}

.logo-block {
  position: relative;
  display: inline-block;
  transform: translate(var(--logo-x), var(--logo-y))
    scale(var(--logo-scale))
    rotate(var(--logo-rotate));
}

.logo-main {
  width: 220px;
  height: auto;
}

/* ========= КНОПКИ ========= */

.top-btn {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease-out;
  z-index: 10;
}

.top-btn img {
  display: block;
  width: 140px;
  height: auto;
  transition: filter 0.15s ease-out;
  pointer-events: none;
}

/* Кнопка X */
.top-btn-left {
  left: var(--x-btn-x);
  top: var(--x-btn-y);
  transform: scale(var(--x-btn-scale)) rotate(var(--x-btn-rotate));
}

/* Кнопка CA */
.top-btn-right {
  right: var(--ca-btn-x);
  top: var(--ca-btn-y);
  transform: scale(var(--ca-btn-scale)) rotate(var(--ca-btn-rotate));
}

/* Hover-свечение */
.top-btn:hover img {
  filter: drop-shadow(0 0 14px #00ff3b);
}

/* ========= ЦЕНТРАЛЬНАЯ НАДПИСЬ ========= */

.title-main {
  transform: translate(var(--title-x), var(--title-y))
    scale(var(--title-scale))
    rotate(var(--title-rotate));
  width: 420px;
  max-width: 70vw;
  height: auto;
}

/* ========= ЛИНИЯ И НИЖНИЙ СЛОЙ ========= */

.chart-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--line-y);
  pointer-events: none;
  z-index: 1;
}

.flip-line {
  position: absolute;
  left: 0;
  bottom: var(--line-y);
  width: 100%;
  height: auto;
  transform: scale(var(--line-scale));
  animation: line-pulse 4s ease-in-out infinite;
}

/* ========= СТРЕЛКИ ========= */

.arrow {
  position: absolute;
  width: 70px;
  height: auto;
  pointer-events: none;
}

/* Зелёная стрелка — первая в цикле */
.arrow-up {
  bottom: var(--arrow-up-y);
  left: var(--arrow-up-x);
  animation: arrow-up-bounce 8s ease-in-out infinite;
}

/* Красная стрелка — вторая в цикле */
.arrow-down {
  bottom: var(--arrow-down-y);
  left: var(--arrow-down-x);
  animation: arrow-down-bounce 8s ease-in-out infinite;
}

/* ========= FOMO-БЛОК (надпись и Wojak — отдельно) ========= */

/* Контейнер по нижнему краю, без трансформаций */
.fomo-block {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

/* FOMO-надпись (стрелка) — независимая */
.fomo-text-img {
  position: absolute;
  left: var(--fomo-x);
  bottom: var(--fomo-y);
  transform: scale(var(--fomo-scale)) rotate(var(--fomo-rotate));
  width: 140px;
  height: auto;
  animation: fomo-bounce 2.5s ease-in-out infinite;
}

/* Wojak — независимая позиция и параметры */
.wojak-fomo {
  position: absolute;
  left: var(--wojak-x);
  bottom: var(--wojak-y);
  width: calc(270px * var(--wojak-scale));
  height: auto;
  transform: rotate(var(--wojak-rotate));
  animation: wojak-shift 1.8s ease-in-out infinite;
}

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

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes line-pulse {
  0%, 100% {
    transform: scale(var(--line-scale)) translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: scale(var(--line-scale)) translateY(-6px);
    filter: brightness(1.1);
  }
}

/* Зелёная стрелка:
   0–20% — появление и лёгкий прыжок,
   20–60% — стоит,
   60–80% — исчезает,
   80–100% — скрыта (ожидание нового цикла).
*/
@keyframes arrow-up-bounce {
  0% {
    opacity: 0;
    transform: scale(var(--arrow-up-scale)) rotate(var(--arrow-up-rotate)) translateY(20px);
  }
  10% {
    opacity: 1;
    transform: scale(var(--arrow-up-scale)) rotate(var(--arrow-up-rotate)) translateY(-10px);
  }
  20% {
    opacity: 1;
    transform: scale(var(--arrow-up-scale)) rotate(var(--arrow-up-rotate)) translateY(0);
  }
  60% {
    opacity: 1;
    transform: scale(var(--arrow-up-scale)) rotate(var(--arrow-up-rotate)) translateY(0);
  }
  80% {
    opacity: 0;
    transform: scale(var(--arrow-up-scale)) rotate(var(--arrow-up-rotate)) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(var(--arrow-up-scale)) rotate(var(--arrow-up-rotate)) translateY(0);
  }
}

/* Красная стрелка:
   0–20% — невидима (ждёт зелёную),
   20–40% — появляется и анимируется,
   40–60% — стоит,
   60–80% — исчезает,
   80–100% — скрыта (пауза перед новым циклом).
*/
@keyframes arrow-down-bounce {
  0% {
    opacity: 0;
    transform: scale(var(--arrow-down-scale)) rotate(var(--arrow-down-rotate)) translateY(-20px);
  }
  20% {
    opacity: 0;
    transform: scale(var(--arrow-down-scale)) rotate(var(--arrow-down-rotate)) translateY(-20px);
  }
  30% {
    opacity: 1;
    transform: scale(var(--arrow-down-scale)) rotate(var(--arrow-down-rotate)) translateY(10px);
  }
  40% {
    opacity: 1;
    transform: scale(var(--arrow-down-scale)) rotate(var(--arrow-down-rotate)) translateY(0);
  }
  60% {
    opacity: 1;
    transform: scale(var(--arrow-down-scale)) rotate(var(--arrow-down-rotate)) translateY(0);
  }
  80% {
    opacity: 0;
    transform: scale(var(--arrow-down-scale)) rotate(var(--arrow-down-rotate)) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(var(--arrow-down-scale)) rotate(var(--arrow-down-rotate)) translateY(0);
  }
}

/* FOMO надпись — независимое вертикальное подпрыгивание */
@keyframes fomo-bounce {
  0%, 100% {
    transform: scale(var(--fomo-scale)) rotate(var(--fomo-rotate)) translateY(0);
  }
  50% {
    transform: scale(var(--fomo-scale)) rotate(var(--fomo-rotate)) translateY(-12px);
  }
}

/* Wojak — лёгкое горизонтальное смещение вокруг своих координат */
@keyframes wojak-shift {
  0%, 100% {
    margin-left: 0;
  }
  50% {
    margin-left: 5px;
  }
}

/* Адаптация при необходимости можно донастроить */

@media (max-width: 768px) {
  .main {
    top: 16vh;
  }

  .logo-main {
    width: 180px;
  }

  .top-btn img {
    width: 120px;
  }

  .top-btn-left {
    left: calc(var(--x-btn-x) + 20px);
  }

  .top-btn-right {
    right: calc(var(--ca-btn-x) + 20px);
  }

  .title-main {
    width: 320px;
  }

  .flip-line {
    bottom: 30px;
  }

  .wojak-fomo {
    width: calc(220px * var(--wojak-scale));
  }
}