/* ============ базові змінні ============
   Десктоп — макет 1920×1080, мобілка — 390×716.
   --u = 1 дизайн-піксель, масштабується з екраном. */
@property --spot {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --u: min(calc(100vw / 1920), calc(100svh / 1080));
  --green: #93d354;
  --green-hi: #a9e56d;
  --white-80: rgba(255, 255, 255, 0.8);
  --white-55: rgba(255, 255, 255, 0.55);

  --pitch: calc(148 * var(--u));
  --cell: calc(144 * var(--u));
  --cell-r: calc(6 * var(--u));

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  :root {
    --u: min(calc(100vw / 390), calc(100svh / 716));
    --pitch: calc(67.3 * var(--u));
    --cell: calc(65.3 * var(--u));
    --cell-r: calc(3 * var(--u));
  }
}

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

html { scroll-behavior: smooth; }

body {
  background: #000;
  color: #fff;
  font-family: "Onest", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-nav-open { overflow: hidden; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============ hero ============ */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
  background: #000;
  isolation: isolate;
}

/* ---- сітка ---- */
.grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols, 14), var(--cell));
  grid-auto-rows: var(--cell);
  gap: calc(var(--pitch) - var(--cell));
  align-content: start;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--cell-r);
  background-color: rgba(255, 255, 255, 0.04);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 1.4s ease var(--d, 0s),
    transform 1.6s var(--ease-out) var(--d, 0s),
    background-color 1.1s ease,
    box-shadow 1.1s ease;
}

.grid.is-in .cell { opacity: 1; transform: none; }

.cell__label {
  font-weight: 500;
  font-size: calc(20 * var(--u));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: translateY(35%);
  filter: blur(4px);
  transition: opacity 0.9s ease, transform 0.9s var(--ease-out), filter 0.9s ease;
  pointer-events: none;
}

.cell.is-on {
  background-color: rgba(255, 255, 255, 0.085);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition:
    opacity 1.4s ease var(--d, 0s),
    transform 1.6s var(--ease-out) var(--d, 0s),
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.cell.is-on .cell__label {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.2s ease, transform 0.45s var(--ease-out), filter 0.3s ease;
}

.cell.is-hot .cell__label { color: rgba(147, 211, 84, 0.75); }

@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .cell__label { font-size: calc(11 * var(--u)); }
}

/* ---- віньєтка (радіальний градієнт поверх сітки) ---- */
.vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse calc(2262 * var(--u)) calc(1272.5 * var(--u)) at 50% 50%,
    rgba(0, 0, 0, 0) 0%,
    #000 100%
  );
}

/* ---- фото ---- */
.photo {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(-61 * var(--u));
  width: calc(776 * var(--u));
  height: calc(1057 * var(--u));
  transform: translateX(-50%);
  --mx: 50%;
  --my: 30%;
}

.photo__inner {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--ps, 1));
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

.photo picture { position: absolute; inset: 0; display: block; }

.photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill; /* як у Figma: картинка розтягнута на весь фрейм */
  user-select: none;
  pointer-events: none;
}

/* світло за курсором малюється у WebGL-канвасі поверх фото */
.photo__light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
}

.has-light .photo__light { opacity: 1; }
.has-light .photo picture { visibility: hidden; }

.fade {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(253 * var(--u));
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
}

/* ============ заголовок ============ */
.title {
  position: absolute;
  z-index: 5;
  left: calc(64 * var(--u));
  top: calc(64 * var(--u));
  width: calc(602 * var(--u));
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  column-gap: calc(16 * var(--u));
  font-weight: 700;
  font-size: calc(72 * var(--u));
  line-height: 1.1;
  color: var(--white-80);
  pointer-events: none;
}

.w {
  display: inline-flex;
  overflow: hidden;
  /* запас під виносні елементи «д», «у» */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  white-space: nowrap;
}

.wi {
  display: block;
  transform: translateY(110%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1.1s var(--ease-out) var(--d, 0s);
}

.is-ready .wi { transform: none; }

/* ---- пігулка «$ sold out» ---- */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(10 * var(--u)) calc(32 * var(--u));
  border-radius: calc(66 * var(--u));
  background: linear-gradient(to right, #fff, #999);
  color: #000;
  font-size: calc(42 * var(--u));
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: auto;
  cursor: default;
  opacity: 0;
  transform: scale(2.4) rotate(-10deg);
  transition: transform 0.5s var(--ease-out), opacity 0.2s linear;
}

.pill.is-stamped {
  opacity: 1;
  transform: none;
  transition: transform 0.55s var(--ease-back), opacity 0.12s linear;
}

.pill.is-stamped:hover { transform: rotate(-4deg) scale(1.05); }

.pill::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  transform: skewX(-20deg);
  left: -60%;
}

