/**
 * animations.css - Motion Effects
 *
 * Subtle animations for visual polish.
 * Respects prefers-reduced-motion preference.
 * GPU-accelerated transforms only for performance.
 *
 * Principles:
 * - Subtle, not distracting
 * - GPU-accelerated (transform, opacity only)
 * - All animations disable with prefers-reduced-motion
 */

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

/* Subtle glow pulse for hero heading */
@keyframes glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 8px var(--color-primary-glow),
      0 0 16px var(--color-primary-glow);
  }
  50% {
    text-shadow:
      0 0 12px var(--color-primary-glow),
      0 0 24px var(--color-primary-glow),
      0 0 36px var(--color-primary-glow);
  }
}

/* Fade in from below */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* ==========================================================================
   HERO ANIMATIONS
   ========================================================================== */

/* Staggered fade-in for hero content */
.hero-quote {
  opacity: 0;
  animation: fade-in-up 0.8s ease-out forwards;
  animation-delay: 0.1s;
}

.hero-heading {
  opacity: 0;
  animation:
    fade-in-up 0.8s ease-out forwards,
    glow-pulse 4s ease-in-out 1s infinite;
  animation-delay: 0.3s;
}

.hero-tagline {
  opacity: 0;
  animation: fade-in-up 0.8s ease-out forwards;
  animation-delay: 0.5s;
}

.hero-cta {
  opacity: 0;
  animation: fade-in-up 0.8s ease-out forwards;
  animation-delay: 0.7s;
}

/* ==========================================================================
   SCROLL-TRIGGERED FADE-INS (Optional)
   Using CSS-only approach with scroll-behavior
   ========================================================================== */

/* Content blocks fade in when scrolled into view */
/* Using :target and intersection observer alternative */
.content-block,
.skill-card,
.pipeline-stage,
.product-item,
.loop-step {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

/* Visible state - applied via IntersectionObserver in JS */
.content-block.visible,
.skill-card.visible,
.pipeline-stage.visible,
.product-item.visible,
.loop-step.visible,
/* Fallback: show immediately if JS disabled */
.no-js .content-block,
.no-js .skill-card,
.no-js .pipeline-stage,
.no-js .product-item,
.no-js .loop-step {
  opacity: 1;
  transform: translateY(0);
}

/* Alternative: Use scroll-timeline (modern browsers) */
@supports (animation-timeline: scroll()) {
  .content-block,
  .skill-card,
  .pipeline-stage,
  .product-item,
  .loop-step {
    opacity: 1;
    transform: translateY(0);
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

/* ==========================================================================
   INTERACTIVE ELEMENT TRANSITIONS
   ========================================================================== */

/* Buttons scale slightly on active */
.btn {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn:active {
  transform: scale(0.98);
}

/* Links underline animation */
.footer-nav a {
  position: relative;
}

.footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width var(--transition-fast);
}

.footer-nav a:hover::after,
.footer-nav a:focus::after {
  width: 100%;
}

/* ==========================================================================
   SIGNATURE EQUATION ANIMATION
   ========================================================================== */

/* Subtle pulse on the heart+emergence=rainbow equation */
.signature-equation {
  animation: float 6s ease-in-out infinite;
}

/* ==========================================================================
   DIAGRAM HOVER EFFECT
   ========================================================================== */

.architecture-diagram {
  transition:
    transform var(--transition-base),
    filter var(--transition-base);
}

.diagram-container:hover .architecture-diagram {
  transform: scale(1.02);
}

/* ==========================================================================
   NAV LINK HOVER INDICATOR
   ========================================================================== */

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-fast), left var(--transition-fast);
}

.nav-link:hover::after,
.nav-link:focus::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
  left: 0;
}

/* ==========================================================================
   REDUCED MOTION PREFERENCE
   Disable all animations for users who prefer reduced motion
   ========================================================================== */

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

  /* Reset opacity for elements that animate in */
  .hero-quote,
  .hero-heading,
  .hero-tagline,
  .hero-cta,
  .content-block,
  .skill-card,
  .pipeline-stage,
  .product-item,
  .loop-step {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Remove scroll-linked animations */
  @supports (animation-timeline: scroll()) {
    .content-block,
    .skill-card,
    .pipeline-stage,
    .product-item,
    .loop-step {
      animation: none;
    }
  }
}

/* ==========================================================================
   NO-JS FALLBACK
   Show content immediately if JavaScript is disabled
   ========================================================================== */

.no-js .hero-quote,
.no-js .hero-heading,
.no-js .hero-tagline,
.no-js .hero-cta,
.no-js .content-block,
.no-js .skill-card,
.no-js .pipeline-stage,
.no-js .product-item,
.no-js .loop-step {
  opacity: 1;
  transform: none;
  animation: none;
}