/* ===== Design tokens ===== */
/* Dark cinematic theme (single theme) */
:root {
  --bg: #0A0A0F;
  --bg-soft: #101018;
  --surface: #15151F;
  --surface-2: #1A1A24;
  --border: #26262F;
  --nav-bg: rgba(10, 10, 15, 0.78);

  --text: #F0EEE9;
  --text-muted: #918E86;

  --gold: #E0A75E;
  --gold-soft: #C9954E;
  --ice: #AFC4D9;
  --dot-off: #55544C;

  --beam-color: rgba(224, 167, 94, 0.05);
  --orb-highlight: #3A3A46;
  --orb-mid: #17171F;
  --orb-shadow: #05050A;
  --orb-glow: rgba(224, 167, 94, 0.22);
  --grain-opacity: 0.035;

  --font-display: 'Sora', sans-serif;
  --font-hero-name: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 14px;
  --maxw: 1080px;
  --nav-h: 84px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--nav-h);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }

/* Film-grain texture over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Accessibility: skip link + focus */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: #1A1206;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ambient background glow */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(600px circle at 15% 10%, rgba(224, 167, 94, 0.10), transparent 60%),
    radial-gradient(500px circle at 85% 30%, rgba(175, 196, 217, 0.08), transparent 60%),
    radial-gradient(700px circle at 50% 90%, rgba(201, 149, 78, 0.06), transparent 60%);
}

/* ===== Nav =====
   Fixed full-width bar that slides up out of view while scrolling down
   and slides back in on scroll up (see script.js), so it never sits on
   top of section content for more than a moment. Height is measured in
   JS into --nav-h, which offsets body/scroll-margin so nothing starts
   out hidden underneath it. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transform: translateY(0);
  transition: transform 0.3s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.nav.nav-hidden { transform: translateY(-100%); }
.nav-bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo-outer { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img { height: 56px; width: auto; display: block; }

.nav-inner {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}

.nav-controls { display: flex; align-items: center; gap: 16px; }

.nav-links {
  display: flex;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}
.nav-links a { color: var(--text-muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--gold); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 76px 24px 100px;
  min-height: 88vh;
  display: flex;
  align-items: center;
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.86;
  filter: brightness(0.82) saturate(0.85);
}

/* Cinematic letterbox veil: recedes the polygon field at the top/bottom
   edges so it reads as atmosphere rather than the focal point, leaving
   the middle band (where the hero content sits) clearest. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 8, 0.4) 0%,
    rgba(5, 5, 8, 0.06) 24%,
    rgba(5, 5, 8, 0.06) 76%,
    rgba(5, 5, 8, 0.45) 100%
  );
}

/* Polygon entrance background: 4 large triangular panels of the same
   image slide in from top/left/bottom/right, one after another, then
   lock into place — together they reconstruct the full image with no
   seams, since each panel is just a clipped view of the same picture
   at the same position. Panels never move again once settled. */
