/* ── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(0, 200, 255, 0.3); }
  50%       { box-shadow: 0 0 28px rgba(0, 200, 255, 0.6); }
}

@keyframes pulse-glow-purple {
  0%, 100% { box-shadow: 0 0 12px rgba(139, 53, 255, 0.3); }
  50%       { box-shadow: 0 0 28px rgba(139, 53, 255, 0.6); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes expand-band {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

@keyframes badge-pop {
  0%   { transform: scale(0.8) translateY(8px); opacity: 0; }
  70%  { transform: scale(1.05) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-15px, 15px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}

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

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

/* ── GSAP reveal base states ───────────────────────────────────────────── */
/* Applied via JS before GSAP animates them in */
.gsap-reveal {
  opacity: 0;
  transform: translateY(40px);
}

.gsap-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.gsap-reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

/* ── Ambient orbs ──────────────────────────────────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orb-drift 20s ease-in-out infinite;
}

.orb--cyan {
  background: radial-gradient(circle, rgba(0,200,255,0.18) 0%, transparent 70%);
  animation-delay: 0s;
}

.orb--purple {
  background: radial-gradient(circle, rgba(139,53,255,0.18) 0%, transparent 70%);
  animation-delay: -7s;
}

.orb--pink {
  background: radial-gradient(circle, rgba(233,30,140,0.12) 0%, transparent 70%);
  animation-delay: -14s;
}

/* ── Animated gradient border ──────────────────────────────────────────── */
.gradient-border {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-brand);
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
  z-index: -1;
}

/* ── Live dot indicator ─────────────────────────────────────────────────── */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 2s ease-in-out infinite;
  display: inline-block;
}

/* ── Floating badge ─────────────────────────────────────────────────────── */
.badge-float {
  animation: float 4s ease-in-out infinite;
}

.badge-float:nth-child(2) {
  animation-delay: -2s;
}