/* AJ's V8 — interaction repair, mobile visual alignment, actual sound and accessibility.  */
.cinema-stage .front-art img.hero-front-on{display:none!important} /* generated on-photo was not registered to off photo */
.cinema-stage .underlight,.cinema-stage .wheelwell-light{display:none!important} /* fixed stage-percent blobs replaced with asset-registered vectors */
.cinema-stage[data-underglow="on"] .front-art:before{display:none!important}
.civic-vehicle-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}
.civic-under-fx,.civic-wheel-fx{opacity:0;transition:opacity .35s ease;filter:drop-shadow(0 0 10px var(--v7-glow,#38d6ff));}
.cinema-stage[data-underglow="on"] .civic-under-fx{opacity:.9}
.cinema-stage[data-wheelwell="on"] .civic-wheel-fx{opacity:.82}
.cinema-stage[data-view="exterior"] .civic-vehicle-fx{visibility:visible}
.civic-rear-fx{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.rear-photo-spoiler-fx{opacity:0;transition:opacity .3s ease}
.cinema-stage[data-trunk="open"][data-spoiler="on"] .rear-photo-spoiler-fx{opacity:.96}
.cinema-stage[data-trunk="open"] .rear-spoiler-led{opacity:0!important}
/* closed rear view has a vector body; this streak is anchored to its rear deck */
.rear-spoiler-led{left:34%;top:34%;width:32%;height:4px;transform:rotate(0);z-index:5}
.cinema-stage[data-spoiler="on"][data-trunk="closed"] .rear-spoiler-led{opacity:.9}
/* Trunk demo is persistent and discoverable; wiring overlay remains available until closed. */
.trunk-instruction{display:none;position:absolute;z-index:7;left:32%;right:29%;bottom:12%;padding:9px 12px;border:1px solid #36d4ff9c;background:linear-gradient(95deg,#061327ea,#111337ee);border-radius:10px;box-shadow:0 0 24px #15baff49;color:#e4f7ff;font-size:10px;font-weight:800;letter-spacing:.055em;line-height:1.45;text-align:center;text-wrap:balance;pointer-events:none}
.cinema-stage[data-trunk="open"] .trunk-instruction{display:block}
.cinema-stage[data-view="trunk"] .cinema-scene-actions button#audioWiringBtn{border-color:#62d8ff;box-shadow:0 0 12px #1dc8ff5e;color:#f5feff}
.cinema-stage[data-trunk="open"] .rear-open-photo{opacity:1;clip-path:inset(0 0 0 0)}
/* Center actual Sony screen instead of cropping a portrait dashboard photo into 4:3. */
.reverse-swap{aspect-ratio:850/610;top:26%;right:19%;width:40%;background:#061020}
.reverse-swap img{width:100%;height:100%;object-fit:contain!important;object-position:50% 50%!important;animation:reverseScreenIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.v7-camera img{object-fit:contain!important;object-position:center!important;background:#050e1c}
/* Staged real 2.5D panel-removal demonstration with physical buttons/knobs. */
.radio-demo{overflow:visible;perspective:800px;isolation:isolate;box-shadow:0 0 0 5px #0a101d,0 17px 35px #000e,0 0 22px #0bd7ff33;transition:box-shadow .8s ease,transform .9s ease}
.radio-stock,.radio-upgraded{backface-visibility:hidden;will-change:transform,opacity}
.radio-stock{border:4px solid #121b2b;background:linear-gradient(150deg,#272c35,#0e141f 56%,#141d2b);padding:6px;box-shadow:inset 0 0 8px #000}
.radio-factory-face{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:5px;text-shadow:none}
.radio-factory-header{font:700 clamp(6px,.65vw,10px)/1.2 system-ui,sans-serif;color:#aeb8c5;letter-spacing:.03em;display:flex;justify-content:space-between}
.factory-display{height:36%;border:2px solid #33465b;background:#07101a;box-shadow:inset 0 0 12px #03101b;color:#aee5e6;display:flex;justify-content:center;align-items:center;gap:7px;font:bold clamp(16px,2vw,31px)/1 'Courier New',monospace;letter-spacing:.08em}
.factory-display small{font-size:9px;color:#6bbbbb}
.radio-physical-controls{height:36%;display:grid;grid-template-columns:25% 1fr 25%;align-items:center;gap:6px}
.radio-knob{width:min(90%,48px);aspect-ratio:1;border:5px ridge #8694a1;box-shadow:inset 0 0 7px #000,0 0 0 2px #101a2b;border-radius:50%;background:radial-gradient(circle,#343b4b 0 30%,#111822 32% 63%,#697b8c 65% 70%,#202632 72%);justify-self:center}
.radio-button-bank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;align-self:stretch}
.radio-button-bank i{min-width:0;display:grid;place-items:center;padding:2px;border:1px solid #596276;background:linear-gradient(#2b3643,#131c28);font:700 clamp(5px,.47vw,8px)/1.1 system-ui,sans-serif;letter-spacing:0;color:#b9c5d1;font-style:normal}
.radio-factory-footer{font:750 clamp(5px,.5vw,8px)/1.2 system-ui,sans-serif;color:#87a3ba;letter-spacing:.06em}
.cinema-stage[data-radio="installing"] .radio-stock{transform:translateX(-23%) rotateY(-52deg) rotateZ(-6deg) scale(.83);opacity:.7;filter:drop-shadow(-8px 14px 13px #000)}
.cinema-stage[data-radio="installing"] .radio-upgraded{transform:translateX(70%) rotateY(55deg) scale(.76);opacity:.28}
.cinema-stage[data-radio="screen"] .radio-stock{transform:translateX(-88%) rotateY(-80deg) scale(.64);opacity:0;pointer-events:none}
.radio-upgraded{transition:transform 1.2s cubic-bezier(.19,1,.22,1),opacity .85s ease}
.cinema-stage[data-radio="screen"] .radio-upgraded{transform:translateX(0) scale(1) rotateY(0);opacity:1}
.radio-transition-status{display:none;position:absolute;z-index:9;left:38%;top:33%;width:34%;font-size:10px;letter-spacing:.09em;text-align:center;font-weight:900;color:#d4f4ff;background:#04172edc;border:1px solid #45aeeb88;border-radius:7px;padding:7px}
.cinema-stage[data-view="radio"] .radio-transition-status{display:block}
/* Do not have a touchscreen overlay obscure the physical stock radio before it finishes animating. */
.cinema-stage[data-radio="stock"] .v7-screen-demo,.cinema-stage[data-radio="installing"] .v7-screen-demo{visibility:hidden;opacity:0;pointer-events:none}
.cinema-stage[data-radio="screen"] .v7-screen-demo{visibility:visible;opacity:1;transition:opacity .7s ease .25s}
/* Distinct baby cam feeds and switch buttons never cover the camera picture. */
.camera-feed{top:28%;bottom:18%;left:28%;right:30%;padding:12px;z-index:5}
.camera-feed svg{display:none}
.baby-pov-photo{display:block;flex:1;min-height:0;min-width:0;width:100%;height:76%;object-fit:contain;border-radius:9px;background:#081529;border:1px solid #457bae70}
.baby-pov-photo[hidden]{display:none!important}
.v7-baby-switch{top:20%;left:28%;right:30%;justify-content:center;z-index:8}
.v7-baby-switch button{min-height:34px}
.camera-preview-tag{color:#c0edff;font-weight:850;font-size:9px;letter-spacing:.08em;margin:5px 0 3px}
.cinema-stage[data-baby-pov="driver"] .baby-art .camera-feed{transform:none;box-shadow:0 14px 60px #000,0 0 25px #18caff55;border-color:#55bde7}
.cinema-stage[data-baby-pov="driver"] .baby-art:before{display:none}
/* The original radio should remain discoverable while a transformation is in progress. */
#radioReplayBtn{border-color:#7ad8f8}
/* Reliable scene-specific control placement on phones */
@media(max-width:900px){.reverse-swap{right:9%;width:56%}.trunk-instruction{left:8%;right:8%;bottom:17%}}
@media(max-width:760px){
 .civic-vehicle-fx{top:335px;left:0;width:100%;height:330px}
 .trunk-instruction{left:3%;right:3%;top:59%;bottom:auto;padding:6px 8px;font-size:8px}
 .civic-rear-fx{top:335px;left:0;width:100%;height:330px}
 .rear-open-photo{top:335px!important;left:0!important;width:100%!important;height:330px!important;object-fit:contain!important;object-position:center center!important}
 .radio-demo{left:25%;width:52%;height:16%;top:37%;border-width:4px}
 .radio-factory-header,.radio-factory-footer{font-size:5px}
 .radio-stock{padding:3px;border-width:3px}
 .radio-physical-controls{gap:2px}.radio-knob{border-width:3px}
 .radio-button-bank i{font-size:5px}
 .radio-transition-status{top:31%;left:5%;width:90%;font-size:8px}
 .v7-screen-demo{top:39%;min-height:220px;max-height:43%}
 .v7-baby-switch{top:30%;left:4%;right:4%;gap:6px}
 .camera-feed{top:36%;left:3%;right:3%;bottom:37%;min-height:240px;padding:7px}
 .camera-feed-header,.camera-feed-footer{font-size:7px;letter-spacing:0}
 .camera-preview-tag{font-size:7px}
 .reverse-swap{left:6%;right:6%;top:39%;width:88%;aspect-ratio:850/610}
 .reverse-live{top:29%}
}
@media(prefers-reduced-motion:reduce){.civic-under-fx,.civic-wheel-fx,.rear-photo-spoiler-fx,.radio-demo,.radio-stock,.radio-upgraded{transition:none!important;animation:none!important}}
/* Actual screen music playback control, with readable label on all displays. */
.v8-music-play{background:linear-gradient(110deg,#0d82ba,#6123ae);color:#fff;border:1px solid #8be8ff;border-radius:8px;padding:8px 12px;font-size:11px;font-weight:850;min-height:34px;cursor:pointer;box-shadow:0 0 18px #45bbff55}
.v8-music-play:focus-visible{outline:3px solid #e9faff;outline-offset:3px}
.v7-music-wave{margin:6px 0}.cinema-stage[data-audio="on"] .v7-music-wave i{animation:v8Wave .55s ease-in-out infinite alternate}.cinema-stage[data-audio="on"] .v7-music-wave i:nth-child(2n){animation-delay:-.22s}
@keyframes v8Wave{from{height:6px}to{height:20px}}
#cinemaSceneActions button:focus-visible,.v7-baby-switch button:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Clean scene transition: don't let the old schematic ghost through the high-detail trunk photo. */
.cinema-stage[data-trunk="open"] .rear-shell-art,.cinema-stage[data-trunk="open"] .trunk-hatch{opacity:0!important;visibility:hidden!important;transition:none!important}
/* Background photo may be blurred; the actual POV display must stay sharp and bright. */
.baby-art img.baby-pov-photo{filter:none!important;opacity:1!important;object-position:center!important;transform:none!important;}
/* Keep responsive scene text above the mobile footer and inside camera frame. */
@media(max-width:760px){.camera-feed{bottom:38%;}.camera-feed-footer span{font-size:7px;line-height:1.1}.camera-preview-tag{margin:3px 0}.cinema-stage[data-view="baby"] .cinema-honesty{top:auto;bottom:33%;}}
/* Baby camera scene: keep status information accessible without obscuring the simulated monitor on a phone. */
@media(max-width:760px){.cinema-stage[data-view="baby"] .cinema-status{opacity:0}.cinema-stage[data-view="baby"] .cinema-honesty{display:none}.camera-feed-footer{position:relative;z-index:2}}
/* Move the trunk prompt above old attribution text; avoid fighting the control row. */
.cinema-stage[data-trunk="open"] .trunk-instruction{bottom:16%}
@media(max-width:760px){.cinema-stage[data-trunk="open"] .trunk-instruction{top:59%;bottom:auto}}