/**
 * ANIMATIONS & TRANSITIONS
 * Keyframe animations and motion effects
 */

/* ═══════════════════════════════════════════════════════════
   BLINK ANIMATION
   Used for: nav-dot, open-dot (breathing effect)
═══════════════════════════════════════════════════════════ */

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ═══════════════════════════════════════════════════════════
   FADE IN
   Used for: page load effects
═══════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════
   SLIDE UP
   Used for: hero content, form sections
═══════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════
   SLIDE IN FROM LEFT
   Used for: hero left content
═══════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════
   SLIDE IN FROM RIGHT
   Used for: hero right panel
═══════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════
   SCALE UP
   Used for: buttons on hover, cards
═══════════════════════════════════════════════════════════ */

@keyframes scaleUp {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════
   PULSE
   Used for: CTA buttons, important elements
═══════════════════════════════════════════════════════════ */

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(62, 189, 90, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(62, 189, 90, 0);
  }
}

/* ═══════════════════════════════════════════════════════════
   BOUNCE
   Used for: success messages
═══════════════════════════════════════════════════════════ */

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ═══════════════════════════════════════════════════════════
   ROTATE
   Used for: loading indicators (future use)
═══════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════
   SMOOTH TRANSITIONS
   Applied globally to interactive elements
═══════════════════════════════════════════════════════════ */

a,
button,
input,
select,
textarea {
  transition: all 0.2s ease;
}

html {
  scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════════════
   HOVER EFFECTS LIBRARY
═══════════════════════════════════════════════════════════ */

.lift-on-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.glow-on-hover:hover {
  box-shadow: 0 0 20px rgba(62, 189, 90, 0.5);
}

.grow-on-hover:hover {
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════
   FOCUS STATES
   Accessibility: visible focus indicators
═══════════════════════════════════════════════════════════ */

button:focus,
a:focus,
input:focus {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   LOADING STATE
═══════════════════════════════════════════════════════════ */

.loading {
  animation: pulse 2s infinite;
}

.spinner {
  animation: rotate 2s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   SUCCESS ANIMATION
═══════════════════════════════════════════════════════════ */

.form-success.visible {
  animation: slideUp 0.4s ease, fadeIn 0.4s ease;
}