/* ═══════════════════════════════════════════════════════════════
   RAHUL REDDY CHIDIPUDI — Software Engineer
   Dark only. Systems-and-architecture direction.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Four-step surface progression (after Linear's "midnight precision
     instrument"): darkness is the substrate, not a theme. Elevation comes
     from hairline borders and contrast — never from shadows or glows. */
  --bg:        #08090a;
  --surface:   #0f1011;
  --surface-2: #161718;
  --hair:      #23252a;
  --hair-2:    #383b3f;

  --fg:        #e5e5e6;
  --fg-rgb:    229,229,230;
  --text-2:    #d0d6e0;
  --mute:      #8a8f98;
  --mute-2:    #62666d;

  /* Brand accent — gold on obsidian. Used for interface: nav, CTAs,
     section tags, hover states. */
  --accent:     #e8232f;
  --accent-lit: #ff4d5a;
  --accent-ink: #ffffff;   /* text that sits ON red */
  --accent-dim: #5c0f15;
  --accent-wash: rgba(232,35,47,.09);

  /* Data colours — reserved for the architecture diagrams so a request
     path never gets confused with a button. */
  --data:      #38bdf8;    /* live request path */
  --data-wash: rgba(56,189,248,.08);
  --gold:      #e5b53c;    /* measured results */
  --ok:        #34d399;    /* converged / verified */
  --shadow:    #a78bfa;    /* the forked, non-production path */

  --disp: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad:  clamp(1.15rem, 4.5vw, 5rem);
  --maxw: 1180px;
  --wide: 1360px;
  --ease: cubic-bezier(.16,1,.3,1);
  --snap: cubic-bezier(.4,0,.2,1);   /* UI feedback — CLI speed */
  --t-ui: .17s;

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
img{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* The inline <svg> holding the portrait filters must not take up layout —
   without this it renders as a default 300x150 box and shoves the page down. */
.filter-lab{ position:absolute; width:0; height:0; overflow:hidden; }

.skip{
  position:fixed; top:-100px; left:1rem; z-index:10001;
  background:var(--accent); color:var(--accent-ink); padding:.7rem 1.1rem;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.16em;
  transition:top .25s;
}
.skip:focus{ top:1rem; }

/* ── ambient background ─────────────────────────────────────── */
.grid-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.32;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 78%);
}
.noise{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── top bar ────────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem var(--pad);
  background:rgba(7,8,10,.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.topbar.stuck{ border-bottom-color:var(--hair); }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.85rem; }
.brand__dot{
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px rgba(232,35,47,.16);
}
.brand__txt{ font-weight:500; letter-spacing:-.01em; }
.brand__txt span{ color:var(--mute); font-weight:400; }

.nav{ display:none; align-items:center; gap:.35rem; }
@media (min-width:820px){ .nav{ display:flex; } .burger{ display:none !important; } }
.nav a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--mute); padding:.5rem .8rem; border-radius:6px;
  transition:color var(--t-ui) var(--snap), background-color var(--t-ui) var(--snap), border-color var(--t-ui) var(--snap), transform var(--t-ui) var(--snap);
}
.nav a:hover{ color:var(--fg); background:var(--surface-2); }
.nav a.active{ color:var(--accent); }
.nav__cta{
  color:var(--bg) !important; background:var(--accent);
  font-weight:600; margin-left:.4rem;
}
.nav__cta:hover{ background:var(--accent-lit) !important; color:var(--bg) !important; }

.burger{ display:grid; gap:5px; padding:.45rem; }
.burger span{ display:block; width:22px; height:2px; background:var(--fg); transition:transform .35s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


/* ── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:7rem var(--pad) 5rem;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  color:var(--mute); margin-bottom:1.75rem;
}

.hero__title{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(2.5rem,8vw,5.6rem);
  line-height:1.02; letter-spacing:-.04em;
  margin-bottom:1.9rem;
}
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.07em; }
.hero__title .w{ display:inline-block; will-change:transform; }
.hero__title .accent{ color:var(--accent); }
.hero__title .dot{ color:var(--fg); }





/* ── metrics ────────────────────────────────────────────────── */
.metrics{
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  background:var(--surface);
}
.metrics__rail{
  max-width:var(--wide); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.metric{
  padding:2rem clamp(1rem,2.2vw,1.9rem);
  border-right:1px solid var(--hair);
}
.metric:last-child{ border-right:0; }
.metric__v{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(2rem,3.6vw,2.9rem); line-height:1;
  letter-spacing:-.035em; color:var(--gold); margin-bottom:.7rem;
}
.metric__k{ font-size:.9rem; font-weight:500; margin-bottom:.3rem; }
.metric__n{ font-family:var(--mono); font-size:.66rem; color:var(--mute); line-height:1.6; }

/* ── section shell ──────────────────────────────────────────── */
.sec{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4.5rem,11vh,7.5rem) var(--pad);
}
.sec--wide{ max-width:var(--wide); }
.sec__head{ margin-bottom:clamp(2.5rem,6vh,4rem); }
.sec__tag{
  display:inline-block; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.22em; color:var(--accent);
  margin-bottom:.9rem;
}
.sec__title{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.85rem,4.4vw,3.1rem);
  line-height:1.08; letter-spacing:-.035em;
}
.sec__sub{ margin-top:.9rem; max-width:56ch; color:var(--mute); font-weight:300; }

