/* ============================================================
   glassmorphic.css — Business Research Journal
   Design System: Quantum Academic — Deep Space Glassmorphism
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --bg-void:          #020810;
  --bg-deep:          #050a18;
  --bg-surface:       #080f22;

  --glass-bg:         rgba(8, 20, 45, 0.55);
  --glass-bg-hover:   rgba(10, 25, 55, 0.70);
  --glass-bg-light:   rgba(255, 255, 255, 0.03);
  --glass-blur:       22px;
  --glass-border:     rgba(0, 210, 255, 0.12);
  --glass-border-hover: rgba(0, 229, 255, 0.35);
  --glass-shadow:     0 8px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 210, 255, 0.08);
  --glass-shadow-hover: 0 12px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 229, 255, 0.25), 0 0 30px rgba(0, 229, 255, 0.08);

  /* ── Accent Colors ── */
  --cyan:             #00e5ff;
  --cyan-dim:         #00b4cc;
  --cyan-ghost:       rgba(0, 229, 255, 0.08);
  --cyan-glow:        rgba(0, 229, 255, 0.25);
  --cyan-glow-strong: rgba(0, 229, 255, 0.45);

  --purple:           #818cf8;
  --purple-dim:       #6366f1;
  --purple-ghost:     rgba(129, 140, 248, 0.08);
  --purple-glow:      rgba(129, 140, 248, 0.25);

  --gold:             #f0c060;
  --gold-dim:         #c89a3a;
  --gold-ghost:       rgba(240, 192, 96, 0.08);

  /* ── Text Colors ── */
  --text-primary:     #ddeef7;
  --text-secondary:   #7fb3cc;
  --text-muted:       #3d6578;
  --text-accent:      var(--cyan);
  --text-inverse:     #020810;

  /* ── Borders ── */
  --border-subtle:    rgba(0, 210, 255, 0.07);
  --border-default:   rgba(0, 210, 255, 0.14);
  --border-strong:    rgba(0, 229, 255, 0.30);

  /* ── Spacing ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.75rem;
  --space-xl:  3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.45s ease;
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Glass Panel ── */
.glass {
  background:    var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border:        1px solid var(--glass-border);
  box-shadow:    var(--glass-shadow);
  border-radius: var(--radius-lg);
  transition:    border-color var(--transition-base),
                 box-shadow var(--transition-base),
                 background var(--transition-base);
}

.glass:hover {
  border-color: var(--glass-border-hover);
  box-shadow:   var(--glass-shadow-hover);
  background:   var(--glass-bg-hover);
}

.glass-light {
  background:    var(--glass-bg-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

/* ── Glow Effects ── */
.glow-cyan {
  box-shadow: 0 0 20px var(--cyan-glow), 0 0 60px rgba(0, 229, 255, 0.08);
}

.glow-cyan-strong {
  box-shadow: 0 0 30px var(--cyan-glow-strong), 0 0 80px var(--cyan-glow);
}

.glow-purple {
  box-shadow: 0 0 20px var(--purple-glow), 0 0 60px rgba(129, 140, 248, 0.08);
}

.text-glow-cyan {
  text-shadow: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0, 229, 255, 0.15);
}

/* ── Cyan Accent Line ── */
.accent-line {
  display: block;
  width: 3rem;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  margin: var(--space-md) 0;
}

.accent-line-center {
  margin-left: auto;
  margin-right: auto;
}

/* ── Badge / Tag ── */
.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            0.35em;
  padding:        0.2em 0.75em;
  border-radius:  var(--radius-full);
  font-family:    var(--font-mono);
  font-size:      0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight:    500;
}

.badge-cyan {
  background:  rgba(0, 229, 255, 0.10);
  border:      1px solid rgba(0, 229, 255, 0.25);
  color:       var(--cyan);
}

.badge-purple {
  background:  rgba(129, 140, 248, 0.10);
  border:      1px solid rgba(129, 140, 248, 0.25);
  color:       var(--purple);
}

.badge-gold {
  background:  rgba(240, 192, 96, 0.10);
  border:      1px solid rgba(240, 192, 96, 0.25);
  color:       var(--gold);
}

/* ── Buttons ── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5em;
  padding:        0.65em 1.5em;
  border-radius:  var(--radius-md);
  font-family:    var(--font-display);
  font-size:      0.875rem;
  font-weight:    600;
  letter-spacing: 0.05em;
  cursor:         pointer;
  border:         none;
  transition:     all var(--transition-base);
  text-decoration: none;
  white-space:    nowrap;
}

.btn-primary {
  background:  linear-gradient(135deg, var(--cyan-dim), var(--cyan));
  color:       var(--bg-void);
  box-shadow:  0 4px 20px var(--cyan-glow);
}

.btn-primary:hover {
  transform:   translateY(-2px);
  box-shadow:  0 8px 30px var(--cyan-glow-strong);
  color:       var(--bg-void);
}

.btn-ghost {
  background:  transparent;
  color:       var(--text-primary);
  border:      1px solid var(--border-default);
}

.btn-ghost:hover {
  border-color: var(--border-strong);
  color:        var(--cyan);
  background:   var(--cyan-ghost);
  transform:    translateY(-1px);
}

/* ── Dividers ── */
.divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-xl) 0;
}

.divider-glow {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent);
  margin: var(--space-xl) 0;
  opacity: 0.4;
}

/* ── Grid Lines Background ── */
.bg-grid {
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Scan Line Overlay ── */
.scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Corner Accent ── */
.corner-accent {
  position: relative;
}

.corner-accent::before,
.corner-accent::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--cyan);
  border-style: solid;
}

.corner-accent::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.corner-accent::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

/* ── Section Label ── */
.section-label {
  font-family:    var(--font-mono);
  font-size:      0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--cyan);
  margin-bottom:  var(--space-sm);
  display:        flex;
  align-items:    center;
  gap:            0.75em;
}

.section-label::before {
  content: '';
  display: inline-block;
  width:   2rem;
  height:  1px;
  background: var(--cyan);
  opacity: 0.6;
}

/* ── Animate In ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}

@keyframes scanDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}

.animate-fade-up {
  animation: fadeUp 0.7s var(--transition-slow) both;
}

.animate-fade-up-1 { animation-delay: 0.1s; }
.animate-fade-up-2 { animation-delay: 0.2s; }
.animate-fade-up-3 { animation-delay: 0.3s; }
.animate-fade-up-4 { animation-delay: 0.4s; }
.animate-fade-up-5 { animation-delay: 0.5s; }

.animate-glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}