/* ═══════════════════════════════════════════════════════════
   SWINGERSPHERE — ANIMATIONS
   Keyframes · Transitions · Micro-interactions
═══════════════════════════════════════════════════════════ */

/* ── ENTRANCE ANIMATIONS ────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up-small {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.5); }
  75%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── COPPER GLOW PULSE ──────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(196, 129, 58, 0.25),
                0 0 40px rgba(196, 129, 58, 0.10);
  }
  50% {
    box-shadow: 0 0 40px rgba(196, 129, 58, 0.45),
                0 0 80px rgba(196, 129, 58, 0.20);
  }
}

@keyframes pulse-ring {
  0%, 100% {
    box-shadow: var(--shadow-copper),
                0 0 0 0 rgba(196, 129, 58, 0.4);
  }
  50% {
    box-shadow: var(--shadow-copper),
                0 0 0 12px rgba(196, 129, 58, 0);
  }
}

@keyframes fab-pulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(196,129,58,0.45), 0 0 0 0 rgba(196,129,58,0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(196,129,58,0.45), 0 0 0 10px rgba(196,129,58,0);
  }
}

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

/* ── SKELETON SHIMMER ───────────────────────────────────── */
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── ONLINE PULSE ───────────────────────────────────────── */
@keyframes pulse-online {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--verified); }
  50%       { opacity: 0.6; box-shadow: 0 0 12px var(--verified); }
}

/* ── MATCH ANIMATIONS ───────────────────────────────────── */
@keyframes match-pop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-5deg); }
  60%  { transform: scale(1.1) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  25%       { transform: scale(1.3); }
  50%       { transform: scale(1); }
  75%       { transform: scale(1.2); }
}

@keyframes confetti-fall {
  0%   { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── PARTICLE SYSTEM (landing) ──────────────────────────── */
@keyframes particle-float {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.6;
  }
  25%  { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
  50%  { transform: translateY(-10px) translateX(-15px); opacity: 1; }
  75%  { transform: translateY(-30px) translateX(5px); opacity: 0.7; }
}

/* ── LOGO SHIMMER ───────────────────────────────────────── */
@keyframes logo-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── GRADIENT SHIFT (landing bg) ───────────────────────── */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── COUNTER ANIMATION ──────────────────────────────────── */
@keyframes counter-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── TOAST ──────────────────────────────────────────────── */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); max-height: 100px; }
  to   { opacity: 0; transform: translateY(-10px) scale(0.95); max-height: 0; padding: 0; }
}

/* ── SCREEN TRANSITIONS ─────────────────────────────────── */
.screen-enter {
  animation: slide-up 0.35s var(--ease-out) forwards;
}

.screen-exit {
  animation: fade-out 0.2s var(--ease-out) forwards;
}

/* ── STAGGER CHILDREN ───────────────────────────────────── */
.stagger > *:nth-child(1)  { animation-delay: 0ms; }
.stagger > *:nth-child(2)  { animation-delay: 60ms; }
.stagger > *:nth-child(3)  { animation-delay: 120ms; }
.stagger > *:nth-child(4)  { animation-delay: 180ms; }
.stagger > *:nth-child(5)  { animation-delay: 240ms; }
.stagger > *:nth-child(6)  { animation-delay: 300ms; }
.stagger > *:nth-child(7)  { animation-delay: 360ms; }
.stagger > *:nth-child(8)  { animation-delay: 420ms; }

.animate-in {
  animation: slide-up 0.4s var(--ease-out) backwards;
}

/* ── PARTICLE CANVAS ANIMATION (landing) ────────────────── */
@keyframes scan-line {
  0%   { top: -2px; }
  100% { top: 100%; }
}

/* ── TRUST SCORE ARC ────────────────────────────────────── */
@keyframes arc-draw {
  from { stroke-dashoffset: 314; }
  to   { /* set via JS */ }
}

/* ── SWIPE CARD ─────────────────────────────────────────── */
@keyframes swipe-left-exit {
  to {
    transform: translateX(-120%) rotate(-20deg);
    opacity: 0;
  }
}

@keyframes swipe-right-exit {
  to {
    transform: translateX(120%) rotate(20deg);
    opacity: 0;
  }
}

@keyframes card-restore {
  to { transform: translateX(0) rotate(0deg); opacity: 1; }
}

/* ── RIPPLE EFFECT ──────────────────────────────────────── */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(196, 129, 58, 0.3);
  transform: scale(0);
  animation: ripple-expand 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ── COPPER LINE SCANNER (decorative) ───────────────────── */
@keyframes copper-scan {
  0%   { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(400px); opacity: 0; }
}

/* ── DOT TYPING (oraculo thinking) ─────────────────────── */
@keyframes dot-blink {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%            { opacity: 1; transform: scale(1); }
}

.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: var(--space-3) var(--space-4);
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  animation: dot-blink 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

/* ── FLOATING LABEL ─────────────────────────────────────── */
@keyframes label-float {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-20px) scale(0.8); }
}

/* ── NEON FLICKER (for trust badge) ─────────────────────── */
@keyframes neon-flicker {
  0%, 100% { opacity: 1; }
  92%       { opacity: 1; }
  93%       { opacity: 0.5; }
  94%       { opacity: 1; }
  96%       { opacity: 0.7; }
  97%       { opacity: 1; }
}

/* ── PAGE LOADER ────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--copper);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── HOVER LIFT ─────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-out);
}
.hover-lift:hover { transform: translateY(-3px); }

/* ── COPPER UNDERLINE ───────────────────────────────────── */
.copper-underline {
  position: relative;
}

.copper-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--copper), var(--copper-light));
  border-radius: var(--radius-full);
  transition: width var(--duration-base) var(--ease-out);
}

.copper-underline:hover::after { width: 100%; }

/* ── GLASS SHIMMER ──────────────────────────────────────── */
.glass-shimmer {
  position: relative;
  overflow: hidden;
}

.glass-shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.04) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  animation: glass-sweep 4s ease-in-out infinite;
}

@keyframes glass-sweep {
  0%   { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* ── RADAR PULSE ────────────────────────────────────────── */
@keyframes radar-pulse {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.radar-pulse {
  position: relative;
  display: inline-flex;
}

.radar-pulse::before,
.radar-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--copper);
  animation: radar-pulse 2s ease-out infinite;
}

.radar-pulse::after {
  animation-delay: 1s;
}