/* Stonecat visual tokens; the lineup's geometry and motion remain unchanged. */
#sect-portfolio.pf-lineup {
  position: relative;
  top: auto;
  z-index: 1;
  padding: var(--section-py) 0;
  overflow: hidden;
  background: var(--bg-secondary, #111);
  isolation: isolate;
  user-select: none;
  font-family: var(--font);
}
.pf-lineup__heading { text-align: center; margin-bottom: 24px; }
.pf-lineup__heading .eyebrow { margin-bottom: 0; }
#sect-portfolio .pf-lineup__heading .headline {
  margin: 12px auto 0;
  max-width: 820px;
}
#sect-portfolio .pf-lineup__heading .accent {
  color: var(--brand);
}
.pf-lineup__stage {
  position: relative;
  height: max(480px, calc(26.94445vw + 80px));
  width: 100%;
  perspective: 62.5vw;
  touch-action: pan-y;
  cursor: grab;
}
.pf-lineup__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15.15625vw;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: inherit;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, filter;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.pf-lineup__card img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; pointer-events: none; }
.pf-lineup__card::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--border); border-radius: inherit; pointer-events: none; }
.pf-lineup__card[aria-current="true"]::after { border-color: rgba(59, 107, 255, .4); }
.pf-lineup__card:focus-visible { outline: 3px solid var(--brand); outline-offset: 6px; }
.pf-lineup__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 110;
  padding: 8px 16px;
  border: 1px solid rgba(59, 107, 255, .32);
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, .72);
  backdrop-filter: blur(10px);
  color: var(--brand-light);
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .2s, scale .2s;
}
.pf-lineup__caption { margin-top: -32px; position: relative; text-align: center; pointer-events: none; }
.pf-lineup__caption h3 { margin: 0; color: var(--text-primary); font-size: 30px; font-weight: 900; line-height: 1.3; letter-spacing: -.024em; font-variant-numeric: tabular-nums; }
.pf-lineup__controls { position: relative; display: flex; justify-content: center; gap: 16px; margin-top: 24px; }
.pf-lineup__controls button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--bg-card);
  cursor: pointer;
  transition: opacity .2s;
}
.pf-lineup__controls button:hover { opacity: .8; border-color: var(--brand); color: var(--brand-light); }
.pf-lineup__controls button:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.pf-lineup__controls .pf-lineup__pause { position: absolute; left: calc(50% + 84px); width: 44px; border-color: transparent; background: none; }
.pf-lineup__controls .pf-lineup__pause[hidden] { display: none; }
.pf-lineup__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#pfLightbox.pf-lineup__lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 48px 20px;
  margin: 0;
  border: 0;
  color: var(--text-primary);
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(8px);
}
#pfLightbox[open] { display: flex; align-items: center; justify-content: center; }
#pfLightbox::backdrop { background: rgba(0, 0, 0, .4); }
#pfLightboxClose { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font); font-size: 32px; line-height: 1; cursor: pointer; }
.pf-lineup__player { width: min(360px, 88vw, calc((100dvh - 140px) * .5625)); }
.pf-lineup__player iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.pf-lineup__source { display: block; padding: 16px 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-align: center; text-decoration: underline; text-underline-offset: 4px; }
.pf-lineup__source:hover, #pfLightboxClose:hover { color: var(--brand-light); }
.pf-lineup__source:focus-visible, #pfLightboxClose:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pf-lineup__stage, .pf-lineup__card { cursor: none; }
}
@media (max-width: 992px) {
  .pf-lineup__stage { height: 460px; perspective: 850px; }
  .pf-lineup__card { width: 210px; }
}
@media (max-width: 600px) {
  .pf-lineup__heading { margin-bottom: 16px; }
  .pf-lineup__stage { height: 400px; perspective: 600px; }
  .pf-lineup__card { width: 180px; }
  .pf-lineup__caption { margin-top: -12px; }
  .pf-lineup__caption h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-lineup__cursor, .pf-lineup__controls button { transition: none; }
  .pf-lineup__card { will-change: auto; }
}