/* ====================================
   Animation Styles
   Keyframes & Scroll-triggered Animations
   ==================================== */

/* ==================
   Keyframe Animations
   ================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes slideUpLarge {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes gentlePulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ==================
   Scroll-triggered Animations
   Applied via Intersection Observer
   ================== */

/* Elements to animate */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-entrance),
              transform var(--duration-slow) var(--ease-entrance);
}

/* Visible state */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations for cards */
.pillar-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-normal) var(--ease-entrance),
              transform var(--duration-normal) var(--ease-entrance),
              border-color var(--duration-normal) var(--ease-smooth),
              background var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.pillar-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay classes for stagger effect */
.pillar-card:nth-child(1) {
  transition-delay: 0ms;
}

.pillar-card:nth-child(2) {
  transition-delay: 100ms;
}

.pillar-card:nth-child(3) {
  transition-delay: 200ms;
}

/* Vision and Closing sections */
.section--vision .section__content,
.section--closing .section__content {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-entrance),
              transform var(--duration-slow) var(--ease-entrance);
}

.section--vision.is-visible .section__content,
.section--closing.is-visible .section__content {
  opacity: 1;
  transform: translateY(0);
}

/* ==================
   Reduced Motion Override
   ================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll,
  .pillar-card,
  .section--vision .section__content,
  .section--closing .section__content {
    opacity: 1;
    transform: none;
  }

  .scroll-indicator__icon {
    animation: none;
  }
}