/* ═══════════════════════════════════════════
   PORTFOLIO — styles.css
   Futuristic / Minimalist — Black & White
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@300;400;600&display=swap');

/* ── Variables ────────────────────────────── */
:root {
  --bg:           #060606;
  --surface:      #101010;
  --surface-2:    #181818;
  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.22);
  --text:         #efefef;
  --muted:        rgba(239, 239, 239, 0.42);
  --accent:       #ffffff;
  --mono:         'Space Mono', monospace;
  --sans:         'Syne', sans-serif;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html                   { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color:       var(--text);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x:  hidden;
  cursor:      none;
}
img { display: block; max-width: 100%; }

/* ── Custom cursor ───────────────────────── */
#cursor {
  position:   fixed;
  width:      8px;
  height:     8px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  z-index:    9999;
  transform:  translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width .15s, height .15s;
}
#cursor-ring {
  position:     fixed;
  width:        36px;
  height:       36px;
  border:       1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  pointer-events: none;
  z-index:      9998;
  transform:    translate(-50%, -50%);
  transition:   width .25s var(--ease-out),
                height .25s var(--ease-out),
                border-color .25s;
}
#cursor-ring.hovered {
  width:        60px;
  height:       60px;
  border-color: rgba(255,255,255,.2);
}

/* ── Nav ─────────────────────────────────── */
nav {
  position:   fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index:    100;
  display:    flex;
  justify-content: space-between;
  align-items: center;
  padding:    26px 48px;
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background .4s;
}
nav.scrolled {
  background:    rgba(6, 6, 6, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color:  var(--border);
}
.nav-logo {
  font-family: var(--mono);
  font-size:   13px;
  letter-spacing: .18em;
  color:       var(--text);
  text-decoration: none;
  text-transform: uppercase;
}
.nav-links          { display: flex; gap: 40px; list-style: none; }
.nav-links a {
  font-family: var(--mono);
  font-size:   11px;
  letter-spacing: .22em;
  color:       var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  transition:  color .25s;
}
.nav-links a:hover  { color: var(--text); }

/* ── Hero ────────────────────────────────── */
#hero {
  position:   relative;
  height:     100vh;
  display:    flex;
  align-items: center;
  justify-content: center;
  overflow:   hidden;
  max-width: none;      /* break out of the 1200px section cap */
  margin:    0;         /* remove the auto centering */
  padding:   0;         /* hero manages its own layout */
  width:     100%;
}
#network-canvas {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  cursor:   none;
}
.hero-content {
  position: relative;
  z-index:  2;
  text-align: center;
  pointer-events: none;
}
.hero-eyebrow {
  font-family:    var(--mono);
  font-size:      11px;
  letter-spacing: .32em;
  color:          var(--muted);
  text-transform: uppercase;
  margin-bottom:  22px;
  animation:      fadeUp 1s ease .3s both;
}
.hero-name {
  font-family:    var(--sans);
  font-size:      clamp(52px, 9vw, 116px);
  font-weight:    600;
  line-height:    1;
  letter-spacing: -.03em;
  margin-bottom:  18px;
  animation:      fadeUp 1s ease .5s both;
}
.hero-role {
  font-family:    var(--mono);
  font-size:      12px;
  letter-spacing: .22em;
  color:          var(--muted);
  text-transform: uppercase;
  animation:      fadeUp 1s ease .7s both;
}
.scroll-hint {
  position:  absolute;
  bottom:    40px;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  flex-direction: column;
  align-items: center;
  gap:       10px;
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: .22em;
  color:          var(--muted);
  text-transform: uppercase;
  animation: fadeUp 1s ease 1.2s both;
}
.scroll-line {
  width:      1px;
  height:     44px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.3));
  animation:  scrollPulse 2.2s ease-in-out infinite;
}

/* ── Sections ────────────────────────────── */
section { padding: 120px 48px; max-width: 1200px; margin: 0 auto; }
.section-label {
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: .3em;
  color:          var(--muted);
  text-transform: uppercase;
  margin-bottom:  64px;
  display:        flex;
  align-items:    center;
  gap:            16px;
}
.section-label::after {
  content:    '';
  width:      48px;
  height:     1px;
  background: var(--border);
}

/* ── About ───────────────────────────────── */
#about { border-top: 1px solid var(--border); }
.about-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           start;
}
.about-text h2 {
  font-size:      clamp(30px, 4vw, 50px);
  font-weight:    600;
  letter-spacing: -.025em;
  line-height:    1.1;
  margin-bottom:  28px;
}
.about-text p {
  font-size:     15px;
  line-height:   1.85;
  color:         var(--muted);
  margin-bottom: 18px;
}
.about-text p:last-of-type { margin-bottom: 0; }

