/* Лендинг, вариант Б: экраны по одному, смена как у заставки перед боем (client/src/game/hook.css).
   Уходящий экран уезжает вверх той же кривой, у нового заголовок поднимается из-под маски, акцентная строка въезжает справа.
   Экраны чередуются: тёмный и белый */
.deck {
  height: 100dvh;
  overflow: hidden;
}
.deck .top {
  position: fixed;
  inset: 0 0 auto;
}
.deck main {
  position: fixed;
  inset: 0;
}
.deck .foot {
  display: none;
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: 88px 0 36px;
  overflow-y: auto;
  visibility: hidden;
  background: var(--bg);
  color: var(--ink);
}
.slide.on,
.slide.leave {
  visibility: visible;
}
.slide.on {
  z-index: 1;
}
.slide.leave,
.slide.drop {
  z-index: 2;
}
.slide.leave {
  animation: deck-out 0.7s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
.slide.drop {
  animation: deck-drop 0.7s cubic-bezier(0.7, 0, 0.2, 1) both;
}
@keyframes deck-out {
  to {
    transform: translateY(-100%);
  }
}
@keyframes deck-drop {
  from {
    transform: translateY(-100%);
  }
}

/* Текст под заголовком — как строка заставки перед боем (.b-hook .line) */
.slide .lead {
  font: 500 clamp(18px, 1.7vw, 26px) / 1.3 var(--f);
  max-width: 40ch;
}
.slide.hero .acts {
  margin-top: 20px;
}

/* Тёмные экраны: тот же оранжевый отсвет, что на первом (.hero::before в site.css), в другом месте у каждого */
.slide#grow,
.slide#where {
  background:
    radial-gradient(60% 55% at var(--gx) var(--gy), oklch(40% 0.14 var(--hue) / 0.35), transparent 70%), var(--bg);
}
.slide#grow {
  --gx: 18%;
  --gy: 78%;
}
.slide#where {
  --gx: 82%;
  --gy: 18%;
}

/* Белый экран: тёмные буквы, оранжевый акцент */
.slide.light {
  --soft: oklch(42% 0.05 var(--hue));
  --rule: oklch(16% 0.06 var(--hue) / 0.14);
  background: oklch(98.5% 0.006 var(--hue));
  color: var(--hero-ink);
}
.slide.light .lead {
  color: var(--hero-ink);
}
.slide.light .panel {
  background: oklch(100% 0 0);
  border-color: var(--rule);
}
.slide.light .btn:not(.pri) {
  background: var(--hero-ink);
  color: var(--ink);
}

.slide h2 {
  font-size: clamp(52px, 7vw, 104px);
  margin-top: 12px;
}
.slide h3 {
  font: 900 italic 22px / 1.1 var(--f);
  letter-spacing: -0.02em;
}
.slide .m {
  display: block;
  overflow: hidden;
  padding: 0 0.08em 0.06em 0;
}
.slide .m > span {
  display: inline-block;
}

/* Появление текста нового экрана: класс .play ставит b.js при каждом показе */
.slide.play .lbl {
  animation: deck-fade 0.4s var(--ease-out) both 0.1s;
}
.slide.play .m > span,
.slide.play .hero-title .line > span {
  animation: deck-rise 0.8s var(--ease-out) both;
  animation-delay: calc(0.15s + var(--k, 0) * 80ms);
}
.slide.play .m.r > span,
.slide.play .hero-title .line.r > span {
  animation-name: deck-from-r;
}
.slide.play .lead,
.slide.play .sub,
.slide.play .acts {
  animation: deck-fade 0.5s var(--ease-out) both 0.5s;
}
.slide.play .prog li,
.slide.play .card {
  animation: deck-fade 0.5s var(--ease-out) both;
  animation-delay: calc(0.6s + var(--k, 0) * 60ms);
}
@keyframes deck-rise {
  from {
    transform: translateY(105%);
  }
}
@keyframes deck-from-r {
  from {
    transform: translateX(40%);
    opacity: 0;
  }
}
@keyframes deck-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Точки экранов справа */
.dots {
  position: fixed;
  right: 22px;
  top: 50%;
  z-index: 20;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
}
.dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}
.dots button.on {
  background: var(--ink);
  transform: scale(1.3);
}

.dots.on-light button {
  border-color: var(--hero-ink);
}
.dots.on-light button.on {
  background: var(--hero-ink);
}

/* Телефон, планшет стоя и узкое окно. Экран, которому не хватает высоты, прокручивается сам (b.js), поэтому выравнивание
   по центру «безопасное»: верх длинного экрана не уезжает за край */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .slide {
    align-content: safe center;
    padding: 80px 0 28px;
  }
  .slide h2 {
    font-size: clamp(38px, 11vw, 56px);
  }
  .slide .lead {
    font-size: 18px;
  }
  .slide .prog {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
  }
  .slide .grid.three {
    margin-top: 20px;
  }
  .dots {
    display: none;
  }
  /* Первый экран: текст сверху, каторжник снизу справа, ноги уходят за край */
  .slide.hero {
    align-content: start;
    padding-top: 92px;
  }
  .slide.hero .hero-title {
    font-size: clamp(34px, 9.4vw, 56px);
  }
  .slide.hero .acts {
    flex-wrap: nowrap;
  }
  .slide.hero .acts .btn {
    flex: 0 1 auto;
    padding: 0 16px;
    font-size: 15px;
  }
  .slide.hero .hero-fig {
    height: min(48%, calc(100% - 425px));
    max-width: none;
    right: -6vw;
  }
}
/* Телефон лёжа: высоты мало, фигура уходит под текст и бледнеет */
@media (max-height: 500px) and (orientation: landscape) {
  .slide {
    align-content: safe center;
    padding: 72px 0 20px;
  }
  .slide h2 {
    font-size: clamp(32px, 6vw, 48px);
  }
  .slide .prog {
    margin-top: 18px;
    gap: 14px 32px;
  }
  .dots {
    display: none;
  }
  .slide.hero {
    align-content: start;
    padding-top: 76px;
  }
  .slide.hero .hero-text {
    gap: 12px;
  }
  .slide.hero .hero-title {
    font-size: clamp(30px, 5.4vw, 48px);
  }
  .slide.hero .lead {
    font-size: 16px;
  }
  .slide.hero .acts {
    margin-top: 6px;
  }
  .slide.hero .hero-fig {
    height: calc(100% - 64px);
    max-width: 46vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide.leave,
  .slide.drop {
    animation: none;
  }
  .slide.play .m > span,
  .slide.play .hero-title .line > span,
  .slide.play .m.r > span,
  .slide.play .hero-title .line.r > span,
  .slide.play .prog li,
  .slide.play .card {
    animation-name: fade;
  }
}