/* ==========================================================================
   Alexander Massoumi — portfolio stylesheet
   Built for the markup in index.html / generic.html / elements.html
   Fonts (linked in <head>): Space Grotesk (display), IBM Plex Sans (body)
   Theme: UC Irvine Blue & Gold
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, dl, dt, dd, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---- Tokens ---- */
:root {
  --ink: #10202b;
  --ink-soft: #4d6072;
  --paper: #eef2f5;
  --paper-raised: #ffffff;
  --line: #c9d3da;
  --accent: #fecc07;
  --accent-ink: #ffffff;
  --structural: #255799;
  --structural-dark: #143a63;

  --font-display: "Space Grotesk", Helvetica, Arial, sans-serif;
  --font-body: "IBM Plex Sans", Helvetica, Arial, sans-serif;

  --container-w: 68rem;
  --gutter: 1.5rem;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--structural);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

p { color: var(--ink-soft); }

/* A dimension-line rule, borrowed from technical drawings —
   used as a section divider throughout the site. */
.hero-rule {
  position: relative;
  height: 2px;
  width: 4.5rem;
  background: var(--structural);
  margin: 1.5rem 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  animation: rule-draw 0.6s cubic-bezier(.65,0,.35,1) 0.32s forwards;
}
.hero-rule::before,
.hero-rule::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 2px;
  height: 10px;
  background: var(--structural);
  opacity: 0;
  animation: tick-in 0.2s ease 0.9s forwards;
}
.hero-rule::before { left: 0; }
.hero-rule::after { right: 0; }

@keyframes rule-draw { to { transform: scaleX(1); } }
@keyframes tick-in { to { opacity: 1; } }

.hero h1,
.page-head h1 {
  opacity: 0;
  transform: translateY(0.6rem);
  animation: head-rise 0.55s cubic-bezier(.2,.7,.3,1) 0.05s forwards;
}
.hero p {
  opacity: 0;
  animation: head-rise 0.5s ease 0.55s forwards;
}
@keyframes head-rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rule,
  .hero-rule::before,
  .hero-rule::after,
  .hero h1,
  .page-head h1,
  .hero p {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Nav ---- */
.nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}

.brand-mark {
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--structural);
  flex-shrink: 0;
}

.nav-toggle { display: none; }

.nav-burger {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.nav-burger span { top: 1.1rem; }
.nav-burger span::before { top: -0.5rem; }
.nav-burger span::after { top: 0.5rem; }

.nav-toggle:checked ~ .nav-burger span { background: transparent; }
.nav-toggle:checked ~ .nav-burger span::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--ink);
}
.nav-toggle:checked ~ .nav-burger span::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--ink);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-links a:hover,
.nav-links a.is-hovered { color: var(--ink); }
.nav-links a.active {
  color: var(--ink);
  border-bottom-color: var(--structural);
}

.nav-social {
  display: flex;
  gap: 1rem;
}
.nav-social a {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-social a svg { width: 1rem; height: 1rem; }

.nav-social a:hover,
.nav-social a.is-hovered {
  color: var(--structural);
  border-color: var(--structural);
}

@media (max-width: 780px) {
  .nav-burger { display: block; }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem var(--gutter) 2rem;
    display: none;
    box-shadow: 0 0.5rem 1rem rgba(16, 32, 43, 0.08);
  }
  .nav-toggle:checked ~ .nav-menu { display: flex; }
  .nav-links { flex-direction: column; gap: 1.1rem; }
  .nav-social { gap: 1.25rem; }
}

/* ---- Page head (About / Resume) ---- */
.page-head {
  padding: 3.5rem 0 2.5rem;
}
.page-head h1 {
  font-size: 2.5rem;
}

/* ---- Hero (Projects / index) ---- */
.hero {
  padding: 4.5rem 0 3rem;
  max-width: 42rem;
}
.hero h1 {
  font-size: 3.25rem;
  letter-spacing: -0.01em;
}
.hero p {
  margin-top: 1.75rem;
  font-size: 1.1rem;
  max-width: 34rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  background: var(--structural);
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--structural);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn svg { width: 1rem; height: 1rem; }

.btn:hover,
.btn.is-hovered {
  background: var(--structural-dark);
  border-color: var(--structural-dark);
  color: var(--accent);
}

/* ---- Section label ---- */
.section-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 2.5rem 0 1.5rem;
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}

/* ---- Panels (project cards) ---- */
main.container { padding-bottom: 5rem; }

.panel {
  border: 1px solid var(--line);
  background: var(--paper-raised);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.panel:hover,
.panel.is-hovered {
  border-color: var(--structural);
}

.panel-featured {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 1rem;
}

.panel-figure {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 12rem;
  overflow: hidden;
}
.panel-featured .panel-figure {
  border-bottom: none;
  border-right: 1px solid var(--line);
}
.panel-figure img {
  max-height: 9rem;
  width: auto;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1);
}