.skills-list {
  display:     flex;
  flex-wrap:   wrap;
  gap:         8px;
  margin-top:  44px;
}
.skill-tag {
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: .14em;
  color:          var(--muted);
  border:         1px solid var(--border);
  padding:        6px 14px;
  text-transform: uppercase;
  transition:     border-color .25s, color .25s;
}
.skill-tag:hover { border-color: var(--border-hover); color: var(--text); }

.detail-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         16px 0;
  border-bottom:   1px solid var(--border);
  font-family:     var(--mono);
  font-size:       12px;
}
.detail-row:first-child { border-top: 1px solid var(--border); }
.detail-label { color: var(--muted); letter-spacing: .1em; }
#about { border-bottom: 1px solid var(--border); }

/* ── Work ────────────────────────────────── */
#work { border-top: 1px solid var(--border); }
.work-grid {
  display:    grid;
  gap:        1px;
  background: var(--border);
}
.work-item {
  background: var(--bg);
  padding:    48px;
  display:    grid;
  grid-template-columns: 1fr auto;
  gap:        24px;
  align-items: start;
  cursor:     none;
  position:   relative;
  overflow:   hidden;
  transition: background .3s;
}
.work-item::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       var(--surface);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .45s cubic-bezier(0.76, 0, 0.24, 1);
  z-index:          0;
}
.work-item:hover::before { transform: scaleX(1); }
.work-item > * { position: relative; z-index: 1; }

.work-item-meta {
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: .2em;
  color:          var(--muted);
  text-transform: uppercase;
  margin-bottom:  14px;
}
.work-item-title {
  font-size:      28px;
  font-weight:    600;
  letter-spacing: -.02em;
  margin-bottom:  12px;
}
.work-item-desc {
  font-size:  14px;
  color:      var(--muted);
  line-height: 1.75;
  max-width:  520px;
}
.work-item-tags {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: 20px;
}
.work-tag {
  font-family:    var(--mono);
  font-size:      9px;
  letter-spacing: .14em;
  color:          var(--muted);
  border:         1px solid var(--border);
  padding:        4px 10px;
  text-transform: uppercase;
}
.work-arrow {
  font-size:  22px;
  color:      var(--muted);
  align-self: center;
  transition: transform .3s var(--ease-out), color .3s;
}
.work-item:hover .work-arrow {
  transform: translate(5px, -5px);
  color:     var(--text);
}
.empty-state {
  padding:        80px 48px;
  font-family:    var(--mono);
  font-size:      12px;
  color:          var(--muted);
  letter-spacing: .1em;
}

/* ── Modal ───────────────────────────────── */
#modal-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0, 0, 0, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index:        1000;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .3s;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        48px;
}
#modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background:  var(--surface);
  border:      1px solid var(--border);
  max-width:   800px;
  width:       100%;
  max-height:  90vh;
  overflow-y:  auto;
  transform:   translateY(20px);
  transition:  transform .3s var(--ease-out);
}
#modal-overlay.open .modal { transform: translateY(0); }

.modal-header {
  padding:       34px 40px 22px;
  border-bottom: 1px solid var(--border);
  display:       flex;
  justify-content: space-between;
  align-items:   start;
}
.modal-meta {
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: .22em;
  color:          var(--muted);
  text-transform: uppercase;
  margin-bottom:  10px;
}
.modal-title {
  font-size:      26px;
  font-weight:    600;
  letter-spacing: -.02em;
}
.modal-close {
  background: none;
  border:     none;
  color:      var(--muted);
  cursor:     none;
  font-size:  22px;
  line-height: 1;
  padding:    4px;
  transition: color .2s;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); }

.modal-body { padding: 34px 40px; }
.modal-image {
  width:          100%;
  aspect-ratio:   16 / 9;
  background:     var(--bg);
  border:         1px solid var(--border);
  margin-bottom:  26px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  overflow:       hidden;
  position:       relative;
}
.modal-image img         { width: 100%; height: 100%; object-fit: cover; }
.no-image-label {
  font-family:    var(--mono);
  font-size:      11px;
  letter-spacing: .2em;
  color:          var(--muted);
  text-transform: uppercase;
}
.modal-desc {
  font-size:     15px;
  line-height:   1.85;
  color:         var(--muted);
  margin-bottom: 24px;
}
.modal-tags {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 24px;
}
.modal-link {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--mono);
  font-size:      11px;
  letter-spacing: .15em;
  color:          var(--text);
  text-decoration: none;
  text-transform: uppercase;
  border-bottom:  1px solid var(--border);
  padding-bottom: 2px;
  transition:     border-color .25s;
}
.modal-link:hover { border-color: var(--text); }

