/* ===== CENTER-STAGE 3D CAROUSEL ===== */
#portfolio-cs {
  padding: 96px 0;
  background: #050505;
}
.cs-header {
  padding: 0 56px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 52px;
}
@media(max-width:767px){ .cs-header { padding: 0 20px; flex-direction:column; align-items:flex-start; gap:12px; } }

/* stage */
.cs-stage {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
@media(max-width:767px){ .cs-stage { height: 290px; } }

/* cards */
.cs-card {
  position: absolute;
  width: 560px;
  height: 360px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.055);
  will-change: transform, opacity, filter;
  transition:
    transform .78s cubic-bezier(.22,.68,0,1.15),
    opacity .78s ease,
    filter .78s ease,
    box-shadow .78s ease;
  backface-visibility: hidden;
  cursor: pointer;
}
@media(max-width:767px){
  .cs-card { width: 82vw; max-width:360px; height:230px; border-radius:10px; }
}

/* states */
.cs-card[data-state="center"] {
  transform: translateX(0) translateZ(0) scale(1) rotateY(0deg);
  opacity: 1; filter: none; z-index: 10;
  box-shadow: 0 0 0 1px rgba(255,87,8,.2),
              0 40px 80px rgba(0,0,0,.85),
              0 0 60px rgba(255,87,8,.08);
}
.cs-card[data-state="left1"] {
  transform: translateX(-610px) translateZ(-200px) scale(.83) rotateY(14deg);
  opacity: .42; filter: blur(1.5px) saturate(.2); z-index: 5;
}
.cs-card[data-state="right1"] {
  transform: translateX(610px) translateZ(-200px) scale(.83) rotateY(-14deg);
  opacity: .42; filter: blur(1.5px) saturate(.2); z-index: 5;
}
.cs-card[data-state="left2"] {
  transform: translateX(-1020px) translateZ(-450px) scale(.64) rotateY(22deg);
  opacity: .16; filter: blur(4px) saturate(.08); z-index: 2;
}
.cs-card[data-state="right2"] {
  transform: translateX(1020px) translateZ(-450px) scale(.64) rotateY(-22deg);
  opacity: .16; filter: blur(4px) saturate(.08); z-index: 2;
}
.cs-card[data-state="hidden"] {
  transform: translateX(1600px) translateZ(-700px) scale(.5) rotateY(-30deg);
  opacity: 0; pointer-events: none; z-index: 0;
}
.cs-card[data-state="hidden-left"] {
  transform: translateX(-1600px) translateZ(-700px) scale(.5) rotateY(30deg);
  opacity: 0; pointer-events: none; z-index: 0;
}
@media(max-width:767px){
  .cs-card[data-state="left1"]  { transform: translateX(-86vw) translateZ(-150px) scale(.8) rotateY(10deg); }
  .cs-card[data-state="right1"] { transform: translateX(86vw)  translateZ(-150px) scale(.8) rotateY(-10deg); }
  .cs-card[data-state="left2"]  { transform: translateX(-160vw) translateZ(-350px) scale(.62) rotateY(18deg); }
  .cs-card[data-state="right2"] { transform: translateX(160vw)  translateZ(-350px) scale(.62) rotateY(-18deg); }
}

/* card internals */
.cs-bg  { position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease; }
.cs-card:hover .cs-bg { transform:scale(1.04); }
.cs-veil { position:absolute;inset:0;background:linear-gradient(140deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.38) 100%); }
.cs-body { position:absolute;inset:0;padding:26px 28px;display:flex;flex-direction:column;justify-content:space-between; }
.cs-top  { display:flex;justify-content:space-between;align-items:flex-start; }
.cs-idx  { font-family:'Anton',sans-serif;font-size:11px;color:#ff5708;letter-spacing:.1em; }
.cs-yr   { font-size:9px;color:#666;letter-spacing:.1em; }
.cs-cat  { font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:#ff5708;margin-bottom:6px; }
.cs-name { font-family:'Anton',sans-serif;font-size:28px;letter-spacing:.02em;line-height:1.05;margin-bottom:5px; }
.cs-sub  { font-size:11px;color:rgba(236,233,227,.65);margin-bottom:3px; }
.cs-url  { font-size:9px;color:#555;letter-spacing:.05em;margin-bottom:12px; }
.cs-cta  {
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#e8e5e3;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s,transform .3s;
}
.cs-card[data-state="center"]:hover .cs-cta { opacity:1;transform:translateY(0); }
.cs-cta-line { width:18px;height:1px;background:#ff5708; }
@media(max-width:767px){
  .cs-name { font-size:20px; }
  .cs-body { padding:16px 18px; }
}

/* controls */
.cs-controls {
  display:flex;align-items:center;justify-content:center;
  gap:10px;margin-top:32px;padding:0 56px;
}
.cs-btn {
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,.07);border-radius:8px;
  background:#111;color:#666;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:all .25s ease;
  box-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
}
.cs-btn:hover { color:#e8e5e3;border-color:rgba(255,255,255,.15);box-shadow:0 0 16px rgba(255,87,8,.15); }
.cs-btn:active { transform:translateY(2px); }
.cs-dots { display:flex;gap:6px;align-items:center; }
.cs-dot {
  width:4px;height:4px;border-radius:2px;
  background:#555;opacity:.4;cursor:pointer;
  transition:all .35s ease;
}
.cs-dot.on { background:#ff5708;opacity:1;width:22px; }
.cs-counter { font-family:'Anton',sans-serif;font-size:12px;color:#555;letter-spacing:.1em;margin:0 6px;min-width:28px;text-align:center; }

/* ===== KEYBOARD NAV KEYS ===== */
.nav-key-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-kb {
  position: relative;
  padding: 8px 14px;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #666;
  text-decoration: none;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,.07);
  border-bottom: 3px solid rgba(0,0,0,.7);
  border-radius: 7px;
  transition: all .17s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
}
.nav-kb-n { font-size: 7px; color: #ff5708; opacity: .6; letter-spacing: .08em; font-family:'Anton',sans-serif; }
.nav-kb:hover {
  color: #e8e5e3;
  border-color: rgba(255,255,255,.14);
  border-bottom-color: rgba(255,87,8,.28);
  box-shadow: 0 2px 8px rgba(0,0,0,.7), 0 0 18px rgba(255,87,8,.1), inset 0 1px 0 rgba(255,255,255,.07);
  transform: translateY(1px);
  background: #161616;
}
.nav-kb:active, .nav-kb.active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow: 0 0 6px rgba(0,0,0,.9);
}
.nav-kb.active { color: #e8e5e3; border-color: rgba(255,87,8,.22); }