/* =====================================================
   TOKENS
===================================================== */
:root{
  --void:#08080b;
  --ink:#111116;
  --ink-2:#17171d;
  --glass: rgba(255,255,255,0.045);
  --glass-strong: rgba(255,255,255,0.075);
  --glass-border: rgba(224,224,232,0.12);
  --glass-border-strong: rgba(224,224,232,0.22);
  --red: #9c1c1f;
  --red-bright: #d3272c;
  --silver: #cfd0d6;
  --text: #ecebef;
  --muted: #93939f;
  --muted-2: #5f5f6b;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.22,.9,.32,1);
  --font-display: "Anton", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

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

body{
  margin:0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(156,28,31,0.10), transparent 55%),
    url("../assets/spider-bg.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
}
body::before{
  /* darken/mute the background photo so foreground content stays legible */
  content:"";
  position:fixed; inset:0;
  background: linear-gradient(180deg, rgba(6,6,8,0.86), rgba(6,6,8,0.93) 40%, rgba(6,6,8,0.97));
  z-index:-1;
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

h1,h2,h3{ font-family: var(--font-display); font-weight:400; letter-spacing:0.5px; margin:0; text-transform:uppercase; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

.label-mono{
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--muted);
  margin: 28px 0 12px;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--red-bright);
  margin-bottom:14px;
}
.display-xl{ font-size: clamp(42px, 7vw, 84px); line-height:0.98; }
.display-lg{ font-size: clamp(32px, 5vw, 56px); line-height:1; }
.display-sm{ font-size: 26px; }
.accent{ color: var(--silver); -webkit-text-stroke: 1px rgba(224,224,232,0.5); color: transparent; -webkit-text-fill-color: transparent; }
.accent::selection{ -webkit-text-fill-color: var(--silver); }

/* =====================================================
   GLASS MATTE — signature surface
===================================================== */
.glass-matte{
  background: linear-gradient(155deg, var(--glass-strong), var(--glass));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 60px -30px rgba(0,0,0,0.7);
  position:relative;
  isolation:isolate;
}
.glass-matte::after{
  /* matte grain so it never looks glossy/plastic */
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:1;
}

/* =====================================================
   INTRO OVERLAY
===================================================== */
#intro-overlay{
  position:fixed; inset:0; z-index:200;
  background: radial-gradient(ellipse at center, #0d0d11 0%, #050507 75%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), visibility 900ms;
}
#intro-overlay.intro-hide{
  opacity:0; transform: scale(1.06); visibility:hidden; pointer-events:none;
}
#intro-web{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 600ms ease; }
#intro-web.web-visible{ opacity:1; }
#intro-web path{
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw-web 1.8s var(--ease) forwards;
}
@keyframes draw-web{ to{ stroke-dashoffset:0; } }

.intro-text-wrap{ position:relative; text-align:center; opacity:0; transform: translateY(14px); transition: opacity 900ms ease 1.6s, transform 900ms var(--ease) 1.6s; padding: 0 24px;}
.intro-text-wrap.text-visible{ opacity:1; transform:none; }
.intro-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.2em; color:var(--red-bright); text-transform:uppercase; margin-bottom:14px; }
#intro-text{ font-size:clamp(28px,6vw,58px); line-height:1.05; color:var(--text); text-shadow: 0 0 40px rgba(211,39,44,0.25); }

/* =====================================================
   NAV
===================================================== */
.glass-nav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:100;
  display:flex; align-items:center; gap:6px;
  padding:8px 10px;
  background: linear-gradient(155deg, var(--glass-strong), var(--glass));
  border:1px solid var(--glass-border);
  border-radius:999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
}
.nav-logo{
  width:38px; height:38px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--red-bright), var(--red) 70%);
  color:#fff; border:none; font-family:var(--font-display);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 6px 16px -4px rgba(211,39,44,0.6);
}
.nav-links{ display:flex; gap:2px; }
.nav-link{
  background:none; border:none; color:var(--muted);
  font-size:13px; letter-spacing:0.03em;
  padding:9px 16px; border-radius:999px;
  transition: color 250ms ease, background 250ms ease;
}
.nav-link:hover{ color:var(--text); background: rgba(255,255,255,0.05); }
.nav-link.active{ color:var(--void); background: var(--silver); font-weight:600; }
.nav-burger{ display:none; flex-direction:column; gap:4px; background:none; border:none; padding:10px; }
.nav-burger span{ width:18px; height:2px; background:var(--text); display:block; border-radius:2px; }

@media (max-width: 760px){
  .nav-links{
    position:fixed; top:74px; right:18px; left:18px;
    flex-direction:column; gap:4px;
    background: linear-gradient(155deg, var(--glass-strong), var(--glass));
    border:1px solid var(--glass-border); border-radius:18px; padding:10px;
    backdrop-filter: blur(18px);
    opacity:0; transform: translateY(-8px); pointer-events:none;
    transition: opacity 250ms ease, transform 250ms ease;
  }
  .nav-links.open{ opacity:1; transform:none; pointer-events:auto; }
  .nav-link{ text-align:left; }
  .nav-burger{ display:flex; }
}

