<div class="scd-tab">
  <div class="scd-tab__stage">
    <div class="scd-tab__folder scd-tab__folder--f3"><span class="scd-tab__tab">2026</span><h3>Active Projects</h3><p>Current quarter deliverables and ongoing client work in progress.</p></div>
    <div class="scd-tab__folder scd-tab__folder--f2"><span class="scd-tab__tab">2025</span><h3>Completed</h3><p>Archived and signed-off work from the previous fiscal year.</p></div>
    <div class="scd-tab__folder scd-tab__folder--f1"><span class="scd-tab__tab">LEGACY</span><h3>Reference</h3><p>Older documentation kept for historical reference only.</p></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@600;700&family=IBM+Plex+Mono&display=swap');

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

.scd-tab {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #d9cfc0;
  font-family: 'IBM Plex Mono', monospace;
}
.scd-tab__stage { position: relative; width: 300px; height: 340px; }
.scd-tab__folder {
  position: absolute; left: 0; right: 0; height: 300px;
  border-radius: 6px 6px 10px 10px;
  background: #f4ecd8;
  box-shadow: 0 -2px 0 rgba(0,0,0,.05), 0 14px 24px rgba(60,40,20,.2);
  transition: transform .45s cubic-bezier(.3,.9,.3,1);
  cursor: pointer;
  padding: 46px 26px;
}
.scd-tab__tab {
  position: absolute; top: -26px;
  height: 30px; width: 110px;
  border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Franklin', sans-serif; font-weight: 700;
  font-size: .8rem; color: #fff; letter-spacing: .05em;
}
.scd-tab__folder h3 { font-family: 'Libre Franklin', sans-serif; font-weight: 700; color: #3a2e1c; font-size: 1.2rem; margin-bottom: 8px; }
.scd-tab__folder p { font-size: .8rem; color: #6b5840; line-height: 1.5; }
.scd-tab__folder--f1 { bottom: 0; z-index: 1; } .scd-tab__folder--f1 .scd-tab__tab { left: 14px; background: #c0392b; }
.scd-tab__folder--f2 { bottom: 14px; z-index: 2; } .scd-tab__folder--f2 .scd-tab__tab { left: 100px; background: #d68910; }
.scd-tab__folder--f3 { bottom: 28px; z-index: 3; } .scd-tab__folder--f3 .scd-tab__tab { left: 186px; background: #1e8449; }
/* Stage spread — only apply when no individual folder is being hovered.
   Without :has(...:hover) guard, hovering the 2025 tab fires BOTH the
   stage spread (translateY: 30px down) AND the folder lift (translateY:
   -14px up). The two transforms fight on a single .45s ease, sliding
   the folder out from under the cursor mid-transition → cursor leaves
   the folder → spread resets → cursor re-enters → infinite jitter.
   Restricting the spread to "stage hover AND nothing inside being
   hovered" lets the spread animate cleanly when you enter the stage,
   then freezes the position the moment you land on a folder, so the
   folder's own hover effect doesn't fight a still-running translation. */
.scd-tab__stage:hover:not(:has(.scd-tab__folder:hover)) .scd-tab__folder--f1 { transform: translateY(60px); }
.scd-tab__stage:hover:not(:has(.scd-tab__folder:hover)) .scd-tab__folder--f2 { transform: translateY(30px); }
/* Lift the hovered folder above its peers and brighten it. Using scale
   (not translateY) is deliberate: scale grows around the folder's
   center, so the tab at top stays very close to where the cursor entered
   it — no cursor re-entry jitter. The z-index bump keeps the lifted
   folder on top of the stack regardless of source order. */
.scd-tab__folder:hover {
  transform: scale(1.04) !important;
  z-index: 9 !important;
  box-shadow: 0 -2px 0 rgba(0,0,0,.05), 0 24px 38px rgba(60,40,20,.32);
}

@media (prefers-reduced-motion: reduce) {
  .scd-tab__folder { transition: none !important; }
}