/* Full-bleed perspective ring. Geometry is updated continuously while dragging. */
.case-showcase { --showcase-width: 720px; padding: 80px 0 112px; overflow: hidden; background: #fff; }
.case-showcase .section-title { margin-bottom: 16px; }
.case-showcase .section-subtitle { max-width: 680px; }
.showcase-carousel { position: relative; width: 100%; max-width: none; margin: 76px 0 0; outline-offset: -5px; touch-action: pan-y; }
.showcase-stage { position: relative; width: 100%; height: 406px; perspective: 880px; overflow: hidden; cursor: grab; touch-action: pan-y; }
.showcase-stage.is-dragging { cursor: grabbing; }
.showcase-track { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.showcase-card { position: absolute; top: 0; left: 0; max-width: none; padding: 0; border-radius: 22px; overflow: hidden; background: #e7e7e7; backface-visibility: visible; -webkit-backface-visibility: visible; user-select: none; touch-action: pan-y; will-change: transform; }
.showcase-card img { width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.showcase-card:focus-visible, .showcase-arrow:focus-visible, .showcase-detail:focus-visible, .showcase-play:focus-visible, .showcase-more:focus-visible { outline: 3px solid #32c6ff; outline-offset: 3px; }
.showcase-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1100; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: white; background: rgba(27,23,18,.35); font-size: 27px; line-height: 1; transition: background .2s; }
.showcase-arrow:hover { background: rgba(27,23,18,.7); }
.showcase-prev { left: 16px; }
.showcase-next { right: 16px; }
.showcase-caption { position: relative; z-index: 1100; display: flex; align-items: center; gap: 18px; width: calc(var(--showcase-width) - 100px); max-width: none; min-height: 60px; margin: -28px auto 0; transform: translateX(-34px); padding: 8px 8px 8px 22px; border: 1px solid rgba(255,255,255,.22); border-radius: 40px; background: linear-gradient(180deg,rgba(28,28,28,.77),rgba(80,80,80,.55)); color: #fff; box-shadow: 0 14px 32px rgba(0,0,0,.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.showcase-copy { flex: 1; min-width: 0; }
.showcase-title { font-size: 15px; font-weight: 500; line-height: 1.5; }
.showcase-description { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.72); margin-top: 2px; }
.showcase-detail { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; padding: 9px 22px; border-radius: 28px; background: #171717; color: #fff; font-size: 13px; transition: background .2s; }
.showcase-detail:hover { background: #087ca7; }
.showcase-play { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff; background: linear-gradient(180deg,rgba(28,28,28,.7),rgba(80,80,80,.5)); backdrop-filter: blur(12px); font-size: 21px; }
.showcase-play:hover { background: rgba(28,28,28,.8); }
.showcase-more { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; min-width: 154px; margin: 42px auto 0; padding: 13px 26px; border-radius: 999px; background: #171717; color: #fff; font-size: 14px; font-weight: 600; line-height: 1; transition: transform .2s ease, background .2s ease; }
.showcase-more:hover { background: #000; transform: translateY(-2px); }
@media (max-width: 700px) {
  .case-showcase { padding: 56px 0 72px; }
  .showcase-carousel { margin-top: 40px; }
  .showcase-card { border-radius: 14px; }
  .showcase-caption { width: calc(100% - 80px); margin-top: -12px; transform: translateX(-20px); padding: 10px 12px; gap: 8px; border-radius: 22px; }
  .showcase-title { font-size: 13px; }
  .showcase-description { font-size: 11px; }
  .showcase-detail { padding: 8px 10px; min-height: 36px; gap: 3px; font-size: 11px; }
  .showcase-detail span { display: none; }
  .showcase-play { width: 40px; height: 40px; left: calc(100% + 6px); font-size: 17px; }
  .showcase-arrow { width: 32px; height: 40px; }
  .showcase-prev { left: 6px; }
  .showcase-next { right: 6px; }
  .showcase-more { min-width: 138px; margin-top: 32px; padding: 12px 22px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-arrow, .showcase-detail, .showcase-more { transition: none; }
}