/* ═══════════════════════════════════════════════════
   THE ART OF CODE — 30-Stage Glassmorphism CSS
   ═══════════════════════════════════════════════════ */

:root {
  --accent:       #6366f1;
  --accent-light: #818cf8;
  --accent-glow:  rgba(99, 102, 241, 0.4);
  
  --f-sans:     'Inter', -apple-system, sans-serif;
  --f-mono:     'JetBrains Mono', monospace;
  --ease:       cubic-bezier(0.19, 1, 0.22, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

/* ─── Body Theme States (Controlled by JS) ─── */
body {
  font-family: var(--f-sans); overflow-x: hidden; -webkit-font-smoothing: antialiased;
  background: #000; transition: color 0.5s ease;
}
/* When background is dark, text is light */
body.theme-dark { color: #ffffff; }
body.theme-dark .glass-panel { background: rgba(10, 10, 15, 0.4); border-color: rgba(255,255,255,0.1); }
body.theme-dark .text-muted { color: #a1a1aa; }

/* When background is bright, text is dark */
body.theme-light { color: #000000; }
body.theme-light .glass-panel { background: rgba(255, 255, 255, 0.5); border-color: rgba(0,0,0,0.15); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
body.theme-light .text-muted { color: #3f3f46; }

::selection { background: var(--accent); color: #fff; }

/* ─── Global WebGL ─── */
#canvas-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
#bg-canvas { width: 100%; height: 100%; display: block; }

/* ─── Premium Glassmorphism ─── */
.glass-panel {
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
  transition: all 0.5s ease;
}
.p-12 { padding: 48px; }
.hero-glass { padding: 60px; max-width: 800px; margin: 0 auto; }

/* ─── Parallax Elements ─── */
.px { position: absolute; pointer-events: none; will-change: transform; z-index: 1; }
.px-bg { font-family: var(--f-mono); font-size: clamp(4rem, 15vw, 12rem); font-weight: 900; color: rgba(255,255,255,0.02); top: 10%; left: -5%; white-space: nowrap; user-select: none; }
body.theme-light .px-bg { color: rgba(0,0,0,0.03); }
.px-fg { z-index: 15; position: absolute; }

/* ─── Layouts ─── */
.s { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 40px; position: relative; z-index: 10; }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.center-viz { display: flex; justify-content: center; align-items: center; animation: floatReal 6s ease-in-out infinite; }
@keyframes floatReal {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.text-center { text-align: center; }

/* ─── Typography & Shared ─── */
.label-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 16px; }
body.theme-light .label-tag { color: var(--accent); }
.section-num { display: block; font-family: var(--f-mono); font-size: 1.2rem; font-weight: 700; opacity: 0.5; margin-bottom: 8px; }
.section-h { font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 24px; }
.section-p { font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.8; max-width: 500px; opacity: 0.8; }

.mt-4 { margin-top: 16px; } .mt-8 { margin-top: 32px; }

.btn-primary { display: inline-block; padding: 12px 24px; background: var(--accent); color: #fff; font-family: var(--f-sans); font-size: 0.85rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--accent-glow); }
.btn-sm { padding: 8px 16px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; font-family: var(--f-sans); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s; color: inherit; }
.btn-sm:hover { border-color: var(--accent); color: var(--accent-light); }
body.theme-light .btn-sm { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── Progress & Navigation ─── */
.progress-track { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2000; background: rgba(255,255,255,0.1); }
.progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.1s linear; }

.side-nav { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 2000; }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: all 0.3s; position: relative; }
body.theme-light .nav-dot { background: rgba(0,0,0,0.2); }
.nav-dot.active { transform: scale(1.8); background: var(--accent); }
.nav-dot::after {
  content: attr(data-title); position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.8); color: #fff; padding: 4px 8px; border-radius: 4px;
  font-size: 0.6rem; font-family: var(--f-mono); opacity: 0; pointer-events: none; transition: 0.3s; white-space: nowrap;
}
.nav-dot:hover::after { opacity: 1; right: 12px; }

.top-brand { position: fixed; top: 20px; left: 40px; z-index: 1500; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; transition: color 0.5s; }
.top-brand svg { color: var(--accent); }

/* ─── 3D Tilt Cards ─── */
.tilt-card { transform-style: preserve-3d; transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1); perspective: 1000px; position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
.tilt-card__glow { position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(circle at var(--mouseX, 50%) var(--mouseY, 50%), var(--accent-glow) 0%, transparent 60%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0; }
.tilt-card:hover .tilt-card__glow { opacity: 1; }
.tilt-content { transform: translateZ(30px); position: relative; z-index: 2; background: rgba(20,20,25,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 24px; backdrop-filter: blur(12px); color: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.6); transition: box-shadow 0.3s; }
body.theme-light .tilt-content { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.15); color: #000; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }

/* ════════════════════════════════════════════════════════
   VISUALIZERS (30 Slides)
   ════════════════════════════════════════════════════════ */

/* Hero Terminal */
.hero__title { font-size: clamp(3.5rem, 9vw, 6.5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin-bottom: 24px; }
.title-line { display: block; } .title-line--accent { background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.mini-terminal { background: rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; text-align: left; color: #fff; margin: 0 auto; max-width: 400px; }
.mini-terminal__bar { display: flex; gap: 6px; padding: 10px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.1); }
.term-dot { width: 10px; height: 10px; border-radius: 50%; } .term-dot--r { background: #ef4444; } .term-dot--y { background: #f59e0b; } .term-dot--g { background: #10b981; }
.mini-terminal__body { padding: 16px; font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.6; }
.term-prompt { color: var(--accent-light); }
.term-line { display: none; }
.term-output { opacity: 0.6; } .term-output--accent { color: #10b981; opacity: 1; }
.term-cursor { animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } }

/* Shared Iso */
.iso-box { width: 150px; height: 150px; transform: rotateX(60deg) rotateZ(-45deg); transform-style: preserve-3d; margin: 0 auto; }
.iso-plane { position: absolute; width: 100%; height: 100%; border: 1px solid var(--accent); background: rgba(99,102,241,0.1); }
.iso-top { transform: translateZ(50px); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-weight: 700; color: var(--accent); }
.iso-left { transform: rotateY(90deg) translateZ(-75px) translateY(50px); height: 100px; }
.iso-right { transform: rotateX(-90deg) translateZ(75px) translateY(50px); height: 100px; }

/* Boolean Logic */
.gate-flex { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-weight: 700; }
.gate-symbol { padding: 20px; border: 2px solid var(--accent); border-radius: 8px 24px 24px 8px; background: rgba(99,102,241,0.1); }
.gate-wire { padding: 4px; border-bottom: 2px solid var(--accent); }

/* Compilers */
.compiler-flex { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: 0.75rem; text-align: center; }
.c-step { padding: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; flex: 1; }
body.theme-light .c-step { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }

/* Memory */
.pyr-flex { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 0.75rem; text-align: center; }
.pyr-l1 { width: 40%; padding: 10px; background: var(--accent); color: #fff; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%); }
.pyr-l2 { width: 70%; padding: 10px; background: rgba(99,102,241,0.6); color: #fff; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%); }
.pyr-l3 { width: 100%; padding: 10px; background: rgba(99,102,241,0.3); color: #fff; clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%); }

/* File System */
.fs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fs-block { height: 40px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 0.7rem; }
.fs-block.active { background: var(--accent); color: #fff; border-color: var(--accent); }
body.theme-light .fs-block { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }

/* TCP/IP */
.tcp-flex { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 0.7rem; }
.tcp-host { padding: 20px 10px; border: 2px solid var(--accent); border-radius: 8px; }
.tcp-lines { flex: 1; display: flex; flex-direction: column; justify-content: space-around; padding: 0 10px; }
.t-line { border-bottom: 1px dashed var(--accent); text-align: center; position: relative; }
.t-line::after { content: '▶'; position: absolute; right: -5px; top: -7px; color: var(--accent); }
.t-line.l2::after { content: '◀'; left: -5px; right: auto; }

/* Containers */
.docker-stack { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 0.75rem; }
.d-box { width: 100%; padding: 10px; border: 1px solid var(--accent); background: rgba(99,102,241,0.1); text-align: center; }
.d-base { width: 110%; padding: 15px; background: var(--accent); color: #fff; text-align: center; border-radius: 4px; margin-top: 8px; }

/* CI/CD */
.cicd-pipe { display: flex; gap: 8px; font-family: var(--f-mono); font-size: 0.7rem; }
.pipe-node { flex: 1; padding: 10px 0; text-align: center; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; transition: 0.3s; }
body.theme-light .pipe-node { border-color: rgba(0,0,0,0.2); }
.pipe-node.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Big Data MapReduce */
.mapreduce-flex { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 0.75rem; text-align: center; }
.mr-box { padding: 20px 10px; border: 1px dashed var(--accent); background: rgba(99,102,241,0.05); flex: 1; margin: 0 4px; border-radius: 8px; }

/* Generative AI */
.gen-terminal { font-family: var(--f-mono); font-size: 0.8rem; line-height: 1.6; }
.gen-prompt { opacity: 0.5; }
.gen-cursor { color: var(--accent); animation: blink 1s infinite; }

/* Shared legacy viz components ported over */
.sort-viz__header { display: flex; justify-content: space-between; margin-bottom: 16px; }
.sort-viz__bars { display: flex; align-items: flex-end; height: 120px; gap: 2px; }
.sort-bar { flex: 1; background: rgba(255,255,255,0.2); transition: 0.1s; }
body.theme-light .sort-bar { background: rgba(0,0,0,0.2); }
.sort-bar.active { background: var(--accent); }

.svg-tree { width: 100%; height: auto; }
.t-node { fill: rgba(255,255,255,0.1); stroke: rgba(255,255,255,0.3); stroke-width: 2; transition: 0.3s; }
body.theme-light .t-node { fill: rgba(0,0,0,0.05); stroke: rgba(0,0,0,0.2); }
.t-node.active { fill: var(--accent); stroke: var(--accent); }
.t-edge { stroke: rgba(255,255,255,0.2); stroke-width: 2; }
body.theme-light .t-edge { stroke: rgba(0,0,0,0.1); }

.cpu-stage { padding: 12px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; text-align: center; font-family: var(--f-mono); font-size: 0.8rem; transition: 0.3s; }
body.theme-light .cpu-stage { border-color: rgba(0,0,0,0.2); }
.cpu-stage.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.iso-stack { display: flex; flex-direction: column; gap: 20px; transform: rotateX(60deg) rotateZ(-30deg); transform-style: preserve-3d; }
.iso-layer { padding: 15px 30px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); text-align: center; font-family: var(--f-mono); font-size: 0.8rem; transition: 0.3s; }
body.theme-light .iso-layer { border-color: rgba(0,0,0,0.2); background: rgba(255,255,255,0.5); }
.iso-layer:hover { transform: translateZ(20px); border-color: var(--accent); background: rgba(99,102,241,0.2); }

.osi-l { padding: 6px; margin-bottom: 4px; border: 1px solid rgba(255,255,255,0.1); font-family: var(--f-mono); font-size: 0.75rem; text-align: center; transition: 0.3s; }
body.theme-light .osi-l { border-color: rgba(0,0,0,0.1); }
.osi-l:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.db-flex { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.db-table { width: 100%; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; overflow: hidden; }
body.theme-light .db-table { border-color: rgba(0,0,0,0.2); }
.db-row { display: flex; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--f-mono); font-size: 0.8rem; }
body.theme-light .db-row { border-color: rgba(0,0,0,0.1); }
.db-row.head { background: rgba(255,255,255,0.1); font-weight: 700; }
body.theme-light .db-row.head { background: rgba(0,0,0,0.05); }

.mesh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; justify-items: center; padding: 20px; }
.mesh-node { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); position: relative; }
body.theme-light .mesh-node { border-color: rgba(0,0,0,0.3); }
.mesh-node.ping::after { content:''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ping 2s infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }

.chart-flex { height: 120px; display: flex; align-items: flex-end; gap: 4px; overflow: hidden; }
.dd-bar { flex: 1; border: 1px solid rgba(255,255,255,0.1); border-bottom: none; transition: height 0.3s; position: relative; }
body.theme-light .dd-bar { border-color: rgba(0,0,0,0.1); }
.dd-bar::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--fill); background: var(--accent); transition: height 0.5s var(--ease); }

.nn-svg { width: 100%; height: auto; }
.nn-n { fill: rgba(255,255,255,0.1); stroke: rgba(255,255,255,0.3); stroke-width: 2; transition: 0.3s; }
.nn-e { stroke: rgba(255,255,255,0.1); stroke-width: 1; transition: 0.3s; }
body.theme-light .nn-n { fill: rgba(0,0,0,0.05); stroke: rgba(0,0,0,0.2); }
body.theme-light .nn-e { stroke: rgba(0,0,0,0.1); }
.hyper-pulse .nn-n { fill: var(--accent); stroke: var(--accent); }
.hyper-pulse .nn-e { stroke: var(--accent); }

.matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.m-cell { padding: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); text-align: center; font-family: var(--f-mono); transition: 0.3s; }
body.theme-light .m-cell { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); }
.m-cell.active { background: var(--accent); color: #fff; font-weight: 700; border-color: var(--accent); }

.vector-viz .tilt-content { height: 150px; position: relative; }
.vector-point { position: absolute; font-family: var(--f-mono); font-size: 0.75rem; background: rgba(255,255,255,0.1); padding: 4px 8px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; transform: translate(-50%, -50%); transition: 0.5s; }
body.theme-light .vector-point { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }

.td-header { font-family: var(--f-mono); font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 8px; margin-bottom: 8px; color: var(--accent-light); }
body.theme-light .td-header { border-color: rgba(0,0,0,0.1); color: var(--accent); }
.td-body { height: 120px; overflow: hidden; display: flex; flex-direction: column; gap: 4px; font-family: var(--f-mono); font-size: 0.7rem; opacity: 0.8; }

.crypto-lock .tilt-content { display: flex; flex-direction: column; align-items: center; }
.lock-shackle { width: 40px; height: 30px; border: 4px solid rgba(255,255,255,0.3); border-bottom: none; border-radius: 20px 20px 0 0; transition: transform 0.3s; }
body.theme-light .lock-shackle { border-color: rgba(0,0,0,0.3); }
.lock-body { width: 60px; height: 50px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 700; }
.crypto-lock:hover .lock-shackle { transform: translateY(-10px); }

.chain-flex { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chain-block { padding: 12px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; font-family: var(--f-mono); font-size: 0.75rem; background: rgba(255,255,255,0.05); }
body.theme-light .chain-block { border-color: rgba(0,0,0,0.2); background: rgba(0,0,0,0.02); }
.chain-link { width: 2px; height: 20px; background: var(--accent); }

.sphere-wrap { width: 120px; height: 120px; position: relative; margin: 0 auto; transform-style: preserve-3d; animation: rotate3D 8s linear infinite; }
.sphere-ring { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; }
body.theme-light .sphere-ring { border-color: rgba(0,0,0,0.2); }
.sphere-ring.r2 { transform: rotateY(90deg); }
.sphere-core { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 15px var(--accent-glow); }
@keyframes rotate3D { 100% { transform: rotateX(360deg) rotateY(360deg); } }

.ar-viz .tilt-content { height: 150px; position: relative; overflow: hidden; }
.ar-frame { position: absolute; inset: 10px; border: 2px dashed rgba(255,255,255,0.3); }
body.theme-light .ar-frame { border-color: rgba(0,0,0,0.2); }
.ar-target { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border: 2px solid var(--accent); transform: translate(-50%, -50%); animation: scan 3s infinite; }
@keyframes scan { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.5); } }

.future-statement { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; margin: 24px 0; }
.accent-text { color: var(--accent); font-style: normal; }

.footer-credits { display: flex; flex-direction: column; gap: 12px; font-size: 0.85rem; opacity: 0.7; }
.fc-links { display: flex; gap: 16px; flex-wrap: wrap; }
.fc-links a { color: var(--accent); text-decoration: none; transition: color 0.3s; font-weight: 600; }
.fc-links a:hover { color: var(--accent-light); text-decoration: underline; }
body.theme-light .fc-links a:hover { color: #4338ca; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .split-layout { grid-template-columns: 1fr; gap: 40px; }
  .reverse-mobile { display: flex; flex-direction: column-reverse; }
}
@media (max-width: 768px) {
  .container { padding: 60px 24px; }
  .side-nav { display: none; }
  .p-12 { padding: 24px; }
  .hero-glass { padding: 30px 20px; }
}