/* ============================================================
   BABAK KHALILI — Portfolio Stylesheet
   1. CSS Variables
   2. Reset & Base
   3. Typography
   4. Layout
   5. Navigation
   6. Pages
   7. About
   8. Projects
   9. Contact
   10. Cursor & Glitch FX
   11. Home Reticle
   12. Landmark Marks
   13. Small screens (≤ 600px)
   ============================================================ */

/* ── 1. CSS Variables ── */
:root {
  --bg: #000;
  --text: #fff;
  --text-dim: #666;
  --text-body: #eee;
  --border: #666;

  --page-margin: clamp(1.25rem, 4vw, 2.5rem);
  --content-max-width: 52rem;
  --landmark-size: 0.75rem;
  --landmark-gap-x: 0.5rem;
  --landmark-gap-y: 0.4rem;

  /* Line strokes: thin for connecting lines, thick for bracket marks. */
  --stroke-thin: 0.4px;
  --stroke-thick: 1px;

  /* Stacking: nav sits above normal content; the reticle/landmark
     overlays sit above nav so their lines can cross through the header;
     the custom cursor sits above everything. */
  --z-nav: 20;
  --z-overlay: 25;
  --z-cursor: 9999;

  --glitch-rgb-left: -0.022em;
  --glitch-rgb-right: 0.024em;
  --glitch-rgb-blur: 0.003rem;
  --glitch-a: #3dff72;
  --glitch-a-soft: rgb(20, 168, 60);
  --glitch-a-glow: rgba(61, 255, 114, 0.08);
  --glitch-b: #2ecc55;
  --glitch-b-soft: rgba(15, 120, 40, 0.75);
  --glitch-b-glow: rgb(255, 255, 255);
  --glitch-c: #aa0000;
  --glitch-c-soft: rgba(255, 255, 255, 0.68);
  --glitch-c-glow: rgba(170, 0, 0, 0.22);
}

/* ── 2. Reset & Base ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.01em;
}

::selection {
  background: #fff;
  color: #000;
}

::-moz-selection {
  background: #fff;
  color: #000;
}

body {
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Shared interactive items — dot on hover, short line on active */
.navbar button,
.p-title {
  position: relative;
  display: inline-block;
  padding: 0.15rem 0.05rem;
  transition: color 0.15s;
}

.navbar button::after,
.p-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translateX(-50%);
  transition:
    opacity 0.15s ease,
    width 0.18s ease,
    height 0.18s ease,
    border-radius 0.18s ease;
}

.navbar button.active,
.navbar button:hover,
.p-title.active,
.p-title:hover {
  color: var(--text);
  font-weight: 700;
}

/* Hover: small dot */
.navbar button:hover::after,
.p-title:hover::after {
  opacity: 1;
}

/* Active: short line, grown from center */
.navbar button.active::after,
.p-title.active::after {
  opacity: 1;
  width: 0.9rem;
  height: 2px;
  border-radius: 999px;
}

/* ── 3. Typography ── */
.txt-h1 {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-align: left;
}

.txt-h2 {
  font-size: clamp(1rem, 4vw, 1.4rem);
  font-weight: 400;
  white-space: nowrap;
}

.txt-sub {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 1rem;
  display: inline-block;
}

.txt-body {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-body);
}

.txt-nav {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.txt-tiny {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ── 4. Layout ── */
.main-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  position: relative;
  z-index: 5;
}

/* ── 5. Navigation ── */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1.25rem var(--page-margin);
  background: var(--bg);
  z-index: var(--z-nav);
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: clamp(1.25rem, 4vw, 2.5rem);
}

/* ── 6. Pages ── */
.content-center {
  width: 100%;
  max-width: var(--content-max-width);
  min-width: 0;
  padding: 2.5rem var(--page-margin) 1rem;
  margin: 0 auto;
  position: relative;
}

.page {
  display: none;
  width: 100%;
}

