/* ============================================================
   DevFolio Pro — animations.css
   Keyframes, reveal-on-scroll states, and reduced-motion rules.
   Every animation here is subtle by design.
   ============================================================ */

/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */
@keyframes boot-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

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

@keyframes status-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

@keyframes glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, 30px) scale(1.08); }
}

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

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

@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(7px); }
}

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

@keyframes modal-in {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

@keyframes glitch {
  0%, 86%, 100% { transform: translate(0, 0) rotate(0); opacity: 1; }
  88%           { transform: translate(-3px, 2px) rotate(-4deg); opacity: 0.85; }
  92%           { transform: translate(3px, -2px) rotate(3deg); opacity: 0.9; }
}

/* ------------------------------------------------------------
   REVEAL ON SCROLL
   Elements with [data-reveal] get .reveal (hidden) and .is-visible
   (shown) — see script.js. Stagger: [data-reveal][style="--stagger:n"].
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--stagger, 0) * 60ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   GRADIENT ANIMATIONS
   ------------------------------------------------------------ */
/* Slow hue shift for hero title & section titles (very subtle) */
.hero__title, .section__title {
  background-size: 200% 200%;
  animation: gradient-shift 9s ease infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ------------------------------------------------------------
   REDUCED MOTION — disable everything non-essential.
   ------------------------------------------------------------ */
@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;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .boot { animation: none; }

  html { scroll-behavior: auto; }
}