/* Reveals: CSS owns the transition, JS only adds .in when the element
   scrolls into view. No animation library involved. */
.reveal, .sec__head{ opacity:1; }
html.js .reveal,
html.js .sec__head{
  opacity:0; transform:translateY(22px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
html.js .reveal.in,
html.js .sec__head.in{ opacity:1; transform:none; }
.hl{ color:var(--gold); font-weight:600; }

/* ── experience ─────────────────────────────────────────────── */
.jobs{ display:flex; flex-direction:column; }
.job{
  display:grid; gap:.85rem 2.5rem;
  grid-template-columns:1fr;
  padding:2.2rem 0; border-top:1px solid var(--hair);
}
.job:last-child{ border-bottom:1px solid var(--hair); }
@media (min-width:860px){ .job{ grid-template-columns:210px 1fr; } }
/* the grid cell stretches to the full card height — pin the dates to the top
   so they sit level with the role title rather than floating mid-card */
.job__when{
  display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start;
  gap:.6rem; padding-top:.3rem;
}
.job__dates{ font-family:var(--mono); font-size:.72rem; color:var(--mute); letter-spacing:.03em; }
.job__now{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.16em;
  color:var(--ok); border:1px solid rgba(52,211,153,.4);
  border-radius:99px; padding:.16rem .5rem;
}
.job__role{ font-family:var(--disp); font-weight:500; font-size:clamp(1.25rem,2.6vw,1.65rem); letter-spacing:-.025em; }
.job__co{ color:var(--accent); font-size:.95rem; margin:.2rem 0 1.1rem; }
.job__co span{ color:var(--mute); }
.job__pts li{
  position:relative; padding-left:1.35rem; margin-bottom:.7rem;
  color:var(--text-2); font-weight:300; font-size:.94rem;
}
.job__pts li::before{
  content:''; position:absolute; left:0; top:.66em;
  width:7px; height:1px; background:var(--accent);
}
.job__pts b{ color:var(--fg); font-weight:600; }
.job__stack{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.job__stack li{
  font-family:var(--mono); font-size:.63rem; color:var(--mute);
  background:var(--surface); border:1px solid var(--hair);
  padding:.28rem .6rem; border-radius:5px;
}

/* ── projects ───────────────────────────────────────────────── */
.proj{
  border:1px solid var(--hair); border-radius:12px;
  background:var(--surface);
  padding:clamp(1.35rem,3vw,2.4rem);
  margin-bottom:clamp(1.5rem,3vw,2.2rem);
}
.proj__head{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  align-items:flex-start; margin-bottom:1.8rem;
}
.proj__idx{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; color:var(--mute-2); }
.proj__name{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.4rem,3.2vw,2.1rem); letter-spacing:-.03em; margin:.3rem 0 .25rem;
}
.proj__tag{ color:var(--mute); font-size:.92rem; font-weight:300; }
.proj__repo{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  font-family:var(--mono); font-size:.7rem;
  border:1px solid var(--hair-2); border-radius:7px; padding:.55rem .9rem;
  color:var(--text-2); transition:color var(--t-ui) var(--snap), background-color var(--t-ui) var(--snap), border-color var(--t-ui) var(--snap), transform var(--t-ui) var(--snap);
}
.proj__repo:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-wash); }
.proj__repo svg{ width:15px; height:15px; fill:currentColor; }

/* Diagram spans the full card and the copy sits beneath it. Side-by-side left
   the SVG a ~655px column, which is under its legible minimum and forced the
   diagram to scroll on most desktops. */
.proj__grid{ display:grid; gap:clamp(1.5rem,3vw,2.2rem); grid-template-columns:1fr; }

