/* ═══════════════════════════════════════════════════════════
   RESET & TOKENS
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:          #1e2129;
  --bg-raised:   #252930;
  --border:      rgba(56,62,78,0.7);
  --silver:      #b6bac5;
  --slate:       #383e4e;
  --text:        #d4d7de;
  --muted:       #7a8094;
  --faint:       #4a5060;
  --accent:      #c9a96e;
  --accent-dim:  rgba(201,169,110,0.10);
  --accent-glow: rgba(201,169,110,0.22);
  --drawer-w:    480px;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Fira Code', monospace;
  --ease-out:     cubic-bezier(0.16,1,0.3,1);
  --ease-cinema:  cubic-bezier(0.76,0,0.24,1);
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: auto;
}
body { overflow-x: hidden; background: var(--bg); }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── CANVAS ── */
#gl-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ── GRAIN ── */
#grain {
  position: fixed; inset: 0;
  z-index: 500; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  animation: grainShift 0.1s steps(1) infinite;
}
@keyframes grainShift {
  0%{background-position:0 0}20%{background-position:-15% 5%}
  40%{background-position:20% 10%}60%{background-position:15% 20%}
  80%{background-position:-20% -5%}100%{background-position:-10% 10%}
}

/* ═══════════════════════════════════════════════════════════
   LOADER
═══════════════════════════════════════════════════════════ */
#loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.9s var(--ease-out);
}
#loader.hidden { opacity: 0; pointer-events: none; }
.loader-inner { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.loader-logo  { font-family:var(--font-display); font-size:1.6rem; color:var(--silver); }
.loader-bar   { width:100px; height:1px; background:var(--border); }
.loader-fill  { height:100%; width:0%; background:var(--accent); transition:width 0.1s linear; }
.loader-label { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--faint); }

/* ═══════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════ */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  display: flex; align-items:center; justify-content:space-between;
  padding: 2rem 3.5rem;
  opacity: 0; transform: translateY(-10px);
}
#nav.visible {
  opacity:1; transform:translateY(0);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.nav-logo { font-family:var(--font-display); font-size:1.1rem; color:var(--silver); text-decoration:none; }
.nav-links { list-style:none; display:flex; gap:3rem; }
.nav-links a {
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  transition:color 0.25s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:100%;
  height:1px; background:var(--accent); transition:right 0.3s var(--ease-out);
}
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { right:0; }
.nav-links a.active { color:var(--text); }
.nav-status { font-family:var(--font-mono); font-size:0.63rem; letter-spacing:0.12em; color:var(--faint); display:flex; align-items:center; gap:0.6rem; }
.status-dot { width:5px; height:5px; border-radius:50%; background:#6abf7b; animation:pulse 3s ease-in-out infinite; }
@keyframes pulse {
  0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(106,191,123,0.4)}
  50%{opacity:0.5; box-shadow:0 0 0 4px rgba(106,191,123,0)}
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB (persistent context bar — igloo signature)
═══════════════════════════════════════════════════════════ */
#breadcrumb {
  position: fixed; bottom:2rem; left:3.5rem; z-index:200;
  display: flex; align-items:center; gap:0.75rem;
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--faint);
  opacity:0; transform:translateY(6px);
  transition: opacity 0.5s, transform 0.5s;
}
#breadcrumb.visible { opacity:1; transform:translateY(0); }
.bc-sep { color:var(--accent); }
#bc-detail { color:var(--muted); }

/* ═══════════════════════════════════════════════════════════
   PANELS (shared)
═══════════════════════════════════════════════════════════ */
.panel { position:relative; z-index:10; width:100%; min-height:100vh; display:flex; }
.section-tag { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent); }
.section-num { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; color:var(--faint); }
.title-line { display:block; }
.split-line { overflow:hidden; }

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
#hero {
  flex-direction:column; justify-content:space-between;
  padding:0; pointer-events:none;
}
#hero::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 38%, rgba(30,33,41,0.65) 100%);
  pointer-events:none; z-index:1;
}
.hero-stamp {
  position:relative; z-index:2;
  padding:7rem 3.5rem 0;
  display:flex; align-items:center; gap:2rem;
  pointer-events:auto;
}
.hero-eyebrow { font-family:var(--font-mono); font-size:0.63rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); }
.hero-year    { font-family:var(--font-mono); font-size:0.6rem;  letter-spacing:0.15em; color:var(--faint); }
.hero-content { position:relative; z-index:2; padding:0 3rem; pointer-events:auto; }
.hero-title {
  font-family:var(--font-display);
  font-size:clamp(5rem, 10.5vw, 10.5rem);
  font-weight:400; line-height:0.92; letter-spacing:-0.02em; color:var(--silver);
  display:flex; flex-direction:column;
}
.hero-title .italic { font-style:italic; color:var(--muted); }
.hero-footer {
  position:relative; z-index:2;
  padding:0 3.5rem 2.5rem;
  display:flex; align-items:flex-end; justify-content:space-between;
  pointer-events:auto;
}
.hero-disciplines {
  display:flex; align-items:center; gap:0.75rem;
  font-family:var(--font-mono); font-size:0.63rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted);
}
.hero-disciplines .sep { color:var(--faint); }
.hero-scroll-hint { display:flex; flex-direction:column; align-items:center; gap:0.7rem; }
.scroll-line {
  width:1px; height:40px;
  background:linear-gradient(to bottom, transparent, var(--accent));
  animation:scrollDrop 2.2s ease-in-out infinite;
}
@keyframes scrollDrop {
  0%{transform:scaleY(0);transform-origin:top;opacity:0}
  20%{opacity:1} 50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  80%{opacity:1} 100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}
