/* ===========================
CSS VARIABLES & RESET
=========================== */
:root {
--bg:      #07001a;
--bg-2:    #0d0028;
--cyan:    #00fff0;
--magenta: #ff00c8;
--gold:    #ffb800;
--white:   #e8e8ff;
--font-display: 'Orbitron', monospace;
--font-mono:    'Share Tech Mono', monospace;
--font-body:    'Exo 2', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
background: var(--bg);
color: var(--white);
font-family: var(--font-body);
overflow-x: hidden;
}

/* Scanline overlay */
body::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px
);
pointer-events: none;
z-index: 8000;
}

/* ===========================
    CURTAIN TRANSITION
=========================== */
#curtain {
position: fixed;
inset: 0;
background: linear-gradient(135deg, var(--bg-2), #1a0030);
z-index: 9990;
transform: translateY(-100%);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
#curtain .curtain-text {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.3em;
color: var(--cyan);
opacity: 0;
transition: opacity 0.3s;
}
#curtain.entering { animation: curtainIn 0.5s cubic-bezier(.76,0,.24,1) forwards; }
#curtain.entering .curtain-text { opacity: 1; }
#curtain.leaving  { animation: curtainOut 0.55s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes curtainIn  { from{transform:translateY(-100%)} to{transform:translateY(0)} }
@keyframes curtainOut { from{transform:translateY(0)} to{transform:translateY(100%)} }

/* ===========================
    NAVIGATION
=========================== */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
padding: 1.5rem 3rem;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(to bottom, rgba(7,0,26,0.95), transparent);
}
.nav-wordmark {
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 700;
color: var(--cyan);
letter-spacing: 0.25em;
text-decoration: none;
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
align-items: center;
}
.nav-links a {
font-family: var(--font-mono);
font-size: 0.78rem;
color: rgba(232,232,255,0.65);
text-decoration: none;
letter-spacing: 0.08em;
transition: color 0.2s;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -3px; left: 0;
width: 0; height: 1px;
background: var(--cyan);
transition: width 0.3s;
}
.nav-links a:hover { color: var(--cyan); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
font-family: var(--font-display) !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
color: var(--bg) !important;
background: var(--cyan);
padding: 0.55rem 1.3rem;
transition: background 0.2s !important;
text-decoration: none;
}
.nav-cta:hover { background: var(--magenta) !important; }
.nav-cta::after { display: none !important; }

/* ===========================
    PAGE HEADER
=========================== */
#page-header {
position: relative;
padding: 13rem 3rem 6rem;
overflow: hidden;
z-index: 1;
}
.wave-canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
#wave-canvas {
display: block;
}
.page-header-inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 320px;
gap: 5rem;
align-items: end;
}
.page-header-content {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 1rem;
}
.page-header-label {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.35em;
color: var(--magenta);
text-transform: uppercase;
margin-bottom: 1.2rem;
opacity: 0;
animation: fadeUp 0.7s ease 0.3s forwards;
}
.page-header-title {
font-family: var(--font-display);
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeUp 0.7s ease 0.45s forwards;
}
.page-header-title em {
font-style: normal;
color: var(--cyan);
}
.page-header-sub {
font-family: var(--font-mono);
font-size: 0.88rem;
color: rgba(232,232,255,0.45);
letter-spacing: 0.12em;
line-height: 2;
opacity: 0;
animation: fadeUp 0.7s ease 0.6s forwards;
}
.page-header-sub span {
color: var(--gold);
}

