@property --showcase-beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.showcase-section {
  padding: clamp(48px, 7vw, 104px) clamp(16px, 4vw, 64px);
  background: #0d0d0f;
}

.showcase-intro {
  width: min(1680px, 100%);
  margin: 0 auto clamp(24px, 3vw, 42px);
  display: grid;
  grid-template-columns: minmax(180px, .48fr) minmax(0, 1.52fr);
  align-items: end;
  gap: 36px;
}

.showcase-intro > p {
  margin: 0 0 8px;
  color: #a78bfa;
  font: 600 10px/1 ui-monospace, monospace;
  letter-spacing: .16em;
}

.showcase-intro h2 {
  margin: 0;
  color: #f6f6f7;
  font: 400 clamp(36px, 4.4vw, 70px)/.98 'Geist', sans-serif;
  letter-spacing: -.055em;
}

.showcase-intro span {
  max-width: 58ch;
  margin-top: 16px;
  display: block;
  color: #84848d;
  font: 400 13px/1.55 'Geist', sans-serif;
}

.showcase-shell {
  position: relative;
  isolation: isolate;
  width: min(1680px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: clamp(18px, 2vw, 30px);
  background: #09090c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .34);
}

.showcase-shell::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--showcase-beam-angle),
    transparent 0 70%,
    rgba(167, 139, 250, .14) 75%,
    rgba(196, 181, 253, .94) 81%,
    rgba(255, 255, 255, .72) 84%,
    rgba(167, 139, 250, .2) 89%,
    transparent 94% 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: showcaseBorderBeam 5.6s linear infinite;
}

@keyframes showcaseBorderBeam {
  to { --showcase-beam-angle: 1turn; }
}

.showcase-bar {
  min-height: 58px;
  padding: 0 clamp(18px, 2.4vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: #101014;
}

.showcase-bar div,
.showcase-bar p {
  display: flex;
  align-items: center;
}

.showcase-bar div { gap: 10px; }
.showcase-bar img { width: 24px; height: 24px; border-radius: 7px; }
.showcase-bar span { color: #e9e9ed; font: 500 12px/1 'Geist', sans-serif; letter-spacing: -.01em; }
.showcase-bar p { gap: 8px; margin: 0; color: #777781; font: 500 9px/1 ui-monospace, monospace; letter-spacing: .11em; text-transform: uppercase; }
.showcase-bar p span { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 14px rgba(167, 139, 250, .72); }

.showcase-stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  background: #07070a;
}

.showcase-stage video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #07070a;
}

.showcase-controls {
  position: absolute;
  z-index: 3;
  right: clamp(18px, 2.8vw, 44px);
  bottom: clamp(18px, 2.8vw, 44px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.showcase-toggle,
.showcase-sound {
  min-width: 92px;
  height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff;
  background: rgba(9, 9, 12, .66);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: border-color .16s ease-out, background-color .16s ease-out, transform .16s ease-out;
}

.showcase-sound {
  min-width: 42px;
  width: 42px;
  padding: 0;
}

.showcase-toggle:hover,
.showcase-sound:hover { border-color: rgba(196, 181, 253, .8); background: rgba(20, 17, 30, .78); transform: translateY(-1px); }
.showcase-toggle:focus-visible,
.showcase-sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.showcase-toggle-label { font: 500 10px/1 'Geist', sans-serif; }
.showcase-control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.showcase-pause { width: 9px; height: 10px; display: block; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.showcase-toggle[aria-pressed="true"] .showcase-pause { width: 0; height: 0; border: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
.showcase-sound-icon { width: 18px; height: 18px; overflow: visible; }
.showcase-sound-icon path:first-child { fill: currentColor; }
.showcase-sound-wave,
.showcase-sound-slash { fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; transition: opacity .16s ease-out; }
.showcase-sound-wave { opacity: 0; }
.showcase-sound-slash { opacity: 1; }
.showcase-sound[aria-pressed="true"] .showcase-sound-wave { opacity: 1; }
.showcase-sound[aria-pressed="true"] .showcase-sound-slash { opacity: 0; }

@media (max-width: 900px) {
  .showcase-section { padding: 38px 14px 54px; }
  .showcase-intro { grid-template-columns: 1fr; gap: 12px; }
  .showcase-intro > p { margin: 0; font-size: 9px; }
  .showcase-intro h2 { font-size: clamp(32px, 8.6vw, 50px); }
  .showcase-intro span { margin-top: 12px; font-size: 12px; }
  .showcase-bar { min-height: 50px; }
  .showcase-bar p { font-size: 8px; }
  .showcase-stage { aspect-ratio: 16 / 10; }
  .showcase-toggle { min-width: 42px; width: 42px; padding: 0; border-radius: 50%; }
  .showcase-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 520px) {
  .showcase-bar div span { font-size: 11px; }
  .showcase-bar p { letter-spacing: .06em; }
  .showcase-stage { aspect-ratio: 4 / 3; }
  .showcase-stage video { object-position: center; }
  .showcase-controls { top: 14px; right: 14px; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-vedika-motion="full"]) .showcase-toggle,
  html:not([data-vedika-motion="full"]) .showcase-sound,
  html:not([data-vedika-motion="full"]) .showcase-sound-wave,
  html:not([data-vedika-motion="full"]) .showcase-sound-slash { transition: none; }
  html:not([data-vedika-motion="full"]) .showcase-shell::after {
    animation: none;
    --showcase-beam-angle: 82deg;
  }
}