.proj__copy{ display:grid; gap:.4rem 2.5rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:860px){
  .proj__copy{ grid-template-columns:1fr 1fr; }
  .proj__copy > p{ grid-column:1; }
  .proj__pts{ grid-column:2; }
  .proj__stack{ grid-column:1 / -1; }
}
.proj__copy p{ color:var(--text-2); font-weight:300; font-size:.94rem; margin-bottom:1.1rem; }
.proj__pts li{
  position:relative; padding-left:1.35rem; margin-bottom:.7rem;
  color:var(--text-2); font-weight:300; font-size:.92rem;
}
.proj__pts li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:1px; background:var(--accent);
}
.proj__pts b{ color:var(--fg); font-weight:600; }
.proj__stack{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.25rem; }
.proj__stack li{
  font-family:var(--mono); font-size:.62rem; color:var(--mute);
  border:1px solid var(--hair); border-radius:5px; padding:.26rem .55rem;
}

/* ── architecture diagrams ──────────────────────────────────── */
.diagram{
  background:var(--bg); border:1px solid var(--hair);
  border-radius:10px; padding:.5rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.diagram svg{ width:100%; min-width:640px; height:auto; display:block; }

html.js .diagram .node,
html.js .diagram .cluster{
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
html.js .diagram.in .node,
html.js .diagram.in .cluster{ opacity:1; transform:none; }
html.js .diagram .flow{ opacity:0; transition:opacity .5s ease .35s; }
html.js .diagram.in .flow{ opacity:1; }

.node rect{
  fill:var(--surface-2); stroke:var(--hair-2); stroke-width:1;
}
.node--hot rect{ fill:var(--data-wash); stroke:var(--data); }
.node--shadow rect{ fill:rgba(167,139,250,.07); stroke:var(--shadow); stroke-dasharray:4 3; }
.node--ok rect{ fill:rgba(52,211,153,.06); stroke:rgba(52,211,153,.55); }
.node--ghost rect{ fill:transparent; stroke:var(--hair-2); stroke-dasharray:4 3; }
.node--part rect{ fill:var(--surface); stroke:var(--hair); }

.n-t{
  fill:var(--fg); font-family:var(--disp); font-weight:500;
  font-size:14px; text-anchor:middle;
}
.n-s{
  fill:var(--mute); font-family:var(--mono);
  font-size:9.5px; text-anchor:middle; letter-spacing:.02em;
}
.n-s--hot{ fill:var(--data); }
.n-s--ok{ fill:var(--ok); }
.n-p{ fill:var(--text-2); font-family:var(--mono); font-size:10px; text-anchor:middle; }

.cluster rect{ fill:rgba(255,255,255,.012); stroke:var(--hair); stroke-dasharray:5 4; }
.cl-t{ fill:var(--mute); font-family:var(--mono); font-size:10px; text-anchor:middle; letter-spacing:.14em; }

.edge{ fill:var(--mute-2); font-family:var(--mono); font-size:9.5px; text-anchor:middle; }
.edge--shadow{ fill:var(--shadow); }
.edge--ok{ fill:var(--ok); }

.flow{
  fill:none; stroke:var(--data); stroke-width:1.6;
  stroke-dasharray:5 7; stroke-linecap:round;
  animation:dash 1.1s linear infinite;
}
.flow--shadow{ stroke:var(--shadow); }
.flow--dim{ stroke:var(--hair-2); animation-duration:1.8s; }
.flow--rev{ animation-direction:reverse; }
@keyframes dash{ to{ stroke-dashoffset:-24; } }

/* ── skills ─────────────────────────────────────────────────── */
.skills{
  display:grid; gap:1px; background:var(--hair);
  border:1px solid var(--hair); border-radius:10px; overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.skillset{ background:var(--surface); padding:1.6rem clamp(1.1rem,2vw,1.6rem); }
.skillset h3{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  color:var(--accent); text-transform:uppercase; margin-bottom:1rem;
}
.skillset ul{ display:flex; flex-wrap:wrap; gap:.4rem; }
.skillset li{
  font-family:var(--mono); font-size:.68rem; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--hair);
  border-radius:5px; padding:.3rem .6rem;
  transition:border-color .25s, color .25s;
}
.skillset li:hover{ border-color:var(--accent); color:var(--accent); }

/* ── about ──────────────────────────────────────────────────── */
.about{ display:grid; gap:clamp(1.75rem,4vw,3rem); grid-template-columns:1fr; }
@media (min-width:880px){ .about{ grid-template-columns:300px 1fr; align-items:start; } }

.about__photo{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--hair); background:var(--surface); }
.about__photo img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; filter:grayscale(.35) contrast(1.05); transition:filter .5s; }
.about__photo:hover img{ filter:grayscale(0) contrast(1); }
.about__ph{
  display:none; aspect-ratio:1; place-items:center; align-content:center;
  gap:.6rem; text-align:center; color:var(--mute-2);
}
.about__ph span{ font-family:var(--disp); font-weight:500; font-size:3rem; color:var(--hair-2); }
.about__ph em{ font-family:var(--mono); font-size:.6rem; font-style:normal; letter-spacing:.08em; }
.about__photo.is-empty img{ display:none; }
.about__photo.is-empty .about__ph{ display:grid; }