/* ── Upload panel ────────────────────────── */
#upload-panel {
  position:       fixed;
  inset:          0;
  background:     rgba(0, 0, 0, .94);
  -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  z-index:        500;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .3s;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        48px;
}
#upload-panel.open { opacity: 1; pointer-events: all; }

.upload-box {
  background: var(--surface);
  border:     1px solid var(--border);
  max-width:  560px;
  width:      100%;
  padding:    48px;
}
.upload-box h3 {
  font-size:      22px;
  font-weight:    600;
  letter-spacing: -.02em;
  margin-bottom:  8px;
}
.upload-box .upload-subtitle {
  font-family:    var(--mono);
  font-size:      11px;
  color:          var(--muted);
  letter-spacing: .1em;
  margin-bottom:  32px;
}
.form-row           { margin-bottom: 18px; }
.form-row label {
  display:        block;
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: .2em;
  color:          var(--muted);
  text-transform: uppercase;
  margin-bottom:  8px;
}
.form-row input,
.form-row textarea,
.form-row select {
  width:       100%;
  background:  var(--bg);
  border:      1px solid var(--border);
  color:       var(--text);
  padding:     12px 16px;
  font-family: var(--sans);
  font-size:   14px;
  outline:     none;
  transition:  border-color .25s;
  resize:      vertical;
}
.form-row input:focus,
.form-row textarea:focus { border-color: var(--border-hover); }
.form-row select option  { background: var(--surface); }

.upload-area {
  border:         1px dashed var(--border);
  padding:        28px;
  text-align:     center;
  cursor:         none;
  transition:     border-color .25s;
  margin-bottom:  18px;
}
.upload-area:hover { border-color: var(--border-hover); }
.upload-area p {
  font-family:    var(--mono);
  font-size:      11px;
  color:          var(--muted);
  letter-spacing: .1em;
}
#file-input { display: none; }

.form-actions {
  display:         flex;
  gap:             12px;
  justify-content: flex-end;
  margin-top:      28px;
}
.btn-cancel,
.btn-save {
  font-family:    var(--mono);
  font-size:      11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding:        12px 26px;
  border:         1px solid var(--border);
  cursor:         none;
  transition:     background .25s, color .25s, border-color .25s;
}
.btn-cancel {
  background: none;
  color:      var(--muted);
}
.btn-cancel:hover { color: var(--text); border-color: var(--border-hover); }
.btn-save {
  background:   white;
  color:        black;
  border-color: white;
}
.btn-save:hover { background: rgba(255,255,255,.85); }

/* ── Contact ─────────────────────────────── */
#contact { border-top: 1px solid var(--border); }
.contact-inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           start;
  margin-top: 70px;
}
.contact-left h2 {
  font-size:      clamp(30px, 4vw, 50px);
  font-weight:    600;
  letter-spacing: -.025em;
  line-height:    1.1;
  margin-bottom:  22px;
}
.contact-left p {
  font-size:   15px;
  color:       var(--muted);
  line-height: 1.85;
}
.contact-links { 
  display: flex; 
  flex-direction: column; 
  margin-top: -100px;
  align-items: end;
}
.contact-link {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         20px 0;
  border-bottom:   1px solid var(--border);
  font-size:       16px;
  color:           var(--text);
  text-decoration: none;
  transition:      color .25s;
}
.contact-link:first-child { border-top: 1px solid var(--border); }
.contact-link .link-arrow {
  color:      var(--muted);
  font-size:  13px;
  transition: transform .3s var(--ease-out), color .25s;
}
.contact-link:hover .link-arrow {
  transform: translate(5px, -5px);
  color:     var(--text);
}

/* ── Footer ──────────────────────────────── */
footer {
  border-top:     1px solid var(--border);
  padding:        26px 48px;
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: .15em;
  color:          var(--muted);
  text-transform: uppercase;
}

/* ── Scroll reveal ───────────────────────── */
.reveal {
  opacity:    0;
  transform:  translateY(32px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Animations ──────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: .28; transform: scaleY(.8); }
  50%       { opacity: 1;   transform: scaleY(1); }
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 18px 24px; }
  .nav-links { display: none; }
  section { padding: 80px 24px; }
  .about-grid, .contact-inner { grid-template-columns: 1fr; gap: 48px; }
  .work-item { padding: 28px 24px; grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 8px; text-align: center; }
  #add-work { bottom: 20px; right: 20px; }
}