/* Появление при прокрутке */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* выделенные фразы — с отдельной паузой */
[data-reveal][data-pause] { transition-duration: 1.2s; transition-delay: 0.35s; }

/* Раскрытие текста, привязанное к прокрутке. Место под полный текст зарезервировано:
   слова лишь меняют прозрачность, поэтому строки и следующие блоки не сдвигаются. */
.type-w { opacity: 0.08; transition: opacity 0.18s linear; }
.type-w.is-on { opacity: 1; }
/* закреплённый блок статьи: стоит у верха экрана, пока раскрываются его слова */
.pin { position: relative; }
.pin__sticky { position: sticky; }
.pin__sticky--off { position: static; }

/* Кадры манги: мягкое проявление и небольшое смещение, реплики — чуть позже */
.panel-frame[data-panel] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
}
.panel-frame[data-panel] .bubble {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transition-delay: calc(var(--delay, 0s) + 0.35s + var(--bdelay, 0s));
}
.panel-frame[data-panel].is-visible { opacity: 1; transform: none; }
.panel-frame[data-panel].is-visible .bubble { opacity: 1; transform: none; }
.manga--seen .panel-frame[data-panel],
.manga--seen .panel-frame[data-panel] .bubble { transition-duration: 0.25s; transition-delay: 0s; }

/* Билет: несколько быстрых пролётов справа налево (анимация в js/modules/ticket.js), затем плавная остановка */
.ticket-block { overflow-x: clip; }
.ticket.is-spinning .ticket__spin { will-change: transform, filter; }

/* Смена этапа */
.stage-enter { animation: stage-in 0.6s var(--ease) both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.story { transition: opacity 0.35s var(--ease); }
.story.is-switching { opacity: 0; }
.story__hint { transition: opacity 0.35s var(--ease); }
.story__hint.is-updating { opacity: 0; }

.review-card.is-flash { animation: card-flash 1.2s var(--ease); }
@keyframes card-flash { 0%, 100% { filter: none; } 30% { filter: drop-shadow(0 0 0.5rem var(--color-red-a45)); } }

/* Уменьшенное движение: текст сразу, без вращения и сложных перемещений */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  [data-reveal], .panel-frame[data-panel], .panel-frame[data-panel] .bubble { opacity: 1; transform: none; transition: none; }
  .type-w { opacity: 1; transition: none; }
  .card, .card.is-out-left, .card.is-out-right, .card.is-in { transform: none !important; transition: opacity 0.2s linear; }
  .stage-enter { animation: none; }
  .flip-card__inner { transition: none; }
  .flip-card__btn[aria-pressed='true'] .flip-card__inner { transform: none; }
  .flip-card__btn[aria-pressed='true'] .flip-card__face--front { visibility: hidden; }
  .flip-card__face--back { transform: none; visibility: hidden; }
  .flip-card__btn[aria-pressed='true'] .flip-card__face--back { visibility: visible; }
  .cover__sticky { opacity: 1 !important; }
}