.about__copy p{ color:var(--text-2); font-weight:300; margin-bottom:1.1rem; max-width:62ch; }
.edu, .certs{ margin-top:2.2rem; }
.edu h3, .certs h3{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  color:var(--accent); text-transform:uppercase; margin-bottom:1rem;
}
.edu__deg{ font-family:var(--disp); font-weight:500; font-size:1.2rem; letter-spacing:-.02em; color:var(--fg); margin-bottom:.2rem; }
.edu__school{ color:var(--text-2); font-size:.92rem; margin-bottom:.2rem; }
.edu__meta{ font-family:var(--mono); font-size:.68rem; color:var(--mute); margin-bottom:.5rem; }
.edu__course{ font-family:var(--mono); font-size:.66rem; color:var(--mute-2); line-height:1.8; }
.certs ul{ display:flex; flex-wrap:wrap; gap:.5rem; }
.certs li{
  font-family:var(--mono); font-size:.68rem; color:var(--text-2);
  border:1px solid var(--hair); border-left:2px solid var(--gold);
  background:var(--surface); border-radius:0 5px 5px 0; padding:.45rem .8rem;
}

.lead{ margin-top:clamp(3rem,7vh,4.5rem); }
.lead__h{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  color:var(--accent); text-transform:uppercase; margin-bottom:1.4rem;
}
.lead__grid{ display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:10px; overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.lead__item{ background:var(--surface); padding:1.5rem; }
.lead__role{ font-family:var(--disp); font-weight:500; font-size:1rem; letter-spacing:-.015em; margin-bottom:.2rem; }
.lead__org{ font-family:var(--mono); font-size:.66rem; color:var(--accent); margin-bottom:.7rem; }
.lead__d{ color:var(--mute); font-size:.86rem; font-weight:300; }

/* ── contact ────────────────────────────────────────────────── */
.contact{
  border-top:1px solid var(--hair);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(56,189,248,.07), transparent 68%),
    var(--bg);
  padding:clamp(4.5rem,11vh,7rem) var(--pad);
}
.contact__inner{ max-width:var(--maxw); margin-inline:auto; }
.contact__title{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(2rem,6vw,4rem); line-height:1.04; letter-spacing:-.04em;
  margin:.6rem 0 1rem;
}
.contact__sub{ color:var(--mute); font-weight:300; max-width:48ch; margin-bottom:2.6rem; }
.contact__links{
  display:grid; gap:1px; background:var(--hair);
  border:1px solid var(--hair); border-radius:10px; overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.clink{ background:var(--surface); padding:1.35rem 1.25rem; transition:background-color var(--t-ui) var(--snap); }
a.clink:hover{ background:var(--surface-2); }
.clink__k{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:var(--mute-2); margin-bottom:.4rem; }
.clink__v{ display:block; font-family:var(--disp); font-weight:500; font-size:.95rem; letter-spacing:-.01em; word-break:break-word; }
a.clink:hover .clink__v{ color:var(--accent); }

/* ── footer ─────────────────────────────────────────────────── */
.foot{
  max-width:var(--wide); margin-inline:auto;
  padding:1.6rem var(--pad) 2.6rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.66rem; color:var(--mute-2);
  border-top:1px solid var(--hair);
}
.foot a:hover{ color:var(--accent); }

/* ── motion safety ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  html.js .reveal{ opacity:1 !important; transform:none !important; }
  .flow{ animation:none; stroke-dasharray:none; }
}

/* ── print ──────────────────────────────────────────────────── */
@media print{
  .topbar,.mobilenav,.grid-bg,.noise,.hero__scroll,.skip{ display:none !important; }
  body{ background:#fff; color:#000; }
  html.js .reveal{ opacity:1 !important; }
  .proj,.diagram{ break-inside:avoid; }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-PAGE CHROME — wipe, menu overlay, cinematic hero, act nav
   ═══════════════════════════════════════════════════════════════ */

/* ── page wipe ──────────────────────────────────────────────────
   Covers the viewport on load and lifts away; drops back down on
   navigation. Deliberately quick — a long curtain reads as lag. */
/* Default state is OUT OF THE WAY. The entrance is an animation, so a
   throttled background tab, a JS failure, or reduced-motion can never
   leave a curtain covering the page. */
.wipe{
  position:fixed; inset:0; z-index:9500; pointer-events:none;
  background:linear-gradient(180deg, #17181c 0%, var(--bg) 70%);
  transform:translateY(-101%);
}
html.js .wipe{ animation:wipeIn .46s cubic-bezier(.7,0,.3,1) both; }
@keyframes wipeIn{ from{ transform:translateY(0) } to{ transform:translateY(-101%) } }
/* navigation: drop it back down, then the browser leaves the page */
.wipe.down{
  animation:none;
  transform:translateY(0);
  transition:transform .3s cubic-bezier(.7,0,.3,1);
}
html:not(.js) .wipe{ display:none; }

/* ── full-screen menu ───────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:940;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  pointer-events:none; visibility:hidden;
}
.menu.open{ pointer-events:auto; visibility:visible; }
.menu__bg{
  position:absolute; inset:0;
  background:rgba(7,8,10,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  clip-path:circle(0% at calc(100% - 3rem) 2.6rem);
  transition:clip-path .7s cubic-bezier(.7,0,.25,1);
}
.menu.open .menu__bg{ clip-path:circle(150% at calc(100% - 3rem) 2.6rem); }

.menu__list{ position:relative; }
.menu__list li{ overflow:hidden; }
.menu__list a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.9rem,7vw,4.6rem);
  line-height:1.14; letter-spacing:-.035em;
  transform:translateY(110%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.menu.open .menu__list a{ transform:translateY(0); }
.menu__list li:nth-child(1) a{ transition-delay:.10s }
.menu__list li:nth-child(2) a{ transition-delay:.16s }
.menu__list li:nth-child(3) a{ transition-delay:.22s }
.menu__list li:nth-child(4) a{ transition-delay:.28s }
.menu__list li:nth-child(5) a{ transition-delay:.34s }
.menu__list li:nth-child(6) a{ transition-delay:.40s }

.menu__list a::before{
  content:attr(data-i);
  font-family:var(--mono); font-weight:400;
  font-size:.62rem; letter-spacing:.16em; color:var(--accent);
  transform:translateY(-1.05em);
}
/* wipe-fill on hover */
.menu__list a span{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 100%; background-repeat:no-repeat;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  padding:0 .12em; margin:0 -.12em;
  transition:background-size .4s cubic-bezier(.16,1,.3,1), color .4s;
}
.menu__list a:hover span{ background-size:100% 100%; color:var(--accent-ink); }
.menu__list a[aria-current="page"] span{ color:var(--accent); }
.menu__list a[aria-current="page"]:hover span{ color:var(--accent-ink); }

.menu__foot{
  position:relative; margin-top:clamp(2rem,6vh,3.5rem);
  display:flex; flex-wrap:wrap; gap:.7rem 2rem;
  font-family:var(--mono); font-size:.7rem; color:var(--mute);
  opacity:0; transition:opacity .4s .45s;
}
.menu.open .menu__foot{ opacity:1; }
.menu__foot a:hover{ color:var(--accent); }

.nav a[aria-current="page"]{ color:var(--accent); }
.nav__cta[aria-current="page"]{ color:var(--bg) !important; }

/* ── cinematic hero (home) ──────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(3rem,9vh,5.5rem);
  overflow:hidden;
}
.hero__glow{
  position:absolute; top:-15%; right:-10%;
  width:70vw; height:95vh; pointer-events:none;
  background:radial-gradient(circle at 58% 42%,
    rgba(232,35,47,.20), rgba(92,15,21,.12) 40%, transparent 70%);
  filter:blur(30px);
}

.portrait{ position:absolute; top:0; right:0; bottom:0; width:min(70vw,820px); pointer-events:none; }
.portrait__stage{ position:absolute; inset:0; will-change:transform; }
.portrait__img, .portrait__plate{
  position:absolute; top:50%; left:50%;
  width:100%; height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover; object-position:52% 20%;
  -webkit-mask-image:
    radial-gradient(ellipse 62% 68% at 52% 40%, #000 42%, transparent 78%),
    linear-gradient(180deg,#000 0 62%,transparent 96%);
  mask-image:
    radial-gradient(ellipse 62% 68% at 52% 40%, #000 42%, transparent 78%),
    linear-gradient(180deg,#000 0 62%,transparent 96%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.portrait__img{ filter:url(#inkPortrait) contrast(1.05); }
.portrait__plate{
  filter:url(#inkPlate); mix-blend-mode:screen; opacity:.35;
  transform:translate(calc(-50% + 4px),calc(-50% - 3px));
}
.portrait__halftone{
  position:absolute; inset:0;
  background-image:radial-gradient(circle at center, rgba(0,0,0,.85) 34%, transparent 36%);
  background-size:4px 4px; mix-blend-mode:multiply; opacity:.34;
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 52% 40%, #000 30%, transparent 76%);
  mask-image:radial-gradient(ellipse 62% 66% at 52% 40%, #000 30%, transparent 76%);
}
/* crushes the light studio backdrop back into the page so only the
   subject carries luminance — without this the flat grey blows to a halo */
.portrait__vig{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 54% 66% at 52% 42%,
    transparent 0%, rgba(7,8,10,.18) 58%, rgba(7,8,10,.74) 82%, var(--bg) 97%);
}
.portrait__rim{
  position:absolute; inset:0; mix-blend-mode:screen; opacity:.5;
  background:linear-gradient(255deg, rgba(232,35,47,.28) 0%, transparent 40%);
}
.portrait__fade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(7,8,10,.74) 26%, transparent 62%),
    linear-gradient(0deg, var(--bg) 0%, transparent 34%);
}

.hero__copy{ position:relative; z-index:3; max-width:min(60ch,74vw); }
.hero__title{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(2.3rem,7.4vw,6rem);
  line-height:1; letter-spacing:-.045em; margin-bottom:1.6rem;
}
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .w{ display:inline-block; }
html.js .hero__title .w{
  transform:translateY(108%);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
body.ready .hero__title .w{ transform:none; }
.hero__title .ln:nth-child(1) .w{ transition-delay:.06s }
.hero__title .ln:nth-child(2) .w{ transition-delay:.14s }
.hero__title .ln:nth-child(3) .w{ transition-delay:.22s }

/* the rest of the hero fades up behind the headline */
html.js .hero__eyebrow,
html.js .hero__role,
html.js .cta,
html.js .hero__slate{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
html.js .hero__eyebrow{ transition-delay:.30s }
html.js .hero__role{ transition-delay:.36s }
html.js .cta{ transition-delay:.42s }
html.js .hero__slate{ transition-delay:.50s }
body.ready .hero__eyebrow,
body.ready .hero__role,
body.ready .cta,
body.ready .hero__slate{ opacity:1; transform:none; }

.hero__eyebrow{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.2rem,2.8vw,2.1rem);
  letter-spacing:-.015em; margin-bottom:.6rem;
}
.hero__eyebrow .rule{
  display:block; flex:none; width:clamp(34px,3.5vw,56px); height:4px;
  background:var(--accent);
}
.hero__role{
  display:flex; flex-wrap:wrap; gap:.35rem 1.1rem;
  font-family:var(--mono); font-size:clamp(.62rem,1.1vw,.76rem);
  letter-spacing:.14em; color:var(--mute);
  margin-left:calc(clamp(34px,3.5vw,56px) + 1rem);
  margin-bottom:clamp(1.6rem,4vh,2.4rem);
}
.hero__role span + span{ position:relative; padding-left:1.1rem; color:var(--accent); }
.hero__role span + span::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:.95em; background:var(--hair-2);
}

.cta{
  display:inline-flex; align-items:center;
  background:var(--surface); border:1px solid var(--hair-2);
  border-radius:999px; padding:5px 1.5rem 5px 5px;
  transition:color var(--t-ui) var(--snap), background-color var(--t-ui) var(--snap), border-color var(--t-ui) var(--snap), transform var(--t-ui) var(--snap);
}
.cta:hover{ border-color:var(--accent); background:var(--accent-wash); transform:translateX(5px); }
.cta__disc{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:50%; background:var(--accent); margin-right:.95rem;
}
.cta__disc svg{ width:12px; height:12px; fill:var(--accent-ink); margin-left:2px; }
.cta__txt{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; }

.hero__slate{
  position:absolute; left:var(--pad); top:50%; transform:translateY(-50%);
  display:none; flex-direction:column; gap:1.2rem;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.22em;
  color:var(--mute-2); writing-mode:vertical-rl;
}
@media (min-width:1180px){ .hero__slate{ display:flex; left:calc(var(--pad) - 2.2rem); } }

.sec--tight{ padding-top:0; }
.metrics__rail{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border:1px solid var(--hair); border-radius:10px; overflow:hidden;
  background:var(--hair); gap:1px;
}
.metrics__rail .metric{ background:var(--surface); border-right:0; }

/* ── index list (home) ──────────────────────────────────────── */
.index{ border-top:1px solid var(--hair); }
.index li{ border-bottom:1px solid var(--hair); }
.index a{
  position:relative; display:flex; align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.15rem,2.5vw,1.8rem) clamp(.5rem,1.5vw,1.1rem);
  transition:padding-left .35s var(--ease), color .3s;
}
/* accent sweep fills from the left on hover */
.index a::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--accent-wash), transparent 70%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.index a:hover::before{ transform:scaleX(1); }
.index a:hover{ padding-left:clamp(1.1rem,2.6vw,2rem); }
.index__n{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; color:var(--accent); flex:none; }
.index__b{ flex:1; display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.index__b b{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.2rem,2.7vw,1.95rem); letter-spacing:-.03em; line-height:1.1;
}
.index__b i{ font-style:normal; font-size:.86rem; font-weight:300; color:var(--mute); }
.index__go{ flex:none; font-size:1.35rem; color:var(--mute-2); transition:transform .35s var(--ease), color .3s; }
.index a:hover .index__go{ transform:translateX(9px); color:var(--accent); }

