/*
 * ANIMATIONS — css/animations.css
 * CSS keyframes, AOS overrides, GSAP helper classes, hover/micro-animation utilities.
 * Heavy lifting (ScrollTrigger, number counters, parallax) is done in js/main.js.
 */

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

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

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Marquee scroll for logo strip */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

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

/* Gradient shimmer on placeholder boxes */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Glow pulse for hero CTA buttons */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-glow); }
  50%       { box-shadow: 0 0 32px 4px var(--color-primary-glow); }
}

/* Line draw for SVG underlines */
@keyframes lineDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ── Utility animation classes ── */
.animate-fade-in    { animation: fadeIn    var(--duration-slow) var(--ease-out) both; }
.animate-fade-up    { animation: fadeInUp  var(--duration-slow) var(--ease-out) both; }
.animate-fade-down  { animation: fadeInDown var(--duration-slow) var(--ease-out) both; }
.animate-scale-in   { animation: scaleIn   var(--duration-slow) var(--ease-out) both; }
.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-pulse      { animation: pulse 2s ease-in-out infinite; }
.animate-glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }

/* Stagger delays — apply to children inside a stagger-parent */
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.19s; }
.stagger > *:nth-child(4) { animation-delay: 0.26s; }
.stagger > *:nth-child(5) { animation-delay: 0.33s; }
.stagger > *:nth-child(6) { animation-delay: 0.40s; }

/* ── AOS custom overrides ── */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

/* ── GSAP initial hidden state ── */
/* Elements GSAP will animate from — hidden until JS runs */
.gsap-reveal { opacity: 0; transform: translateY(24px); }
.gsap-reveal-left { opacity: 0; transform: translateX(-32px); }
.gsap-reveal-right { opacity: 0; transform: translateX(32px); }
.gsap-scale { opacity: 0; transform: scale(0.9); }

/* ── Logo Marquee ── */
.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: max-content;
  animation: marquee 35s linear infinite;
  padding: var(--space-4) 0;
}
.marquee__track--right {
  animation-name: marquee-right;
}
.marquee--slow .marquee__track { animation-duration: 40s; }
.marquee--fast .marquee__track { animation-duration: 18s; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--duration-normal) var(--ease-out);
  filter: grayscale(100%);
}
.marquee__item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* ── Skeleton / shimmer loading ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-alt) 25%,
    var(--color-bg-surface) 50%,
    var(--color-bg-alt) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ── Hover micro-animations ── */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out);
}
.hover-lift:hover { transform: translateY(-4px); }

.hover-scale {
  transition: transform var(--duration-normal) var(--ease-out);
}
.hover-scale:hover { transform: scale(1.04); }

/* Icon wriggle on parent hover */
.group:hover .group-icon-wriggle {
  animation: float 0.6s ease-in-out;
}

/* Underline sweep (used for nav links) */
.underline-sweep {
  position: relative;
}
.underline-sweep::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}
.underline-sweep:hover::after,
.underline-sweep.active::after { transform: scaleX(1); }

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