.video-interlude { height:auto; aspect-ratio:2.35/1; background:#050505; }
.video-interlude::after { background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 42%, rgba(0,0,0,.08)); pointer-events: none; }
.photo-interlude-video { position: absolute; left: 50%; top: 50%; width: 100vw; height: 56.25vw; min-width: 177.7778vh; min-height: 100%; max-width: none; border: 0; pointer-events: none; transform: translate3d(-50%,calc(-50% + var(--photo-y,0px)),0); will-change: transform; }
.interlude-watch { position:absolute; z-index:3; left:50%; top:50%; display:flex; flex-direction:column; align-items:center; gap:14px; border:0; padding:18px 24px; background:transparent; color:#fff; transform:translate(-50%,-50%); font:600 12px/1.2 Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; text-shadow:0 2px 18px #000; }
.interlude-play { width:74px; height:74px; display:grid; place-items:center; padding-left:4px; border:1px solid #d7bd83; border-radius:50%; background:#090a0880; color:#e8cc91; box-shadow:0 0 0 0 #c7a45d00,0 12px 35px #0008; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s,color .35s,box-shadow .45s; }
.interlude-watch:hover .interlude-play,.interlude-watch:focus-visible .interlude-play { transform:scale(1.09); background:#c7a45de8; color:#111; box-shadow:0 0 0 9px #c7a45d25,0 18px 42px #0009; }
.interlude-watch:active .interlude-play { transform:scale(.97); }
.interlude-sound-toggle { position:absolute; z-index:4; right:clamp(16px,3vw,44px); bottom:clamp(16px,3vw,36px); width:46px; height:46px; display:grid; place-items:center; border:1px solid #d7bd83; border-radius:50%; background:#090a08a8; color:#fff; font:18px/1 Arial,sans-serif; cursor:pointer; box-shadow:0 10px 30px #0008; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); transition:transform .25s ease,background .25s ease,border-color .25s ease; }
.interlude-sound-toggle:hover,.interlude-sound-toggle:focus-visible { transform:scale(1.08); background:#c7a45de8; border-color:#f1dca8; outline:none; }
.interlude-sound-toggle:active { transform:scale(.96); }
@media(max-width:650px){.video-interlude{aspect-ratio:16/9;min-height:260px}.interlude-watch{gap:11px;padding:14px 18px}.interlude-play{width:62px;height:62px}.interlude-sound-toggle{width:42px;height:42px;right:14px;bottom:14px;font-size:17px}}
@media (prefers-reduced-motion: reduce) { .photo-interlude-video { transform: translate(-50%,-50%) !important; } }