/* ─────────────────────────────────────────────────────────
   projects.css  —  Styles for the projects overview page
   ───────────────────────────────────────────────────────── */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:     #080808;
  --fg:     #EDEAE4;
  --dim:    rgba(237,234,228,0.36);
  --dimmer: rgba(237,234,228,0.12);
  --border: rgba(237,234,228,0.07);
  --gap:    3px;
}

html { scroll-behavior:smooth; }

body {
  width:100%; background:var(--bg); color:var(--fg);
  font-family:'Syne', sans-serif; cursor:none;
  min-height:100vh; overflow-x:hidden;
}

/* ── GRAIN ── */
#grain {
  position:fixed; inset:0; z-index:200; pointer-events:none; opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' 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;
}

/* ── CURSOR ── */
#cur-dot {
  position:fixed; width:24px; height:24px; background:var(--fg); border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%) scale(0.167);
  will-change:left,top,transform;
}
#cur-ring {
  position:fixed; width:26px; height:26px; border:1px solid rgba(237,234,228,0.3);
  border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%);
  will-change:left,top,transform;
}
body.hovering #cur-dot  { transform:translate(-50%,-50%) scale(0); }
body.hovering #cur-ring { border-color:rgba(237,234,228,0.62); }

/* ── AMBIENT BG ── */
#bg-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.55; }

/* ── SIDE RAIL ── */
#side-rail {
  position:fixed; left:0; top:0; bottom:0; z-index:90; width:88px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-right:1px solid var(--border);
  background:rgba(8,8,8,0.5); backdrop-filter:blur(12px); gap:4px;
}
.rail-item {
  display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:14px 0; cursor:pointer; text-decoration:none;
  transition:opacity 0.4s; opacity:0.28;
}
.rail-item.active { opacity:1; }
.rail-item:hover  { opacity:0.72; }
.rail-dot {
  width:6px; height:6px; border-radius:50%;
  border:1px solid rgba(237,234,228,0.5); background:transparent;
  transition:background 0.35s, transform 0.35s; flex-shrink:0;
}
.rail-item.active .rail-dot { background:var(--fg); transform:scale(1.5); }
.rail-label {
  font-family:'Syne Mono', monospace;
  font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg);
  writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  white-space:nowrap; pointer-events:none; transition:opacity 0.3s;
}
.rail-line { width:1px; height:20px; background:var(--border); flex-shrink:0; }

/* ── HEADER ── */
header {
  position:fixed; top:0; left:88px; right:0; z-index:100; padding:22px 52px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:rgba(8,8,8,0.72); backdrop-filter:blur(20px);
}
.header-left { display:flex; align-items:center; gap:22px; }
.header-back {
  font-family:'Syne Mono', monospace; font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--dim); text-decoration:none;
  display:flex; align-items:center; gap:8px; transition:color 0.2s;
}
.header-back:hover { color:var(--fg); }
.header-back::before { content:'←'; font-size:0.85rem; }
.header-sep   { color:var(--dimmer); font-family:'Syne Mono',monospace; font-size:0.75rem; }
.header-title { font-family:'Syne Mono',monospace; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(237,234,228,0.55); }
#count-label  { font-family:'Syne Mono',monospace; font-size:0.67rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--dimmer); }

/* ── PAGE LAYOUT ── */
.page-content { margin-left:88px; }

/* ── HERO ── */
#hero {
  position:relative; z-index:1;
  padding:160px 52px 56px; border-bottom:1px solid var(--border); overflow:hidden;
}
#hero-number {
  font-family:'Cormorant Garamond', serif; font-size:clamp(6rem,14vw,12rem);
  font-weight:300; line-height:0.85; color:rgba(237,234,228,0.04);
  position:absolute; right:52px; bottom:-10px; letter-spacing:-0.02em;
  pointer-events:none; user-select:none;
}
#hero h1 {
  font-family:'Cormorant Garamond', serif; font-size:clamp(2.6rem,5vw,4.2rem);
  font-weight:300; letter-spacing:0.04em; line-height:1.1; color:var(--fg);
  opacity:0; animation:fadeUp 0.9s 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
