/* WebPies — "Projects that moved the needle" draggable case-study slider. */
.needle-sec{ background: #0a0c0e; color: #f5f1ea; overflow: hidden; }
.needle-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.needle-title{ font-family: 'Instrument Serif', serif; font-size: clamp(38px, 6vw, 76px); line-height: .96; letter-spacing: -.01em; }
.needle-title .nt-lime{ color: var(--lime); font-style: italic; }
.needle-nav{ display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-bottom: 6px; }
.needle-hint{ font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,241,234,.5); display: flex; align-items: center; gap: 8px; }
.needle-dots{ display: flex; gap: 7px; }
.needle-dot{ width: 7px; height: 7px; border-radius: 999px; background: rgba(245,241,234,.25); border: 0; cursor: pointer; padding: 0; transition: width .35s cubic-bezier(.16,1,.3,1), background .3s ease; }
.needle-dot.active{ width: 22px; background: var(--lime); }

.needle-track{
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; padding: 4px 0 4px;
}
.needle-track::-webkit-scrollbar{ display: none; }
.needle-track.dragging{ cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }

.needle-card{
  flex: 0 0 auto; scroll-snap-align: start; width: min(370px, 80vw); aspect-ratio: 3 / 4;
  position: relative; border-radius: 18px; overflow: hidden; text-decoration: none; color: #f5f1ea;
  background: #16181c; isolation: isolate;
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
}
.nc-media{ position: absolute; inset: 0; z-index: 0; }
.nc-media img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.78); transform: scale(1.02); transition: filter .55s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.nc-wash{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--accent) -10%, color-mix(in srgb, var(--accent) 28%, transparent) 34%, transparent 64%); opacity: .5; transition: opacity .55s ease; }
.nc-dark{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,9,11,.55) 0%, transparent 50%); }
.nc-top{ position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.nc-idx{ font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(245,241,234,.7); }
.nc-tag{ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #f5f1ea; background: rgba(8,9,11,.45); border: 1px solid rgba(245,241,234,.22); padding: 5px 9px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nc-body{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px; }
.nc-stat{ font-family: 'Instrument Serif', serif; font-size: 52px; line-height: .9; letter-spacing: -.02em; }
.nc-stat-l{ display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,241,234,.7); margin-top: 6px; }
.nc-name{ font-family: 'Instrument Serif', serif; font-size: 26px; margin-top: 14px; }
.nc-desc{ font-size: 13px; line-height: 1.45; color: rgba(245,241,234,.72); margin-top: 6px; max-width: 92%; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .4s ease, margin .4s ease; }
.nc-cta{ display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #f5f1ea; margin-top: 14px; }
.nc-cta svg{ transition: transform .3s ease; }

/* hover: saturate, glow, lift, reveal description */
.needle-card:hover{ transform: translateY(-10px); box-shadow: 0 32px 70px -24px color-mix(in srgb, var(--accent) 68%, transparent); }
.needle-card:hover .nc-media img{ filter: grayscale(0) brightness(.94); transform: scale(1.08); }
.needle-card:hover .nc-wash{ opacity: .94; }
.needle-card:hover .nc-desc{ max-height: 64px; opacity: 1; }
.needle-card:hover .nc-cta svg{ transform: translateX(4px); }

.needle-foot{ display: flex; align-items: center; gap: 20px; margin-top: 26px; }
.needle-progress{ flex: 1; height: 1px; background: rgba(245,241,234,.18); position: relative; }
.needle-progress-bar{ position: absolute; left: 0; top: 0; height: 1px; background: var(--lime); width: 16%; transition: width .12s linear; }
.needle-count{ font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: rgba(245,241,234,.6); }
.needle-count .nc-cur{ color: #f5f1ea; }

@media (hover: none){
  .needle-card .nc-media img{ filter: grayscale(0) brightness(.9); }
  .needle-card .nc-wash{ opacity: .9; }
  .needle-card .nc-desc{ max-height: 64px; opacity: 1; }
}
@media (max-width: 640px){
  .needle-card{ width: 78vw; }
  .nc-stat{ font-size: 44px; }
}
@media (prefers-reduced-motion: reduce){
  .needle-card, .nc-media img, .nc-wash{ transition: none; }
}