/* ═══════════════════════════════════════════════════════
   ASPYN AI — ANIMATIONS.CSS  |  All keyframes & effects
   ═══════════════════════════════════════════════════════ */

/* ── CORE KEYFRAMES ── */
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }

@keyframes float {
  0%,100% { transform:translateY(0px); }
  50%      { transform:translateY(-12px); }
}
@keyframes floatSlow {
  0%,100% { transform:translateY(0px) rotate(0deg); }
  50%      { transform:translateY(-18px) rotate(2deg); }
}
@keyframes pulse {
  0%,100% { transform:scale(1); opacity:1; }
  50%      { transform:scale(1.08); opacity:.7; }
}
@keyframes pulse-ring {
  0%   { transform:scale(.8); opacity:.8; }
  100% { transform:scale(2.2); opacity:0; }
}
@keyframes spin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes spinSlow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes blob {
  0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; }
  33%      { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; }
  66%      { border-radius:50% 60% 30% 60%/30% 50% 70% 40%; }
}
@keyframes gradientShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@keyframes typing {
  from { width:0; }
  to   { width:100%; }
}
@keyframes blink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes ripple {
  0%   { transform:scale(0); opacity:.6; }
  100% { transform:scale(4); opacity:0; }
}
@keyframes draw {
  to { stroke-dashoffset:0; }
}
@keyframes bounce {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
@keyframes scanline {
  0%   { top:-8%; }
  100% { top:108%; }
}
@keyframes channelCycle {
  0%,18%   { opacity:1; transform:translateY(0) scale(1); }
  22%,100% { opacity:0; transform:translateY(-20px) scale(.96); }
}
@keyframes tokenPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(240,52,108,.4); }
  50%      { box-shadow:0 0 0 12px rgba(240,52,108,0); }
}

/* ── HERO BG BLOBS ── */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: blob 12s ease-in-out infinite;
}
.hero-blob-1 {
  width: 500px; height: 500px;
  background: rgba(240,52,108,.12);
  top: -100px; right: -100px;
  animation-delay: 0s;
}
.hero-blob-2 {
  width: 400px; height: 400px;
  background: rgba(255,107,53,.09);
  bottom: -50px; right: 200px;
  animation-delay: -4s;
}
.hero-blob-3 {
  width: 300px; height: 300px;
  background: rgba(139,92,246,.06);
  top: 200px; left: -80px;
  animation-delay: -8s;
}

/* ── FLOATING ELEMENTS ── */
.float { animation:float 4s ease-in-out infinite; }
.float-slow { animation:floatSlow 6s ease-in-out infinite; }
.float-delay-1 { animation-delay:.8s; }
.float-delay-2 { animation-delay:1.6s; }

/* ── PULSE RINGS ── */
.pulse-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pulse-ring {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(240,52,108,.4);
  animation: pulse-ring 2.5s ease-out infinite;
}
.pulse-ring:nth-child(2) { animation-delay:.8s; }
.pulse-ring:nth-child(3) { animation-delay:1.6s; }

/* ── SHIMMER LOADING ── */
.shimmer {
  background: linear-gradient(90deg, var(--bg) 25%, rgba(255,255,255,.6) 50%, var(--bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── GRADIENT ANIMATED ── */
.gradient-animated {
  background: linear-gradient(270deg,#F0346C,#FF6B35,#FF9B7A,#F0346C);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

/* ── TYPEWRITER ── */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 2s steps(30,end) forwards;
}
.cursor-blink { animation: blink 1s step-end infinite; }

/* ── CHANNEL ICONS ANIMATION ── */
.channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  transition: all .3s ease;
}

/* ── PARTICLE DOTS ── */
@keyframes particleDrift {
  0%   { transform:translate(0,0) scale(1); opacity:.6; }
  33%  { transform:translate(var(--dx1),var(--dy1)) scale(1.1); opacity:.4; }
  66%  { transform:translate(var(--dx2),var(--dy2)) scale(.9); opacity:.7; }
  100% { transform:translate(0,0) scale(1); opacity:.6; }
}
.particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gradient);
  animation: particleDrift 8s ease-in-out infinite;
}

/* ── DATA FLOW ANIMATION ── */
@keyframes dataFlow {
  0%   { stroke-dashoffset:300; opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { stroke-dashoffset:0; opacity:0; }
}
.data-flow-line {
  stroke-dasharray: 300;
  animation: dataFlow 2s ease-in-out infinite;
}

/* ── TOKEN ANIMATION ── */
@keyframes tokenReveal {
  0%   { opacity:0; transform:scale(.8) translateY(4px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
.token-pill-anim {
  animation: tokenReveal .4s ease forwards;
}

/* ── NETWORK CONNECTIONS ── */
@keyframes flowDot {
  0%   { offset-distance:0%;   opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { offset-distance:100%; opacity:0; }
}
.flow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink);
  position: absolute;
  animation: flowDot 2s linear infinite;
}

/* ── HERO CHANNEL SWITCHER ── */
.channel-msg {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.channel-msg.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

/* ── STATS COUNTER ── */
@keyframes countUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.stat-number { animation:countUp .6s ease forwards; }

/* ── SCAN EFFECT ── */
.scan-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(transparent, rgba(240,52,108,.2), transparent);
  animation: scanline 3s linear infinite;
  pointer-events: none;
}

/* ── SECURITY FLOW ANIM ── */
@keyframes securityPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(240,52,108,.3); }
  50%      { box-shadow:0 0 0 16px rgba(240,52,108,0); }
}
@keyframes tokenTravel {
  0%   { left:-10px; opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { left:calc(100% + 10px); opacity:0; }
}
.security-pulse { animation:securityPulse 2s ease infinite; }
.token-travel {
  position: absolute;
  animation: tokenTravel 2.5s ease-in-out infinite;
}

/* ── PAGE TRANSITION ── */
.page-enter {
  animation: fadeIn .4s ease forwards;
}

/* ── GRADIENT BG SECTION ── */
.section-gradient-bg {
  background: radial-gradient(ellipse at 20% 50%, rgba(240,52,108,.06) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(255,107,53,.06) 0%, transparent 60%);
}

/* ── RESPONSIVE: reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}