/* ==========================================================================
   KALISTO — Animations CSS
   GSAP targets, initial states, keyframes, micro-interactions
   All animations are gated behind prefers-reduced-motion check in JS
   ========================================================================== */

/* ==========================================================================
   SCROLL-TRIGGERED INITIAL STATES
   Elements start invisible/offset; GSAP animates them in
   ========================================================================== */

.fade-up {
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
}

.fade-in {
  opacity: 0;
  will-change: opacity;
}

.fade-left {
  opacity: 0;
  transform: translateX(-32px);
  will-change: opacity, transform;
}

.fade-right {
  opacity: 0;
  transform: translateX(32px);
  will-change: opacity, transform;
}

.scale-in {
  opacity: 0;
  transform: scale(0.92);
  will-change: opacity, transform;
}

/* Stagger containers — children animated with delay */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

/* ==========================================================================
   PARALLAX
   ========================================================================== */

.parallax-layer {
  will-change: transform;
}

.hero__bg img {
  will-change: transform;
}

/* ==========================================================================
   COUNTER ANIMATION
   ========================================================================== */

.counter {
  display: inline-block;
  will-change: contents;
}

/* ==========================================================================
   NAV SCROLL TRANSITION
   ========================================================================== */

.site-header {
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* ==========================================================================
   HOVER MICRO-INTERACTIONS
   ========================================================================== */

/* Cards */
.product-card,
.reference-card,
.sector-tile {
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.25s cubic-bezier(0.4,0,0.2,1),
              border-color 0.25s ease;
  will-change: transform;
}

/* CTA buttons */
.btn {
  transition: background 0.2s ease,
              border-color 0.2s ease,
              transform 0.2s ease,
              box-shadow 0.2s ease,
              color 0.2s ease;
  will-change: transform;
}

/* Links with underline effect */
.animated-link {
  position: relative;
  display: inline-block;
}

.animated-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}

.animated-link:hover::after {
  width: 100%;
}

/* ==========================================================================
   HERO ENTRANCE ANIMATION (CSS fallback, runs on load)
   GSAP will override these for richer experience
   ========================================================================== */

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

.hero__eyebrow-animate {
  animation: heroFadeUp 0.8s ease forwards;
  animation-delay: 0.1s;
  opacity: 0;
}

.hero__h1-animate {
  animation: heroFadeUp 0.8s ease forwards;
  animation-delay: 0.25s;
  opacity: 0;
}

.hero__sub-animate {
  animation: heroFadeUp 0.8s ease forwards;
  animation-delay: 0.4s;
  opacity: 0;
}

.hero__cta-animate {
  animation: heroFadeUp 0.8s ease forwards;
  animation-delay: 0.55s;
  opacity: 0;
}

.hero__scroll-animate {
  animation: heroFadeUp 0.8s ease forwards;
  animation-delay: 1s;
  opacity: 0;
}

/* ==========================================================================
   SECTOR TILE HOVER (CSS, no JS needed)
   ========================================================================== */

.sector-tile__bg {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1),
              opacity 0.4s ease;
}

.sector-tile__arrow {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ==========================================================================
   STAT NUMBER PULSE (after counter completes)
   ========================================================================== */

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

.stat--complete .stat__number {
  animation: statPulse 0.4s ease;
}

/* ==========================================================================
   LOADING STATE (form submit)
   ========================================================================== */

.btn--loading {
  position: relative;
  pointer-events: none;
  color: transparent;
}

.btn--loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* ==========================================================================
   FORM SUCCESS STATE
   ========================================================================== */

@keyframes successPop {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10);
  text-align: center;
}

.form-success.visible {
  display: flex;
  animation: successPop 0.5s ease forwards;
}

.form-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(74,222,128,0.15);
  border: 2px solid rgba(74,222,128,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ade80;
}

.form-success__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-dark);
}

.form-success__text {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION — Disable all animations
   ========================================================================== */

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

  /* Restore visibility for elements that start hidden for GSAP */
  .fade-up,
  .fade-in,
  .fade-left,
  .fade-right,
  .scale-in,
  .stagger-children > *,
  .hero__eyebrow-animate,
  .hero__h1-animate,
  .hero__sub-animate,
  .hero__cta-animate,
  .hero__scroll-animate {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__scroll-line {
    animation: none !important;
  }

  .contact-response__dot {
    animation: none !important;
  }

  .sector-tile__bg {
    transition: none !important;
  }
}