/* ================================
   CYBERPUNK 2077 INDUSTRIAL THEME
   Modern, responsive, accessible
   ================================ */

/* Design Tokens */
:root {
  /* Palette */
  --bg-1: #0a0a0f;
  --bg-2: #1a1a2e;
  --bg-3: #16213e;
  --glass: rgba(16, 33, 62, 0.1);
  --card: rgba(26, 26, 46, 0.8);
  --card-border: rgba(255, 16, 240, 0.4);

  --txt-1: #e6f2ff;
  --txt-2: #8892b0;
  --neon-cyan: #00ffff;
  --neon-pink: #ff10f0;
  --elec-blue: #0080ff;
  --tech-green: #00ff41;

  /* Fonts */
  --font-heading: 'Orbitron', monospace;
  --font-body: 'Rajdhani', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Layout */
  --container: 1200px;
  --header: 80px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* Spacing */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Shadows/Glows */
  --g-cyan: 0 0 20px rgba(0, 255, 255, .5);
  --g-pink: 0 0 20px rgba(255, 16, 240, .5);
  --shadow-1: 0 8px 32px rgba(0,0,0,.3);
  --shadow-2: 0 16px 64px rgba(0,0,0,.4);
}

/* Base */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--txt-1);
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 35%, var(--bg-3) 70%, var(--bg-1) 100%);
  background-attachment: fixed;
  min-height: 100svh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Respect iOS safe-area insets */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  width: auto; height: auto;
  padding: .5rem 1rem;
  background: #000;
  color: var(--neon-cyan);
  border: 2px solid var(--neon-cyan);
  border-radius: var(--r-sm);
  z-index: 10000;
}

/* Focus styles */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: var(--g-cyan);
}

/* Ambient effects */
.atmosphere-effects { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.scanlines {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,255,255,.02) 51%, rgba(255,16,240,.01) 52%, transparent 53%);
  background-size: 100% 4px;
  animation: scanline-move .1s linear infinite;
}
@keyframes scanline-move { to { background-position-y: 4px; } }

.digital-rain {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, transparent 98%, rgba(0,255,255,.03) 100%),
    linear-gradient(180deg, transparent 98%, rgba(0,255,255,.03) 100%);
  background-size: 50px 50px, 50px 50px;
  animation: rain 20s linear infinite;
}
@keyframes rain { to { background-position: 50px 50px, 50px 50px; } }

.glitch-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 98%, rgba(255,0,64,.02) 99%, transparent 100%);
  animation: glitch-sweep 8s ease-in-out infinite;
  opacity: 0;
}
@keyframes glitch-sweep { 0%, 90%, 100% { opacity: 0; } 95% { opacity: 1; } }

/* Layout */
.site { position: relative; z-index: 1; display: flex; min-height: 100svh; flex-direction: column; }
.main-content { flex: 1; }
.section { padding: var(--s-8) 0; position: relative; }
.section-container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section-header { text-align: center; margin-bottom: var(--s-7); }
.section-title { display: flex; flex-direction: column; gap: var(--s-2); align-items: center; }
.title-prefix { font-family: var(--font-mono); color: var(--txt-2); letter-spacing: 2px; text-transform: uppercase; font-size: .9rem; }
.section-line { width: 110px; height: 2px; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); margin: 0 auto; }

/* Typography */
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 var(--s-4); }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 3.5vw, 1.5rem); }
p { margin: 0 0 var(--s-4); color: var(--txt-1); }
.muted { color: var(--txt-2); }

/* Header & Nav */
.header {
  position: fixed; inset: 0 0 auto 0; height: calc(var(--header) + var(--safe-top));
  background: rgba(10,10,15,.85); backdrop-filter: blur(12px) saturate(1.8);
  border-bottom: 2px solid rgba(0,255,255,.3); z-index: 50;
  padding-top: var(--safe-top);
}
.header-container { height: 100%; }
.header-grid {
  height: 100%;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-5);
  width: min(100% - 2rem, var(--container)); margin-inline: auto;
}
.brand { text-decoration: none; color: inherit; }
.brand-text { display: block; font-weight: 900; font-size: 1.2rem; }
.brand-subtitle { font-size: .8rem; color: var(--txt-2); font-family: var(--font-mono); }