.poly-panel {
  position: absolute;
  inset: 0;
  background-image: url("background-refined.png");
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}
.poly-top {
  clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
  transform: translateY(-100%);
  animation-name: polyInTop;
  animation-duration: 900ms;
  animation-delay: 0ms;
}
.poly-left {
  clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
  transform: translateX(-100%);
  animation-name: polyInLeft;
  animation-duration: 900ms;
  animation-delay: 200ms;
}
.poly-bottom {
  clip-path: polygon(0% 100%, 100% 100%, 50% 50%);
  transform: translateY(100%);
  animation-name: polyInBottom;
  animation-duration: 900ms;
  animation-delay: 400ms;
}
.poly-right {
  clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
  transform: translateX(100%);
  animation-name: polyInRight;
  animation-duration: 900ms;
  animation-delay: 600ms;
}
@keyframes polyInTop {
  0% { transform: translateY(-100%); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes polyInLeft {
  0% { transform: translateX(-100%); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes polyInBottom {
  0% { transform: translateY(100%); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes polyInRight {
  0% { transform: translateX(100%); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Subtle ambient gold glow that appears once all 4 panels have locked */
.poly-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, var(--orb-glow), transparent 70%);
  opacity: 0;
  pointer-events: none;
  animation: polyGlowIn 700ms ease-out 1800ms forwards;
}
@keyframes polyGlowIn {
  0% { opacity: 0; }
  100% { opacity: 0.55; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: 56px;
  opacity: 0;
  animation: heroContentIn 400ms cubic-bezier(0.22, 1, 0.36, 1) 2000ms forwards;
}
@keyframes heroContentIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.hero-inner { max-width: 640px; position: relative; }

/* Soft readability scrim behind the tagline/buttons only — biased toward
   the lower part of the column so it doesn't dull the name above it. */
.hero-text-scrim {
  position: absolute;
  z-index: -1;
  inset: -60px -90px -70px -110px;
  background: radial-gradient(ellipse farthest-side at 30% 58%,
    rgba(5, 5, 8, 0.34) 0%,
    rgba(5, 5, 8, 0.18) 40%,
    rgba(5, 5, 8, 0.07) 65%,
    transparent 100%);
  pointer-events: none;
}

/* Frosted-glass oval behind the hero text only: blurs/tints the busy
   panel background right under the type, fading out via mask-image so
   it has no hard edge. Its own element (not on the background image),
   sits above the panels but below the text via z-index. */
.hero-glass {
  position: absolute;
  z-index: 1;
  inset: -60px -90px -70px -110px;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  background: rgba(10, 10, 15, 0.30);
  mask-image: radial-gradient(150% 90% at 6% 50%, #000 30%, transparent 62%);
  -webkit-mask-image: radial-gradient(150% 90% at 6% 50%, #000 30%, transparent 62%);
  pointer-events: none;
}

.hero-greeting {
  position: relative;
  z-index: 2;
  font-family: var(--font-hero-name);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--text);
  margin: 0 0 14px;
  margin-left: -0.04em;
}
.hero-greeting .accent {
  background: linear-gradient(100deg, var(--gold), #F5D9A8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-focus {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.4;
  letter-spacing: 0.16em;
  color: var(--gold-soft);
  margin: 0 0 20px 0.18em;
  max-width: 100%;
}

.hero-sub {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #D8D5CE;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  max-width: 42ch;
  margin: 0 0 40px;
}

.hero-terminal { position: relative; z-index: 2; }

.terminal {
  text-align: left;
  background: linear-gradient(160deg, var(--surface-2), var(--bg-soft));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(224, 167, 94, 0.05);
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #0D0D14;
  border-bottom: 1px solid var(--border);
}
.tdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tdot.r { background: var(--gold); }
.tdot.y { background: var(--gold-soft); }
.tdot.g { background: var(--dot-off); }
.terminal-title { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.terminal-body {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 20px;
  min-height: 130px;
  color: var(--gold);
  white-space: pre-wrap;
  word-break: break-word;
}
.terminal-body .line-muted { color: var(--text-muted); }
.terminal-body .line-amber { color: var(--ice); }
.terminal-body .cursor {
  display: inline-block; width: 8px; height: 16px;
  background: var(--gold); vertical-align: middle;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-actions { position: relative; z-index: 2; display: flex; gap: 28px; flex-wrap: wrap; }
.btn {
  padding: 15px 26px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-flex; align-items: center; gap: 10px;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, var(--gold), #F5D9A8);
  color: #1A1206;
  box-shadow: 0 10px 30px rgba(224, 167, 94, 0.22), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.btn-primary .btn-arrow { transition: transform 0.2s; }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(240, 238, 233, 0.12), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.btn-ghost:hover { border-color: var(--gold); }

/* Split hero into text + floating terminal on wider screens */
@media (min-width: 900px) {
  .hero-content { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
}

/* ===== Sections =====
   scroll-margin-top uses the measured nav height (set as --nav-h by
   script.js) so every section's heading clears the sticky nav, both on
   anchor-link jumps and on normal scroll. */
.section { padding: 90px 24px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.section.alt { background: var(--bg-soft); }
.section-inner { max-width: var(--maxw); margin: 0 auto; }

.section-label {
  font-family: var(--font-mono);
  color: var(--gold-soft);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section h2 { font-size: clamp(30px, 5vw, 48px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 40px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* About */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.about-text p { color: var(--text-muted); font-size: 16px; margin-bottom: 18px; }
.about-text p:first-child { color: var(--text); font-size: 19px; font-weight: 500; }
.about-stat-card {
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.stat-line { display: flex; flex-direction: column; margin-bottom: 20px; }
.stat-line:last-child { margin-bottom: 0; }
.stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--gold); }
.stat-label { color: var(--text-muted); font-size: 14px; margin-top: 2px; }

/* Skills */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 14px; }
.tag { font-family: var(--font-mono); font-size: 14px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.tag.c1 { color: var(--gold); border-color: rgba(224, 167, 94, 0.35); }
.tag.c2 { color: var(--gold-soft); border-color: rgba(201, 149, 78, 0.35); }
.tag.c3 { color: var(--ice); border-color: rgba(175, 196, 217, 0.35); }

/* Projects */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.project-card {
  position: relative;
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.project-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(224, 167, 94, 0.08); }
.project-card.planned { opacity: 0.82; }

.status-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.s-done { color: var(--gold); background: rgba(224, 167, 94, 0.12); }
.s-progress { color: var(--ice); background: rgba(175, 196, 217, 0.14); }
.s-planned { color: var(--gold-soft); background: rgba(201, 149, 78, 0.14); }

.project-card h3 { font-size: 20px; margin-bottom: 10px; }
.project-desc { color: var(--text-muted); font-size: 15px; margin-bottom: 16px; flex-grow: 1; }
.project-stack { font-family: var(--font-mono); font-size: 12px; color: var(--gold-soft); margin: 0 0 16px; }
.project-links a { font-family: var(--font-mono); font-size: 13px; color: var(--text); transition: color 0.2s; }
.project-links a:hover { color: var(--gold); }
.link-muted { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.timeline-item { position: relative; padding: 0 0 32px 40px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg-soft);
}
.timeline-item h3 { font-size: 18px; margin-bottom: 6px; }
.timeline-item p { color: var(--text-muted); font-size: 15px; margin: 0; }

/* Connect */
.connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.connect-card {
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.connect-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.connect-card.gh:hover { border-color: var(--gold); }
.connect-card.yt:hover { border-color: var(--gold-soft); }
.connect-card.li:hover { border-color: var(--ice); }
.connect-kicker { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.connect-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); }
.connect-sub { color: var(--text-muted); font-size: 14px; }

/* Footer */
.footer { text-align: center; padding: 48px 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 14px; }
.footer p { margin: 4px 0; }
.footer a:hover { color: var(--gold); }
.footer-note { font-family: var(--font-mono); font-size: 12px; }

/* ===== Responsive: tablet ===== */
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .connect-grid { grid-template-columns: 1fr; }
}

/* ===== Responsive: mobile ===== */
@media (max-width: 640px) {
  :root { --nav-h: 60px; }
  .nav-bar { gap: 12px; padding: 8px 20px; }
  .nav-logo-img { height: 40px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: calc(100% + 14px); left: 0; right: 0;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
    flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-links.open { max-height: 320px; }
  .nav-links a { padding: 16px 24px; border-bottom: 1px solid var(--border); }
  .hero { padding: 56px 20px 48px; min-height: auto; }
  .section { padding: 60px 20px; }
  .hero-sub { font-size: 16px; }
  .terminal-body { font-size: 12px; padding: 16px; }
}

/* Smooth transitions */
.terminal, .about-stat-card, .tag, .project-card,
.connect-card, .footer, .nav-links {
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .project-card:hover, .connect-card:hover { transform: none; }
  .poly-panel, .hero-content {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .poly-glow { animation: none; opacity: 0.55; transform: none; }
}