/* ========================================
   SCROLL REVEAL
   ======================================== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}

.stagger.active > *:nth-child(1) { transition-delay: 0ms; }
.stagger.active > *:nth-child(2) { transition-delay: calc(var(--stagger-delay) * 1); }
.stagger.active > *:nth-child(3) { transition-delay: calc(var(--stagger-delay) * 2); }
.stagger.active > *:nth-child(4) { transition-delay: calc(var(--stagger-delay) * 3); }
.stagger.active > *:nth-child(5) { transition-delay: calc(var(--stagger-delay) * 4); }
.stagger.active > *:nth-child(6) { transition-delay: calc(var(--stagger-delay) * 5); }
.stagger.active > *:nth-child(7) { transition-delay: calc(var(--stagger-delay) * 6); }
.stagger.active > *:nth-child(8) { transition-delay: calc(var(--stagger-delay) * 7); }
.stagger.active > *:nth-child(9) { transition-delay: calc(var(--stagger-delay) * 8); }
.stagger.active > *:nth-child(10) { transition-delay: calc(var(--stagger-delay) * 9); }

/* ========================================
   FLOATING
   ======================================== */

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

.float {
  animation: float 6s ease-in-out infinite;
}

.float--slow {
  animation: float 8s ease-in-out infinite;
}

.float--fast {
  animation: float 4s ease-in-out infinite;
}

/* ========================================
   PULSE
   ======================================== */

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-green-glow); }
  50% { box-shadow: 0 0 0 12px transparent; }
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-red-glow); }
  50% { box-shadow: 0 0 0 12px transparent; }
}

@keyframes pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-amber-glow); }
  50% { box-shadow: 0 0 0 12px transparent; }
}

.pulse-green { animation: pulse-green 2s ease-in-out infinite; }
.pulse-red { animation: pulse-red 2s ease-in-out infinite; }
.pulse-amber { animation: pulse-amber 2s ease-in-out infinite; }

/* ========================================
   GRADIENT MESH BACKGROUND
   ======================================== */

@keyframes gradient-shift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  animation: gradient-shift 25s ease-in-out infinite;
}

.glow-orb--green {
  background: var(--glow-green);
}

.glow-orb--blue {
  background: var(--glow-blue);
}

.glow-orb--red {
  background: var(--glow-red);
}

.glow-orb--orange {
  background: var(--glow-orange);
}

.glow-orb--teal {
  background: var(--glow-teal);
}

/* ========================================
   DATA FLOW LINE
   ======================================== */

@keyframes dash-flow {
  to { stroke-dashoffset: -40; }
}

.flow-line {
  stroke-dasharray: 8 12;
  animation: dash-flow 1.5s linear infinite;
}

/* ========================================
   COUNTER
   ======================================== */

@keyframes count-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 30px var(--accent-green-glow); }
}

/* ========================================
   TYPING CURSOR
   ======================================== */

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

.typing-cursor {
  color: var(--accent-green);
  font-weight: 400;
  margin-left: 1px;
  animation: blink-cursor 0.8s step-end infinite;
}

.typing-cursor--blink {
  animation: blink-cursor 1s step-end infinite;
}

/* ========================================
   SHAKE (form validation)
   ======================================== */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ========================================
   CARD TILT (3D hover)
   ======================================== */

.tilt-card {
  transition: transform var(--duration-fast) var(--ease-out);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.tilt-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
}

/* ========================================
   CHAT SIM TYPING DOTS
   ======================================== */

@keyframes chat-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* ========================================
   CRT SCANLINE
   ======================================== */

@keyframes scanline-sweep {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ========================================
   SVG PATH DRAWING
   ======================================== */

@keyframes draw-path {
  to { stroke-dashoffset: 0; }
}

/* ========================================
   RADAR PING
   ======================================== */

@keyframes radar-ping {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ========================================
   ORBIT FLOAT (subtle rotation)
   ======================================== */

@keyframes orbit-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  50% { transform: translate(-50%, -50%) rotate(3deg); }
}

/* ========================================
   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;
  }

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

  .stagger > * {
    opacity: 1;
    transform: none;
  }
}