.page.active {
  display: block;
}

/* ── 7. About ── */
.side-asset {
  display: none;
}

#about-img.visible {
  display: flex;
}

#about-img {
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

#about-img img {
  width: 100%;
  max-width: 20rem;
  height: auto;
}

.bio-paragraph p {
  margin-bottom: 1.5rem;
  text-align: justify;
}

.cv-wrapper {
  margin-top: 2.25rem;
}

.cv-section {
  margin-bottom: 1.75rem;
}

.cv-section p {
  margin-bottom: 0.9rem;
}

/* ── 8. Projects ── */
.project-list {
  list-style: none;
}

.project-list li {
  margin-bottom: 0.5rem;
}

/* Title (left) and close button (pushed to the far right edge of the
   column, not just next to the title) share one row. */
.p-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.p-title {
  color: var(--text);
}

.p-close {
  display: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-dim);
  padding: 0.1rem 0.3rem;
  transition: color 0.15s;
}

.p-close:hover,
.p-close:focus-visible {
  color: var(--text);
}

.p-title.active + .p-close {
  display: inline-block;
}

/* Drawer: empty and collapsed until a project is opened, then expands
   in place beneath its row, pushing later items further down. */
.p-drawer {
  display: none;
}

.p-drawer.open {
  display: block;
  margin-top: 1.25rem;
  margin-bottom: 1.75rem;
}

.project-detail-shell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
}

.project-detail-description {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--text-body);
}

.project-detail-description p {
  margin-bottom: 1rem;
  text-align: justify;
}

.project-detail-description h1 {
  font-size: 1.8rem;
  margin: 2rem 0 1rem 0;
  font-weight: 700;
}

.project-detail-description h2 {
  font-size: 1.3rem;
  margin: 1.8rem 0 0.8rem 0;
  font-weight: 700;
}

.project-detail-description h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.6rem 0;
  font-weight: 700;
}

.project-detail-description strong {
  font-weight: 700;
  color: var(--text);
}

.project-detail-description em {
  font-style: italic;
}

.project-detail-description ul,
.project-detail-description ol {
  margin: 1rem 0 1rem 1.2rem;
}

.project-detail-description li {
  margin-bottom: 0.4rem;
}

.project-detail-description hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
  opacity: 0.4;
}

.project-detail-description blockquote {
  border-left: 2px solid var(--text);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--text-dim);
}

.project-detail-description img,
.project-detail-description video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  margin: 1.5rem 0;
}

.project-detail-description iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  margin: 1.5rem 0;
}

.project-detail-description code {
  background: #111;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--border);
  font-size: 0.8rem;
}

.project-detail-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  width: 100%;
}

.project-detail-layout > .project-detail-description {
  width: 100%;
  text-align: left;
  margin-top: 1.75rem;
}

/* ── 9. Contact ── */
.contact-links {
  text-align: left;
}

.contact-links p {
  margin-bottom: 0.75rem;
}

.contact-links a:hover {
  text-decoration: underline;
}

/* ── 10. Cursor & Glitch FX ── */
.cursor-fx-enabled,
.cursor-fx-enabled body,
.cursor-fx-enabled body * {
  cursor: none !important;
}

#cursor-square {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: var(--z-cursor);
  mix-blend-mode: difference;
  transform: translate(-100px, -100px);
}

#cursor-square::before,
#cursor-square::after {
  content: "";
  position: absolute;
  background: #fff;
}

#cursor-square::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

#cursor-square::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.glitch-text {
  --cursor-dx: 0px;
  --cursor-dy: 0px;
  position: relative;
  display: inline-block;
  isolation: isolate;
  will-change: transform, filter;
}

.glitch-label,
.glitch-mask {
  display: block;
}

