/* ================================================
   ANIMATIONS — Keyframes & CSS Animations
   ================================================ */

/* ——— Fade in up with blur (ref style) ——— */
@keyframes fadeInUpBlur {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.animate-in {
  animation: fadeInUpBlur 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.animate-in-delay-1 { animation-delay: 200ms; }
.animate-in-delay-2 { animation-delay: 400ms; }
.animate-in-delay-3 { animation-delay: 600ms; }
.animate-in-delay-4 { animation-delay: 800ms; }

/* ——— Border turn (rotating gradient border) ——— */
@keyframes borderTurn {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes borderTurnWithTranslate {
  0%   { transform: translate(-50%, -50%) rotate(0); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ——— CSS Houdini — beam-angle for conic-gradient rotation ——— */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-beam {
  from { --beam-angle: 0deg; }
  to   { --beam-angle: 360deg; }
}

/* ——— Section divider beam slide ——— */
@keyframes slide-divider-beam {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes slide-divider-beam-vertical {
  0%   { background-position: 0 -200%; }
  100% { background-position: 0 200%; }
}

/* ——— Shine card sweep ——— */
@keyframes shine-card {
  0%   { left: -150%; }
  20%  { left: 150%; }
  100% { left: 150%; }
}

/* ——— Glitch hover (CTA button) ——— */
@keyframes glitchHover {
  0%   { clip-path: inset(0 0 0 0); }
  20%  { clip-path: inset(10% 0 80% 0); }
  40%  { clip-path: inset(40% 0 10% 0); }
  60%  { clip-path: inset(80% 0 5% 0); }
  80%  { clip-path: inset(15% 0 60% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* ——— Aura spin (nav CTA) ——— */
@keyframes aura-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ——— Beam drop ——— */
@keyframes beam-drop {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(500%); }
}

.animate-beam {
  animation: beam-drop 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ——— Speed streak pass ——— */
@keyframes streakPass {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translateX(200vw); opacity: 0; }
}

/* ——— Pulse down (scroll indicator) ——— */
@keyframes pulseDown {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;   transform: translateX(-50%) translateY(8px); }
}

/* ——— CTA pulse glow ——— */
@keyframes ctaPulse {
  0%, 100% { opacity: 0;    transform: scale(1); }
  50%      { opacity: 0.15; transform: scale(1.05); }
}

/* ——— Glow pulse ——— */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(43, 107, 255, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(43, 107, 255, 0.6); }
}

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

/* ——— Particle flow ——— */
@keyframes particleFlow {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ——— Pulse glow vibrant (dot indicator) ——— */
@keyframes pulse-glow-vibrant {
  0%, 100% {
    opacity: 0.8;
    transform: scale(0.9);
    box-shadow: 0 0 8px rgba(43, 107, 255, 0.4);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(43, 107, 255, 0.8), 0 0 25px rgba(0, 212, 255, 0.6);
  }
}

/* ——— Scroll down arrow ——— */
@keyframes scroll-down {
  0%   { transform: translateY(0);    opacity: 0.5; }
  50%  { transform: translateY(10px); opacity: 1; }
  100% { transform: translateY(0);    opacity: 0.5; }
}

/* ——— Fade in up ——— */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ——— Fade in ——— */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ——— Rotate slow ——— */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ——— Ripple click ——— */
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

.btn-cta .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

/* ——— Reduced motion ——— */
@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;
  }

  .speed-streak,
  .footer-speed-lines span {
    display: none !important;
  }

  .hero__title .word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .highlight-text::after {
    clip-path: inset(0 0% 0 0) !important;
  }

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

  .tech-item {
    opacity: 1 !important;
    transform: none !important;
  }
}