.intro-showcase{background:#fff;position:relative}.intro-stage{position:relative;width:100%;max-width:1440px;margin:auto;aspect-ratio:16/9;overflow:hidden;background:#100e0c}.intro-stage video,.intro-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.intro-screen{position:absolute;left:25.8%;top:28.5%;width:48.4%;height:42.9%;opacity:0;transition:opacity .5s;overflow:hidden;background:#000}.intro-stage.is-ready .intro-screen{opacity:1}.intro-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .65s}.intro-screen video.is-active{opacity:1}.intro-controls{display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;padding:1rem 1.25rem;background:#100e0c;color:#f3efe6}.intro-controls button{font:inherit;font-size:.9rem;color:inherit;border:1px solid #62594d;background:transparent;border-radius:24px;padding:.5rem 1rem;min-height:44px;cursor:pointer}.intro-controls button:hover,.intro-controls button[aria-pressed=true]{background:#f3efe6;color:#100e0c}.intro-controls button:focus-visible{outline:3px solid #e7c56a;outline-offset:3px}.intro-status{font-size:.85rem;color:#b7b1a6;text-align:center;margin:0;padding:.1rem 1rem .8rem;background:#100e0c}.intro-poster[hidden]{display:none}.intro-controls [hidden]{display:none}@media(prefers-reduced-motion:reduce){.intro-screen,.intro-screen video{transition:none}}.rec-slides{position:relative;aspect-ratio:1352/712;overflow:hidden}.rec-slides video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}.rec-slides video.is-active{opacity:1}@media(prefers-reduced-motion:reduce){.rec-slides video{transition:none}}
.intro-stage .rec-slides.intro-screen{position:absolute;left:25.8%;top:28.4%;width:48.4%;height:43.2%;aspect-ratio:auto;inset:auto;left:25.8%;top:28.4%;opacity:0;transition:opacity .8s;border-radius:2px;z-index:2}
.intro-stage.is-ready .rec-slides.intro-screen{opacity:1}
.intro-controls{position:absolute;right:2%;bottom:3%;display:flex;gap:.5rem;z-index:5}.intro-btn{font:inherit;font-size:.85rem;color:#f4efe6;background:rgba(20,18,16,.7);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.4rem .85rem;cursor:pointer;backdrop-filter:blur(6px)}.intro-btn:hover{background:rgba(40,36,32,.85)}.intro-btn[hidden]{display:none}
.intro-stage .intro-controls .intro-btn{all:unset;box-sizing:border-box;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);cursor:pointer;opacity:.55;transition:opacity .25s,background .25s}.intro-stage:hover .intro-controls .intro-btn,.intro-stage .intro-controls .intro-btn:focus-visible{opacity:1}.intro-stage .intro-controls .intro-btn:hover{background:rgba(255,255,255,.16)}.intro-stage .intro-controls .intro-btn[hidden]{display:none}
.intro-stage .intro-controls .intro-btn{background:rgba(255,255,255,.03) !important;border-color:rgba(255,255,255,.12) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;opacity:.7}
.intro-stage .intro-controls .intro-btn:hover{background:rgba(255,255,255,.08) !important}
.intro-stage .intro-controls{background:none !important}
.intro-stage .intro-controls .intro-btn{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(255,255,255,.06) !important;box-shadow:none !important;border:1px solid rgba(255,255,255,.35) !important}

/* Rotatable CSS frame (replaces the frame baked into the intro video once it ends) */
.intro-stage.is-ready{background:#000}
.intro-device{position:absolute;left:25.156%;top:27.222%;width:49.609%;height:45.417%;z-index:2;opacity:0;transition:transform .9s cubic-bezier(.65,0,.35,1);transform-origin:50% 50%}
.intro-stage.is-ready .intro-device{opacity:1}
.intro-device::before{content:"";position:absolute;inset:0;border-radius:2.6%/5%;padding:1.1%;background:linear-gradient(180deg,#a8d8de,#8fd0dc 45%,#569bab);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);box-shadow:0 0 18px rgba(143,208,220,.25);pointer-events:none;z-index:3}
.intro-stage .intro-device .rec-slides.intro-screen{left:1.3%;top:2.6%;width:97.4%;height:94.8%;opacity:1}
.intro-device .rec-slides video.is-portrait-clip{inset:auto;left:24.9%;top:-49.6%;width:50.2%;height:199.2%;transform:rotate(-90deg);object-fit:fill}
.intro-stage.is-portrait .intro-device{transform:rotate(90deg) scale(1)}
.intro-stage.no-rot-anim .intro-device{transition:none}
.intro-stage .intro-controls .intro-rotate svg{transition:transform .9s}
.intro-stage.is-portrait .intro-controls .intro-rotate svg{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.intro-device,.intro-stage .intro-controls .intro-rotate svg{transition:none}}

/* 2026-10-20: Theater link, bottom-left of the intro frame, same glass buttons as Sound/Replay/Rotate; always visible */
.intro-stage .intro-controls.intro-controls-left{right:auto;left:2%}
.intro-stage .intro-controls .intro-theater{text-decoration:none}