/* =============================================================
   SDI TEKNOLOGI — hero.css
   Hero section: cyber grid, orbs, hero text animations, glow button, HUD panel.
   ============================================================= */

/* ─────────────────────────────────────────────
   CYBER GRID BACKGROUND
───────────────────────────────────────────── */
.cyber-grid {
  display: none !important;
  opacity: 0;
  background-image: none;
}

html:not(.dark) .cyber-grid {
  display: none !important;
  opacity: 0;
  background-image: none;
}

/* ─────────────────────────────────────────────
   GRADIENT ORBS
───────────────────────────────────────────── */
.orb-1 {
  background: radial-gradient(circle, var(--clr-accent) 0%, transparent 70%);
}

.orb-2 {
  background: radial-gradient(circle, var(--clr-accent-2) 0%, transparent 70%);
}

.orb-3 {
  background: conic-gradient(from 0deg, var(--clr-accent), var(--clr-accent-2), var(--clr-accent));
}

/* ─────────────────────────────────────────────
   HERO TEXT ANIMATIONS (triggered by JS)
───────────────────────────────────────────── */
.hero-line-1,
.hero-line-2,
.hero-line-3 {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-smooth);
}

.hero-badge {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-spring);
}

/* ─────────────────────────────────────────────
   GLOW CTA BUTTON
───────────────────────────────────────────── */
.glow-btn {
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-2) 100%);
  box-shadow: 0 0 20px var(--clr-accent-glow), 0 4px 15px rgba(0, 0, 0, 0.3);
  animation: pulseGlow 2.5s ease-in-out infinite;
}

.glow-btn:hover {
  box-shadow: 0 0 40px rgba(217, 2, 238, 0.6), 0 8px 25px rgba(0, 0, 0, 0.4);
  animation: none;
}

/* ─────────────────────────────────────────────
   HUD PANEL (floating dashboard widget)
───────────────────────────────────────────── */
.hud-panel {
  background: rgba(43, 16, 85, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 2, 238, 0.15);
  box-shadow: 0 0 20px rgba(217, 2, 238, 0.08);
}