/* ---------- interactive category selector ---------- */
.proj-selector-section{padding:64px 0; border-bottom:1px solid var(--line);}
.proj-selector-section .wrap{
  max-width:100%;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:40px;
  padding-right:40px;
}
.proj-selector{
  display:flex;
  min-height:560px;
  border:1px solid var(--line);
  overflow:hidden;
}

/* -- left: angled info panel with background photo -- */
.proj-panel{
  position:relative;
  flex:1 1 60%;
  background:var(--ink);
  color:#fff;
  padding:56px 150px 56px 44px;
  display:flex; flex-direction:column; justify-content:center;
  clip-path:polygon(0 0, 100% 0, 93% 100%, 0% 100%);
  overflow:hidden;
  cursor:pointer;
}
.proj-panel-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.proj-panel-bg img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity .45s ease;
}
.proj-panel-bg img.is-active{opacity:.6;}
.proj-panel-bg img.is-leaving{opacity:0;}
.proj-panel-bg::after{
  content:"";
  position:absolute; inset:0;
  background:#3E7EA6;
  mix-blend-mode:color;
  opacity:.6;
}
.proj-panel::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(18,24,31,.94) 0%, rgba(18,24,31,.8) 45%, rgba(18,24,31,.55) 100%);
  z-index:1;
}
.proj-panel-content{position:relative; z-index:2; max-width:420px;}
.proj-panel-content .eyebrow{color:var(--accent);}
.proj-panel-content h2{
  font-size:clamp(24px,2.6vw,32px); font-weight:600; line-height:1.2;
  margin:16px 0 16px;
}
.proj-panel-content p{color:rgba(247,248,246,.78); font-size:14.5px; line-height:1.7;}

/* -- right: vertical category picker -- */
.proj-selector-list{
  flex:1 1 40%;
  background:var(--paper);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.proj-selector-item{
  display:flex; align-items:center; gap:16px;
  padding:20px 28px;
  border-bottom:1px solid var(--line);
  background:none; border-left:0; border-right:0; border-top:0;
  text-align:left; cursor:pointer; width:100%;
  font-family:'Satoshi',sans-serif;
  transition:background .12s ease, color .12s ease;
}
.proj-selector-item .s-title{
  font-size:14px; font-weight:600; color:var(--ink);
  transition:color .12s ease;
}
.proj-selector-item:not(.active):hover{background:var(--card);}
.proj-selector-item.active{background:var(--ink);}
.proj-selector-item.active .s-title{color:#fff;}

/* ---------- active category detail (tags + photo strip) ---------- */
.proj-detail{padding:0 0 64px;}
.proj-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;}
.proj-tag{
  font-family:'Satoshi',monospace; font-size:11.5px;
  padding:6px 12px; border:1px solid var(--line); color:var(--steel);
}

.proj-marquee-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.proj-marquee-track{
  display:flex; align-items:center; gap:14px;
  width:max-content;
  animation:proj-marquee 46s linear infinite;
}
.proj-tile{
  width:300px; height:200px; flex:none;
  border:1px solid var(--line);
  overflow:hidden;
  background:var(--ink);
}
.proj-tile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.proj-tile:hover img{transform:scale(1.06);}
@keyframes proj-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .proj-marquee-track{animation:none !important;}
}

/* ---------- scroll-in entrance ---------- */
.proj-selector-section .section-top{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
.proj-selector-section .proj-panel{
  opacity:0;
  transform:translateX(-36px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
.proj-selector-section:not(.is-visible) .proj-selector-item{
  opacity:0;
  transform:translateX(28px);
}
@keyframes proj-item-in{
  from{opacity:0; transform:translateX(28px);}
  to{opacity:1; transform:none;}
}
.proj-selector-section.is-visible .section-top{
  opacity:1;
  transform:none;
  transition-delay:.05s;
}
.proj-selector-section.is-visible .proj-panel{
  opacity:1;
  transform:none;
  transition-delay:.18s;
}
.proj-selector-section.is-visible .proj-selector-item:nth-child(1){animation:proj-item-in .45s cubic-bezier(.22,1,.36,1) .32s both;}
.proj-selector-section.is-visible .proj-selector-item:nth-child(2){animation:proj-item-in .45s cubic-bezier(.22,1,.36,1) .40s both;}
.proj-selector-section.is-visible .proj-selector-item:nth-child(3){animation:proj-item-in .45s cubic-bezier(.22,1,.36,1) .48s both;}
.proj-selector-section.is-visible .proj-selector-item:nth-child(4){animation:proj-item-in .45s cubic-bezier(.22,1,.36,1) .56s both;}
.proj-selector-section.is-visible .proj-selector-item:nth-child(5){animation:proj-item-in .45s cubic-bezier(.22,1,.36,1) .64s both;}
.proj-selector-section.is-visible .proj-selector-item:nth-child(6){animation:proj-item-in .45s cubic-bezier(.22,1,.36,1) .72s both;}
.proj-selector-section.is-visible .proj-selector-item:nth-child(7){animation:proj-item-in .45s cubic-bezier(.22,1,.36,1) .80s both;}
.proj-selector-section.has-entered .proj-selector-item{
  animation:none;
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .proj-selector-section .section-top,
  .proj-selector-section .proj-panel,
  .proj-selector-section .proj-selector-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .proj-panel-bg img{transition:none !important;}
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .proj-selector{flex-direction:column; min-height:auto;}
  .proj-panel{clip-path:none; padding:44px 32px; min-height:320px;}
  .proj-selector-list{max-height:none;}
  .proj-selector-section .proj-panel{transform:translateY(28px);}
  .proj-selector-section.is-visible .proj-panel{transform:none;}
}
@media (max-width:560px){
  .proj-tile{width:220px; height:150px;}
  .proj-selector-section .wrap{padding-left:20px; padding-right:20px;}
}