.hero-scroll-hint span { font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--faint); writing-mode:vertical-rl; }

/* ═══════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════ */
.panel--about {
  padding:8rem 3.5rem; align-items:flex-start;
  flex-direction:column; justify-content:center;
}
.about-inner { width:100%; max-width:1100px; display:flex; flex-direction:column; }
.about-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:2.5rem; border-bottom:1px solid var(--border); }
.about-title {
  font-family:var(--font-display); font-size:clamp(2.6rem,5vw,4.8rem);
  font-weight:400; line-height:1.05; letter-spacing:-0.02em; color:var(--silver); padding:3rem 0;
}
.about-title .italic { font-style:italic; color:var(--muted); }
.about-grid { display:grid; grid-template-columns:1fr 260px; gap:4rem; padding-top:3rem; border-top:1px solid var(--border); }
.about-body { display:flex; flex-direction:column; gap:1.2rem; }
.about-body p { font-size:0.94rem; font-weight:300; color:var(--muted); line-height:1.85; }
.about-stats { display:flex; flex-direction:column; gap:2rem; }
.stat { display:flex; flex-direction:column; gap:0.4rem; }
.stat-n { font-family:var(--font-display); font-size:2.6rem; font-weight:400; letter-spacing:-0.03em; color:var(--silver); line-height:1; }
.stat-l { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); }

/* ═══════════════════════════════════════════════════════════
   PROJECTS
   Left side: scroll-stacked waypoints (text labels)
   Right side: 3D canvas shows the active project shape
═══════════════════════════════════════════════════════════ */
.panel--projects {
  min-height:400vh;              /* tall — gives scroll room for 4 waypoints */
  padding:0; align-items:flex-start;
  flex-direction:column;
}
.projects-inner {
  position:sticky; top:0;
  width:100%; height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem 3.5rem;
  overflow:hidden;
}
.projects-header {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:2rem; border-bottom:1px solid var(--border);
  margin-bottom:0;
}
.projects-track {
  display:flex; flex-direction:column;
  padding-top:2.5rem;
  width:50%;                     /* labels take left half; canvas owns the right */
}
.project-waypoint {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 0;
  border-bottom:1px solid var(--border);
  cursor:default;
  opacity:0.28;
  transform:translateX(-8px);
  transition:opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.project-waypoint.active {
  opacity:1; transform:translateX(0);
}
.project-waypoint:hover { opacity:0.7; }
.project-waypoint.active:hover { opacity:1; }
.project-label { display:flex; align-items:baseline; gap:1.5rem; }
.project-index { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; color:var(--faint); }
.project-title { font-family:var(--font-display); font-size:clamp(1.1rem,2.2vw,1.7rem); font-weight:400; color:var(--silver); }
.project-sub   { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-top:0.3rem; }
.project-open-btn {
  display:flex; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--faint); background:none; border:1px solid var(--border); padding:0.5rem 1rem;
  cursor:pointer; transition:color 0.25s, border-color 0.25s, background 0.25s;
  opacity:0; pointer-events:none;
}
.project-waypoint.active .project-open-btn {
  opacity:1; pointer-events:auto; color:var(--accent); border-color:var(--accent-glow);
}
.project-open-btn:hover { background:var(--accent-dim); color:var(--silver); }
.project-open-btn svg { transition:transform 0.25s var(--ease-out); }
.project-open-btn:hover svg { transform:translate(2px,-2px); }

/* Canvas hint — right half label */
.canvas-hint {
  position:absolute; right:3.5rem; bottom:3rem;
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; gap:0.5rem;
}
.canvas-hint::before { content:''; width:20px; height:1px; background:var(--faint); }

/* ═══════════════════════════════════════════════════════════
   PROJECT DETAIL DRAWER
   Slides in from the right, like igloo's context panel.
═══════════════════════════════════════════════════════════ */
#drawer-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(30,33,41,0.6); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity 0.4s var(--ease-out);
}
#drawer-overlay.active { opacity:1; pointer-events:auto; }