.panel:hover .panel-figure img,
.panel:focus-within .panel-figure img,
.panel.is-hovered .panel-figure img,
.panel:focus-within .panel-figure img {
  transform: scale(1.05);
}

.panel-body {
  position: relative;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}

/* Corner registration marks — a nod to drawing alignment marks,
   shown on interaction to reinforce that a panel is a target. */
.panel-figure::before,
.panel-figure::after,
.panel-body::before,
.panel-body::after {
  content: "";
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.panel-figure::before { top: 0.6rem; left: 0.6rem; border-top: 2px solid var(--structural); border-left: 2px solid var(--structural); }
.panel-figure::after  { top: 0.6rem; right: 0.6rem; border-top: 2px solid var(--structural); border-right: 2px solid var(--structural); }
.panel-body::before   { bottom: 0.6rem; left: 0.6rem; border-bottom: 2px solid var(--structural); border-left: 2px solid var(--structural); }
.panel-body::after    { bottom: 0.6rem; right: 0.6rem; border-bottom: 2px solid var(--structural); border-right: 2px solid var(--structural); }

.panel:hover .panel-figure::before,
.panel:hover .panel-figure::after,
.panel:hover .panel-body::before,
.panel:hover .panel-body::after,
.panel:focus-within .panel-figure::before,
.panel:focus-within .panel-figure::after,
.panel:focus-within .panel-body::before,
.panel:focus-within .panel-body::after,
.panel.is-hovered .panel-figure::before,
.panel.is-hovered .panel-figure::after,
.panel.is-hovered .panel-body::before,
.panel.is-hovered .panel-body::after,
.panel:focus-within .panel-figure::before,
.panel:focus-within .panel-figure::after,
.panel:focus-within .panel-body::before,
.panel:focus-within .panel-body::after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .panel-figure img { transition: none; }
}

.tag {
  display: inline-block;
  align-self: flex-start;
  font-family: "IBM Plex Sans", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--structural);
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.25rem;
}

