/* ===========================
   ANIMATIONS
   Emil Kowalski philosophy:
   - Custom easing curves
   - Subtle, purposeful motion
   - prefers-reduced-motion respected
   - transform and opacity only
   =========================== */

/* Fade In Up - Primary entrance */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
[data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-animate-stagger].visible > *:nth-child(1) { transition-delay: 0ms; }
[data-animate-stagger].visible > *:nth-child(2) { transition-delay: 60ms; }
[data-animate-stagger].visible > *:nth-child(3) { transition-delay: 120ms; }
[data-animate-stagger].visible > *:nth-child(4) { transition-delay: 180ms; }
[data-animate-stagger].visible > *:nth-child(5) { transition-delay: 240ms; }
[data-animate-stagger].visible > *:nth-child(6) { transition-delay: 300ms; }

[data-animate-stagger].visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide Up */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale In - for modals, lightbox */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Subtle float - for hero elements */
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Line expand - for decorative elements */
@keyframes lineExpand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Scroll Reveal System - Emil Kowalski Style */
.reveal-element {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-element.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Counter Animation */
.counter-complete {
  animation: counterPulse 600ms ease-out;
}

@keyframes counterPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Timeline Animation */
.about-journey-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

.about-journey-item.timeline-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Touch Active State for Value Cards */
.about-value-card.touch-active .about-value-card-inner {
  transform: rotateY(180deg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .reveal-element,
  .about-journey-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-animate-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn-primary,
  .btn-secondary,
  .hero-title span,
  .package-price,
  .experience-number,
  .testimonial-quote,
  .text-gold,
  .section-header .section-label,
  .footer-brand .logo-text span,
  .logo-text span,
  .nav-link,
  .blog-card-category,
  .package-type,
  .experience .section-header .section-label,
  .form-status--sending,
  .gallery-filter-btn,
  .value-icon,
  .contact-info-icon,
  .about-hero-title-line--accent,
  .about-intro-experience,
  .about-stat-icon,
  .about-value-card-inner,
  .about-journey-dot,
  .about-journey-year {
    animation: none !important;
  }
}