/**
 * Componentes globales Dev Studio (adaptado de dev-studio/src/index.css)
 * Depende de variables en dg-theme-dark.css
 */

.ds-page,
.ds-page .font-display {
  font-family: "Space Grotesk", "Outfit", ui-sans-serif, system-ui, sans-serif;
}
.ds-page .font-sans {
  font-family: "Inter", "Outfit", ui-sans-serif, system-ui, sans-serif;
}
.ds-page .font-mono,
.ds-page pre,
.ds-page code {
  font-family: var(--ds-font-mono);
}

@keyframes neonPulse {
  0%, 100% {
    text-shadow: 0 0 4px rgba(163, 230, 53, 0.2), 0 0 12px rgba(163, 230, 53, 0.1);
  }
  50% {
    text-shadow: 0 0 8px rgba(163, 230, 53, 0.4), 0 0 20px rgba(163, 230, 53, 0.2);
  }
}

.text-neon-glow {
  color: var(--dg-lime-glow);
  animation: neonPulse 3s infinite ease-in-out;
}

@keyframes gridFlow {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

.bg-dot-matrix {
  background-size: 25px 25px;
  background-image: radial-gradient(rgba(163, 230, 53, 0.04) 1px, transparent 1px);
}

.bg-grid-tech {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(163, 230, 53, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(163, 230, 53, 0.03) 1px, transparent 1px);
  animation: gridFlow 20s linear infinite;
}

@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.radar-hand {
  transform-origin: bottom right;
  animation: radarSweep 8s linear infinite;
}

@keyframes scanlineTravel {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.crt-scanlines {
  position: relative;
  overflow: hidden;
}

.crt-scanlines::before {
  content: " ";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
}

.hud-scanline-bar {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(163, 230, 53, 0.4), transparent);
  animation: scanlineTravel 4s linear infinite;
  pointer-events: none;
  z-index: 3;
}

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

.cyber-glow-card {
  position: relative;
  transition: all 0.3s ease;
}

.cyber-glow-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(90deg, rgba(163, 230, 53, 0), rgba(163, 230, 53, 0.3), rgba(163, 230, 53, 0));
  background-size: 200% 200%;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cyber-glow-card:hover::after {
  opacity: 1;
  animation: borderRun 3s ease infinite;
}

.ds-stats-bar .ds-stat-gradient {
  background: linear-gradient(135deg, var(--ds-title), var(--ds-lime-glow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ds-catalog-card-top-line {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ds-lime-primary), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.ds-catalog-card:hover .ds-catalog-card-top-line {
  opacity: 1;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--dg-core);
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dg-lime-primary);
}