/*
 * Главная страница «Стол → кино».
 * Первый экран — стол Рины (css/desk.css): лампа, пыль, фото игры с запиской и штампом, закладки языков.
 * Сцена закреплена на экране, пока пользователь листает «пролёт» высотой в два экрана: записка уезжает,
 * фото выпрямляется и растёт на весь экран, лампа гаснет, фото превращается в ночную афишу (css/night.css):
 * бирка, название мазком кисти, кнопка «Скачать игру», светлячки. После пролёта — лента кадров,
 * сразу вся информация об игре (css/sections.css) и остальные игры афишами.
 * Движение по прокрутке считает js/home.js; здесь — раскладка слоёв.
 */

.dn {
  background: var(--night);
  color: var(--light);
  overflow-x: hidden;
}

/* ---------- Пролёт ---------- */

.journey {
  position: relative;
  height: 290vh;
  height: calc(100svh + 190vh);
}
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #1A0F09;
}

/* Слои сцены снизу вверх: стол, фото на столе, ночная афиша, шапка и подсказка */
.dn .desk-table {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  padding-block: 6.5rem 4.5rem;
}
.dn .case-list { max-width: 66rem; }
/* Фото и записка — отдельные слои: при полёте видеокарта двигает готовую картинку, а не рисует её заново */
.dn .case__photo,
.dn .case__note { will-change: transform, opacity; }
/* Пока камера летит, фото не реагирует на мышь */
.dn .case.is-moving { pointer-events: none; }
.dn .case.is-moving .case__photo,
.dn .case.is-moving .case__note { transition: none; }

/* То, что целиком закрыто другим слоем, не рисуем вовсе */
.stage.is-night .scene,
.stage.is-night .desk-table,
.stage.is-desk .night-layer { visibility: hidden; }

.night-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.night-layer.is-active { pointer-events: auto; }
.dn .night-layer .feature__stage {
  position: absolute;
  inset: 0;
  min-height: 0;
  display: flex;
}
.dn .night-layer .feature__text { padding-block: 7rem calc(clamp(3rem, 9vh, 5.5rem) + env(safe-area-inset-bottom, 0px)); }

/* Картинка афиши видна сразу, как только слой проявляется; плыть начинает вместе с текстом */
.motion .dn .night-layer .feature__pan img { opacity: 1; animation: none; }
/* Наезд один раз и стоп: бесконечное движение огромной картинки было самой дорогой частью страницы */
.motion .dn .night-layer.is-in .feature__pan img { animation: drift 14s cubic-bezier(.2, .5, .3, 1) forwards; }
/* Светлячками управляет прокрутка */
.motion .dn .night-layer .fireflies { animation: none; }
/* Текст афиши появляется быстрее, чем у афиш ниже: его вызвала прокрутка */
.motion .dn .night-layer.is-in .tag { animation-delay: .05s; }
.motion .dn .night-layer.is-in .feature__title { animation-delay: .25s; }
.motion .dn .night-layer.is-in .feature__genre { animation-delay: .9s; }
.motion .dn .night-layer.is-in .feature__tagline { animation-delay: 1.05s; }
.motion .dn .night-layer.is-in .feature__actions { animation-delay: 1.2s; }
.motion .dn .night-layer.is-in .feature__platforms { animation-delay: 1.35s; }

.dn .top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
}

/* Подсказка «Листайте вниз» */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  margin: 0;
  transform: translateX(-50%);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--light);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.scroll-hint svg { width: 1.5rem; height: 1.5rem; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); }
.motion .scroll-hint { animation: fade-in 1s ease 2.6s backwards; }
.motion .scroll-hint svg { animation: bob 1.8s ease-in-out 3s infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ---------- После пролёта ---------- */

.after {
  position: relative;
  padding-bottom: calc(clamp(3rem, 8vw, 5.5rem) + env(safe-area-inset-bottom, 0px));
  background: var(--night);
}
.after > .strip { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.after > .feature { margin-top: clamp(3rem, 8vw, 6rem); }
/* Отступ под последней кнопкой «Скачать игру» уже даёт сам .after — второй не нужен */
.after > .finale { padding-bottom: 0; }

/* ---------- Узкие экраны ---------- */

@media (max-width: 760px) {
  .dn .desk-table { padding-block: 5.5rem 4rem; }
  /* Афиша на телефоне во весь экран, текст внизу на тёмном */
  .dn .night-layer .feature__stage { display: flex; }
  .dn .night-layer .feature__shot { position: absolute; inset: 0; aspect-ratio: auto; }
  .dn .night-layer .feature__pan img { object-position: 74% 50%; }
  .dn .night-layer .feature__shot::after {
    background:
      linear-gradient(to bottom, rgba(13, 13, 15, .55) 0%, rgba(13, 13, 15, 0) 22%),
      linear-gradient(to top, var(--night) 0%, rgba(13, 13, 15, .9) 32%, rgba(13, 13, 15, .35) 62%, rgba(13, 13, 15, 0) 80%);
  }
  .dn .night-layer .feature__text { margin-top: 0; padding-block: 5rem calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
  .after > .strip { margin-top: 1.5rem; }
}