/* =====================================================
   VIEWS / SECTION TRANSITIONS
===================================================== */
#app{ position:relative; min-height:100vh; }
.view{
  position:absolute; inset:0;
  padding: 130px 7vw 90px;
  min-height:100vh;
  opacity:0;
  transform: translateY(24px) scale(0.99);
  pointer-events:none;
  transition: opacity 520ms var(--ease), transform 560ms var(--ease);
}
.view.active{
  position:relative;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.view.leaving{
  position:absolute;
  opacity:0;
  transform: translateY(-18px) scale(0.99);
}
.view-bg-web{
  position:absolute; top:0; right:0; width:46vw; height:46vw; max-width:640px; max-height:640px;
  background: radial-gradient(circle at 70% 20%, rgba(156,28,31,0.12), transparent 60%);
  pointer-events:none; z-index:0;
}

/* =====================================================
   HOME
===================================================== */
.home-grid{
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap:48px; align-items:center;
  min-height: calc(100vh - 220px);
  position:relative; z-index:1;
}
.home-copy{ max-width:640px; }
.home-tag{ font-family:var(--font-mono); color:var(--red-bright); margin-top:18px; font-size:15px; }
.home-desc{ color:var(--muted); margin-top:16px; line-height:1.7; max-width:480px; font-size:15px; }
.chip-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.chip{
  font-family:var(--font-mono); font-size:12px; padding:7px 14px;
  border:1px solid var(--glass-border-strong); border-radius:999px; color:var(--silver);
  background: rgba(255,255,255,0.03);
}
.cta-link{
  margin-top:36px; background:none; border:none; color:var(--text);
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  display:flex; align-items:center; gap:8px; padding:0;
  border-bottom:1px solid var(--glass-border-strong); padding-bottom:4px;
}
.cta-link .arrow{ transition: transform 300ms var(--ease); }
.cta-link:hover .arrow{ transform: translateY(4px); }

.card-stage{ position:relative; display:flex; justify-content:center; align-items:flex-start; height:420px; padding-top:96px; }

/* Elastic thread overlay — spans the whole viewport so it can reach the
   card no matter where it's been dragged to, and never detaches. */
.thread-overlay{
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:none; z-index:3;
  opacity:1; transition: opacity 380ms var(--ease);
}
.thread-overlay.thread-hidden{ opacity:0; }
#thread-path{
  fill:none;
  stroke: rgba(224,224,232,0.55);
  stroke-linecap: round;
}
#thread-anchor-dot{
  fill: #cfd0d6;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.id-card{
  position:relative; width:250px; padding:22px 22px 26px; cursor:grab; user-select:none;
  touch-action:none;
  transform-origin: top center;
  animation: card-sway 6s ease-in-out infinite;
  will-change: transform;
  z-index:2;
}
.id-card:active{ cursor:grabbing; animation-play-state:paused; }
.id-card.dragging{ animation-play-state:paused; transition:none !important; box-shadow: 0 40px 70px -20px rgba(0,0,0,0.8); }
@keyframes card-sway{
  0%,100%{ transform: rotate(-2deg); }
  50%{ transform: rotate(2deg); }
}
.id-card-pin{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #e6e6ee, #8a8a94);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  z-index:2;
}
/* Web patch — thin strands that "creep" from the pin down onto the card
   surface, so the thread looks like it's woven into the card, not just
   resting a single line on top of it. Sits behind the pin bead. */
.web-patch{
  position:absolute; top:-8px; left:0; width:100%; height:60px;
  overflow:visible; pointer-events:none; z-index:1;
}
.web-patch path{
  fill:none;
  stroke: rgba(224,224,232,0.4);
  stroke-width:1;
  vector-effect: non-scaling-stroke;
}
.id-photo{
  width:100%; aspect-ratio:1; border-radius:12px; overflow:hidden; margin-bottom:16px;
  border:1px solid var(--glass-border-strong);
  background: var(--ink-2);
}
.id-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter: grayscale(0.55) contrast(1.05); }
.id-name{ font-family:var(--font-display); font-size:19px; letter-spacing:0.4px; text-transform:none; }
.id-role{ font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:6px; }
.scroll-cue{
  position:relative; z-index:1; text-align:center; margin-top:20px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; color:var(--muted-2); text-transform:uppercase;
}

/* =====================================================
   SECTION HEAD / SHARED
===================================================== */
.section-head{ margin-bottom:44px; max-width:640px; position:relative; z-index:1; }
.section-sub{ color:var(--muted); margin-top:10px; font-size:15px; }

