/**
 * Scroll animations + keyframes
 *
 * @package lovro-badzim
 */

/* Base state for all animated elements */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in from left */
.animate-fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale X (accent lines) */
.animate-scale-x {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s ease;
}
.animate-scale-x.is-visible {
  transform: scaleX(1);
}

/* Fade in only (no movement) */
.animate-fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.animate-fade-in.is-visible {
  opacity: 1;
}

/* Scale in (for images) */
.animate-scale-in {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Hero word stagger animation */
.hero-word {
  opacity: 0;
  transform: translateY(40px);
  display: inline-block;
  margin-right: 0.3em;
  animation: heroWordIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes heroWordIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero accent line */
.hero-accent-line {
  transform: scaleX(0);
  transform-origin: left;
  animation: revealLine 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1s;
}
@keyframes revealLine {
  to {
    transform: scaleX(1);
  }
}

/* Page header animations */
.page-title-animate {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-subtitle-animate {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
  animation-delay: 0.4s;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.page-line-animate {
  transform: scaleX(0);
  transform-origin: left;
  animation: revealLine 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s;
}

/* Staggered delays */
.animate-delay-1 { transition-delay: 0.06s; }
.animate-delay-2 { transition-delay: 0.12s; }
.animate-delay-3 { transition-delay: 0.18s; }
.animate-delay-4 { transition-delay: 0.24s; }
.animate-delay-5 { transition-delay: 0.3s; }
.animate-delay-6 { transition-delay: 0.36s; }
.animate-delay-7 { transition-delay: 0.42s; }
.animate-delay-8 { transition-delay: 0.48s; }

/* Hero word stagger delays */
.hero-word-0 { animation-delay: 0.15s; }
.hero-word-1 { animation-delay: 0.27s; }
.hero-word-2 { animation-delay: 0.39s; }
.hero-word-3 { animation-delay: 0.51s; }
.hero-word-4 { animation-delay: 0.63s; }

/* Contact items stagger */
.contact-item-0 { animation-delay: 0.1s; }
.contact-item-1 { animation-delay: 0.2s; }
.contact-item-2 { animation-delay: 0.3s; }

/* Accessibility: disable all animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-fade-in-left,
  .animate-scale-x,
  .animate-fade-in,
  .animate-scale-in {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero-word,
  .hero-accent-line,
  .page-title-animate,
  .page-subtitle-animate,
  .page-line-animate {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}