/* ── act nav ────────────────────────────────────────────────── */
.actnav{
  width:calc(100% - 2 * var(--pad)); max-width:var(--wide);
  margin:clamp(2rem,5vh,3.5rem) auto clamp(3rem,7vh,4.5rem);
  display:grid; gap:1px; grid-template-columns:1fr;
  background:var(--hair); border:1px solid var(--hair);
  border-radius:10px; overflow:hidden;
}
@media (min-width:700px){ .actnav{ grid-template-columns:1fr 1fr; } }
.actnav__side{
  background:var(--surface); padding:clamp(1.3rem,3vw,2rem);
  display:flex; flex-direction:column; gap:.4rem;
  transition:background-color var(--t-ui) var(--snap);
}
.actnav__side--next{ text-align:right; align-items:flex-end; }
a.actnav__side:hover{ background:var(--surface-2); }
.actnav__dir{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:var(--accent); }
.actnav__n{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--mute-2); }
.actnav__t{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.1rem,2.5vw,1.7rem); letter-spacing:-.03em; line-height:1.1;
  transition:color .3s;
}
a.actnav__side:hover .actnav__t{ color:var(--accent); }
.actnav__side--end{ opacity:.42; }
.actnav__side--end .actnav__dir{ color:var(--mute-2); }

/* ── project + card hover ───────────────────────────────────── */
.proj{ transition:border-color .35s, transform .35s var(--ease); }
.proj:hover{ border-color:var(--hair-2); }
.skillset, .lead__item{ transition:background-color var(--t-ui) var(--snap); }
.skillset:hover, .lead__item:hover{ background:var(--surface-2); }
.about__photo img{ filter:grayscale(.4) contrast(1.05); }

