@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes float-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes book-sway { 0%, 100% { transform: rotateY(-28deg) rotateX(4deg); } 50% { transform: rotateY(-14deg) rotateX(2deg); } }

.badge__dot { animation: pulse-dot 2.4s ease-in-out infinite; }
.scroll-hint span:first-child { animation: float-hint 2s ease-in-out infinite; }
.book3d { animation: book-sway 9s ease-in-out infinite; }

.progress { will-change: transform; }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 0.1s; }
.js .reveal[data-delay="2"] { transition-delay: 0.2s; }
.js .reveal[data-delay="3"] { transition-delay: 0.3s; }

.btn, .card, .nav__links a, .issue, .faq__icon, .form__input {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.btn--ghost:hover { background: var(--gold-line); color: var(--gold-light); }
.nav__links a:hover { color: var(--gold-light); }
.js .reveal.is-done { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); transition-delay: 0s; }
.topic:hover, .quote:hover, .js .topic.is-visible:hover, .js .quote.is-visible:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-card), var(--shadow-glow); }
.issue:hover { background: var(--violet-soft); }
.faq__q:hover .faq__icon { transform: rotate(90deg); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a { transition: max-height 0.6s var(--ease); }

.toast { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}