/* Custom animations & design tokens for the static portal */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #09090b; /* zinc-950 */
}

h1, h2, h3, .font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Grid Overlay */
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* Aurora Background */
.aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: #030712;
  overflow: hidden;
}

.aurora-bg::before,
.aurora-bg::after {
  content: '';
  position: absolute;
  width: 80vw;
  height: 80vh;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  animation: float 20s infinite ease-in-out alternate;
}

.aurora-bg::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 70%);
  top: -10%;
  left: -10%;
}

.aurora-bg::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0) 70%);
  bottom: -10%;
  right: -10%;
  animation-delay: -10s;
}

@keyframes float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(10%, 10%) scale(1.1);
  }
}

/* Keyframe Animations */
@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.animate-blink {
  animation: blink 1s step-end infinite;
}

@keyframes stroke-flow-core {
  to {
    stroke-dashoffset: -40;
  }
}
.animate-stroke-flow-core {
  stroke-dasharray: 4 25;
  animation: stroke-flow-core 2.4s linear infinite;
}

@keyframes stroke-flow-glow {
  to {
    stroke-dashoffset: -40;
  }
}
.animate-stroke-flow-glow {
  stroke-dasharray: 6 20;
  animation: stroke-flow-glow 3.2s linear infinite;
}

@keyframes pulse-ring-white {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); }
  70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.animate-pulse-ring-white {
  animation: pulse-ring-white 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 15s linear infinite;
}

@keyframes float-wiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(3deg); }
}
.animate-float-wiggle {
  animation: float-wiggle 3s ease-in-out infinite;
}

@keyframes coin-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.animate-coin-pulse {
  animation: coin-pulse 2s ease-in-out infinite;
}

@keyframes shield-glow {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 4px rgba(255,255,255,0.15)); }
}
.animate-shield-glow {
  animation: shield-glow 3s ease-in-out infinite;
}

@keyframes coin-spin-slow {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.animate-coin-spin-slow {
  animation: coin-spin-slow 6s linear infinite;
}

@keyframes zap-crackle {
  0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
  50% { transform: scale(1.05) translateY(-1px); opacity: 0.95; }
  45%, 55% { filter: drop-shadow(0 0 3px rgba(255,255,255,0.25)); }
}
.animate-zap-crackle {
  animation: zap-crackle 2.5s ease-in-out infinite;
}

/* Glassmorphism Panel */
.glass-panel {
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Custom Selection style */
::selection {
  background-color: #27272a; /* zinc-800 */
  color: #f4f4f5; /* zinc-100 */
}