/* ==========================================================================
   Animations & Keyframes
   ========================================================================== */

/* ---------- Reveal Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--left {
  opacity: 0;
  transform: translateX(-40px);
}
.reveal--left.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal--right {
  opacity: 0;
  transform: translateX(40px);
}
.reveal--right.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal--scale {
  opacity: 0;
  transform: scale(0.92);
}
.reveal--scale.reveal--visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for children */
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 100ms; }
.stagger > *:nth-child(3) { transition-delay: 200ms; }
.stagger > *:nth-child(4) { transition-delay: 300ms; }
.stagger > *:nth-child(5) { transition-delay: 400ms; }
.stagger > *:nth-child(6) { transition-delay: 500ms; }
.stagger > *:nth-child(7) { transition-delay: 600ms; }
.stagger > *:nth-child(8) { transition-delay: 700ms; }

/* ---------- Float Animation ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.float { animation: float 6s ease-in-out infinite; }
.float--slow { animation-duration: 8s; }
.float--fast { animation-duration: 4s; }

/* ---------- Glow Pulse ---------- */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
  50% { box-shadow: 0 0 40px var(--accent-glow), 0 0 60px var(--accent-glow); }
}
.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* ---------- Gradient Shift ---------- */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* ---------- Rotate ---------- */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotate-slow { animation: rotate-slow 20s linear infinite; }

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

/* ---------- Slide Up ---------- */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scale In ---------- */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- 3D Card Tilt ---------- */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.tilt-card__inner {
  transform: translateZ(20px);
}

/* ---------- Line Draw ---------- */
@keyframes line-draw {
  from { width: 0; }
  to { width: 60px; }
}
.line-draw {
  overflow: hidden;
  animation: line-draw 0.8s ease forwards;
}

/* ---------- Typing Effect (for hero headline) ---------- */
@keyframes blink-caret {
  0%, 100% { border-color: var(--accent); }
  50% { border-color: transparent; }
}
.typing-caret {
  border-right: 2px solid var(--accent);
  animation: blink-caret 1s step-end infinite;
  padding-right: 4px;
}

/* ---------- Particle Drift (background decoration) ---------- */
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -15px) rotate(90deg); }
  50% { transform: translate(-5px, -30px) rotate(180deg); }
  75% { transform: translate(-15px, -15px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* ---------- Shimmer effect for loading ---------- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, transparent, rgba(240,240,245,0.05), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s ease infinite;
}

/* ---------- Smooth Section Transitions ---------- */
.section-transition {
  transition: background-color 0.6s ease;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}