/* =========================================================
   ALEX RIVERA — PORTFOLIO (v2 theme)
   Dark, terminal-inspired theme. Top nav + hero portrait.
   Signature moment: deploy-bar sweep plays on every section swap.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg: #0B0D12;
  --surface: #12151D;
  --surface-2: #1B1F2A;
  --line: #262B38;
  --ink: #EDEFF7;
  --muted: #9CA3B8;
  --muted-2: #6B7185;

  --accent: #34D399;
  --accent-text: #34D399;
  --accent-ink: #34D399;
  --accent-soft: rgba(52,211,153,.12);
  --accent-soft-2: rgba(52,211,153,.22);
  --amber: #FFB454;
  --live: #34D399;
  --live-soft: rgba(52,211,153,.1);
  --nav-bg: rgba(11,13,18,.85);
  --error: #FF6B6B;

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-round: 999px;

  --topbar-h: 72px;

  --dur-fast: .2s;
  --dur-mid: .38s;
  --dur-slow: .6s;
  --ease: cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0s; --dur-mid: 0s; --dur-slow: 0s; }
}

/* ---------- Light theme (warm stone/cream palette) ---------- */
:root[data-theme="light"]{
  --bg: #EDEAE2;
  --surface: #FBF9F4;
  --surface-2: #E4E0D3;
  --line: #D9D3C3;
  --ink: #201D19;
  --muted: #6B6459;
  --muted-2: #93897A;

  --accent-text: #157A52;
  --accent-soft: rgba(21,122,82,.10);
  --accent-soft-2: rgba(21,122,82,.18);
  --amber: #A9701C;
  --live-soft: rgba(21,122,82,.08);
  --nav-bg: rgba(237,234,226,.85);
  --error: #C4432E;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ transition: background-color .35s ease; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
h1,h2,h3{ font-family: var(--font-display); margin: 0 0 .5em; line-height: 1.15; }
p{ margin: 0 0 1em; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
img{ max-width: 100%; display: block; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.icon{ width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Loader ---------- */
.loader{
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  animation: loaderOut var(--dur-slow) var(--ease) 900ms forwards;
}
@media (prefers-reduced-motion: reduce){
  .loader{ animation: none; opacity: 0; visibility: hidden; }
}
.loader-inner{ display: flex; align-items: center; gap: .7em; font-family: var(--font-mono); font-size: .95rem; letter-spacing: .02em; color: var(--muted); }
.loader-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  animation: loaderPulse 1s ease-in-out infinite;
}
.loader-text strong{ color: var(--accent-text); font-weight: 500; }
@keyframes loaderPulse{ 0%,100%{ opacity:.35; transform: scale(.85);} 50%{ opacity:1; transform: scale(1);} }
@keyframes loaderOut{ to{ opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- Deploy bar (page-swap signature) ---------- */
.deploybar{
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), #7CF0C4);
  z-index: 250;
  opacity: 0;
}
.deploybar.run{
  opacity: 1;
  transition: width .5s var(--ease), opacity .15s linear;
  width: 100%;
}
.deploybar.hide{
  transition: opacity .25s linear;
  opacity: 0;
}

/* =========================================================
   TOP NAV
   ========================================================= */
.topnav{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 120;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand{
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  display: flex; align-items: center; gap: .1em;
  flex-shrink: 0;
}
.brand-caret{ color: var(--accent-text); }
.brand-dot{ color: var(--accent-text); }

.nav-links{ display: flex; align-items: center; gap: .3em; }
.nav-link{
  font-size: .92rem; color: var(--muted);
  padding: .5em .9em;
  border-radius: var(--radius-round);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-link:hover{ color: var(--ink); background: var(--surface-2); }
.nav-link.active{ color: var(--accent-text);
   /* background: var(--accent-soft); */
   }

.nav-cta{
  font-size: .88rem; font-weight: 500;
  padding: .55em 1.2em;
  border-radius: var(--radius-round);
  background: var(--accent);
  color: #04140C;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-cta:hover{ transform: translateY(-2px); }

.theme-toggle{
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.theme-toggle:hover{ border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle .icon{ width: 18px; height: 18px; }
.theme-toggle .icon-moon{ display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display: block; }
.theme-toggle-label{ display: none; }

.nav-actions{
  display: flex;
  align-items: center;
  gap: .9em;
  flex-shrink: 0;
}

.nav-toggle{ display: none; }
.burger, .burger::before, .burger::after{
  content: ""; display: block;
  width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger{ position: relative; }
.burger::before{ position: absolute; top: -6px; left: 0; }
.burger::after{ position: absolute; top: 6px; left: 0; }

/* ---------- Mobile drawer (hidden on desktop) ---------- */
.mobile-drawer{ display: none; }
.mobile-overlay{ display: none; }

/* =========================================================
   MAIN CONTENT
   ========================================================= */
.content{
  padding: calc(var(--topbar-h) + 3rem) clamp(1.5rem, 5vw, 5rem) 4rem;
  max-width: 1180px;
  margin: 0 auto;
}

.panel{
  scroll-margin-top: calc(var(--topbar-h) + 1.5rem);
  padding: 4.5rem 0;
  border-top: 1px solid var(--line);
}
.panel:first-child{ border-top: none; padding-top: 0; }

/* ---------- Scroll-reveal (fires once as each block enters view) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-2{ transition-delay: .12s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

.project-grid .project-card:nth-child(2){ transition-delay: .08s; }
.project-grid .project-card:nth-child(3){ transition-delay: .16s; }
.project-grid .project-card:nth-child(4){ transition-delay: .24s; }
.timeline-item:nth-child(2){ transition-delay: .1s; }
.timeline-item:nth-child(3){ transition-delay: .2s; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--accent-text);
  display: inline-block;
  margin-bottom: 1.2em;
  letter-spacing: .02em;
}

.display-xl{
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 600;
}
.display-lg{
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 600;
}

.lede{ max-width: 56ch; color: var(--muted); font-size: 1.05rem; }
.lede-tight{ margin-bottom: 2.2em; }

/* ---------- Hero ---------- */
.hero{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  min-height: calc(100vh - var(--topbar-h) - 6rem);
}
.hello-line{
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--muted);
  display: flex; align-items: center; gap: .5em;
  margin-bottom: .6em;
}
.hello-greet{ font-family: var(--font-body); font-size: 1.05rem; color: var(--ink); }

.typed-line{
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--accent-text);
  margin: .4em 0 1.6em;
}
.typed-text{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing 1.6s steps(30, end) .4s forwards;
}
@media (prefers-reduced-motion: reduce){ .typed-text{ width: auto; animation: none; } }
.cursor{ display: inline-block; margin-left: 2px; animation: blink 1s step-end infinite; color: var(--accent-text); }
@keyframes typing{ from{ width: 0; } to{ width: 30ch; } }
@keyframes blink{ 50%{ opacity: 0; } }

.cta-row{ display: flex; flex-wrap: wrap; gap: .8em; margin: 1.6em 0 0; }

.hero-portrait{
  position: relative;
  width: min(280px, 60vw);
  aspect-ratio: 1;
  margin: 0 auto;
}
.profile-ring{
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgb(58 186 143 / 38%);
  animation: spin 20s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .profile-ring{ animation: none; } }
@keyframes spin{ to{ transform: rotate(360deg); } }
.profile-photo{
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 24px 60px -24px rgba(52,211,153,.35);
  border: 1px solid var(--line);
}
.profile-photo img, .profile-photo svg{ width: 100%; height: 100%; object-fit: cover; }
.status-dot{
  position: absolute; right: 6%; bottom: 4%;
  width: 22px; height: 22px;
  background: var(--live);
  border: 4px solid var(--bg);
  border-radius: 50%;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.5em;
  border-radius: var(--radius-round);
  font-size: .95rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--accent); color: #04140C; }
.btn-primary:hover{ background: #4EE0AB; }
.btn-ghost{ background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent-text); }
.btn-full{ width: 100%; justify-content: center; }

.dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.dot::after{
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--live);
  opacity: .35;
  animation: dotPulse 1.8s ease-out infinite;
}
.dot-lg{ width: 12px; height: 12px; }
@keyframes dotPulse{ 0%{ transform: scale(1); opacity: .4; } 100%{ transform: scale(2.4); opacity: 0; } }

/* ---------- About ---------- */
.about-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: 1rem;
  align-items: start;
}
.about-copy p{ color: var(--muted); max-width: 58ch; }
.side-heading{
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-2);
  margin: 1.6em 0 .8em;
}
.side-heading:first-of-type{ margin-top: 1.6em; }
.side-heading-lg{ font-size: .82rem; margin-top: 2em; }

.tag-list{ display: flex; flex-wrap: wrap; gap: .5em; }
.tag-list li{
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: .4em .9em;
  border-radius: var(--radius-round);
  font-size: .85rem;
  color: var(--ink);
}
.tag-list-sm li{ font-size: .78rem; padding: .3em .7em; }

/* ---------- Terminal card ---------- */
.terminal-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.6);
}
.terminal-bar{
  display: flex; align-items: center; gap: .5em;
  padding: .8em 1em;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.terminal-dot{ width: 10px; height: 10px; border-radius: 50%; }
.t-red{ background: #FF5F57; }
.t-amber{ background: #FEBC2E; }
.t-green{ background: #28C840; }
.terminal-title{ margin-left: .5em; font-family: var(--font-mono); font-size: .75rem; color: var(--muted-2); }

/* ---------- Playground (runnable mini JS console) ---------- */
.playground{ padding: 1.2em 1.3em 1.4em; }
.playground-label{
  display: block;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .8em;
}
.playground-input{
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .85rem;
  line-height: 1.6;
  padding: .9em 1em;
  resize: vertical;
  min-height: 120px;
  transition: border-color var(--dur-fast) var(--ease);
}
.playground-input:focus{ outline: none; border-color: var(--accent); }
.playground-toolbar{
  display: flex; align-items: center; flex-wrap: wrap; gap: .6em;
  margin: .9em 0;
}
.btn-sm{ padding: .5em 1.1em; font-size: .82rem; }
.playground-hint{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted-2);
  margin-left: auto;
}
.playground-output{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.7;
  padding: .9em 1em;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.playground-output .line-log{ color: var(--ink); display: block; }
.playground-output .line-warn{ color: var(--amber); display: block; }
.playground-output .line-error{ color: var(--error); display: block; }
.playground-output .line-return{ color: var(--accent-text); display: block; }
.playground-output .line-meta{ color: var(--muted-2); display: block; }

/* ---------- Education timeline ---------- */
.timeline{ position: relative; margin-top: 1rem; }
.timeline::before{
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line);
}
.timeline-item{
  padding-left: 1.8em;
  padding-bottom: 2.6em;
  position: relative;
}
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-item::before{
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  z-index: 1;
}
.timeline-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: .2em .6em;
  border-radius: var(--radius-sm);
  margin-bottom: .6em;
}
.timeline-date{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted-2);
  display: block;
  margin-bottom: .4em;
}
.timeline-body h3{ font-size: 1.08rem; margin: 0 0 .3em; }
.timeline-org{ color: var(--accent-text); font-weight: 500; margin: 0 0 .3em; font-size: .92rem; }
.timeline-desc{ color: var(--muted); font-size: .93rem; margin: 0; }

/* ---------- Projects ---------- */
.project-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 1rem;
}
.project-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.6em;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.project-card:hover{ transform: translateY(-4px); border-color: var(--accent-soft-2); }

/* ============================================================
   Project screenshot carousel — JS-driven, any number of slides.
   Auto-advances every data-interval ms (set per .project-thumb).
   Hover pauses auto-advance and reveals prev/gallery/next pill.
   ============================================================ */
.project-thumb{
  position: relative;
  margin: -1.6em -1.6em 1.2em;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.thumb-slide{
  position: absolute; inset: 0;
  opacity: 0;
  /* transition: opacity .5s ease; */
}
.thumb-slide.is-active{ opacity: 1; z-index: 1; }
.thumb-slide img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.project-thumb::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 56px; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
}
.thumb-progress{
  position: absolute; bottom: 12px; left: 10px; right: 10px; z-index: 2;
  display: flex; gap: 6px;
}
.segment{
  flex: 1; height: 4px;
  background: rgba(255,255,255,.4);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.segment-fill{
  display: block; height: 100%; width: 0%;
  background: #fff;
  border-radius: 999px;
}
.project-thumb.single-slide .thumb-progress,
.project-thumb.single-slide .thumb-controls,
.project-thumb.single-slide::after{ display: none; }

/* hover pill: prev / gallery / next */
.thumb-controls{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px;
  background: rgba(15, 15, 20, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.project-thumb:hover .thumb-controls,
.project-thumb:focus-within .thumb-controls{
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.thumb-nav-btn{
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: #fff;
  cursor: pointer; transition: background .15s ease;
}
.thumb-nav-btn:hover{ background: rgba(255,255,255,.18); }
.thumb-nav-btn svg{ width: 14px; height: 14px; }
.thumb-gallery-btn{
  display: flex; align-items: center; gap: .35em;
  padding: 0 .7em; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: none; color: #fff; font-size: .72rem; font-weight: 500;
  font-family: inherit; white-space: nowrap;
  cursor: pointer; transition: background .15s ease;
}
.thumb-gallery-btn:hover{ background: rgba(255,255,255,.2); }
.thumb-gallery-btn svg{ width: 13px; height: 13px; flex-shrink: 0; }

.project-top{ display: flex; align-items: center; justify-content: space-between; margin: 0 0 .6em; }
.project-tag{ font-family: var(--font-mono); font-size: .7rem; color: var(--muted-2); letter-spacing: .06em; }
.live-badge{ display: flex; align-items: center; gap: .4em; font-family: var(--font-mono); font-size: .7rem; color: var(--accent-text); }
.project-card h3{ font-size: 1.15rem; margin: 0 0 .4em; }
.project-card p{ color: var(--muted); font-size: .92rem; margin-bottom: 1em; }

.project-points{
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin: 0 0 1.2em;
}
.project-points li{
  position: relative;
  padding-left: 1.15em;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}
.project-points li::before{
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.project-links{ display: flex; gap: 1.4em; margin-top: 1.2em; }
.link-arrow{
  font-size: .85rem; font-weight: 500; color: var(--accent-text);
  display: inline-flex; align-items: center; gap: .3em;
  transition: gap var(--dur-fast) var(--ease);
}
.link-arrow:hover{ gap: .55em; }


/* ---------- Weather OS phone-mockup card — same structure on every screen ---------- */
.project-card-phone{
  grid-column: auto;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 1.6em;
}
.phone-split{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6em;
}
.phone-mockup{
  display: flex;
  justify-content: center;
  width: 100%;
}
.phone-frame{
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 9 / 19.5;
  background: #0c0c0e;
  border-radius: 26px;
  padding: 10px;
  box-shadow: 0 20px 45px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  transition: transform var(--dur-fast) var(--ease);
}
.project-card-phone:hover .phone-frame{ transform: scale(1.03); }
.phone-notch{
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 44%; height: 18px;
  background: #0c0c0e;
  border-radius: 0 0 12px 12px;
  z-index: 3;
}

/* ---------- Phone screen carousel (auto-advance + swipe + tap-to-open) ---------- */
.phone-slides{
  position: relative;
  width: 100%; height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
}
.phone-slide{
  position: absolute; 
  inset: 0px -10px;
  opacity: 0;
}
.phone-slide.is-active{ opacity: 1; z-index: 1; }
.phone-slide img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.phone-progress{
  /* position: absolute;  */
  top: 30px; 
  left: 8px; 
  right: 8px; 
  z-index: 2;
  /* display: flex; 
  gap: 4px; */
}
.phone-progress .segment{
  flex: 1; height: 3px;
  background: rgba(255,255,255,.35);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.phone-progress .segment-fill{
  display: block; height: 100%; width: 0%;
  background: #fff;
  border-radius: 999px;
}

.phone-details{
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.phone-details h3{ font-size: 1.15rem; margin: 0 0 .4em; }
.phone-details p{ color: var(--muted); font-size: .92rem; margin-bottom: 1em; }
.phone-details .project-links{ transition: transform var(--dur-fast) var(--ease); }
.project-card-phone:hover .project-links{ transform: translateX(2px); }

/* Slightly larger phone once there's real room */
@media (min-width: 641px){
  .phone-frame{ max-width: 220px; }
}


/* ---------- Full-screen gallery lightbox ---------- */
.lightbox{
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10, 10, 12, .92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease;
}
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox-img{
  max-width: 88vw; max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close,
.lightbox-nav{
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; cursor: pointer;
  transition: background .15s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover{ background: rgba(255,255,255,.22); }
.lightbox-close{
  top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
}
.lightbox-close svg{ width: 18px; height: 18px; }
.lightbox-nav{
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
}
.lightbox-nav svg{ width: 20px; height: 20px; }
.lightbox-prev{ left: 20px; }
.lightbox-next{ right: 20px; }
.lightbox-counter{
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .78rem; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08); padding: .3em .9em; border-radius: 999px;
}
@media (max-width: 640px){
  .lightbox-nav{ width: 38px; height: 38px; }
  .lightbox-prev{ left: 8px; }
  .lightbox-next{ right: 8px; }
}

/* ---------- Experience ---------- */
.fresher-card{
  display: flex; gap: 1.1em; align-items: flex-start;
  background: var(--live-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius-md);
  padding: 1.6em;
  margin: 1rem 0 1.6em;
}
.fresher-card .dot{ margin-top: .5em; }
.fresher-status{
  font-family: var(--font-mono);
  font-weight: 500; font-size: .85rem;
  color: var(--accent-text);
  margin-bottom: .5em;
}
.fresher-text{ color: var(--ink); max-width: 60ch; margin: 0; }

.bring-list{ display: flex; flex-direction: column; gap: .9em; max-width: 56ch; margin-bottom: 2em; }
.bring-list li{ display: flex; gap: .8em; color: var(--muted); align-items: flex-start; }
.bring-icon{
  color: var(--accent-text); font-weight: 700; flex-shrink: 0;
  background: var(--accent-soft); width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .7rem;
  margin-top: .1em;
}

/* ---------- Contact ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: 1rem;
}
.contact-form{ display: flex; flex-direction: column; gap: 1.1em; }
.field{ display: flex; flex-direction: column; gap: .5em; font-size: .85rem; color: var(--muted); }
.field input, .field textarea{
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .8em 1em;
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus{ border-color: var(--accent); outline: none; }
.form-note{ font-size: .85rem; color: var(--accent-text); min-height: 1.2em; margin: 0; }

.contact-info{ display: flex; flex-direction: column; gap: .9em; margin-bottom: 1.6em; }
.contact-info li{ display: flex; align-items: center; gap: .7em; color: var(--muted); font-size: .92rem; }
.contact-info a:hover{ color: var(--accent-text); }

.social-row{ display: flex; gap: .7em; }
.social-btn{
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.social-btn:hover{ background: var(--accent); color: #04140C; transform: translateY(-2px); }

/* ---------- Site footer ---------- */
.site-footer{
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 4rem clamp(1.5rem, 5vw, 5rem) 2rem;
}
.footer-top{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-brand .brand{ font-size: 1.15rem; }
.footer-tagline{
  color: var(--muted);
  font-size: .92rem;
  max-width: 32ch;
  margin: 1em 0;
}
.footer-status{
  display: flex; align-items: center; gap: .6em;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink);
  margin: 0;
}
.footer-heading{
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-2);
  margin: 0 0 1.1em;
}
.footer-col{ display: flex; flex-direction: column; align-items: flex-start; gap: .8em; }
.footer-link{
  color: var(--muted);
  font-size: .92rem;
  transition: color var(--dur-fast) var(--ease);
}
.footer-link:hover{ color: var(--accent-text); }
.footer-col .social-row{ margin-top: .2em; }
.footer-bottom{
  max-width: 1180px;
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .6em 1.6em;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--muted-2);
}
.footer-bottom p{ margin: -16px; }

.resume-btn{
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.5em;
  border-radius: var(--radius-round);
  background: var(--accent);
  color: #04140C;
  font-size: .92rem;
  font-weight: 500;
  margin-top: 2em;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.resume-btn .icon{ width: 16px; height: 16px; }
.resume-btn:hover{ transform: translateY(-2px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1050px){
  .nav-links, .nav-cta{ display: none; }
  .topnav .theme-toggle{ display: none; }
  .nav-toggle{
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--line);
  }
  .navToggle-open .burger{ background: transparent; }
  .navToggle-open .burger::before{ transform: translateY(6px) rotate(45deg); }
  .navToggle-open .burger::after{ transform: translateY(-6px) rotate(-45deg); }

  

.mobile-overlay{
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    top: var(--topbar-h);
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 114;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .mobile-overlay.open{ opacity: 1; pointer-events: auto; }

.mobile-drawer{
    display: flex; flex-direction: column;
    position: fixed;
    top: var(--topbar-h); left: 0;
    width: 320px; max-width: 85vw;
    max-height: calc(100vh - var(--topbar-h) - 24px);
    background: rgba(18,18,22,.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 25px 60px rgba(0,0,0,.45);
    border-radius: 0 20px 20px 20px;
    z-index: 116;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
    padding: 1.2em;
    overflow-y: auto;
  }
  .mobile-drawer.open{ transform: translateX(0); }

  :root[data-theme="light"] .mobile-drawer{
    background: rgba(251,249,244,.82);
    border-right: 1px solid rgba(0,0,0,.06);
  }

  .drawer-header{
    display: flex; align-items: center; gap: .8em;
    padding: .4em .4em 1em;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: .8em;
  }
  :root[data-theme="light"] .drawer-header{ border-bottom-color: rgba(0,0,0,.08); }
  .drawer-avatar{
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.12);
  }
  .drawer-name{ font-family: var(--font-display); font-size: .98rem; font-weight: 600; color: var(--ink); margin: 0; }
  .drawer-role{ font-family: var(--font-mono); font-size: .74rem; color: var(--muted); margin: .1em 0 0; }

  .drawer-nav{ display: flex; flex-direction: column; gap: .15em; }
  .drawer-link{
    display: flex; align-items: center; gap: .8em;
    padding: .68em .8em;
    border-radius: var(--radius-sm);
    font-size: .9rem; font-weight: 500;
    color: var(--muted);
    position: relative;
    transition: background .18s ease, color .18s ease;
    opacity: 0; transform: translateY(6px);
  }
  .drawer-link .icon{ width: 18px; height: 18px; flex-shrink: 0; }
  .drawer-link:hover{ background: rgba(255,255,255,.06); color: var(--ink); }
  :root[data-theme="light"] .drawer-link:hover{ background: rgba(0,0,0,.045); }
  .drawer-link.active{ background: var(--accent-soft); color: var(--accent-text); }
  .drawer-link.active::before{
    content: "";
    position: absolute; left: -1.2em; top: 20%; bottom: 20%;
    width: 3px; border-radius: 0 4px 4px 0;
    background: var(--accent);
  }
  @keyframes drawerItemIn{ to{ opacity: 1; transform: translateY(0); } }
  .mobile-drawer.open .drawer-link{ animation: drawerItemIn .35s ease forwards; }
  .mobile-drawer.open .drawer-link:nth-child(1){ animation-delay: .05s; }
  .mobile-drawer.open .drawer-link:nth-child(2){ animation-delay: .09s; }
  .mobile-drawer.open .drawer-link:nth-child(3){ animation-delay: .13s; }
  .mobile-drawer.open .drawer-link:nth-child(4){ animation-delay: .17s; }
  .mobile-drawer.open .drawer-link:nth-child(5){ animation-delay: .21s; }
  .mobile-drawer.open .drawer-link:nth-child(6){ animation-delay: .25s; }
  .mobile-drawer.open .drawer-link:nth-child(7){ animation-delay: .29s; }

  .drawer-bottom{ padding-top: .8em; border-top: 1px solid rgba(255,255,255,.08); margin-top: 1em; }
  :root[data-theme="light"] .drawer-bottom{ border-top-color: rgba(0,0,0,.08); }

  .theme-toggle-mobile{
    width: 100%; height: auto; border-radius: var(--radius-sm);
    justify-content: flex-start;
    padding: .6em .8em; gap: .8em;
    background: transparent; border: none;
    margin-top: 0;
  }
  .theme-toggle-mobile:hover{ background: rgba(255,255,255,.06); }
  :root[data-theme="light"] .theme-toggle-mobile:hover{ background: rgba(0,0,0,.045); }
  .theme-toggle-mobile .theme-toggle-label{
    display: inline-block;
    font-family: inherit;
    font-size: .9rem; font-weight: 500;
    color: var(--ink);
  }

  .drawer-divider{ height: 1px; background: rgba(255,255,255,.08); margin: .6em .8em; }
  :root[data-theme="light"] .drawer-divider{ background: rgba(0,0,0,.08); }

  .mobile-socials{ display: flex; gap: .6em; padding: 0 .8em; margin-top: 0; }




  .hero{ grid-template-columns: 1fr; text-align: center; min-height: auto; padding-top: 1rem; }
  .hero-copy{ order: 2; }
  .hero-portrait{ order: 1; }
  .hello-line{ justify-content: center; }
  .cta-row{ justify-content: center; }

  .about-grid, .contact-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .footer-brand{ grid-column: 1 / -1; }
  .project-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .cta-row{ flex-direction: column; align-items: stretch; }
  .cta-row .btn{ justify-content: center; }
  .content{ padding-left: 1.2rem; padding-right: 1.2rem; }
  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; gap: .4em; }
}