.notfound{ min-height:60vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.contact__title{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(1.9rem,5.5vw,3.6rem); line-height:1.06; letter-spacing:-.04em;
}

@media (max-width:900px){
  .portrait{ width:100%; opacity:.5; }
  .portrait__img, .portrait__plate{ object-position:50% 16%; }
  .portrait__fade{
    background:
      linear-gradient(0deg, var(--bg) 6%, rgba(7,8,10,.6) 46%, transparent 84%),
      linear-gradient(90deg, rgba(7,8,10,.5), transparent 60%);
  }
  .hero__copy{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  .wipe{ display:none !important; }
  html.js .hero__title .w{ transform:none !important; }
  html.js .reveal, html.js .sec__head,
  html.js .diagram .node, html.js .diagram .cluster, html.js .diagram .flow{
    opacity:1 !important; transform:none !important;
  }
}

/* ── project link row ───────────────────────────────────────── */
.proj__links{ display:flex; flex-wrap:wrap; gap:.5rem; flex:none; }
.proj__repo--live{
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-wash);
}
.proj__repo--live:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.proj__repo--none{
  cursor:default; color:var(--mute-2); border-style:dashed;
}
.proj__repo--none:hover{ border-color:var(--hair-2); color:var(--mute-2); background:none; }

/* ═══════════════════════════════════════════════════════════════
   TERMINAL — glass panel over the portrait
   ═══════════════════════════════════════════════════════════════ */
.term{
  position:relative; z-index:4;
  width:min(430px, 100%);
  margin-top:2.2rem;
  display:flex; flex-direction:column;
  background:rgba(10,11,15,.74);
  border:1px solid var(--hair-2);
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
}
.term.focused{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-wash) inset;
}
@media (min-width:1080px){
  .term{
    position:absolute; right:var(--pad); bottom:clamp(3rem,9vh,5.5rem);
    margin-top:0; width:min(420px, 34vw);
  }
}

