/**
 * FKI Traders Sdn. Bhd. - Animations CSS
 * Keyframes, Scroll Reveals, Ken Burns Zoom, Shimmer, Reduced-Motion Rules
 */

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes kenBurns {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes drawWidth {
  from { width: 0; }
  to { width: 60px; }
}

@keyframes shimmerLight {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ==========================================================================
   Hero & Background Animations
   ========================================================================== */
.hero-kenburns {
  animation: kenBurns 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* Skeleton / Shimmer state */
.skeleton-shimmer {
  background: linear-gradient(90deg, var(--bg-1) 25%, var(--bg-2) 50%, var(--bg-1) 75%);
  background-size: 200% 100%;
  animation: shimmerLight 1.6s infinite ease-in-out;
}

/* ==========================================================================
   IntersectionObserver Reveal Classes
   ========================================================================== */
.reveal {
  opacity: 0;
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
  will-change: opacity, transform;
}

.reveal-up {
  opacity: 0;
  transform: translateY(28px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
}

.reveal.is-revealed,
.reveal-up.is-revealed,
.reveal-left.is-revealed,
.reveal-right.is-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

/* Stagger delays for children */
.stagger-items > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-items > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-items > *:nth-child(3) { transition-delay: 0.19s; }
.stagger-items > *:nth-child(4) { transition-delay: 0.26s; }
.stagger-items > *:nth-child(5) { transition-delay: 0.33s; }
.stagger-items > *:nth-child(6) { transition-delay: 0.40s; }
.stagger-items > *:nth-child(7) { transition-delay: 0.47s; }

/* Signature Divider draw effect */
.signature-divider .signature-divider__line {
  transition: width 0.7s var(--ease-smooth);
}

.signature-divider.reveal .signature-divider__line {
  width: 0;
}

.signature-divider.reveal.is-revealed .signature-divider__line {
  width: 60px;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-kenburns {
    animation: none !important;
    transform: none !important;
  }

  .marquee-content {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
  }
}