#hero h1 em { font-style:italic; color:var(--dim); }
#hero-sub {
  font-family:'Syne Mono', monospace; font-size:0.7rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--dim); margin-top:14px;
  opacity:0; animation:fadeUp 0.9s 0.38s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── FILTERS ── */
#filters {
  position:relative; z-index:1; padding:28px 52px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  opacity:0; animation:fadeUp 0.8s 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
}
.filter-btn {
  font-family:'Syne Mono', monospace; font-size:0.63rem; letter-spacing:0.18em;
  text-transform:uppercase; padding:8px 18px; border-radius:100px;
  border:1px solid var(--border); background:none; color:rgba(237,234,228,0.32);
  cursor:pointer; transition:all 0.22s;
}
.filter-btn:hover  { border-color:rgba(237,234,228,0.22); color:rgba(237,234,228,0.7); }
.filter-btn.active { border-color:rgba(237,234,228,0.5); color:var(--fg); background:rgba(237,234,228,0.05); }

/* ── GALLERY ── */
#gallery-wrap { padding:48px 52px 80px; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.gallery-item {
  display:block; text-decoration:none; color:inherit;
  opacity:0; animation:fadeIn 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
.gallery-item:nth-child(1)  { animation-delay:0.10s; }
.gallery-item:nth-child(2)  { animation-delay:0.18s; }
.gallery-item:nth-child(3)  { animation-delay:0.26s; }
.gallery-item:nth-child(4)  { animation-delay:0.34s; }
.gallery-item:nth-child(5)  { animation-delay:0.42s; }
.gallery-item:nth-child(6)  { animation-delay:0.50s; }
.gallery-item:nth-child(7)  { animation-delay:0.58s; }
.gallery-item:nth-child(8)  { animation-delay:0.66s; }
.gallery-item:nth-child(9)  { animation-delay:0.74s; }
.gallery-item:nth-child(10) { animation-delay:0.82s; }
.gallery-item:nth-child(11) { animation-delay:0.90s; }
.gallery-item:nth-child(12) { animation-delay:0.98s; }
.gallery-item.hide { display:none; }
@keyframes fadeIn {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── PROJECT CARD ── */
.project-container {
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#0d0d0d;
}
.project-container::after {
  content:''; position:absolute; inset:0; border:1px solid rgba(237,234,228,0.04);
  pointer-events:none; z-index:4; transition:border-color 0.3s;
}
.project-container:hover::after { border-color:rgba(237,234,228,0.14); }
.image-stack { position:absolute; inset:0; }
.image-stack img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 0.45s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.45s ease;
  filter:grayscale(100%) brightness(0.6); z-index:1;
}
.image-stack img.active { opacity:1; z-index:2; }
.project-container:hover .image-stack img.active { filter:grayscale(20%) brightness(0.75); transform:scale(1.045); }
.img-overlay {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,0.0) 30%,rgba(8,8,8,0.72) 100%);
}
.project-info {
  position:absolute; bottom:0; left:0; right:0; z-index:5;
  padding:18px 22px 20px; transform:translateY(100%);
  transition:transform 0.38s cubic-bezier(0.16,1,0.3,1);
}
.project-container:hover .project-info { transform:translateY(0); }
.project-title { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:300; letter-spacing:0.06em; color:var(--fg); line-height:1.15; margin-bottom:5px; }
.work-description { font-family:'Syne Mono',monospace; font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(237,234,228,0.45); }
.cat-pill {
  position:absolute; top:16px; right:16px; z-index:5;
  font-family:'Syne Mono',monospace; font-size:0.55rem; letter-spacing:0.18em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; border:1px solid rgba(237,234,228,0.14);
  color:rgba(237,234,228,0.38); background:rgba(8,8,8,0.55); backdrop-filter:blur(6px);
  opacity:0; transition:opacity 0.3s;
}
.project-container:hover .cat-pill { opacity:1; }