/* один прохід бліку одразу після «печатки» — далі вся увага на CTA */
.pill.is-stamped::after { animation: shine-once 0.9s ease-out 0.5s 1 both; }

.pill__text { position: relative; z-index: 1; }

/* ============ меню ============ */
/* ---- верхня панель (Figma 4374:5668): [кнопка розрахунку] [меню] ---- */
.topbar {
  position: fixed;
  z-index: 60;
  /* текст «меню» на тому ж місці, що в макеті першого екрана: 16 px правого відступу підкладки */
  right: calc((54 - 16) * var(--u));
  top: calc(54 * var(--u));
  display: flex;
  align-items: stretch;
}

.menu {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #000;
  color: var(--white-55);
  font-weight: 700;
  font-size: calc(28 * var(--u));
  line-height: 1.1;
  transition: color 0.3s ease, border-radius 0.4s ease;
}

.menu__icon {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  overflow: visible;
}

/* кнопка розрахунку в панелі: чорна підкладка 10 px навколо, виїжджає зліва від меню */
.topbar__cta {
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: calc(10 * var(--u));
  background: #000;
  border-radius: calc(8 * var(--u)) 0 0 calc(8 * var(--u));
  opacity: 0;
  transform: translateX(calc(24 * var(--u)));
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.6s var(--ease-out), clip-path 0.6s var(--ease-out);
}

.topbar.has-cta .topbar__cta { opacity: 1; transform: none; clip-path: inset(0 0 0 0); pointer-events: auto; }
.topbar.has-cta .menu { border-radius: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0; }

.topbar__link { gap: calc(4 * var(--u)); }
.topbar__link .cta__btn { white-space: nowrap; }

.menu__long,
.menu__short {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-out);
}

.menu:hover { color: rgba(255, 255, 255, 0.95); }
.menu:hover .menu__long { transform: scaleX(0.6); }
.menu:hover .menu__short { transform: scaleX(1.65); }
.menu:active { transform: scale(0.96); }

/* ============ низ ============ */
.bottom {
  position: absolute;
  z-index: 6;
  left: calc(64 * var(--u));
  right: calc(54 * var(--u));
  bottom: calc(70 * var(--u));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

.bottom > * { pointer-events: auto; }

.lead {
  width: calc(344 * var(--u));
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1.4;
  color: var(--white-55);
}

/* ---- CTA ---- */
.cta-wrap { position: relative; }

.cta {
  position: relative;
  display: flex;
  gap: calc(4 * var(--u));
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  color: rgba(0, 0, 0, 0.85);
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  transition: transform 0.5s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

/* пульсуюче кільце навколо кнопки — постійно тягне погляд */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(6 * var(--u));
  pointer-events: none;
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(147, 211, 84, 0.9);
  opacity: 0;
  animation: pulse 2.6s ease-out infinite;
  will-change: transform, opacity;
}

.cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12 * var(--u)) calc(24 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--green);
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    transform 0.45s var(--ease-out),
    box-shadow 0.45s ease;
}

/* відблиск, що пробігає по кнопках */
.cta__btn::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -40%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg) translateX(0);
  animation: sweep 3.6s ease-in-out infinite;
  pointer-events: none;
}

.cta__btn--main::after { animation-delay: 0.12s; }

.slot,
.roll {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.1em;
}

.slot__reel { display: flex; flex-direction: column; transition: transform 0s; }
.slot__reel > span { display: block; height: 1.1em; }

.roll > span { display: block; transition: transform 0.5s var(--ease-out); }
.roll::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  transition: transform 0.5s var(--ease-out);
}

@media (hover: hover) {
  .cta:hover .cta__btn { background: var(--green-hi); box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(147, 211, 84, 0.35); }
  .cta:hover .cta__btn--price { transform: translateX(calc(-4 * var(--u))) rotate(-3deg); }
  .cta:hover .roll > span,
  .cta:hover .roll::after { transform: translateY(-100%); }
  .cta:hover .slot__reel { transform: translateY(-75%); transition: transform 0.9s cubic-bezier(0.5, 0, 0.2, 1.25); }
  .cta:hover::before { animation-duration: 1.3s; }
}

.cta:active .cta__btn { transform: scale(0.95); background: #7fbf43; transition-duration: 0.08s; }
.cta:active .cta__btn--price { transform: scale(0.95) rotate(-3deg); }

.cta:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 6px; }

/* частинки «$» при кліку */
.coin {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 12px rgba(147, 211, 84, 0.6);
}

