/* =================================================================
   ACE Launchpad — Custom Styles (Neon Blueprint palette)
   Tailwind utilities come from the CDN; this file adds:
   - CSS custom properties (design tokens)
   - ACE-specific glow / animation classes
   - Scroll-reveal logic (.fade-in-up, .stat-value, .stat-label)
   ================================================================= */

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  --color-primary:     hsl(191, 100%, 50%);
  --color-accent:      hsl(24, 94%, 53%);
  --color-background:  hsl(222, 58%, 7%);
  --color-card:        hsl(220, 47%, 11%);
  --color-border:      hsl(210, 50%, 24%);
  --color-foreground:  hsl(210, 40%, 98%);
  --color-muted-fg:    hsl(215, 25%, 60%);
  --radius:            0.75rem;
}

/* ── Base reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* Primary-foreground text (dark text on cyan button) */
.text-primary-foreground { color: hsl(222, 58%, 7%); }

/* ── Glow effects ───────────────────────────────────────────────── */
.glow-primary {
  box-shadow:
    0 0 20px rgba(0, 208, 255, 0.15),
    0 0 60px rgba(0, 208, 255, 0.05);
}

.glow-primary-strong {
  box-shadow:
    0 0 30px rgba(0, 208, 255, 0.30),
    0 0 80px rgba(0, 208, 255, 0.10);
}

.text-glow-primary {
  text-shadow: 0 0 20px hsl(191 100% 50% / 0.50);
}

/* ── Border glow on hover ───────────────────────────────────────── */
.border-glow-hover {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.border-glow-hover:hover {
  border-color: rgba(0, 208, 255, 0.50) !important;
  box-shadow:   0 0 20px rgba(0, 208, 255, 0.10);
}

/* ── Keyframe animations ────────────────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.50; }
  50%       { opacity: 1.00; }
}

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

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

.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-spin-slow  { animation: spin-slow  8s linear        infinite; }

/* ── Circuit background ─────────────────────────────────────────── */
.circuit-bg {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 208, 255, 0.03) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(0, 208, 255, 0.02) 1px, transparent 0);
  background-size: 40px 40px, 80px 80px;
}

/* ── Scroll-reveal: .fade-in-up ─────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scroll-reveal: stats (Why ACE) ─────────────────────────────── */
.stat-value {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.stat-value.visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-label {
  opacity: 0;
  transition: opacity 0.7s ease 0.2s;
}
.stat-label.visible {
  opacity: 1;
}

/* ── Select & option dark styling ───────────────────────────────── */
select option {
  background-color: hsl(220, 47%, 11%);
  color:            hsl(210, 40%, 98%);
}

/* ── Form feedback states ───────────────────────────────────────── */
.feedback-success {
  background-color: rgba(22, 163, 74, 0.15);
  color: #4ade80;
  border: 1px solid rgba(22, 163, 74, 0.30);
}
.feedback-error {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.30);
}

/* ── Per-field validation ───────────────────────────────────────── */
.field-invalid {
  border-color: rgba(239, 68, 68, 0.70) !important;
  box-shadow:   0 0 0 2px rgba(239, 68, 68, 0.20);
}

.field-error-msg {
  color:       #f87171;
  font-size:   0.75rem;
  margin-top:  0.25rem;
  line-height: 1.3;
}

/* ── Responsive nav scroll compensation ────────────────────────── */
:target { scroll-margin-top: 4.5rem; }