/* ==========================================================================
   Движение. Анимируем только transform и opacity — остальное дёргает вёрстку.
   Любое движение здесь что-то объясняет: связь, направление, смену состояния.
   ========================================================================== */

/* --- Появление при скролле -------------------------------------------------- */
[data-js] [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-js] [data-reveal].is-in { opacity: 1; transform: none; }

/* --- Пульс текущего урока на карте ------------------------------------------- */
@keyframes pulse-node {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.55); opacity: 0; }
}
.map-node__pulse {
  animation: pulse-node 2.4s var(--ease) infinite;
  transform-origin: center;
}

/* --- Плавание слоёв героя ----------------------------------------------------- */
@keyframes float-slab {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}

/* --- Салют при завершении модуля (чистый CSS) ---------------------------------- */
@keyframes confetti-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), 96vh, 0) rotate(var(--spin, 720deg)); opacity: 0; }
}
.confetti { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.confetti__bit {
  position: absolute;
  top: 0;
  width: 9px; height: 14px;
  border-radius: 2px;
  animation: confetti-fall 2.4s var(--ease-in) forwards;
  animation-delay: var(--delay, 0ms);
}

/* --- Переворот значка на экране «модуль пройден» -------------------------------- */
@keyframes reward-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* --- Подсветка «прожектором» под курсором -------------------------------------- */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: "";
  position: absolute; inset: -1px;
  background: radial-gradient(14rem 14rem at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 65%);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
  pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }

/* --- Мигание успеха у кнопки ------------------------------------------------------ */
@keyframes pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.is-popping { animation: pop var(--base) var(--ease); }

/* --- Переходы между страницами (прогрессивное улучшение) ---------------------------- */
@view-transition { navigation: auto; }

/* ==========================================================================
   Спокойный режим. Системная настройка и ручной переключатель дают
   одинаковый результат: движение выключено, интерфейс остаётся рабочим.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

[data-motion="calm"] *,
[data-motion="calm"] *::before,
[data-motion="calm"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

[data-motion="calm"] [data-reveal] { opacity: 1 !important; transform: none !important; }
[data-motion="calm"] .hero-stack { transform: none !important; }
[data-motion="calm"] .hero-stack__layer { transform: var(--calm-transform, none) !important; }

/* Спокойный режим: экран награды остаётся, движение из него уходит.
   Значок замирает лицевой стороной — переворот здесь украшение, а не смысл. */
[data-motion="calm"] .reward__badge { transform: none !important; }
[data-motion="calm"] .reward__inner { animation: none !important; }
[data-motion="calm"] .confetti { display: none !important; }