.panel-date {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.panel-body h2 {
  font-size: 1.6rem;
  margin-top: 0.25rem;
}
.panel-body h3 {
  font-size: 1.15rem;
  margin-top: 0.15rem;
}

.panel-body p {
  font-size: 0.95rem;
}

.panel-link {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
  padding-top: 0.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 780px) {
  .panel-featured { grid-template-columns: 1fr; }
  .panel-featured .panel-figure {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .grid { grid-template-columns: 1fr; }
}

/* ---- About page ---- */
.about-copy {
  padding: 3rem 0 5rem;
  max-width: 40rem;
}
.about-figure {
  width: 11rem;
  height: 11rem;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 2.5rem;
}
.about-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-copy p {
  margin-bottom: 1.4rem;
  font-size: 1.02rem;
  color: var(--ink);
}
.about-copy p:last-child { margin-bottom: 0; }

/* ---- Resume page ---- */
.resume-wrap {
  padding: 1rem 0 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.resume-figure {
  width: 100%;
  max-width: 40rem;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  padding: 0.75rem;
}
.resume-figure img { width: 100%; height: auto; }

/* ---- Footer ---- */
.footer {
  border-top: 1px solid var(--line);
  padding: 3rem 0 2.5rem;
  margin-top: 2rem;
}

.title-block {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 4rem;
}
.title-block dt {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.title-block dd a {
  color: var(--ink);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
}

.title-block dd a:hover,
.title-block dd a.is-hovered { border-color: var(--structural); color: var(--accent); }

.tb-social {
  display: flex;
  gap: 0.75rem;
}
.tb-social a {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
}
.tb-social a svg { width: 1rem; height: 1rem; }

.tb-social a:hover,
.tb-social a.is-hovered { color: var(--structural); border-color: var(--structural); }

.footer-meta {
  margin-top: 2.5rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .hero h1 { font-size: 2.4rem; }
  .page-head h1 { font-size: 2rem; }
  .panel-body { padding: 1.4rem; }
}

/* ==========================================================================
   Fluid chrome — drafting cursor, coordinate readout, scroll rule, transitions
   ========================================================================== */

/* Scroll rule — a measuring strip along the top edge that fills as you
   read down the page, echoing the dimension-line motif used elsewhere. */
.scroll-rule {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 40;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0, var(--line) 1px,
    transparent 1px, transparent 40px
  );
  pointer-events: none;
}
.scroll-rule__fill {
  height: 100%;
  width: 0%;
  background: var(--structural);
  transform-origin: left;
  transition: width 0.08s linear;
}

/* Anteater cursor — an original anteater whose snout tip sits exactly on the
   pointer position. It turns to face the direction you move, walks while the
   mouse is moving, and flicks its tongue out over links and buttons.
   Desktop, fine-pointer only (site.js adds it). */
.anteater-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 41;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}
.anteater-cursor.is-visible { opacity: 1; }
.anteater-cursor svg { display: block; overflow: visible; }

.anteater-flip {
  transform-origin: 0 0;
  transition: transform 0.16s ease;
  filter: drop-shadow(0 1px 1.5px rgba(16, 32, 43, 0.28));
}
.anteater-cursor img { position: absolute; max-width: none; }

.anteater-cursor .a-shape {
  stroke: var(--structural-dark);
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.anteater-cursor .a-body,
.anteater-cursor .a-tail,
.anteater-cursor .a-leg-near,
.anteater-cursor .a-ear     { fill: var(--accent); }
.anteater-cursor .a-leg-far { fill: #e0ac00; }
.anteater-cursor .a-stripe  { fill: var(--structural); }
.anteater-cursor .a-line    { fill: none; stroke: var(--structural-dark); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.anteater-cursor .a-eye     { fill: #fff; stroke-width: 1; }
.anteater-cursor .a-pupil,
.anteater-cursor .a-nose    { fill: var(--structural-dark); }
.anteater-cursor .a-fur     { stroke: #c99700; stroke-width: 0.8; fill: none; stroke-linecap: round; }

/* Tongue — hidden until the pointer is over something clickable */
.anteater-cursor .a-tongue {
  stroke: #e0607a;
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
  transform-box: fill-box;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 0.16s ease-out;
}
.anteater-cursor.is-active .a-tongue { transform: scaleX(1); }

/* Walk cycle — legs step in opposite pairs, only while the mouse moves */
.anteater-cursor .a-leg-a,
.anteater-cursor .a-leg-b {
  transform-box: fill-box;
  transform-origin: center top;
  animation: anteater-step 0.32s ease-in-out infinite;
  animation-play-state: paused;
}
.anteater-cursor .a-leg-b { animation-delay: -0.16s; }
.anteater-cursor.is-moving .a-leg-a,
.anteater-cursor.is-moving .a-leg-b { animation-play-state: running; }

@keyframes anteater-step {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-1.6px) rotate(8deg); }
}

body.has-cad-cursor,
body.has-cad-cursor a,
body.has-cad-cursor button,
body.has-cad-cursor label {
  cursor: none;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .anteater-cursor { display: none !important; }
  body.has-cad-cursor, body.has-cad-cursor a, body.has-cad-cursor button, body.has-cad-cursor label {
    cursor: auto;
  }
}

/* Cross-document view transitions — gives navigation between pages a
   brief, deliberate cross-fade instead of a hard reload flash. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root) {
    animation: vt-out 0.28s ease both;
  }
  ::view-transition-new(root) {
    animation: vt-in 0.38s cubic-bezier(.2,.7,.3,1) both;
  }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
}

/* ==========================================================================
   Play layer — hover-by-anteater, ants, soft reveals, heading letters
   ========================================================================== */

/* Tongue also shoots out when the anteater catches an ant */
.anteater-cursor.is-eating .a-tongue { transform: scaleX(1); }

/* Happy hop every few ants */
.anteater-cursor.is-happy svg { animation: anteater-hop 0.5s ease; }
@keyframes anteater-hop {
  30% { transform: translateY(-10px) scale(1.12); }
  60% { transform: translateY(0) scale(0.96); }
}

/* ---- Ants ---- */
.ant {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 39;
  pointer-events: none;
  will-change: transform;
}
.ant svg { display: block; overflow: visible; }
.ant .ant-body { fill: var(--ink); }
.ant .ant-feel { stroke: var(--ink); stroke-width: 0.6; fill: none; stroke-linecap: round; }
.ant .ant-legs {
  stroke: var(--ink);
  stroke-width: 0.8;
  fill: none;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: ant-scurry 0.16s linear infinite;
}
.ant .ant-legs-b { animation-delay: -0.08s; }
.ant.is-paused .ant-legs { animation-play-state: paused; }
@keyframes ant-scurry {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.5); }
}

.ant-pop {
  position: fixed;
  z-index: 42;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--structural);
  text-shadow: 0 0 4px var(--paper-raised), 0 0 4px var(--paper-raised);
  animation: ant-pop 0.9s ease-out forwards;
}
@keyframes ant-pop {
  from { opacity: 1; transform: translate(-50%, -6px); }
  to   { opacity: 0; transform: translate(-50%, -38px); }
}

/* ---- Scroll reveal — a soft fade only, nothing slides around ---- */
.js-reveal .reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.js-reveal .reveal.is-in { opacity: 1; }
@media print {
  .js-reveal .reveal { opacity: 1; }
}

/* ---- Heading letters that swell and turn blue near the pointer ---- */
.ch {
  display: inline-block;
  transform-origin: 50% 70%;
  will-change: transform;
  color: color-mix(in srgb, var(--structural) calc(var(--t, 0) * 100%), var(--ink));
}