/* Shared cinematic surfaces consume Veylo's generated design tokens. */
.cinematic-media { position:relative; min-width:0; overflow:hidden; isolation:isolate; }
.cinematic-media picture { display:block; width:100%; height:100%; }
.cinematic-media picture img,.cinematic-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cinematic-media video { opacity:0; pointer-events:none; }
.cinematic-media[data-playing] video { opacity:1; }
.cinematic-toggle { position:absolute; z-index:3; bottom:var(--space-4); right:var(--space-4); min-height:var(--layout-touch); padding:var(--space-2) var(--space-4); border:var(--border-hairline) solid var(--color-line); border-radius:var(--radius-none); background:var(--color-nav-surface); color:var(--color-paper); font-family:var(--font-body); font-size:var(--type-label); cursor:pointer; }
.cinematic-toggle:focus-visible { outline:var(--border-focus) solid var(--color-focus); outline-offset:var(--space-1); }
.cinematic-toggle[hidden] { display:none; }
.hero>.cinematic-media { align-self:stretch; min-height:var(--showcase-hero-height); }
.hero figure .cinematic-media { height:100%; }
.hero figure figcaption { right:auto; max-width:60%; }
.hero.cinematic-dining>.cinematic-media { position:absolute; inset:0; width:100%; height:100%; min-height:0; aspect-ratio:auto; }
.hero.cinematic-dining::after { display:none; }
.hero.cinematic-dining>.cinematic-media::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,var(--color-hero-shade),transparent); pointer-events:none; }
.hero.cinematic-dining .hero-copy,.hero.cinematic-dining .hero-bottom { z-index:1; }
.hero.cinematic-dining .cinematic-toggle { z-index:3; }
.collection .product-image .object-stage { width:100%; }
.showcase .demo-photo .cinematic-media { position:absolute; inset:0; }
.showcase .cinematic-media picture img { transform:none; }
@media(max-width:640px) {
 .hero>.cinematic-media { min-height:var(--showcase-hero-height); aspect-ratio:9/16; }
 .hero figure { height:auto; aspect-ratio:9/16; }
 .hero.cinematic-dining { min-height:var(--layout-hero-height); }
 .hero.cinematic-dining>.cinematic-media::after { background:linear-gradient(0deg,var(--color-hero-shade),var(--color-hero-shade) 55%,transparent); }
 .hero.cinematic-dining .hero-copy { align-self:end; padding-bottom:var(--space-10); }
 .hero.cinematic-dining .hero-bottom { bottom:var(--space-8); }
 .hero.cinematic-dining .cinematic-toggle { bottom:var(--space-3); }
}
@media(prefers-reduced-motion:reduce) { .cinematic-media video { display:none; } }