.term__bar{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .85rem;
  border-bottom:1px solid var(--hair);
  background:rgba(255,255,255,.02);
}
.term__dots{ display:flex; gap:.35rem; }
.term__dots i{ width:9px; height:9px; border-radius:50%; background:var(--hair-2); }
.term__dots i:first-child{ background:var(--accent); }
.term__title{
  flex:1; font-family:var(--mono); font-size:.62rem;
  color:var(--mute-2); letter-spacing:.04em;
}
.term__live{
  display:flex; align-items:center; gap:.35rem;
  font-family:var(--mono); font-size:.55rem; letter-spacing:.16em; color:var(--ok);
}
.term__live b{
  width:6px; height:6px; border-radius:50%; background:var(--ok);
  animation:tblink 1.8s steps(1) infinite;
}
@keyframes tblink{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }

.term__body{
  padding:.85rem .95rem;
  height:clamp(190px, 26vh, 250px);
  overflow-y:auto; overscroll-behavior:contain;
  font-family:var(--mono); font-size:.7rem; line-height:1.75;
  color:var(--text-2);
  scrollbar-width:thin; scrollbar-color:var(--hair-2) transparent;
}
.term__body::-webkit-scrollbar{ width:6px; }
.term__body::-webkit-scrollbar-thumb{ background:var(--hair-2); border-radius:3px; }

