/* ===================================
   GR LAB® — project.css
=================================== */

.nav-back {
  font-size: 12px; letter-spacing: 3px;
  color: var(--muted); display: flex;
  align-items: center; gap: 8px; transition: color 0.2s;
}
.nav-back:hover { color: var(--red); }

.concept-tag {
  font-size: 8px; letter-spacing: 3px;
  padding: 3px 10px; border: 1px solid var(--red);
  color: var(--red); margin-left: 12px;
  vertical-align: middle;
}

#project-hero {
  min-height: 100vh;
  padding: 120px 4rem 80px;
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.project-bg-num {
  position: absolute; right: 2rem; top: 50%;
  transform: translateY(-50%);
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 280px; color: rgba(255,0,0,0.025);
  line-height: 1; pointer-events: none; user-select: none; letter-spacing: -8px;
}
.project-category {
  font-size: 10px; letter-spacing: 5px;
  color: var(--red); margin-bottom: 24px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.project-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(64px, 12vw, 160px);
  line-height: 0.88; letter-spacing: -3px;
  margin-bottom: 48px;
}
.project-meta {
  display: flex; gap: 48px;
  border-top: 1px solid var(--border); padding-top: 32px;
  flex-wrap: wrap;
}
.meta-item { display: flex; flex-direction: column; gap: 6px; }
.meta-label { font-size: 13px; letter-spacing: 4px; color: var(--red); }
.meta-value { font-size: 14px; color: var(--muted); }

/* HORIZONTAL SCROLL */
#horizontal-section {
  position: relative; height: 100vh; overflow: hidden;
}
.h-scroll-hint {
  position: absolute; bottom: 32px; right: 4rem;
  font-size: 10px; letter-spacing: 3px; color: var(--dim);
  display: flex; align-items: center; gap: 10px; z-index: 10;
}
.h-scroll-line { width: 32px; height: 1px; background: var(--dim); }
.h-scroll-track { display: flex; height: 100%; will-change: transform; }
.h-slide {
  min-width: 80vw; height: 100%;
  display: flex; align-items: center;
  padding: 0 4rem; border-right: 1px solid var(--border); flex-shrink: 0;
}
.slide-img {
  width: 100%; height: 75%;
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.slide-img img { width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .4s,transform .6s; }
.slide-img:hover img { opacity:1;transform:scale(1.02); }
.slide-img-placeholder {
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  color:var(--border2);font-size:11px;letter-spacing:3px;
}
.slide-img-placeholder i { font-size:32px;color:var(--border2); }
.slide-num {
  position:absolute;bottom:16px;right:16px;
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:48px;color:rgba(255,0,0,0.06);
  line-height:1;user-select:none;
}
.slide-text {
  display:flex;flex-direction:column;
  justify-content:center;gap:24px;max-width:520px;
}
.slide-text-label { font-size:9px;letter-spacing:4px;color:var(--red); }
.slide-text-title {
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:-1px;
}
.slide-text-body { font-size:14px;color:var(--muted);line-height:1.9;max-width:440px; }
.slide-text-tags { display:flex;flex-wrap:wrap;gap:8px;margin-top:8px; }
.slide-tag {
  font-size:9px;letter-spacing:2px;
  padding:5px 12px;border:1px solid var(--border2);color:var(--muted);
}
.slide-split {
  display:grid;grid-template-columns:1fr 1fr;
  gap:40px;width:100%;height:75%;align-items:stretch;
}
.h-progress {
  position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--border);
}
.h-progress-fill {
  height:100%;background:var(--red);
  width:0%;transition:width .1s linear;
}

/* PROJECT INFO */
#project-info {
  padding:100px 4rem;border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;
}
.info-title {
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(40px,5vw,72px);
  line-height:0.92;letter-spacing:-2px;margin-bottom:32px;
}
.info-body { font-size:14px;color:var(--muted);line-height:1.9; }
.info-body p { margin-bottom:20px; }
.info-details { display:flex;flex-direction:column;gap:32px; }
.info-detail-item { border-left:2px solid var(--red);padding-left:20px; }
.info-detail-label { font-size:9px;letter-spacing:4px;color:var(--red);margin-bottom:8px; }
.info-detail-value { font-size:14px;color:var(--muted);line-height:1.7; }

/* PROJECT NAV */
#project-nav { display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border); }
.proj-nav-item {
  padding:48px 4rem;display:flex;flex-direction:column;gap:12px;
  border-right:1px solid var(--border);transition:background .3s;
  position:relative;overflow:hidden;cursor:none;
}
.proj-nav-item:last-child { border-right:none; }
.proj-nav-item:hover { background:var(--black2); }
.proj-nav-item::after {
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.proj-nav-item:hover::after { transform:scaleX(1); }
.proj-nav-label { font-size:9px;letter-spacing:4px;color:var(--dim); }
.proj-nav-title {
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:28px;letter-spacing:-1px;line-height:1;
}
.proj-nav-arrow { font-size:9px;letter-spacing:2px;color:var(--red);transition:transform .3s; }
.proj-nav-item:hover .proj-nav-arrow { transform:translateX(6px); }
.proj-nav-item.prev:hover .proj-nav-arrow { transform:translateX(-6px); }

@media (max-width:900px) {
  #project-hero { padding:100px 20px 60px; }
  .project-meta { gap:24px; }
  .h-slide { min-width:92vw;padding:0 20px; }
  #project-info { grid-template-columns:1fr;gap:40px;padding:60px 20px; }
  #project-nav { grid-template-columns:1fr; }
  .proj-nav-item { border-right:none;border-bottom:1px solid var(--border);padding:32px 20px; }
}