/* ============================================================
   DAN&ELATON — Animations & Keyframes
   ============================================================ */

/* Film Grain */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(-2px, 1px); }
  66%       { transform: translate(1px, -1px); }
}

/* Glitch Effects */
@keyframes glitch1 {
  0%, 90%, 100% { transform: translateX(0); opacity: 0; }
  92%           { transform: translateX(-3px); opacity: 0.65; }
  94%           { transform: translateX(3px); opacity: 0.65; }
  96%           { transform: translateX(-1px); opacity: 0.65; }
  98%           { transform: translateX(2px); opacity: 0.65; }
}

@keyframes glitch2 {
  0%, 90%, 100% { transform: translateX(0); opacity: 0; }
  92%           { transform: translateX(3px); opacity: 0.65; }
  94%           { transform: translateX(-3px); opacity: 0.65; }
  96%           { transform: translateX(1px); opacity: 0.65; }
  98%           { transform: translateX(-2px); opacity: 0.65; }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 30px rgba(255,255,255,0.08), 0 0 60px rgba(0,212,255,0.06); }
  50%       { text-shadow: 0 0 40px rgba(255,255,255,0.12), 0 0 80px rgba(124,58,237,0.08); }
}

/* Cursor Blink */
@keyframes blink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Scroll Indicator Bounce */
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* Logo Marquee */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Conic Gradient Rotation (tech cards) */
@keyframes rotateConic {
  100% { transform: rotate(360deg); }
}

/* Fade In Up (general entrance) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In (opacity only) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale In */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Slide In Left */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide In Right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Number Counter pulse */
@keyframes countPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* Gradient shift for gradient text */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle float for hero glow */
@keyframes floatGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50%       { transform: translate(-50%, -52%) scale(1.08); opacity: 0.9; }
}

/* Border gradient animation */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(0,212,255,0.1); }
  50%       { box-shadow: 0 0 20px rgba(0,212,255,0.2), 0 0 40px rgba(124,58,237,0.1); }
}

/* ============================================================
   Hero entrance animations (staggered)
   ============================================================ */

.hero-eyebrow { animation: fadeInUp 0.7s ease 0.2s both; }
.hero-title   { animation: fadeInUp 0.7s ease 0.4s both; }
.hero-rotating-line  { animation: fadeInUp 0.7s ease 0.55s both; }
.hero-description    { animation: fadeInUp 0.7s ease 0.7s both; }
.hero-ctas           { animation: fadeInUp 0.7s ease 0.85s both; }
.scroll-indicator    { animation: fadeIn 0.7s ease 1.1s both; }

/* ============================================================
   Reduced Motion Override
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