/* ── LAB DIVIDER ── */
#lab-divider {
  position:relative; z-index:1; border-top:1px solid var(--border);
  display:flex; align-items:stretch; overflow:hidden;
}
#lab-divider-inner { display:flex; align-items:center; gap:32px; padding:72px 52px 64px; flex:1; }
#lab-divider-accent {
  width:1px; align-self:stretch; flex-shrink:0; margin-right:32px;
  background:linear-gradient(180deg,transparent 0%,rgba(237,234,228,0.14) 35%,rgba(237,234,228,0.14) 65%,transparent 100%);
}
#lab-ghost-num {
  font-family:'Cormorant Garamond',serif; font-size:clamp(5rem,12vw,10rem);
  font-weight:300; line-height:0.85; color:rgba(237,234,228,0.035);
  position:absolute; right:52px; bottom:0; letter-spacing:-0.02em;
  pointer-events:none; user-select:none;
}
#lab-text h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,4.5vw,3.8rem); font-weight:300; letter-spacing:0.04em; line-height:1.1; color:var(--fg); }
#lab-text h2 em { font-style:italic; color:var(--dim); }
#lab-text p { font-family:'Syne Mono',monospace; font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--dim); margin-top:14px; }

/* ── LAB SECTION ── */
#lab-section { position:relative; z-index:1; scroll-margin-top:70px; }
#lab-grid-wrap { padding:48px 52px 80px; }
.lab-masonry { position:relative; visibility:hidden; }
.lab-masonry.laid-out { visibility:visible; }
.lm-wrap { position:absolute; box-sizing:border-box; }

/* ── LAB CARD ── */
.lab-card {
  position:relative; overflow:hidden; background:#0d0d0d;
  display:block; text-decoration:none; color:inherit; cursor:pointer; user-select:none;
}
.lab-card::after { content:''; position:absolute; inset:0; border:1px solid rgba(237,234,228,0.04); pointer-events:none; z-index:4; transition:border-color 0.3s; }
.lab-card:hover::after { border-color:rgba(237,234,228,0.18); }
.lab-card img, .lab-card video {
  display:block; width:100%; height:auto; max-height:70vh; object-fit:cover;
  filter:grayscale(80%) brightness(0.72) saturate(0.8);
  transition:filter 0.45s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.lab-card:hover img, .lab-card:hover video { filter:grayscale(10%) brightness(0.92) saturate(1.1); transform:scale(1.04); }
.lab-overlay { position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,transparent 45%,rgba(8,8,8,0.88) 100%); opacity:0; transition:opacity 0.35s; }
.lab-card:hover .lab-overlay { opacity:1; }
.lab-info { position:absolute; bottom:0; left:0; right:0; z-index:3; padding:12px 14px 16px; transform:translateY(6px); opacity:0; transition:transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.28s; }
.lab-card:hover .lab-info { transform:translateY(0); opacity:1; }
.lab-title { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:300; letter-spacing:0.05em; color:var(--fg); line-height:1.2; margin-bottom:4px; }
.lab-sub   { font-family:'Syne Mono',monospace; font-size:0.52rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(237,234,228,0.45); }
.lab-vid-badge {
  position:absolute; top:10px; left:10px; z-index:5;
  font-family:'Syne Mono',monospace; font-size:0.48rem; letter-spacing:0.2em; text-transform:uppercase;
  padding:3px 8px; border-radius:100px; border:1px solid rgba(237,234,228,0.2);
  color:rgba(237,234,228,0.6); background:rgba(8,8,8,0.65); backdrop-filter:blur(6px);
}

