/* Shared media treatment for all approved area illustrations. */
.approved-schematic{position:relative;isolation:isolate;min-width:0;min-height:0}
.sessions-film{display:block;overflow:hidden;mix-blend-mode:multiply}
.sessions-loop{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center;pointer-events:none;background:transparent;filter:brightness(1.02)}
.portal .sessions-film{position:absolute;width:106%;left:-3%;top:24px;height:56%}
.kinetic-figure:has(.approved-schematic){margin-bottom:15px}
.kinetic-figure .sessions-film{height:clamp(240px,24vw,340px);min-height:0}
.kinetic-figure .sessions-film:not(.room-approved-film){background:transparent;mix-blend-mode:normal}
.kinetic-figure .sessions-film:not(.room-approved-film) .sessions-loop{mix-blend-mode:normal}
.room-approved-film{mix-blend-mode:normal}
.room-approved-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
@media(max-width:700px){.portal .sessions-film{height:48%;top:22px}.kinetic-figure .sessions-film{height:240px}}
.room-live{display:block;width:100%;height:100%;overflow:hidden}
.room-cymbal{transform-box:view-box;animation:room-cymbal-settle 5.6s ease-in-out infinite}
.room-cymbal-left{transform-origin:433px 265px}
.room-cymbal-right{transform-origin:633px 263px;animation-delay:-2.8s}
@keyframes room-cymbal-settle{0%,42%,100%{transform:rotate(0)}4%{transform:rotate(3deg)}9%{transform:rotate(-2.2deg)}15%{transform:rotate(1.5deg)}22%{transform:rotate(-.9deg)}30%{transform:rotate(.4deg)}}
.room-key{animation:room-key-press 1.6s ease-in-out infinite}
.room-key-1{animation-delay:-.53s}.room-key-2{animation-delay:-1.06s}
@keyframes room-key-press{0%,42%,100%{transform:translate(0,0)}14%,27%{transform:translate(3px,13px)}64%,74%{transform:translate(2px,9px)}}
.room-note{opacity:0;animation:room-note-drift 9s linear infinite;pointer-events:none}
.room-note-two{animation-name:room-note-return;animation-delay:-4.5s}
@keyframes room-note-drift{0%,8%{opacity:0;transform:translate(0,0) rotate(-8deg)}18%{opacity:.42}37%{opacity:.33}51%,100%{opacity:0;transform:translate(175px,-205px) rotate(9deg)}}
@keyframes room-note-return{0%,8%{opacity:0;transform:translate(0,0) rotate(6deg)}18%{opacity:.40}37%{opacity:.30}51%,100%{opacity:0;transform:translate(-160px,-215px) rotate(-8deg)}}
.room-outside .room-live *,.schematics-hidden .room-live *{animation-play-state:paused!important}
.motion-off .room-live *,body.still .room-live *{animation:none!important}
.motion-off .room-note,body.still .room-note{display:none}
@media(prefers-reduced-motion:reduce){.room-live *{animation:none!important}.room-note{display:none}}

.room-speaker-cone{transform-box:view-box;animation:room-cone-excursion 1.2s ease-in-out infinite}
@keyframes room-cone-excursion{0%,50%,100%{transform:translate(0,0) scale(.90)}16%,66%{transform:translate(2px,-5px) scale(1.34)}31%,81%{transform:translate(-1px,2px) scale(.84)}}


/* The first paint uses the same approved artwork and reserved size as playback. */
.hero-media{height:clamp(240px,24vw,340px);margin-bottom:15px;background:transparent}
.hero-poster{height:100%;width:100%;background:transparent;isolation:isolate}
.hero-poster img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.02)}
.hero-poster-room img{mix-blend-mode:normal;filter:none}
.hero-media>.schematic:not(.approved-schematic){display:none}
.hero-media:has(.approved-schematic)>.hero-poster{display:none}
@media(max-width:700px){.hero-media{height:240px}}

/* Composite the whole white-plate illustration against the actual hero surface.
   No independently colored rectangle: white stays neutral under multiply. */
.kinetic-figure:not([data-visual="raeume"]):has(.sessions-film),
.hero-media:not([data-visual="raeume"]){mix-blend-mode:multiply;background:transparent}
.hero-media:not([data-visual="raeume"]) .hero-poster img{mix-blend-mode:normal}

/* Clamp near-white video pixels before compositing, including Safari colour conversion. */
.sessions-loop,.hero-poster:not(.hero-poster-room) img{filter:brightness(1.1) contrast(1.05)}

/* Real alpha keeps video colour management away from the coloured page surface. */
.kinetic-figure:has(.has-alpha),.hero-media:has(.has-alpha),.portal:has(.has-alpha) .sessions-film{mix-blend-mode:normal}
.has-alpha{mix-blend-mode:normal!important;background:transparent}
.has-alpha .sessions-loop{position:absolute;inset:0;opacity:0}
.illustration-alpha{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
/* Override the generic schematic timing; each cymbal gets its own rest phase. */
.room-live .room-cymbal-left{animation-delay:0s;--delay:0s}
.room-live .room-cymbal-right{animation-delay:-2.8s;--delay:-2.8s}

.media-suspended .room-live *,html.area-open body>main .room-live *{animation-play-state:paused!important}