.glitch-label {
  position: relative;
  z-index: 2;
  transform: translate(0, 0);
  transition:
    opacity 0.1s ease,
    transform 85ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 85ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.glitch-mask {
  position: absolute;
  left: 0;
  width: 100%;
  height: 20%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity 70ms linear;
  will-change: transform, opacity, filter;
  z-index: 1;
}

.glitch-mask span {
  position: absolute;
  left: 0;
  width: 100%;
  white-space: nowrap;
  transform: translate(0, 0);
  transition: transform 85ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.glitch-displace .glitch-label {
  transform: translate(var(--cursor-dx), var(--cursor-dy));
  filter: contrast(1.08);
}

.glitch-displace .glitch-mask:nth-child(2) span,
.glitch-displace .glitch-mask:nth-child(6) span {
  transform: translate(
    calc(var(--cursor-dx) * 1.25),
    calc(var(--cursor-dy) * 0.7)
  );
}

.glitch-displace .glitch-mask:nth-child(3) span,
.glitch-displace .glitch-mask:nth-child(5) span {
  transform: translate(
    calc(var(--cursor-dx) * -0.85),
    calc(var(--cursor-dy) * 0.55)
  );
}

.glitch-displace .glitch-mask:nth-child(4) span {
  transform: translate(
    calc(var(--cursor-dx) * 0.55),
    calc(var(--cursor-dy) * -0.4)
  );
}

.glitch-mask:nth-child(2) {
  top: 0%;
}

.glitch-mask:nth-child(2) span {
  top: 0%;
}

.glitch-mask:nth-child(3) {
  top: 20%;
}

.glitch-mask:nth-child(3) span {
  top: -100%;
}

.glitch-mask:nth-child(4) {
  top: 40%;
  z-index: 3;
}

.glitch-mask:nth-child(4) span {
  top: -200%;
}

.glitch-mask:nth-child(5) {
  top: 60%;
}

.glitch-mask:nth-child(5) span {
  top: -300%;
}

.glitch-mask:nth-child(6) {
  top: 80%;
}

.glitch-mask:nth-child(6) span {
  top: -400%;
}

.glitch-trigger .glitch-label {
  opacity: 0.72;
  animation: glitch-label-fade 140ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.glitch-trigger .glitch-mask {
  opacity: 1;
}

.glitch-trigger .glitch-mask:nth-child(2) {
  color: var(--glitch-a);
  text-shadow:
    0 0 0.008rem var(--glitch-c-soft),
    var(--glitch-rgb-left) 0 var(--glitch-rgb-blur) var(--glitch-a-soft),
    0 0 0.02rem var(--glitch-a-glow);
  animation: glitch-slice-1 140ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.glitch-trigger .glitch-mask:nth-child(3) {
  color: var(--glitch-b);
  text-shadow:
    0 0 0.008rem var(--glitch-c-soft),
    var(--glitch-rgb-right) 0 var(--glitch-rgb-blur) var(--glitch-b-soft),
    0 0 0.02rem var(--glitch-b-glow);
  animation: glitch-slice-2 140ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.glitch-trigger .glitch-mask:nth-child(4) {
  color: var(--glitch-c);
  text-shadow:
    0 0 0.01rem var(--glitch-c-soft),
    0 0 0.05rem var(--glitch-c-glow),
    calc(var(--glitch-rgb-left) * 0.55) 0 var(--glitch-rgb-blur)
      rgba(61, 255, 114, 0.1),
    calc(var(--glitch-rgb-right) * 0.55) 0 var(--glitch-rgb-blur)
      rgba(46, 204, 85, 0.1);
  filter: blur(0.001em) contrast(1.1) brightness(1.04);
  animation: glitch-slice-3 130ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.glitch-trigger .glitch-mask:nth-child(5) {
  color: rgba(170, 0, 0, 0.38);
  text-shadow:
    0 0 0.008rem rgba(255, 255, 255, 0.52),
    var(--glitch-rgb-right) 0 calc(var(--glitch-rgb-blur) * 1.15)
      rgba(170, 0, 0, 0.24),
    0 0 0.02rem rgba(170, 0, 0, 0.05);
  animation: glitch-slice-4 150ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.glitch-trigger .glitch-mask:nth-child(6) {
  color: rgba(61, 255, 114, 0.42);
  text-shadow:
    0 0 0.008rem rgba(255, 255, 255, 0.48),
    var(--glitch-rgb-left) 0 calc(var(--glitch-rgb-blur) * 1.15)
      rgba(61, 255, 114, 0.26),
    0 0 0.02rem rgba(61, 255, 114, 0.05);
  animation: glitch-slice-5 130ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes glitch-label-fade {
  0% {
    opacity: 1;
    filter: none;
  }
  50% {
    opacity: 0.55;
    filter: blur(0.02em) contrast(1.12);
  }
  100% {
    opacity: 0.72;
    filter: none;
  }
}

@keyframes glitch-slice-1 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-0.1em, -0.02em);
  }
  50% {
    transform: translate(0.13em, 0.02em);
  }
  75% {
    transform: translate(-0.06em, 0.01em);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes glitch-slice-2 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0.04em, 0.005em);
  }
  45% {
    transform: translate(-0.05em, -0.008em);
  }
  70% {
    transform: translate(0.025em, 0.004em);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes glitch-slice-3 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(-0.07em, 0.02em);
  }
  55% {
    transform: translate(0.15em, -0.02em);
  }
  80% {
    transform: translate(-0.05em, 0.01em);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes glitch-slice-4 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0.045em, -0.008em);
  }
  50% {
    transform: translate(-0.06em, 0.008em);
  }
  75% {
    transform: translate(0.02em, -0.004em);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes glitch-slice-5 {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(-0.15em, 0.02em);
  }
  55% {
    transform: translate(0.09em, -0.02em);
  }
  85% {
    transform: translate(-0.04em, 0.01em);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* ── 11. Home Reticle ── */
.home-reticle {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
}

.reticle-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.reticle-line,
.reticle-square {
  stroke-width: var(--stroke-thin);
  stroke: var(--border);
}

.reticle-square {
  fill: none;
}

.reticle-coords {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 1;
  font-size: 0.56rem;
}

@media (pointer: coarse) {
  .home-reticle.reticle-touch {
    opacity: 0;
    transition: opacity 100ms linear;
  }

  .home-reticle.reticle-touch.reticle-visible {
    opacity: 1;
  }
}

/* ── 12. Landmark Marks ──
   Brackets mark content anchors — see updateLandmarkRails() in script.js,
   which draws the whole system into a single <svg> shared by the page, as
   two <path> elements:
     .landmark-line     — the connecting line for .landmark-chain groups
                           (every member bracketed, one continuous line)
                           and .landmark-span blocks (self-contained,
                           bracket-line-bracket). Drawn first, so it always
                           paints BELOW the brackets.
     .landmark-brackets — every bracket corner mark, including collapsed
                           .landmark-point entries (a lone opening bracket,
                           no line) and closing end-caps. Drawn second so
                           it paints on top.
   Building this as one path per layer (instead of many separately
   positioned divs/pseudo-elements) guarantees no seams between segments
   and a fixed, correct paint order. */
.landmark-rail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: var(--z-overlay);
}

.landmark-line {
  fill: none;
  stroke: var(--border);
  stroke-width: var(--stroke-thin);
}

.landmark-brackets {
  fill: none;
  stroke: var(--text);
  stroke-width: var(--stroke-thick);
}

/* ── 13. Small screens (≤ 600px) ── */
@media (max-width: 600px) {
  :root {
    --page-margin: 2rem;
  }

  .content-center {
    width: calc(100% - 1.5rem);
    margin: 0 auto;
  }

  .navbar ul {
    gap: 1.1rem;
  }

  .txt-nav {
    font-size: 0.875rem;
  }

  #about-img img {
    max-width: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-trigger .glitch-label {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .glitch-mask {
    display: none;
  }
}