/* the home video: a wide, dark, cinematic screen with a gold frame and a large gold play button */
.showcase { background: #14110d; padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
.showcase__stage { position: relative; width: min(100% - 2rem, 80rem); margin-inline: auto; aspect-ratio: 16 / 10; border-radius: clamp(1rem, 0.6rem + 1.5vw, 2rem); overflow: hidden; background: #000; outline: 1px solid var(--line); outline-offset: 8px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8); isolation: isolate; }
.showcase__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 900ms var(--ease-out); }
.showcase__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(20 17 13 / 0.92) 0%, rgb(20 17 13 / 0.35) 55%, rgb(20 17 13 / 0.15) 100%); }
.showcase__copy { position: absolute; inset-inline: clamp(1.25rem, 4vw, 3.5rem); inset-block-end: clamp(1.25rem, 3.5vw, 3rem); display: grid; gap: 0.5rem; max-width: 34rem; color: #fff; z-index: 1; }
.showcase__copy h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem); font-weight: 800; color: #fff; }
.showcase__copy h2::after { content: ""; display: block; width: 3rem; height: 2px; margin-block-start: 0.75rem; background: var(--gold); }
.showcase__copy p { color: rgb(244 239 230 / 0.82); font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem); line-height: 1.75; }
.showcase__play { position: absolute; inset-block-start: 42%; inset-inline-start: 50%; translate: -50% -50%; z-index: 2; display: grid; place-items: center; width: clamp(4.5rem, 3.5rem + 4vw, 6.5rem); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--gold); color: var(--ink); cursor: pointer; box-shadow: 0 12px 34px -6px rgb(181 143 81 / 0.7), 0 0 0 8px rgb(255 255 255 / 0.12); transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.showcase__play svg { translate: calc(var(--dir) * -2px) 0; scale: calc(var(--dir) * -1) 1; width: 38%; height: auto; }
.showcase__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: showcase-ring 2.8s var(--ease-out) infinite; }
@keyframes showcase-ring { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.showcase__play:active { transform: scale(0.95); }
.showcase__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (hover: hover) {
  .showcase__play:hover { background: #fff; }
  .showcase__stage:hover .showcase__poster { transform: scale(1); }
}
.showcase__sound { position: absolute; inset-block-end: 0.875rem; inset-inline-end: 0.875rem; z-index: 4; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1.125rem; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 8px 22px -6px rgb(0 0 0 / 0.6); transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.showcase__sound:active { transform: scale(0.96); }
.showcase__sound:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .showcase__sound:hover { background: #fff; } }
.showcase__sound .showcase__sound-on, .showcase__sound .showcase__sound-text--on, .showcase__sound.is-on .showcase__sound-off, .showcase__sound.is-on .showcase__sound-text--off { display: none; }
.showcase__sound.is-on .showcase__sound-on { display: block; }
.showcase__sound.is-on .showcase__sound-text--on { display: inline; }
.showcase__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; opacity: 0; }
.showcase__stage.is-playing .showcase__media { z-index: 3; opacity: 1; }
.showcase__stage.is-playing .showcase__poster, .showcase__stage.is-playing .showcase__shade, .showcase__stage.is-playing .showcase__copy, .showcase__stage.is-playing .showcase__play { display: none; }
@media (min-width: 48rem) { .showcase__stage { aspect-ratio: 16 / 9; width: min(100% - 2rem, 72rem); } .showcase__play { inset-block-start: 45%; } }
@media (prefers-reduced-motion: reduce) { .showcase__ring { animation: none; } .showcase__poster { transition: none; transform: none; } }

/* at the very top of the home page: right under the header, the screen leads the page */
.showcase--top { padding-block: clamp(0.75rem, 0.4rem + 1.5vw, 1.75rem) clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.showcase--top .showcase__stage { outline-offset: 6px; }