/* ============ мобілка ============ */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .vignette {
    background: radial-gradient(
      ellipse calc(794 * var(--u)) calc(389 * var(--u)) at 50% 50%,
      rgba(0, 0, 0, 0) 0%,
      #000 100%
    );
  }

  .title {
    left: calc(20 * var(--u));
    top: calc(36 * var(--u));
    width: calc(295 * var(--u));
    column-gap: calc(8 * var(--u));
    font-size: calc(32 * var(--u));
  }

  .pill {
    padding: calc(4 * var(--u)) calc(12 * var(--u));
    font-size: calc(24 * var(--u));
  }

  .photo {
    top: calc(134 * var(--u));
    bottom: auto;
    width: calc(296 * var(--u));
    height: calc(417 * var(--u));
    transform: translateX(calc(-50% + 1 * var(--u)));
  }


  .fade {
    top: calc(244 * var(--u));
    height: auto;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 36.83%, #000 100%);
  }

  /* у Figma меню винесене за межі кадру — тут ставлю тільки іконку справа */
  .topbar { right: calc(6 * var(--u)); top: calc(24 * var(--u)); }
  .topbar__cta { display: none; }   /* на телефоні кнопка лишається внизу */
  .menu {
    padding: 0 calc(10 * var(--u)) 0 calc(4 * var(--u));
    color: rgba(255, 255, 255, 0.65);
  }
  .menu__icon { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .menu__text { display: none; }

  .bottom {
    left: calc(20 * var(--u));
    right: calc(20 * var(--u));
    bottom: calc(36 * var(--u));
    flex-direction: column;
    align-items: stretch;
    gap: calc(24 * var(--u));
  }

  .lead {
    width: auto;
    font-size: calc(14 * var(--u));
  }

  .cta { font-size: calc(14 * var(--u)); }
  .cta__btn--price { width: calc(77 * var(--u)); flex: none; }
  .cta__btn--main { flex: 1; }
}

/* ============ поява UI ============ */
.reveal {
  opacity: 0;
  transform: translateY(calc(24 * var(--u)));
  filter: blur(6px);
  transition: opacity 0.9s ease var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s), filter 0.9s ease var(--d, 0s);
}

.is-ready .reveal { opacity: 1; transform: none; filter: none; }

/* фото: з темряви + розфокус */
.photo {
  opacity: 0;
  filter: blur(24px) brightness(0.2);
  transition: opacity 1.4s ease, filter 1.8s var(--ease-out);
}
.photo .photo__inner { --py: calc(60 * var(--u)); --ps: 1.08; }
.is-photo .photo { opacity: 1; filter: none; }
.is-photo .photo .photo__inner { --py: 0px; --ps: 1; transition: transform 2s var(--ease-out); }

/* легкий «удар» по сторінці, коли падає печатка */
.hero.is-shake { animation: shake 0.38s ease-out; }

/* ============ keyframes ============ */
@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(1.06, 1.35); opacity: 0; }
  100% { transform: scale(1.06, 1.35); opacity: 0; }
}

@keyframes sweep {
  0%, 55% { transform: skewX(-20deg) translateX(0); }
  85%, 100% { transform: skewX(-20deg) translateX(700%); }
}

@keyframes shine-once {
  from { left: -60%; }
  to { left: 130%; }
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, 1px); }
  80% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* у верхній панелі без пульсуючого кільця — як у макеті */
.topbar__link::before { content: none; }

/* основна кнопка першого екрана «переїхала» у верхню панель — ховаємо оригінал */
.cta-wrap.is-docked { opacity: 0 !important; pointer-events: none; transition: opacity 0.2s ease !important; }

/* перший екран прокручено — його нескінченні анімації на паузі */
.hero.is-off *, .hero.is-off *::before, .hero.is-off *::after { animation-play-state: paused !important; }

/* мобілка: низ фото (чорний фон знімка) плавно розчиняється, щоб не було чорного прямокутника поверх сітки */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .photo__inner {
    -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 34%, #000 58%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 70% at 50% 34%, #000 58%, transparent 100%);
  }
}

/* мобілка: фото займає весь простір між заголовком і підписом, без порожньої чорної смуги на високих екранах */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .photo {
    top: calc(150 * var(--u));
    bottom: calc(175 * var(--u));
    height: auto;
    width: auto;
    aspect-ratio: 296 / 417;
    max-width: 96vw;
  }
  .fade {
    top: auto;
    bottom: 0;
    height: calc(175 * var(--u) + 120px);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 55%, #000 100%);
  }
}

/* iOS Safari: жодного горизонтального скролу/відскоку.
   overflow на html (а не на body), щоб вікно лишалось скрол-контейнером і sticky працював */
html { overflow-x: hidden; overscroll-behavior-x: none; }
@supports not (overflow: clip) {
  .hero { overflow: hidden; }
  body { overflow-x: hidden; }
}