.system-status { display: flex; gap: var(--s-4); align-items: center; }
.status-indicator { display: flex; gap: var(--s-2); align-items: center; font-size: .8rem; color: var(--tech-green); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tech-green); box-shadow: var(--g-cyan); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.neural-activity .neural-pulse { display: block; width: 20px; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent); animation: neural 1s ease-in-out infinite alternate; }
@keyframes neural { from { transform: scaleX(.5); opacity:.5; } to { transform: scaleX(1); opacity:1; } }

.navigation { position: relative; }
.nav-toggle {
  display: none; width: 48px; height: 48px; min-width:48px; min-height:48px;
  background: none; color: var(--neon-cyan);
  border: 2px solid var(--neon-cyan); border-radius: var(--r-md);
  cursor: pointer; transition: .25s;
}
.nav-toggle:hover { background: var(--neon-cyan); color: #000; box-shadow: var(--g-cyan); }
.nav-toggle-inner { display: flex; flex-direction: column; gap: 4px; }
.nav-line { width: 18px; height: 2px; background: currentColor; }

.nav-menu { list-style: none; display: flex; gap: var(--s-5); margin: 0; padding: 0; }
.nav-link {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--txt-1); text-decoration: none; padding: .5rem .75rem;
  border-radius: var(--r-md); position: relative; transition: .25s;
}
.nav-link::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--neon-cyan); transition: .25s;
}
.nav-link:hover { color: var(--neon-cyan); text-shadow: var(--g-cyan); }
.nav-link:hover::before, .nav-link.active::before { width: 100%; }

/* Glitch enhancement */
.glitch-enhanced { position: relative; color: var(--neon-cyan); animation: neon-pulse 3s ease-in-out infinite alternate; }
.glitch-enhanced::before,
.glitch-enhanced::after {
  content: attr(data-text); position: absolute; inset: 0; opacity: .85;
}
.glitch-enhanced::before { color: var(--neon-pink); animation: glitch-1 .5s infinite linear alternate-reverse; z-index: -1; }
.glitch-enhanced::after { color: #00ff41; animation: glitch-2 .35s infinite linear alternate-reverse; z-index: -2; }
@keyframes glitch-1 { 0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}100%{transform:translate(0)} }
@keyframes glitch-2 { 0%{transform:translate(0)}20%{transform:translate(2px,-2px)}40%{transform:translate(2px,2px)}60%{transform:translate(-2px,-2px)}80%{transform:translate(-2px,2px)}100%{transform:translate(0)} }
@keyframes neon-pulse {
  from { text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan), 0 0 15px var(--neon-cyan), 0 0 20px var(--neon-cyan); }
  to   { text-shadow: 0 0 2px var(--neon-cyan), 0 0 5px var(--neon-cyan), 0 0 8px var(--neon-cyan), 0 0 12px var(--neon-cyan); }
}

/* Hero */
.hero-section {
  min-height: 100svh; display: flex; align-items: center;
  background: linear-gradient(135deg, rgba(10,10,15,.9), rgba(26,26,46,.8), rgba(16,33,62,.9));
  padding-top: var(--header);
}
.hero-container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.hero-badge {
  display: inline-block; margin-bottom: var(--s-4);
  padding: .35rem .75rem; border-radius: var(--r-lg);
  color: var(--neon-cyan); font-family: var(--font-mono); letter-spacing: 1px;
  border: 1px solid var(--neon-cyan); background: rgba(0,255,255,.08);
}
.hero-title .hero-line { display: block; }
.hero-emphasis { color: var(--neon-cyan); text-shadow: var(--g-cyan); }
.hero-text { color: var(--txt-2); font-size: 1.125rem; max-width: 56ch; margin-bottom: var(--s-6); }
.hero-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; }