#project-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:var(--drawer-w); max-width:90vw;
  z-index:400; background:var(--bg-raised);
  border-left:1px solid var(--border);
  transform:translateX(100%);
  transition:transform 0.55s var(--ease-out);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
#project-drawer.open { transform:translateX(0); }

#drawer-close {
  position:absolute; top:2rem; right:2rem;
  background:none; border:1px solid var(--border); color:var(--muted);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:color 0.2s, border-color 0.2s;
}
#drawer-close:hover { color:var(--silver); border-color:var(--silver); }

.drawer-inner { padding:4rem 2.5rem 3rem; display:flex; flex-direction:column; gap:1.5rem; flex:1; }
.drawer-tag   { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); }
.drawer-title { font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:400; color:var(--silver); line-height:1.1; }
.drawer-desc  { font-size:0.88rem; font-weight:300; color:var(--muted); line-height:1.85; }
.drawer-tags  { display:flex; gap:0.5rem; flex-wrap:wrap; padding-top:0.5rem; }
.drawer-tags span {
  font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid var(--border); color:var(--faint); padding:0.25rem 0.7rem;
}
.drawer-meta {
  padding-top:1.5rem; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.1em;
  color:var(--faint); display:flex; flex-direction:column; gap:0.5rem;
}
.drawer-meta span { color:var(--muted); }

/* ═══════════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════════ */
.panel--contact {
  padding:8rem 3.5rem 2.5rem; flex-direction:column;
  justify-content:space-between; align-items:flex-start;
}
.contact-inner { display:flex; flex-direction:column; flex:1; justify-content:center; padding-bottom:5rem; width:100%; max-width:1100px; }
.contact-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:2.5rem; border-bottom:1px solid var(--border); }
.contact-title { font-family:var(--font-display); font-size:clamp(3.5rem,8vw,8.5rem); font-weight:400; line-height:0.92; letter-spacing:-0.025em; color:var(--silver); padding:3rem 0; }
.contact-title .italic { font-style:italic; color:transparent; -webkit-text-stroke:1px rgba(182,186,197,0.3); }
.contact-cta { padding-top:3rem; border-top:1px solid var(--border); }
.contact-email {
  font-family:var(--font-display); font-size:clamp(1rem,2.2vw,1.6rem);
  color:var(--accent); text-decoration:none;
  position:relative; display:inline-block; transition:opacity 0.25s;
}
.contact-email::after {
  content:''; position:absolute; bottom:-2px; left:0; right:100%;
  height:1px; background:var(--accent); transition:right 0.4s var(--ease-out);
}
.contact-email:hover { opacity:0.75; }
.contact-email:hover::after { right:0; }
.contact-links { display:flex; gap:2.5rem; padding-top:2rem; }
.contact-links a {
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--faint); text-decoration:none;
  transition:color 0.25s; position:relative;
}
/* Particle-link hover glow */
.particle-link::before {
  content:''; position:absolute; inset:-4px -8px;
  border:1px solid transparent; transition:border-color 0.3s;
}
.particle-link:hover { color:var(--accent); }
.particle-link:hover::before { border-color:var(--accent-glow); }
.site-footer {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding-top:2rem; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; color:var(--faint);
}
.footer-mid { color:var(--accent); }

/* ═══════════════════════════════════════════════════════════
   UTILITIES & ANIMATION STATES
═══════════════════════════════════════════════════════════ */
[data-fade] { opacity:0; transform:translateY(20px); }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  [data-fade] { opacity:1; transform:none; }
  #grain { display:none; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .about-grid { grid-template-columns:1fr; gap:3rem; }
  .about-stats { flex-direction:row; flex-wrap:wrap; gap:2rem; }
  .projects-track { width:70%; }
}
@media (max-width:768px) {
  #nav { padding:1.5rem 1.75rem; }
  .nav-status { display:none; }
  .nav-links { gap:2rem; }
  #breadcrumb { left:1.75rem; bottom:1.5rem; }
  .hero-stamp { padding:6rem 1.75rem 0; }
  .hero-content { padding:0 1.75rem; }
  .hero-footer { padding:0 1.75rem 2rem; }
  .hero-disciplines { display:none; }
  .hero-title { font-size:clamp(3.5rem,12vw,6rem); }
  .panel--about, .panel--contact { padding:5rem 1.75rem 3rem; }
  .projects-inner { padding:5rem 1.75rem; }
  .projects-track { width:100%; }
  .project-title { font-size:1rem; }
  .contact-title { font-size:clamp(2.8rem,11vw,4.5rem); }
  .site-footer { flex-direction:column; gap:0.75rem; text-align:center; }
  .footer-mid { display:none; }
  #project-drawer { width:100%; border-left:none; border-top:1px solid var(--border); }
}