/* =====================================================
   ABOUT
===================================================== */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; position:relative; z-index:1; }
.about-bio{ padding:32px; font-size:16px; line-height:1.8; color:var(--text); height:fit-content; }
.about-skills .label-mono:first-child{ margin-top:0; }
.timeline{ display:flex; flex-direction:column; gap:18px; }
.timeline-item{ border-left:1px solid var(--glass-border-strong); padding-left:16px; }
.timeline-item .t-role{ font-weight:600; font-size:14px; }
.timeline-item .t-meta{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:4px; }
.timeline-item .t-desc{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.6; }

/* =====================================================
   CARD GRID (portfolio / market)
===================================================== */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:26px; position:relative; z-index:1; }
.tilt-card{
  padding:22px; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms ease;
}
.tilt-card:hover{ border-color: var(--glass-border-strong); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(211,39,44,0.15); }
.tc-media{ width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:var(--ink-2); margin-bottom:16px; border:1px solid var(--glass-border); }
.tc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 500ms var(--ease); }
.tilt-card:hover .tc-media img{ transform:scale(1.06); }
.tc-title{ font-family:var(--font-display); font-size:19px; letter-spacing:0.3px; margin-bottom:8px; text-transform:none; }
.tc-desc{ font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.tc-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tc-tag{ font-family:var(--font-mono); font-size:10.5px; padding:4px 10px; border-radius:999px; border:1px solid var(--glass-border-strong); color:var(--muted); }
.tc-link{ font-family:var(--font-mono); font-size:12px; color:var(--red-bright); text-decoration:none; display:inline-flex; gap:6px; align-items:center; }
.tc-price{ font-family:var(--font-mono); font-size:15px; color:var(--silver); margin-bottom:10px; }
.empty-note{ color:var(--muted-2); font-family:var(--font-mono); font-size:13px; }
.hidden{ display:none !important; }

/* =====================================================
   CONTACT
===================================================== */
.contact-grid{ position:relative; z-index:1; max-width:560px; }
.contact-card{ padding:32px; }
.contact-list{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.contact-list a{ text-decoration:none; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid var(--glass-border); border-radius:var(--radius-sm); transition: border-color 220ms ease, background 220ms ease; font-size:14px; }
.contact-list a:hover{ border-color:var(--glass-border-strong); background:rgba(255,255,255,0.03); }
.contact-list .c-label{ font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; }

/* =====================================================
   FOOTER
===================================================== */
.site-footer{
  position:relative; z-index:1; text-align:center; padding:34px 24px 44px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted-2);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
#footer-mark{
  background:none; border:none; color:var(--muted-2); font-size:14px; line-height:1;
  padding:6px; opacity:0.7;
}

/* =====================================================
   MODAL (admin login)
===================================================== */
.modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; }
.modal.hidden{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(4,4,6,0.72); backdrop-filter: blur(4px); }
.modal-panel{ position:relative; width:min(360px, 90vw); padding:30px 28px 28px; }
.modal-panel form{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.modal-sub{ color:var(--muted); font-size:13px; margin-top:8px; line-height:1.6; }
.btn-google{
  margin-top:18px; width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1f1f1f; border:none; border-radius:var(--radius-sm);
  padding:12px; font-weight:600; font-size:14px; font-family:var(--font-body);
  transition: transform 150ms ease, box-shadow 200ms ease;
}
.btn-google:hover{ box-shadow: 0 10px 24px -8px rgba(255,255,255,0.25); }
.btn-google:active{ transform: scale(0.98); }
.modal-panel label{ font-family:var(--font-mono); font-size:11px; color:var(--muted); display:flex; flex-direction:column; gap:6px; text-transform:uppercase; letter-spacing:0.06em; }
.modal-panel input{
  background: rgba(255,255,255,0.04); border:1px solid var(--glass-border-strong); border-radius:var(--radius-sm);
  padding:11px 12px; color:var(--text); font-family:var(--font-body); font-size:14px;
}
.modal-panel input:focus{ outline:2px solid var(--red-bright); outline-offset:1px; }
.btn-primary{
  margin-top:6px; background: var(--red); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:12px; font-weight:600; font-size:14px; transition: background 200ms ease, transform 150ms ease;
}
.btn-primary:hover{ background: var(--red-bright); }
.btn-primary:active{ transform: scale(0.98); }
.modal-close{ position:absolute; top:14px; right:14px; background:none; border:none; color:var(--muted); font-size:14px; }
.form-error{ color: var(--red-bright); font-size:12.5px; font-family:var(--font-mono); line-height:1.7; }
.form-error code{ background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:4px; color:var(--silver); }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 900px){
  .home-grid{ grid-template-columns:1fr; gap:60px; }
  .about-grid{ grid-template-columns:1fr; }
  .card-stage{ height:340px; padding-top:70px; }
}
@media (max-width: 600px){
  .view{ padding:120px 6vw 70px; }
}

/* Visible keyboard focus everywhere */
:focus-visible{ outline:2px solid var(--red-bright); outline-offset:3px; }