/* ============================================================
   АНИМАЦИИ FORTUNA LUNA
   Принцип: живые, не суетливые. Максимум 0.6s.
   ============================================================ */

/* Отключение для пользователей с настройкой reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ (Intersection Observer) ---- */
.fl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--fl-duration-slow) var(--fl-ease),
    transform var(--fl-duration-slow) var(--fl-ease);
}

.fl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger для дочерних элементов */
.fl-reveal-group > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--fl-duration-slow) var(--fl-ease),
    transform var(--fl-duration-slow) var(--fl-ease);
}

.fl-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0s; }
.fl-reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.fl-reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.fl-reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.fl-reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.fl-reveal-group.is-visible > * { opacity: 1; transform: translateY(0); }

/* ---- ЛОГОТИП: ЛУННОЕ СВЕЧЕНИЕ ---- */
@keyframes fl-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 0px transparent); }
  50%       { filter: drop-shadow(0 0 12px rgba(201, 169, 110, 0.35)); }
}

.fl-logo {
  animation: fl-logo-pulse 4s ease-in-out infinite;
}

/* ---- ФОНОВЫЕ ЧАСТИЦЫ (Canvas / CSS fallback) ---- */
@keyframes fl-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
  33%       { transform: translateY(-12px) rotate(1deg); opacity: 0.5; }
  66%       { transform: translateY(-6px) rotate(-1deg); opacity: 0.4; }
}

.fl-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--fl-gold);
  pointer-events: none;
  animation: fl-float linear infinite;
}

/* ---- SHIMMER НА КАРТОЧКАХ (опционально) ---- */
@keyframes fl-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.fl-skeleton {
  background: linear-gradient(
    90deg,
    var(--fl-bg-surface) 25%,
    rgba(201, 169, 110, 0.05) 50%,
    var(--fl-bg-surface) 75%
  );
  background-size: 200% 100%;
  animation: fl-shimmer 1.8s ease-in-out infinite;
}