/* ==========================================================================
   НОВАЯ Я — движение
   Всё построено на transform и opacity: их браузер считает на видеокарте,
   поэтому анимации не дёргаются даже на слабом телефоне.
   ========================================================================== */

/* --- Ключевые кадры ------------------------------------------------------ */
@keyframes spin      { to   { transform:rotate(360deg); } }
@keyframes marquee   { to   { transform:translateX(calc(-50% - 1.75rem)); } }
@keyframes paneIn    { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes riseIn    { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:none; } }
@keyframes fadeUp    { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes pulseRing { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes scrollDot { 0%{ transform:translateY(-100%); opacity:0; }
                       40%{ opacity:1; }
                       100%{ transform:translateY(100%); opacity:0; } }

/* --- Каскад героя при загрузке ------------------------------------------- */
/* Строки заголовка выезжают снизу из-под маски — эйбрау, строки, линия,
   кнопки, печать. Одна оркестрованная сцена, а не набор случайных эффектов. */
.js .hero [data-cascade]{ opacity:0; }
.hero.is-ready [data-cascade]{
  animation:fadeUp .95s var(--ease-out) both;
  animation-delay:calc(var(--d,0) * 1ms);
}
.hero.is-ready .hero__title .line > span{
  animation:riseIn 1.05s var(--ease-out) both;
  animation-delay:calc(var(--d,0) * 1ms);
}
.js .hero .hero__title .line > span{ opacity:0; }
.hero.is-ready .seal{ animation:sealIn 1.4s var(--ease-out) .55s both; }
@keyframes sealIn{ from{ opacity:0; transform:scale(.86) rotate(-14deg); } to{ opacity:1; transform:none; } }

.scroll-hint__line{ position:relative; overflow:hidden; }
.scroll-hint__line::after{
  content:''; position:absolute; inset:0; background:var(--yellow);
  animation:scrollDot 2.4s var(--ease) infinite;
}

/* --- Появление при прокрутке --------------------------------------------- */
/* Элемент ждёт своей очереди и проявляется, когда доходит до экрана.
   --i задаёт сдвиг внутри группы, чтобы карточки выходили по очереди. */
[data-reveal]{ opacity:1; }
.js [data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-y,28px));
  transition:
    opacity   .85s var(--ease-out) calc(var(--i,0) * 90ms),
    transform .85s var(--ease-out) calc(var(--i,0) * 90ms);
  will-change:opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; will-change:auto; }

.js [data-reveal="left"]:not(.is-in) { transform:translateX(-34px); }
.js [data-reveal="right"]:not(.is-in){ transform:translateX(34px); }
.js [data-reveal="scale"]:not(.is-in){ transform:scale(.965); }
.js [data-reveal="fade"]:not(.is-in) { transform:none; }

/* На узких экранах колонки схлопнуты — боковой въезд теряет смысл и,
   пока элемент за экраном, растягивает страницу вбок. Оставляем вертикальный. */
@media (max-width:960px){
  .js [data-reveal="left"]:not(.is-in),
  .js [data-reveal="right"]:not(.is-in){ transform:translateY(28px); }
}

/* Номер главы выезжает и подсвечивается */
[data-reveal] .chapter__num{ transition:-webkit-text-stroke-color .9s var(--ease) .2s; }
[data-reveal].is-in .chapter__num{ -webkit-text-stroke-color:var(--magenta); }

/* Линия-разделитель прочерчивается */
.rule--draw{ transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease-out); }
.rule--draw.is-in{ transform:scaleX(1); }

/* --- Смена языка --------------------------------------------------------- */
[data-i18n]{ transition:opacity .25s var(--ease); }
body.is-switching [data-i18n]{ opacity:.25; }

/* --- Уважение к настройкам пользователя ---------------------------------- */
/* Для части людей движение на экране — причина головокружения и тошноты.
   Здесь мы полностью останавливаем анимации, но контент остаётся на месте. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal], .hero [data-cascade], .hero .hero__title .line > span{
    opacity:1 !important; transform:none !important;
  }
  .rule--draw{ transform:scaleX(1) !important; }
  .seal__ring, .marquee__track{ animation:none !important; }
  .hero__glow{ display:none; }
}