.cta-button {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; font-weight: 700; letter-spacing: .5px;
  padding: .85rem 1.25rem; border-radius: var(--r-lg); position: relative;
  border: 2px solid transparent; transition: .25s; overflow: hidden;
}
.cta-button.primary { background: linear-gradient(45deg, var(--neon-cyan), var(--elec-blue)); color: #000; box-shadow: var(--g-cyan); }
.cta-button.secondary { background: transparent; color: var(--neon-cyan); border-color: var(--neon-cyan); }
.cta-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cta-button::before {
  content: ''; position: absolute; inset: 0; left: -100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s;
}
.cta-button:hover::before { left: 100%; }

/* Hologram */
.hologram-container { position: relative; height: 380px; perspective: 1000px; }
.hologram-grid {
  position: absolute; inset: 0; border: 2px solid var(--neon-cyan); border-radius: 16px;
  background: rgba(0,255,255,.05); transform: rotateY(15deg) rotateX(5deg);
  animation: holo 4s ease-in-out infinite alternate;
}
@keyframes holo { from { transform: rotateY(15deg) rotateX(5deg) translate3d(0,0,0);} to { transform: rotateY(-15deg) rotateX(-5deg) translate3d(0,-10px,0);} }
.grid-line { position: absolute; background: var(--neon-cyan); opacity: .3; }
.grid-line:nth-child(1), .grid-line:nth-child(3) { width: 100%; height: 1px; }
.grid-line:nth-child(2), .grid-line:nth-child(4) { width: 1px; height: 100%; }
.grid-line:nth-child(1) { top: 25%; } .grid-line:nth-child(3) { top: 75%; }
.grid-line:nth-child(2) { left: 25%; } .grid-line:nth-child(4) { left: 75%; }
.data-streams { position: absolute; inset: 20% 20%; }
.data-stream { position: absolute; width: 2px; height: 20px; background: linear-gradient(to bottom, var(--neon-cyan), transparent); animation: data 2s linear infinite; }
.data-stream:nth-child(1){ left:20%; animation-delay:0s;} .data-stream:nth-child(2){left:50%; animation-delay:.5s;} .data-stream:nth-child(3){left:80%; animation-delay:1s;}
@keyframes data { 0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0} }

/* About */
.about-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-7); align-items: start; }
.terminal-window { background: rgba(0,0,0,.8); border: 1px solid var(--neon-cyan); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-1); }
.terminal-header { display:flex; align-items:center; justify-content:space-between; padding: .5rem .75rem; background: rgba(0,255,255,.1); }
.terminal-buttons { display:flex; gap:.35rem; }
.terminal-button { width: 12px; height: 12px; border-radius: 50%; }
.terminal-button.close{background:#ff5f56;} .terminal-button.minimize{background:#ffbd2e;} .terminal-button.maximize{background:#27ca3f;}
.terminal-title { font-family: var(--font-mono); font-size: .85rem; color: var(--neon-cyan); }
.terminal-body { padding: var(--s-6); }
.code-block { font-family: var(--font-mono); font-size: .95rem; color: var(--tech-green); }

.about-stats { display: flex; flex-direction: column; gap: var(--s-5); }
.stat-card {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--card); backdrop-filter: blur(10px);
  border: 1px solid rgba(0,255,255,.25);
  border-radius: var(--r-lg); padding: var(--s-5);
  transition: .25s;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--neon-cyan); box-shadow: var(--g-cyan); }
.stat-icon { font-size: 1.5rem; color: var(--neon-cyan); }
.stat-number { font-family: var(--font-heading); font-size: 1.35rem; color: var(--neon-cyan); text-shadow: var(--g-cyan); }
.stat-label { font-size: .9rem; color: var(--txt-2); text-transform: uppercase; letter-spacing: .5px; }

/* Socials (connections) */
.connections-grid { display: grid; gap: var(--s-5); max-width: 640px; margin: 0 auto; }
.connection-card {
  display: flex; align-items: center; gap: var(--s-5);
  text-decoration: none; color: inherit;
  background: var(--card); border: 1.5px solid rgba(0,255,255,.25);
  border-radius: var(--r-lg); padding: var(--s-6);
  backdrop-filter: blur(10px); transition: .25s; position: relative; overflow: hidden;
}
.connection-card::before { content: ''; position:absolute; inset:0; left:-100%; background: linear-gradient(90deg, transparent, rgba(0,255,255,.1), transparent); transition: left .5s; }
.connection-card:hover::before { left: 100%; }
.connection-card:hover { transform: translateY(-2px); box-shadow: var(--g-cyan); border-color: var(--neon-cyan); }
.connection-icon { font-size: 2rem; color: var(--neon-cyan); }
.connection-title { margin: 0 0 .25rem 0; color: var(--neon-cyan); }
.connection-description { color: var(--txt-2); margin: 0 0 .25rem 0; }
.connection-url { font-family: var(--font-mono); color: var(--txt-1); }
.connection-arrow { color: var(--neon-cyan); transition: .25s; }
.connection-card:hover .connection-arrow { transform: translateX(4px); }