/* Photo block */
.photo-block {
position: relative;
opacity: 0;
animation: fadeUp 0.7s ease 0.75s forwards;
}
.photo-frame {
width: 240px;
height: 300px;
border: 1px solid rgba(0,255,240,0.15);
clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.photo-placeholder {
position: relative;
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
}
.photo-placeholder::before {
content: "";
position: absolute;
inset: -10%;
background-image: url("img/portrait_bkgd.png");
background-size: cover;
background-position: center;
opacity: 0.85;
z-index: 0;
transform-origin: 50% 50%;
animation: photoBgRotateLoop 9s ease-in-out infinite;
}
.photo-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
display: block;
}
.photo-img-base {
z-index: 1;
filter: saturate(0.9) contrast(1.05);
}
.photo-img-top {
z-index: 2;
/* Moving transparent band reveals the image below. */
-webkit-mask-image: linear-gradient(
  115deg,
  #000 0%,
  #000 38%,
  transparent 47%,
  transparent 56%,
  #000 65%,
  #000 100%
);
-webkit-mask-size: 220% 220%;
-webkit-mask-position: -170% 50%;
mask-image: linear-gradient(
  115deg,
  #000 0%,
  #000 38%,
  transparent 47%,
  transparent 56%,
  #000 65%,
  #000 100%
);
mask-size: 220% 220%;
mask-position: -170% 50%;
animation: photoMaskSweep 4.8s ease-in-out infinite alternate;
}
@keyframes photoMaskSweep {
0% {
  -webkit-mask-position: -170% 50%;
  mask-position: -170% 50%;
}
100% {
  -webkit-mask-position: 170% 50%;
  mask-position: 170% 50%;
}
}
@keyframes photoBgRotateLoop {
0% {
  transform: rotate(0deg) scale(1.06);
}
50% {
  transform: rotate(8deg) scale(1.06);
}
100% {
  transform: rotate(-8deg) scale(1.06);
}
}
.photo-corner {
position: absolute;
width: 14px; height: 14px;
}
.photo-corner.tl { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.photo-corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.photo-glow {
position: absolute;
top: -30px; left: -30px;
width: 120%; height: 120%;
background: radial-gradient(ellipse, rgba(0,255,240,0.06) 0%, transparent 70%);
pointer-events: none;
}

@keyframes fadeUp {
from { opacity:0; transform:translateY(18px); }
to   { opacity:1; transform:translateY(0); }
}

/* ===========================
    SECTION COMMON
=========================== */
section { position: relative; z-index: 1; padding: 6rem 3rem; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-label {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.3em;
color: var(--magenta);
text-transform: uppercase;
margin-bottom: 0.8rem;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 900;
line-height: 1.2;
margin-bottom: 3rem;
}
.section-divider {
position: relative;
z-index: 1;
width: 100%; height: 1px;
background: linear-gradient(to right, transparent, rgba(0,255,240,0.15), transparent);
}

/* ===========================
    TERMINAL BIO
=========================== */
#terminal {
background: var(--bg-2);
}
.terminal-window {
background: #020010;
border: 1px solid rgba(0,255,240,0.2);
border-radius: 2px;
overflow: hidden;
max-width: 780px;
box-shadow: 0 0 60px rgba(0,255,240,0.05), 0 0 0 1px rgba(0,255,240,0.05);
}
.terminal-bar {
background: rgba(0,255,240,0.04);
border-bottom: 1px solid rgba(0,255,240,0.1);
padding: 0.65rem 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.t-dot {
width: 10px; height: 10px;
border-radius: 50%;
}
.t-dot.r { background: rgba(255,80,80,0.4); }
.t-dot.y { background: rgba(255,200,0,0.4); }
.t-dot.g { background: rgba(0,255,120,0.4); }
.terminal-title {
font-family: var(--font-mono);
font-size: 0.65rem;
color: rgba(232,232,255,0.2);
letter-spacing: 0.12em;
margin-left: 0.5rem;
}
.terminal-body {
padding: 2rem 2.5rem;
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 2;
min-height: 340px;
}
@keyframes tLineIn {
from { opacity: 0; transform: translateY(5px); }
to   { opacity: 1; transform: none; }
}
.t-line {
display: flex;
gap: 1.2rem;
align-items: baseline;
opacity: 0;
animation: tLineIn 0.35s ease forwards;
}
.t-line.visible { opacity: 1; transform: none; }
#tl-0  { animation-delay: 0.3s; }
#tl-1  { animation-delay: 0.5s; }
#tl-2  { animation-delay: 0.65s; }
#tl-3  { animation-delay: 0.8s; }
#tl-4  { animation-delay: 0.95s; }
#tl-5  { animation-delay: 1.1s; }
#tl-6  { animation-delay: 1.25s; }
#tl-7  { animation-delay: 1.35s; }
#tl-8  { animation-delay: 1.45s; }
#tl-9  { animation-delay: 1.6s; }
#tl-10 { animation-delay: 1.75s; }
#tl-11 { animation-delay: 1.9s; }
#tl-12 { animation-delay: 2.05s; }
#tl-13 { animation-delay: 2.2s; }
#tl-14 { animation-delay: 2.35s; }
.t-key {
color: rgba(0,255,240,0.4);
min-width: 12ch;
text-align: right;
flex-shrink: 0;
user-select: none;
}
.t-sep {
color: rgba(232,232,255,0.12);
user-select: none;
}
.t-val { color: var(--white); }
.t-val.cyan    { color: var(--cyan); }
.t-val.magenta { color: var(--magenta); }
.t-val.gold    { color: var(--gold); }
.t-val.dim     { color: rgba(232,232,255,0.35); }
.t-prompt {
color: var(--cyan);
opacity: 0.5;
}
.t-cursor {
display: inline-block;
width: 7px; height: 0.85em;
background: var(--cyan);
vertical-align: middle;
animation: blink 1s step-end infinite;
margin-left: 2px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ===========================
    PARADIGM SHIFTS TIMELINE
=========================== */
#paradigms {
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}
.paradigm-header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.paradigm-header-row .section-title {
margin-bottom: 0;
}
.paradigm-nav {
display: flex;
gap: 0.6rem;
flex-shrink: 0;
}
.paradigm-arrow {
font-family: var(--font-mono);
font-size: 1.1rem;
background: transparent;
border: 1px solid rgba(0,255,240,0.3);
color: var(--cyan);
width: 2.6rem;
height: 2.6rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.paradigm-arrow:hover {
background: var(--cyan);
color: var(--bg);
border-color: var(--cyan);
}
.paradigm-arrow-disabled {
opacity: 0.25;
pointer-events: none;
}
.paradigm-row {
display: flex;
flex-wrap: nowrap;
gap: 0;
position: relative;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 1rem;
scroll-snap-type: x mandatory;
}
.paradigm-row::-webkit-scrollbar { display: none; }
.paradigm-row::before {
content: '';
position: absolute;
top: 72px; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(0,255,240,0.2) 8%, rgba(0,255,240,0.2) 92%, transparent);
z-index: 0;
}
.era-card {
flex: 0 0 auto;
width: 200px;
padding: 0 1rem;
position: relative;
z-index: 1;
scroll-snap-align: start;
}
.era-node {
width: 14px; height: 14px;
border: 1.5px solid rgba(0,255,240,0.4);
background: var(--bg-2);
margin: 65px auto 1.5rem;
position: relative;
transition: border-color 0.3s, background 0.3s;
}
.era-node::before {
content: '';
position: absolute;
inset: 3px;
background: rgba(0,255,240,0.2);
transition: background 0.3s;
}
.era-card:hover .era-node {
border-color: var(--cyan);
box-shadow: 0 0 12px rgba(0,255,240,0.4);
}
.era-card:hover .era-node::before { background: var(--cyan); }
.era-card.active .era-node {
border-color: var(--magenta);
box-shadow: 0 0 18px rgba(255,0,200,0.6);
}
.era-card.active .era-node::before { background: var(--magenta); }
.era-year {
font-family: var(--font-display);
font-size: 0.65rem;
color: rgba(0,255,240,0.5);
letter-spacing: 0.2em;
text-align: center;
margin-bottom: 0.6rem;
}
.era-title {
font-family: var(--font-display);
font-size: 0.68rem;
font-weight: 700;
color: var(--white);
text-align: center;
line-height: 1.4;
margin-bottom: 0.7rem;
letter-spacing: 0.05em;
}
.era-card.active .era-title { color: var(--magenta); }
.era-body {
font-size: 0.75rem;
color: rgba(232,232,255,0.4);
text-align: center;
line-height: 1.7;
}
.era-card.active .era-body { color: rgba(232,232,255,0.65); }


/* ===========================
    TEACHING PHILOSOPHY
=========================== */
#philosophy {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 1rem;
}
.philosophy-lines {
display: flex;
flex-direction: column;
gap: 0;
}
.phil-line {
display: flex;
align-items: baseline;
gap: 1.5rem;
padding: 2.2rem 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.phil-num {
font-family: var(--font-display);
font-size: 0.6rem;
color: rgba(0,255,240,0.25);
letter-spacing: 0.2em;
flex-shrink: 0;
width: 3ch;
}
.phil-text {
font-family: var(--font-display);
font-size: clamp(1rem, 2.2vw, 1.55rem);
font-weight: 700;
color: var(--white);
line-height: 1.3;
letter-spacing: 0.04em;
}
.phil-text em {
font-style: normal;
color: var(--cyan);
}
.phil-sub {
font-size: 0.82rem;
font-family: var(--font-body);
font-weight: 300;
color: rgba(232,232,255,0.9);
margin-top: 0.5rem;
line-height: 1.6;
}

/* ===========================
    DIFFERENTIATOR TABLE
=========================== */
#differentiator {
background: var(--bg-2);
}
.diff-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
.diff-table th {
font-family: var(--font-display);
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 1rem 1.5rem;
text-align: left;
border-bottom: 1px solid rgba(0,255,240,0.15);
}
.diff-table th:first-child { color: var(--cyan); }
.diff-table th:last-child  { color: rgba(232,232,255,0.2); font-size: 0.62rem; }
.diff-table td {
padding: 1.2rem 1.5rem;
font-size: 0.88rem;
border-bottom: 1px solid rgba(255,255,255,0.04);
vertical-align: middle;
}
.diff-table tr:last-child td { border-bottom: none; }
.diff-table tr { transition: background 0.2s; }
.diff-table tr:hover { background: rgba(0,255,240,0.02); }
.diff-table td:first-child {
color: var(--white);
font-weight: 600;
}
.diff-table td:first-child::before {
content: '✓  ';
color: var(--cyan);
font-family: var(--font-mono);
}
.diff-table td:last-child {
color: rgba(232,232,255,0.3);
font-style: italic;
}
.diff-table td:last-child::before {
content: '✗  ';
color: rgba(255,80,80,0.4);
font-style: normal;
font-family: var(--font-mono);
}

/* ===========================
    OFFER FOOTER CTA
=========================== */
#about-cta {
text-align: center;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 1rem;}
.cta-counter {
font-family: var(--font-display);
font-size: 0.75rem;
letter-spacing: 0.3em;
color: rgba(0,255,240,0.5);
text-transform: uppercase;
margin-bottom: 1rem;
}
.cta-headline {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 900;
color: var(--white);
margin-bottom: 1rem;
}
.cta-sub {
font-family: var(--font-mono);
font-size: 0.82rem;
color: rgba(232,232,255,0.9);
letter-spacing: 0.12em;
margin-bottom: 2.5rem;
line-height: 1.8;
}
.btn-primary {
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.95rem 2.2rem;
background: transparent;
border: 1px solid var(--cyan);
color: var(--cyan);
cursor: pointer;
position: relative;
overflow: hidden;
transition: color 0.35s;
text-decoration: none;
display: inline-block;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: var(--cyan);
transition: left 0.35s cubic-bezier(.16,1,.3,1);
z-index: -1;
}
.btn-primary:hover { color: var(--bg); }
.btn-primary:hover::before { left: 0; }
.btn-ghost {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.1em;
padding: 0.95rem 1.8rem;
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
color: rgba(232,232,255,0.45);
cursor: pointer;
text-decoration: none;
display: inline-block;
margin-left: 1rem;
transition: border-color 0.3s, color 0.3s;
}
.btn-ghost:hover {
border-color: var(--magenta);
color: var(--magenta);
}

