/* Motion uses the same responsive product chrome as the approved static concepts. */
.scroll-photo{background-image:url('public/media/images/scroll-performance.jpg');background-size:cover;background-position:center;transform:none!important}
.hero .scroll-photo{background-position:48% center}
.hero .scroll-photo.ambient-media{position:absolute}
.scroll-photo .ambient-video{object-position:48% center}
.concert-photo{background-image:url('public/media/images/shows-performance.jpg');background-size:cover;background-position:61% center}
.concert-photo .ambient-video{object-position:61% center}
.show-player{aspect-ratio:16/10;min-height:0}
.show-top{flex-direction:column;gap:16px;align-items:flex-start}
.show-event{background:#0b0c0ab3;backdrop-filter:blur(8px);max-width:190px}
.show-top .live-pill{color:#f6f3ee}
.show-top .live-pill:first-letter{color:#ef3340}
.show-chat{display:flex;flex-direction:column}
.show-chat .chat-input{margin-top:auto}
.show-chat .chat-reactions{margin-top:16px}
.musician{position:relative;isolation:isolate;overflow:hidden}
.musician .musician-photo{aspect-ratio:16/10;order:0;background-size:cover!important;background-position:center!important}
.musician-name{position:absolute;inset:0 0 auto;z-index:1;background:linear-gradient(#070a0de8,transparent);padding:15px 14px 35px;min-height:0}
.musician-level{position:absolute;inset:auto 0 0;z-index:1;min-height:0;padding:24px 14px 12px;background:linear-gradient(transparent,#070a0de8)}
.jordan .musician-photo{background-image:url('public/media/images/jordan-performance.jpg')}
.riley .musician-photo{background-image:url('public/media/images/riley-performance.jpg')}
.taylor .musician-photo{background-image:url('public/media/images/taylor-performance.jpg')}
.casey .musician-photo{background-image:url('public/media/images/casey-performance.jpg')}
.ui-icon{width:24px;height:24px;display:block}
.room-controls>span{gap:7px}
.room-controls small{margin-top:0}
.film-backdrop.ambient-media{position:absolute}
.film-backdrop .ambient-video{filter:brightness(.3);object-position:60% center}
.film-dialog{border-radius:12px;border-color:#35383b}
.dialog-bar{padding:10px 20px}
.dialog-close{justify-content:center;border-radius:5px}
.dialog-close:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.film-dialog>p{padding:12px 20px}
.ambient-media.has-motion>.ambient-video{opacity:1}
.motion-paused .level-wave i{animation-play-state:paused}
@media(max-width:1000px){.show-player{aspect-ratio:auto;min-height:390px}.show-event{max-width:170px}}
@media(max-width:760px){
 .scroll-photo,.hero .scroll-photo{background-position:34% center}
 .scroll-photo .ambient-video{object-position:34% center}
 .musician .musician-photo{aspect-ratio:3/4}
 .musician-name{padding:11px 10px 28px;background:linear-gradient(#070a0ddd,transparent)}
 .musician-level{padding:22px 9px 9px}
 .show-player{min-height:0;aspect-ratio:4/5}
 .show-top{padding:15px;gap:12px}
 .show-event{padding:10px 12px;max-width:180px}
 .show-event strong{font-size:12px}
 .concert-photo,.concert-photo .ambient-video{background-position:64% center;object-position:64% center}
 .show-chat{padding:18px 16px}
 .film-dialog.mobile-film video{max-height:66svh}
 .dialog-bar h2{font-size:12px}
 .film-section{min-height:520px}
}
@media(prefers-reduced-motion:reduce){.ambient-video{transition:none}}

/* The stage sets the tone; product controls stay in the product showcase. */
.hero{display:flex;min-height:max(790px,100svh);padding:190px var(--pad) 140px;background:#0b0b0f;align-items:center}
.hero .hero-media{position:absolute;inset:0;z-index:-2}
.hero-poster,.hero-media .ambient-video{object-position:64% center;width:100%;height:100%;object-fit:cover}
.hero .hero-shade{background:linear-gradient(90deg,#090b0eee 0%,#090b0e98 38%,#090b0e12 75%),linear-gradient(0deg,#0b0b0f,transparent 35%,#0b0b0f30 80%,#0b0b0f77)}
.hero .hero-content{max-width:1050px}.hero h1{font-size:clamp(66px,7.3vw,118px);line-height:1.05}.hero h1 em{color:#fff6e6}
.hero .hero-intro{color:#e3dbd0;max-width:380px}.hero .hero-note{color:#c3b7a5}.hero .eyebrow{color:#efd8ac}.hero .hero-bottom{border-color:#ffffff26}
.devices{padding-top:25px;padding-bottom:110px}.device-gallery{display:grid;grid-template-columns:.65fr 1.35fr;gap:7%;align-items:center}
.device-example{min-width:0}.device-preview{display:block;background:#0c0f12;width:100%;padding:0;position:relative;border-radius:15px;overflow:hidden;border:1px solid #ffffff18;text-align:left}
.device-preview img{width:100%;height:auto;transition:filter .3s}.device-preview:hover img{filter:brightness(1.15)}
.phone-example{max-width:380px}.device-play{display:flex;align-items:center;justify-content:center;gap:12px;position:absolute;inset:auto 16px 18px;background:#0c0f13dd;border:1px solid #ebbd664d;padding:14px;border-radius:40px;color:#f7d38f;font-size:13px;backdrop-filter:blur(10px)}
.device-play span{color:#fff;font-size:11px}.device-caption{padding-top:25px}.device-caption>span{font-size:9px;color:#ccac71;letter-spacing:.17em}.device-caption h3{font-size:clamp(24px,2.8vw,42px);line-height:1.12;letter-spacing:-.04em;margin:15px 0}.device-caption p,.ambient-note{font-size:11px;color:#aaaeb1;line-height:1.6}.ambient-note{padding:14px 0 0}
.film-dialog.device-phone video{aspect-ratio:9/16;max-height:72svh;min-height:0}.film-dialog.device-phone{max-width:460px}.film-dialog.device-tablet video{aspect-ratio:16/9}
@media(max-width:760px){.hero{min-height:max(780px,100svh);align-items:flex-end;padding:290px var(--pad) 125px}.hero h1{font-size:clamp(48px,10.6vw,76px)}.hero-poster,.hero-media .ambient-video{object-position:60% center}.hero .hero-shade{background:linear-gradient(0deg,#0b0b0f 0%,#090b0ee0 24%,#090b0e25 72%,#090b0e66),linear-gradient(90deg,#090b0e66,transparent)}.hero .hero-intro{font-size:15px}.hero .hero-note{font-size:10px}.device-gallery{grid-template-columns:1fr;gap:55px}.phone-example{max-width:340px;justify-self:center}.device-caption h3{font-size:31px}.devices{padding-bottom:70px}.tablet-example{width:100%}.device-play{padding:11px;inset:auto 10px 12px}.device-play span{font-size:10px}}

/* Playback belongs to the showcase, separate from illustrative app controls. */
.showcase-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:0 0 20px;padding:12px 0;border-bottom:1px solid #ffffff1c}
.showcase-status{margin-right:auto;color:#adb5b7;font-size:12px;line-height:1.5}
.showcase-controls button{min-height:44px;padding:10px 16px;border:1px solid #ffffff35;border-radius:24px;background:#121719;color:#f3e5cc;font-size:12px;cursor:pointer}
.showcase-controls button:hover{border-color:#f5a623;color:#fff}
.showcase-controls button:focus-visible{outline:2px solid #f5a623;outline-offset:3px}
.showcase-controls [data-showcase-sound]{border-color:#b58036}
@media(max-width:600px){.showcase-status{flex-basis:100%}.showcase-controls{justify-content:flex-start;gap:8px}.showcase-controls button{padding:9px 12px;font-size:11px}}