/* ── LIGHTBOX ── */
#lightbox { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; background:rgba(8,8,8,0.96); backdrop-filter:blur(28px); opacity:0; pointer-events:none; transition:opacity 0.38s cubic-bezier(0.16,1,0.3,1); }
#lightbox.open { opacity:1; pointer-events:all; }
#lb-stage { position:relative; width:min(88vw,1200px); height:min(82vh,900px); display:flex; align-items:center; justify-content:center; }
#lb-media-wrap { position:relative; max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center; }
#lb-media-wrap img, #lb-media-wrap video { display:block; max-width:min(88vw,1200px); max-height:min(76vh,840px); width:auto; height:auto; object-fit:contain; opacity:0; transition:opacity 0.32s ease; border:1px solid rgba(237,234,228,0.07); }
#lb-media-wrap img.ready, #lb-media-wrap video.ready { opacity:1; }
.lb-arrow { position:absolute; top:50%; z-index:10; transform:translateY(-50%); width:44px; height:44px; border:1px solid rgba(237,234,228,0.16); border-radius:50%; background:rgba(8,8,8,0.6); backdrop-filter:blur(10px); color:rgba(237,234,228,0.55); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color 0.22s,color 0.22s,background 0.22s; flex-shrink:0; }
.lb-arrow:hover { border-color:rgba(237,234,228,0.5); color:var(--fg); background:rgba(8,8,8,0.85); }
.lb-arrow svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#lb-prev { left:-66px; } #lb-next { right:-66px; }
#lb-close { position:fixed; top:28px; right:36px; z-index:520; width:38px; height:38px; border-radius:50%; border:1px solid rgba(237,234,228,0.14); background:rgba(8,8,8,0.6); backdrop-filter:blur(10px); color:rgba(237,234,228,0.45); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color 0.22s,color 0.22s; }
#lb-close:hover { border-color:rgba(237,234,228,0.45); color:var(--fg); }
#lb-close svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; }
#lb-caption { position:fixed; bottom:44px; left:50%; transform:translateX(-50%); z-index:520; display:flex; flex-direction:column; align-items:center; gap:16px; pointer-events:none; }
#lb-title-wrap { display:flex; flex-direction:column; align-items:center; gap:5px; opacity:0; transform:translateY(6px); transition:opacity 0.3s 0.12s,transform 0.3s 0.12s; }
#lightbox.open #lb-title-wrap { opacity:1; transform:translateY(0); }
#lb-title { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:300; letter-spacing:0.06em; color:var(--fg); white-space:nowrap; }
#lb-sub   { font-family:'Syne Mono',monospace; font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--dim); }
#lb-desc  { font-family:'Syne',sans-serif; font-size:0.82rem; line-height:1.72; color:rgba(237,234,228,0.42); text-align:center; max-width:min(72vw,860px); margin-top:2px; }
#lb-desc:empty { display:none; }
#lb-dots  { display:flex; align-items:center; gap:7px; pointer-events:all; }
.lb-dot { width:5px; height:5px; border-radius:50%; border:1px solid rgba(237,234,228,0.3); background:transparent; cursor:pointer; transition:background 0.25s,border-color 0.25s,transform 0.25s; }
.lb-dot.active { background:var(--fg); border-color:var(--fg); transform:scale(1.3); }
#lb-counter { position:fixed; top:30px; left:50%; transform:translateX(-50%); font-family:'Syne Mono',monospace; font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--dimmer); z-index:520; pointer-events:none; }
#lb-hint { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); font-family:'Syne Mono',monospace; font-size:0.5rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(237,234,228,0.15); z-index:520; pointer-events:none; opacity:1; transition:opacity 1s; }
#lb-hint.gone { opacity:0; }

/* ── FOOTER ── */
footer { position:relative; z-index:1; padding:26px 52px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
footer p { font-family:'Syne Mono',monospace; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--dimmer); }

/* ── RESPONSIVE ── */
@media (max-width:1200px) {
  #side-rail    { width:46px; }
  .rail-label   { font-size:0.56rem; }
  header        { left:46px; padding:18px 22px; }
  .page-content { margin-left:46px; }
  .gallery      { grid-template-columns:repeat(2,1fr); }
  #hero, #filters, #gallery-wrap, #lab-grid-wrap, #lab-divider-inner, footer { padding-left:22px; padding-right:22px; }
  #hero-number, #lab-ghost-num { right:22px; }
  body          { cursor:auto; }
  #cur-dot, #cur-ring { display:none; }
}
@media (max-width:700px) {
  .gallery      { grid-template-columns:1fr; gap:0; }
  .gallery-item { opacity:1; animation:none; }
  .project-info { transform:translateY(0) !important; opacity:1 !important; }
  .lab-card .lab-info    { transform:translateY(0) !important; opacity:1 !important; }
  .lab-card .lab-overlay { opacity:1 !important; }
  .lab-card img, .lab-card video { filter:grayscale(0%) brightness(0.85) saturate(1) !important; transform:none !important; }
}