/* =================================================================
   ANIMATIONS.CSS — Keyframes and Animation Utilities
   =================================================================
   This file contains all animation keyframes, scroll-reveal classes,
   page transition CSS, and motion-related utilities.
   ================================================================= */

/* =================================================================
   1. SCROLL REVEAL — Intersection Observer driven
   ================================================================= */

/* Base: hidden state before reveal */
.reveal {
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* Revealed state (class added by JS) */
.reveal.revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1) !important;
}

/* Variants: starting positions */
.reveal-up {
  transform: translateY(30px);
}

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

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

.reveal-scale {
  transform: scale(0.95);
}

/* Stagger delay utility (set via inline style or data attribute) */
/* Usage: style="--reveal-delay: 100ms" or via JS from data-delay="100" */


/* =================================================================
   2. HERO ANIMATIONS
   ================================================================= */

/* Animated gradient background (slow-cycling) */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Typing cursor blink */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Floating decorative elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(2deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

/* Hero content fade-in on page load */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-fade-in {
  animation: heroFadeIn 0.8s ease forwards;
}

/* Staggered hero elements */
.hero-fade-in--delay-1 {
  animation-delay: 0.2s;
  opacity: 0;
}

.hero-fade-in--delay-2 {
  animation-delay: 0.4s;
  opacity: 0;
}

.hero-fade-in--delay-3 {
  animation-delay: 0.6s;
  opacity: 0;
}


/* =================================================================
   3. PAGE TRANSITIONS
   ================================================================= */

/* View Transitions API (Chrome 111+) */
::view-transition-old(root) {
  animation: fadeOut 0.2s ease forwards;
}

::view-transition-new(root) {
  animation: fadeIn 0.3s ease forwards;
}

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

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

/* HTMX swap transition (fallback for non-View Transitions browsers) */
.htmx-swapping {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.htmx-settling {
  opacity: 1;
  transition: opacity 0.25s ease;
}


/* =================================================================
   4. COUNTER ANIMATION (count-up numbers)
   ================================================================= */

/* The actual counting is done via JS.
   This class triggers the visual state change. */
.count-up {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.count-up--active {
  /* Applied by JS when counter starts */
}


/* =================================================================
   5. PARALLAX LAYERS
   ================================================================= */

/* Applied to background elements for subtle parallax effect.
   Movement is handled by JS via transform: translateY(). */
.parallax-slow {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-medium {
  will-change: transform;
  transition: transform 0.1s linear;
}


/* =================================================================
   6. CHECKMARK DRAW ANIMATION (form success)
   ================================================================= */
@keyframes drawCheck {
  0% {
    stroke-dashoffset: 50;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: checkCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes checkCircle {
  0% {
    stroke-dashoffset: 166;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Success container */
.success-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg) 0;
  text-align: center;
}

.success-animation svg {
  width: 80px;
  height: 80px;
  margin-bottom: var(--spacing-sm);
}


/* =================================================================
   7. LOADING SPINNER (form submission)
   ================================================================= */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

.btn--loading {
  pointer-events: none;
  opacity: 0.8;
}

.btn--loading .btn__text {
  visibility: hidden;
}

.btn--loading .spinner {
  position: absolute;
}


/* =================================================================
   8. SHAKE ANIMATION (form errors)
   ================================================================= */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

.shake {
  animation: shake 0.5s ease;
}


/* =================================================================
   9. PULSE ANIMATION (attention indicators)
   ================================================================= */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}


/* =================================================================
   10. REDUCED MOTION — Accessibility
   ================================================================= */
@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;
  }

  /* Disable all scroll reveal animations */
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Disable hero animations */
  .hero--animated-gradient {
    animation: none !important;
    background-size: 100% 100% !important;
  }

  .typing-cursor {
    animation: none !important;
    display: none;
  }

  .hero__float-element,
  .hero__decoration {
    animation: none !important;
  }

  /* Disable page transitions */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  /* Disable all hover transitions */
  .card,
  .btn,
  .nav-links a,
  .social-links a {
    transition: none !important;
  }

  /* Disable parallax */
  .parallax-slow,
  .parallax-medium {
    transform: none !important;
    will-change: auto;
  }

  /* Disable checkmark animation */
  .checkmark-circle,
  .checkmark-check {
    animation: none !important;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  /* Disable error page animations */
  .rolling-pin,
  .crumb-1, .crumb-2, .crumb-3,
  .timer-hand,
  .heat-wave-1, .heat-wave-2, .heat-wave-3 {
    animation: none !important;
  }
}