/* ==========================================================
   BLOGSTARS — animations.css
   Убраны playful-эффекты, оставлены только строгие scroll-reveal
   ========================================================== */

/* ===== Reveal on scroll — мягкое появление, без излишеств ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.12s; }
.reveal--delay-2 { transition-delay: 0.24s; }
.reveal--delay-3 { transition-delay: 0.36s; }
.reveal--delay-4 { transition-delay: 0.48s; }

/* ===== Fade + slide-left for service detail swap ===== */
@keyframes fadeSlide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== For Brands: fade in при переключении вкладок ===== */
@keyframes fbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Cosmic: twinkle (мягкая пульсация opacity) ===== */
@keyframes cosmicTwinkle {
  0%   { opacity: 0.7; }
  50%  { opacity: 1; }
  100% { opacity: 0.85; }
}

/* ===== Cosmic: shoot (полёт метеора) ===== */
@keyframes cosmicShoot {
  0%   { transform: translateX(0) translateY(0) rotate(20deg); opacity: 0; }
  3%   { opacity: 1; }
  20%  { transform: translateX(calc(100vw + 100px)) translateY(30vh) rotate(20deg); opacity: 0; }
  100% { opacity: 0; }
}

/* ===== Marquee (left scroll) — заготовка под будущее ===== */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================
   prefers-reduced-motion: отключаем всё лишнее
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .timeline--brands .timeline-step,
  .timeline--brands .timeline-step h4,
  .timeline--brands .timeline-step p,
  .timeline--bloggers .timeline-step,
  .timeline--bloggers .timeline-step h4,
  .timeline--bloggers .timeline-step p {
    opacity: 1 !important;
    transform: none !important;
  }
}