/* An uninterrupted visual canvas; the complete media frame stays visible. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.showcase { --site-header-height: 56px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(260px,.65fr) minmax(0,2.35fr); gap: 24px; padding: 18px clamp(20px,2.5vw,48px); height: calc(100svh - var(--site-header-height)); min-height: 0; overflow: hidden; background: #081820; color: #fff; }
.showcase-copy { min-width: 0; align-self: center; }
.showcase-copy h1 { margin: 0; font: 400 clamp(22px,1.7vw,34px)/1.85 var(--serif); letter-spacing: .02em; }
.showcase-stage { position: relative; min-width: 0; min-height: 0; }
.showcase-visuals, .showcase-frame, .showcase-open { position: absolute; inset: 0; width: 100%; height: 100%; }
.showcase-frame { opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.showcase-frame.is-current { opacity: 1; z-index: 1; }
.showcase-media { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.showcase-frame.has-motion img { animation: showcase-drift 3.7s linear both; animation-play-state: paused; }
.showcase.is-playing .showcase-frame.has-motion img { animation-play-state: running; }
@keyframes showcase-drift { from { transform: scale(.985); } to { transform: scale(1); } }
.showcase-open { z-index: 2; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.showcase-hint { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); padding: 4px 9px; border-radius: 3px; background: rgba(0,0,0,.42); color: #fff; font-size: 11px; letter-spacing: .06em; opacity: .65; transition: opacity .2s ease; }
.showcase-open:hover .showcase-hint, .showcase-open:focus-visible .showcase-hint { opacity: 1; }
.showcase-tools { position: absolute; z-index: 3; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 8px; opacity: 0; transition: opacity .2s ease; }
.showcase:hover .showcase-tools, .showcase:focus-within .showcase-tools, .showcase.is-paused .showcase-tools { opacity: 1; }
.showcase-tools button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 3px; background: rgba(0,0,0,.48); color: #fff; font: 400 11px/1.4 var(--sans); cursor: pointer; }
.showcase button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.showcase.is-expanded, .showcase:fullscreen { display: block; padding: 0; width: 100%; height: 100dvh; background: #000; }
.showcase.is-expanded .showcase-copy, .showcase:fullscreen .showcase-copy { display: none; }
.showcase.is-expanded .showcase-stage, .showcase:fullscreen .showcase-stage { width: 100%; height: 100%; }
.showcase.is-expanded { position: fixed; inset: 0; z-index: 1000; }
.showcase.is-expanded .showcase-open, .showcase:fullscreen .showcase-open { cursor: default; }
.showcase.is-expanded .showcase-hint, .showcase:fullscreen .showcase-hint { display: none; }
.showcase.is-expanded .showcase-tools, .showcase:fullscreen .showcase-tools { opacity: 1; }
body.showcase-expanded { overflow: hidden; }
@media (max-width: 900px) and (orientation: portrait) {
  .showcase { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; align-content: center; gap: 28px; padding: 20px 16px 14px; }
  .showcase-stage { aspect-ratio: 1672 / 941; }
  .showcase-copy { padding: 0 8px; }
  .showcase-copy h1 { font-size: clamp(22px,5vw,30px); line-height: 1.65; }
  .showcase.is-expanded .showcase-stage, .showcase:fullscreen .showcase-stage { aspect-ratio: auto; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .showcase { grid-template-columns: minmax(190px,.7fr) minmax(0,2.3fr); padding: 8px 14px; gap: 12px; }
  .showcase-copy h1 { font-size: clamp(16px,2.1vw,22px); }
}
@media (hover: none) { .showcase-tools { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .showcase-frame { transition: none; } .showcase-frame.has-motion img { animation: none; } }