/* Lab */
.lab-grid { max-width: 640px; margin: 0 auto; }
.lab-description { text-align: center; color: var(--txt-2); margin-bottom: var(--s-6); font-size: 1.125rem; }
.lab-link {
  display: flex; align-items: center; gap: var(--s-5);
  text-decoration: none; color: inherit;
  background: var(--card); border: 2px solid var(--neon-pink);
  border-radius: var(--r-lg); padding: var(--s-6);
  backdrop-filter: blur(10px); transition: .25s; position: relative;
}
.lab-link:hover { transform: translateY(-4px); border-color: var(--neon-pink); box-shadow: var(--g-pink); }
.lab-icon { font-size: 2rem; color: var(--neon-pink); }
.lab-title { display:block; font-family: var(--font-heading); font-size: 1.35rem; color: var(--neon-pink); text-shadow: var(--g-pink); margin-bottom: .25rem; }
.lab-url { font-family: var(--font-mono); color: var(--txt-2); }
.lab-arrow { color: var(--neon-pink); transition: .25s; }
.lab-link:hover .lab-arrow { transform: translateX(6px); }

/* Footer */
.footer { background: rgba(0,0,0,.85); border-top: 2px solid rgba(0,255,255,.3); padding: var(--s-6) 0; margin-top: var(--s-8); }
.footer-container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.footer-content { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.footer-text { display: flex; align-items: center; gap: var(--s-3); color: var(--txt-2); font-size: .95rem; }
.footer-separator { color: var(--neon-cyan); }
.highlight { color: var(--neon-cyan); text-shadow: var(--g-cyan); }
.footer-status { display:flex; align-items:center; gap: .5rem; font-family: var(--font-mono); color: var(--tech-green); }
.status-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--tech-green); animation: pulse 1.5s infinite; }

/* Responsive */
@media (max-width: 960px) {
  .header-grid { grid-template-columns: 1fr auto; }
  .system-status { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-menu {
    position: absolute; top: calc(100% + .75rem); right: 0;
    flex-direction: column; gap: .25rem; min-width: 220px;
    background: rgba(10,10,15,.95); backdrop-filter: blur(20px);
    border: 2px solid var(--neon-cyan); border-radius: 12px; padding: .5rem;
    transform: translateY(-10px) scale(.95); opacity: 0; visibility: hidden; transition: .25s; box-shadow: var(--shadow-2);
  }
  .nav-menu.is-open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); text-align: center; }
  .hero-actions { justify-content: center; }
  .about-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer-content { flex-direction: column; text-align: center; gap: var(--s-3); }
}
@media (max-width: 520px) {
  .section { padding: var(--s-7) 0; }
  .cta-button { width: 100%; justify-content: center; }
  .connection-card, .lab-link { flex-direction: column; text-align: center; }
}

/* Mobile / Touch improvements */
@media (max-width: 760px) {
  :root { --container: calc(100% - 2rem); }
  /* Hide heavy overlays on smaller devices */
  .scanlines, .digital-rain, .glitch-overlay { opacity: 0.06; }
  .nn-canvas { display: none !important; }
  .nav-link { padding: .9rem 1rem; font-size: 1rem; }
  .nav-toggle { width: 52px; height: 52px; }
  .cta-button { padding: .9rem 1rem; font-size: 1rem; }
  .stat-card, .connection-card, .lab-link { padding: var(--s-4); }
}

/* Safe-area for footer */
.footer { padding-bottom: calc(var(--s-6) + var(--safe-bottom)); }

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scanlines, .digital-rain, .glitch-overlay { display: none !important; }
}

/* High Contrast adjustments */
@media (prefers-contrast: high) {
  .stat-card, .connection-card, .lab-link, .terminal-window { border-width: 2px; }
}