/* ============================================
   FILE: style.css
   PURPOSE: Global styles, CSS variables, base layout, reset
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  /* ── Core Background ── */
  --bg-main:        #020c0a;
  --bg-card:        rgba(10, 30, 24, 0.85);
  --bg-card-solid:  #0a1e18;
  --bg-elevated:    rgba(0, 255, 170, 0.04);
  --bg-overlay:     rgba(2, 12, 10, 0.92);

  
  --border-glow:      rgba(0, 255, 170, 0.6);

  

  /* ── Text ── */
  --text-main:    #d2fff3;
  --text-muted:   #6fa89a;
  --text-faint:   #3a6358;
  --text-bright:  #ffffff;

  /* ── Typography ── */
  --font-body:    'Rajdhani', sans-serif;
  --font-heading: 'Orbitron', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;

  /* ── Spacing ── */
  --section-padding: 110px;
  --container-width: 1200px;
  --gap-sm:   12px;
  --gap-md:   20px;
  --gap-lg:   32px;
  --gap-xl:   48px;
  --radius-sm:  6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ── Effects ── */
 
  --glow-cyan:    0 0 12px rgba(0,229,255,0.5), 0 0 28px rgba(0,229,255,0.2);
  --shadow-card:  0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-deep:  0 20px 60px rgba(0,0,0,0.7);

  /* ── Transitions ── */
  --transition:       all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:  all 0.15s ease;
  --transition-slow:  all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════
   RESET + BASE
════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-card-solid);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

::selection {
  background: var(--accent-dim);
  color: var(--text-bright);
}

body {
  background: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}

/* ════════════════════════════════════════════
   MATRIX CANVAS
════════════════════════════════════════════ */
#matrix-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0.10;
  pointer-events: none;
}

/* ════════════════════════════════════════════
   SCANLINE OVERLAY
════════════════════════════════════════════ */
.scanline {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--scanline-color) 0px,
    var(--scanline-color) 1px,
    transparent 1px,
    transparent 4px
  );
  z-index: -1;
  pointer-events: none;
  animation: scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* ════════════════════════════════════════════
   SECTIONS
════════════════════════════════════════════ */
.section {
  padding: var(--section-padding) 24px;
  position: relative;
}

.section-container {
  max-width: var(--container-width);
  margin: 0 auto;
}

/* ── Section Title ── */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), transparent);
  margin-top: 10px;
  box-shadow: var(--glow);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.section-title:hover::after { width: 100%; }

.section-subtitle {
  color: var(--text-muted);
  margin-bottom: 48px;
  font-size: 1rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

/* ── Sub Heading ── */
.sub-heading {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--accent-secondary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sub-heading::before {
  content: '//';
  color: var(--accent-primary);
  font-family: var(--font-mono);
}

/* ── Accent ── */
.accent { color: var(--accent-primary); }

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid var(--accent-primary);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, var(--bg-elevated));
  opacity: 0;
  transition: opacity 0.3s;
}

.btn:hover::before { opacity: 1; }

.btn-primary {
  background: var(--accent-primary);
  color: var(--bg-main);
  font-weight: 600;
  border-color: var(--accent-primary);
}

.btn-primary:hover {
  background: var(--accent-primary);
filter: brightness(1.15);
  box-shadow: var(--glow);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--accent-primary);
}

.btn-outline:hover {
  background: var(--bg-elevated);
  box-shadow: var(--glow);
  transform: translateY(-2px);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.btn:active { transform: scale(0.97) !important; }

/* ════════════════════════════════════════════
   CARDS
════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: var(--transition);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card:hover {
  box-shadow: var(--shadow-card), var(--glow);
  border-color: var(--border-hover);
  transform: translateY(-5px);
}

/* ════════════════════════════════════════════
   TYPOGRAPHY
════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.25;
  color: var(--text-bright);
}

p { color: var(--text-muted); }

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  display: block;
}

/* ════════════════════════════════════════════
   FORM ELEMENTS
════════════════════════════════════════════ */
input, textarea, select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition);
}

input:focus, textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-dim), var(--glow);
background: var(--bg-elevated);
}

input::placeholder, textarea::placeholder {
  color: var(--text-faint);
}

.form-error {
  color: var(--accent-danger);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  margin-top: 4px;
}

.form-success {
  margin-top: 12px;
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hover);
}

/* ════════════════════════════════════════════
   UTILITIES
════════════════════════════════════════════ */
.text-center { text-align: center; }
.hidden { display: none !important; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* Glass Panel */
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* Glowing text */
.text-glow {
  text-shadow: 0 0 10px var(--accent-primary), 0 0 25px var(--accent-dim);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
}

::-webkit-scrollbar-track {
  background: var(--bg-card-solid);
}
/* Corner accent (decorative) */
.corner-accent {
  position: relative;
}
.corner-accent::before,
.corner-accent::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--accent-primary);
  border-style: solid;
  opacity: 0.6;
}
.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;
}

html {
  transition: background 0.4s ease, color 0.4s ease;
}

.theme-transition * {
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}