/* Анимации витрины (U09 расширит файл). Анимируем только transform/opacity, значения — из tokens.css. */

/* Смена иконки переключателя темы (применяется в components.css) */
@keyframes theme-icon-in {
  from {
    opacity: 0;
    transform: rotate(-60deg) scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle .icon {
    animation: none !important;
  }
}

/* ---------- Reveal-on-scroll ----------
   Скрываем только при включённом JS (класс js ставит theme.js) — без JS всё видно.
   Каскад: --i выставляет app.js, шаг — --stagger. */
html.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* «Наклейки» на карточках один раз «вклеиваются» вместе с карточкой */
html.js .reveal:not(.is-visible) .sticker {
  transform: rotate(calc(var(--tilt, 0deg) * -2)) scale(0.6);
}

html.js .reveal .sticker {
  transition-delay: calc(var(--i, 0) * var(--stagger) + var(--dur-med));
}

/* ---------- Hero: маркер «прочерчивается» один раз ---------- */
@keyframes marker-draw {
  from {
    transform: scaleX(0);
  }
}

html.js .marker::after {
  animation: marker-draw var(--dur-slow) var(--ease-out) var(--dur-med) both;
}

/* ---------- Spotlight на карточках рубрик ----------
   Круг следует за курсором (--mx/--my из app.js), анимируются opacity и transform. */
.rubric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16rem;
  height: 16rem;
  margin: -8rem 0 0 -8rem;
  border-radius: var(--radius-round);
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--mx, 50%), var(--my, 50%));
  transition: opacity var(--dur-med) var(--ease-out);
}

@media (hover: hover) {
  .rubric-card:hover::before {
    opacity: 0.16;
  }
}

.rubric-card > * {
  position: relative;
}

/* ---------- View Transitions (прогрессивное улучшение) ---------- */
@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: site-header;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-med);
    animation-timing-function: var(--ease-out);
  }
}

/* ---------- Reduced motion: всё мгновенно, контент сразу виден ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.is-visible,
  html.js .reveal:not(.is-visible) .sticker {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .marker::after {
    animation: none;
  }

  .rubric-card::before {
    display: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- Статья (U10): абзацы, индикатор чтения, тост ---------- */
/* Абзацы текста появляются без каскада: задержка по индексу сделала бы длинную статью «ленивой» */
.prose .reveal {
  --i: 0;
}

.read-progress__bar {
  transition: transform var(--dur-fast) var(--ease-out);
}

.toast {
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .read-progress__bar,
  .toast {
    transition: none;
  }
}

/* ---------- Квиз под статьёй (G09): итог и ссылка проявляются, как .reveal ---------- */
@keyframes quiz-in {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
  }
}

.quiz__result:not(:empty),
.quiz__more:not([hidden]) {
  animation: quiz-in var(--dur-slow) var(--ease-out) both;
}

.quiz__more:not([hidden]) {
  animation-delay: var(--stagger);
}

@media (prefers-reduced-motion: reduce) {
  .quiz__option::after {
    transition: none;
  }

  .quiz__result:not(:empty),
  .quiz__more:not([hidden]) {
    animation: none;
  }
}