/* ===========================
    FOOTER
=========================== */
footer {
position: relative;
z-index: 1;
padding: 3rem;
border-top: 1px solid rgba(0,255,240,0.08);
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto 1.5rem;
}
.footer-wordmark {
font-family: var(--font-display);
font-size: 0.68rem;
letter-spacing: 0.3em;
/* color: rgba(232,232,255,0.2); */
}
.footer-links { display:flex; gap:2rem; list-style:none; }
.footer-links a {
font-family: var(--font-mono);
font-size: 0.72rem;
color: rgba(232,232,255,0.9);
text-decoration: none;
letter-spacing: 0.08em;
transition: color 0.2s;
}
.footer-links a:hover { color: var(--cyan); }
.footer-bottom {
text-align: center;
font-family: var(--font-mono);
font-size: 0.7rem;
/* color: rgba(232,232,255,0.15); */
line-height: 1.8;
}

/* ===========================
    RESPONSIVE
=========================== */
@media (max-width: 900px) {
nav { padding: 1.2rem 1.5rem; }
.nav-links li:not(:last-child) { display: none; }
section { padding: 4rem 1.5rem; }
#page-header { padding: 10rem 1.5rem 4rem; }
.page-header-inner {
grid-template-columns: 1fr;
gap: 1.5rem;
display: flex;
flex-direction: column;
}
.photo-block {
display: block;
order: -1;
align-self: center;
}
.projects-grid { grid-template-columns: 1fr; }
.footer-top { flex-direction: column; gap: 1rem; }
}