.tline{ white-space:pre-wrap; word-break:break-word; }
.techo{ color:var(--fg); }
.tp{ color:var(--accent); }
.tout{ margin-bottom:.35rem; }
.terr{ color:var(--accent-lit); }
.tnote{ color:var(--mute-2); margin-top:.3rem; }
.tc{ color:var(--accent); }
.td{ color:var(--text-2); }
.trow{ display:flex; gap:.75rem; }
.trow .tc{ flex:none; min-width:6.4em; }
.tls{ display:flex; flex-wrap:wrap; gap:.15rem 1.1rem; color:var(--data); }
.term__body a{ color:var(--data); border-bottom:1px solid rgba(56,189,248,.35); }
.term__body a:hover{ color:var(--accent); border-bottom-color:currentColor; }

.term__form{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .95rem;
  border-top:1px solid var(--hair);
  background:rgba(255,255,255,.015);
}
.term__prompt{ color:var(--accent); font-family:var(--mono); font-size:.85rem; line-height:1; }
.term__input{
  flex:1; background:none; border:0; outline:none;
  font-family:var(--mono); font-size:.72rem; color:var(--fg);
  caret-color:var(--accent);
}
.term__input::placeholder{ color:var(--mute-2); }

.term__hints{
  display:flex; flex-wrap:wrap; gap:.35rem;
  padding:.6rem .95rem .75rem;
  border-top:1px solid var(--hair);
}
.term__hints button{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.04em;
  color:var(--mute); background:var(--surface-2);
  border:1px solid var(--hair); border-radius:5px;
  padding:.28rem .55rem;
  transition:color var(--t-ui) var(--snap), background-color var(--t-ui) var(--snap), border-color var(--t-ui) var(--snap), transform var(--t-ui) var(--snap);
}
.term__hints button:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-wash); }

@media (max-width:1079px){
  .hero{ align-items:center; padding-top:6.5rem; padding-bottom:3rem; min-height:auto; }
  .hero__copy{ margin-bottom:0; }
}

/* ── portrait backdrop ──────────────────────────────────────────
   The photo was shot on a flat grey studio wall. Rather than let
   that read as a grey rectangle, a crimson aura sits behind the
   subject so the fade-out lands in lit colour, not neutral. */
.portrait__aura{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 50% at 54% 34%,
      rgba(255,86,72,.34) 0%, rgba(190,28,40,.22) 34%,
      rgba(92,15,21,.16) 58%, transparent 76%),
    radial-gradient(ellipse 78% 70% at 62% 50%,
      rgba(48,10,14,.55) 0%, transparent 70%);
  filter:blur(6px);
}
.portrait__stage{ z-index:1; }
.portrait__rim{
  background:linear-gradient(252deg, rgba(255,92,80,.40) 0%, transparent 42%);
  opacity:.62;
}
/* warm the vignette so the edges dissolve into ember, not grey */
.portrait__vig{
  background:
    radial-gradient(ellipse 54% 66% at 52% 42%,
      transparent 0%, rgba(36,8,11,.20) 56%,
      rgba(12,6,8,.74) 82%, var(--bg) 97%);
}