/* AJ's V6 / waterfront Civic visual + photo-powered rear, audio and camera scenes */
:root{--waterfront-blue:#37cfff;--waterfront-violet:#b45dff}
.cinema-stage{background:#030916}
.cinema-header{background:linear-gradient(92deg,#030b19,#06172b 65%,#0c0c22);box-shadow:inset 0 -1px #16b9ff40}
.cinema-stage .front-art img{object-position:53% 48%;transform:scale(1.005);animation:none}
.front-art:after{background:linear-gradient(90deg,rgba(0,4,14,.98) 0%,rgba(1,8,20,.91) 18%,rgba(2,11,27,.65) 33%,rgba(1,7,19,.04) 53%,rgba(0,5,17,.2) 74%,rgba(0,5,14,.70) 100%),linear-gradient(0deg,rgba(1,7,19,.93),transparent 32%,transparent 80%,rgba(0,3,11,.23))}
.cinema-copy h1{letter-spacing:-.075em;text-shadow:0 8px 30px #01030c}
.cinema-copy{top:11%;width:min(36%,500px)}
.cinema-stage[data-view="exterior"] .cinema-mist{background:radial-gradient(ellipse at 68% 98%,#3900f34d,transparent 48%),radial-gradient(ellipse at 48% 100%,#23d5ff35,transparent 65%)}
.cinema-hotspot i{box-shadow:0 0 0 4px #0a203dcc,0 0 20px 2px #32cfff}
/* New positions align to the Civic image's actual locations. */
.cinema-hotspot.hs-dash{left:56%;top:36%}
.cinema-hotspot.hs-head{left:39%;top:58%}
.cinema-hotspot.hs-interior{left:69%;top:48%}
.cinema-hotspot.hs-tail{left:86%;top:48%}
.cinema-hotspot.hs-under{left:58%;top:78%}
.cinema-hotspot.hs-audio{left:80%;top:65%}
/* Light turns off when deselected: on photo opacity starts at zero, and both have the same crop/pose. */
.front-art img.hero-front-off,.front-art img.hero-front-on{object-position:53% 48%;transform:scale(1.005);animation:none}
.front-art img.hero-front-on{opacity:0;transition:opacity .8s ease}
.cinema-stage[data-underglow="on"] .front-art img.hero-front-on{opacity:1}
.cinema-stage[data-underglow="on"] .underlight{opacity:.7}
.cinema-stage[data-underglow="off"] .underlight{opacity:0}
.cinema-stage[data-wheelwell="off"] .wheelwell-light{opacity:0}
.cinema-stage[data-wheelwell="on"] .wheelwell-light{opacity:.94}
.cinema-stage[data-headlights="on"] .front-light{opacity:.8}
.cinema-stage[data-headlights="off"] .front-light{opacity:0}
.cinema-honesty{position:absolute;bottom:7px;right:4%;z-index:8;pointer-events:none;text-shadow:0 1px 5px #000;color:#afd1e8;font-size:8px;letter-spacing:.11em;opacity:.85}
/* Cinema exterior close-up gives priority to real visual fidelity over generic toy 3D */
.cinema-stage[data-view="rear"] .rear-art,.cinema-stage[data-view="trunk"] .rear-art{background:linear-gradient(150deg,#06091b,#081d35)}
.rear-open-photo{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 50%;opacity:0;transition:opacity 1s ease,clip-path 1.1s ease;clip-path:inset(46% 0 0 0);animation:none!important;filter:saturate(1.1)}
.cinema-stage[data-trunk="open"] .rear-open-photo{opacity:1;clip-path:inset(0 0 0 0)}
.cinema-stage[data-trunk="open"] .rear-shell-art{opacity:0;transition:opacity .6s}
.cinema-stage[data-trunk="open"] .trunk-hatch{opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.cinema-stage[data-trunk="open"] .rear-art:after{content:"CONCEPT AUDIO INSTALL · GENERATED VISUAL";position:absolute;bottom:12%;right:19%;z-index:2;background:#020a1cbf;border:1px solid #35b5ed88;padding:8px 12px;border-radius:5px;letter-spacing:.15em;font-size:10px;font-weight:800;color:#c1eaff}
.photo-woofer{display:none;position:absolute;z-index:6;transform:translate(-50%,-50%);width:5.1vw;height:5.1vw;min-width:45px;min-height:45px;max-width:90px;max-height:90px;border:2px solid #45ceff88;border-radius:50%;background:radial-gradient(circle,#1062a61b,#070b2399);box-shadow:0 0 22px #459cfb69;cursor:pointer;color:#ccecff;font-size:30px;text-shadow:0 0 12px #00b7ff}
.cinema-stage[data-trunk="open"] .photo-woofer{display:block}
.cinema-stage[data-audio="on"] .photo-woofer{animation:wooferThrob .32s ease-in-out infinite alternate}
.cinema-stage.bass-hit .photo-woofer{box-shadow:0 0 34px 12px #bf3affc7;transform:translate(-50%,-50%) scale(1.09)}
@keyframes wooferThrob{to{box-shadow:0 0 18px #a83fff;transform:translate(-50%,-50%) scale(1.055)}}
.cinema-stage.signal-replay .rear-turn{animation:signalDemo .5s ease-in-out 4 alternate!important;opacity:1!important}
@keyframes signalDemo{0%{filter:brightness(.5);opacity:.2}100%{filter:brightness(3);opacity:1}}
/* Actual Sony head-unit reverse-camera image supplied in this conversation. */
.cinema-stage[data-view="reverse"] .reverse-art{opacity:1;visibility:visible}
.reverse-art{background:#060d1a}
.reverse-art > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;filter:brightness(.55) saturate(1.25)}
.reverse-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#020812 0%,transparent 40%,#01071370 100%)}
.reverse-live{z-index:2;position:absolute;top:7%;left:30%;display:flex;align-items:center;gap:7px;padding:12px 14px;border:1px solid #41c3ff82;border-radius:8px;background:#021126e0;color:#edfbff;font-size:12px;font-weight:800;letter-spacing:.09em}
.reverse-live small{color:#94b5c9;font-size:10px;font-weight:500;letter-spacing:0}
.reverse-swap{z-index:3;position:absolute;right:25%;top:27%;width:34%;aspect-ratio:4/3;overflow:hidden;border:3px solid #8adfff;border-radius:12px;box-shadow:0 0 32px #26aeff8a,0 28px 50px #000}
.reverse-swap img{width:100%;height:100%;object-fit:cover;animation:reverseScreenIn 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes reverseScreenIn{from{transform:scale(.7);opacity:0;filter:blur(9px)}to{transform:scale(1);opacity:1;filter:blur(0)}}
/* sound controls: volume makes real synth quieter/louder, not just visual labels */
.audio-volume-wrap{background:#020e21ed;border:1px solid #298bbeaa;border-radius:8px;padding:6px 9px;color:#c4e8f8;display:flex;gap:8px;align-items:center;font-size:9px;font-weight:850;letter-spacing:.08em}
.audio-volume-wrap[hidden]{display:none}
.audio-volume-wrap input{accent-color:#30d8ff;width:93px;cursor:pointer}
.cinema-scene-actions:has(#audioVolumeWrap:not([hidden])){max-width:80%}
.interior-context{position:absolute;bottom:19%;right:33%;color:#dbf5ff;font-size:10px;letter-spacing:.16em;text-shadow:0 2px 4px #020616;font-weight:800;opacity:.75}
/* Honest reverse-camera gallery distinctly separated from verified portfolio. */
.reverse-project{margin:30px auto 0;max-width:1180px;border:1px solid #2a85b56b;border-radius:15px;padding:20px;display:grid;grid-template-columns:1.25fr .85fr;gap:25px;background:linear-gradient(145deg,#0b1a2f,#040b19);box-shadow:0 0 35px #0d78dd16;color:#eff7ff}
.reverse-project-art{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reverse-project-art img{width:100%;height:260px;object-fit:cover;border-radius:10px;border:1px solid #3f8eb65e}
.reverse-project-copy{display:flex;flex-direction:column;justify-content:center;gap:8px}
.reverse-project-copy h3{font-size:clamp(26px,2.4vw,39px);font-weight:950;letter-spacing:-.06em;margin:0}
.reverse-project-copy p{color:#c5d9ec;font-size:13px;line-height:1.65}
.reverse-project-copy .reverse-project-note{font-size:10px;color:#92b3ce}
.reverse-project-copy a{align-self:start;margin-top:10px}
/* Aftermarket disclosure visible at conversion point */
.aftermarket-disclaimer{background:linear-gradient(105deg,#030b19,#09152a,#08081a);border-block:1px solid #33ace14d;padding:24px 0}
.aftermarket-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:23px}
.aftermarket-symbol{font-size:28px;color:#7ee6ff;border:2px solid #4096d0;border-radius:100%;width:50px;height:50px;display:grid;place-items:center}
.aftermarket-wrap h2{font-size:clamp(19px,1.9vw,29px);line-height:1.3;margin:6px 0;color:#fff}
.aftermarket-wrap p{color:#b5ccdd;max-width:920px;font-size:12px;line-height:1.6;margin:6px 0}
.aftermarket-wrap .disclaimer-note{color:#87b5cb;font-size:10px}
.aftermarket-wrap .button{font-size:10px;white-space:nowrap}
/* crisp subtle glows and softer details to avoid generic flat cards */
.cinema-ribbon-item{border-radius:12px;overflow:hidden;box-shadow:inset 0 1px #a8d7ff14;transform-origin:bottom}
.cinema-info{border-radius:18px}
.cinema-info-preview{border-radius:10px}
.cinema-stage[data-view="reverse"] .cinema-copy{opacity:.88}
.cinema-stage[data-view="reverse"] .cinema-copy h1{font-size:52px}
#garage[hidden]{display:none!important}
@media(max-width:900px){
 .cinema-hotspot.hs-tail{left:76%}.cinema-hotspot.hs-audio{left:70%}
 .reverse-swap{right:6%;top:25%;width:45%}
 .reverse-project{grid-template-columns:1fr}
 .aftermarket-wrap{grid-template-columns:auto 1fr}.aftermarket-wrap .button{grid-column:2;justify-self:start}
}
@media(max-width:760px){
 .cinema-stage .front-art img{object-position:64% center}
 .front-art img.hero-front-off,.front-art img.hero-front-on{object-position:64% center;transform:scale(1)}
 .front-art:after{background:linear-gradient(0deg,#020613 0%,#0107164d 48%,#030a18c9 100%),linear-gradient(90deg,#010714ad,transparent 72%)}
 .cinema-copy{width:95%;top:3%;left:18px}
 .cinema-micro{font-size:9px;margin-bottom:12px}
 .cinema-copy h1{font-size:clamp(48px,12vw,75px);line-height:.97}
 .cinema-copy p{font-size:12px;max-width:300px}
 .cinema-honesty{top:342px;bottom:auto;right:14px;font-size:6px;max-width:56%;text-align:right}
 .cinema-stage[data-view="exterior"] .cinema-floating-hotspots .cinema-hotspot{transform:scale(.82)}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-dash{left:48%;top:40%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-head{left:20%;top:49%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-interior{left:57%;top:49%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-tail{left:76%;top:48%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-audio{left:70%;top:56%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-under{left:50%;top:61%}
 .rear-open-photo{object-position:70% center}
 .photo-woofer{width:50px;height:50px;min-width:36px;min-height:36px;font-size:20px}
 .photo-woofer:first-of-type{left:74%!important}.photo-woofer:nth-of-type(2){left:85%!important}
 .rear-open-photo ~ .photo-woofer{top:58%!important}
 .rear-art:after{display:none}
 .cinema-stage[data-trunk="open"] .rear-art:after{right:3%;bottom:47%;font-size:7px;display:block}
 .reverse-art > img{object-position:54% center}
 .reverse-swap{top:38%;right:8%;width:68%}
 .reverse-live{top:29%;left:5%;right:5%;font-size:9px;flex-wrap:wrap}
 .reverse-live small{font-size:8px}
 .reverse-project-art img{height:145px}
 .reverse-project-copy h3{font-size:29px}
 .aftermarket-wrap{gap:8px}.aftermarket-symbol{width:33px;height:33px;font-size:22px}
 .aftermarket-wrap h2{font-size:19px}.aftermarket-wrap p{font-size:11px}
 .cinema-stage[data-view="reverse"] .cinema-copy h1{font-size:39px}
 .cinema-stage[data-view="reverse"] .cinema-copy{top:6%}
 .interior-context{bottom:55%;right:5%;font-size:8px;max-width:55%;text-align:right}
}
@media(prefers-reduced-motion:reduce){.rear-open-photo,.photo-woofer,.reverse-swap img,.front-art img.hero-front-on{transition:none!important;animation:none!important}}
/* Header links in high contrast, including when icon fonts are unavailable. */
.header-right .social-icon{min-width:37px;width:auto;padding:0 6px;font-size:10px;letter-spacing:.08em;font-weight:950;color:#d6f6ff;background:linear-gradient(145deg,#0b1a2b,#030813)}
.header-right .social-icon:hover{color:#fff;box-shadow:0 0 14px #2dbdff66}
.header-right .nav-book{color:#f4fbff!important;background:linear-gradient(90deg,#08142d,#0b1f42);display:inline-flex;align-items:center;justify-content:space-between;gap:12px}
.header-right .nav-book span{color:#67e9ff}
@media(max-width:760px){
 /* The whole car is visible on phones instead of a cropped windshield behind the panel. */
 .cinema-stage{height:1145px}
 .cinema-art.front-art{background:radial-gradient(ellipse at 60% 53%,#143163,#010716 72%)}
 .front-art img.hero-front-off,.front-art img.hero-front-on{width:100%;height:330px;top:335px;left:0;object-fit:contain;object-position:center;transform:none!important;mask-image:linear-gradient(transparent,black 9%,black 91%,transparent);-webkit-mask-image:linear-gradient(transparent,black 9%,black 91%,transparent)}
 .front-art:after{background:linear-gradient(180deg,#020918 0%,transparent 36%,transparent 57%,#030917 68%,#020715 100%)}
 .cinema-stage .underlight,.cinema-stage .wheelwell-light{bottom:43%;top:auto}
 .cinema-floating-hotspots{top:335px;bottom:480px}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-dash{left:45%;top:33%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-head{left:20%;top:57%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-interior{left:61%;top:47%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-tail{left:82%;top:45%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-audio{left:77%;top:72%}
 .cinema-stage[data-view="exterior"] .cinema-hotspot.hs-under{left:50%;top:83%}
 .cinema-info{height:385px;bottom:55px;grid-template-columns:32% 68%}
 .cinema-feature-controls{bottom:458px}
 .cinema-scene-actions{bottom:458px}
 .cinema-status{bottom:430px}
 .cinema-honesty{top:674px;right:10px;max-width:85%;font-size:7px}
 .cinema-info.compact{bottom:55px;height:32px}
 .reverse-art > img{object-fit:contain;object-position:center;background:#020915}
 .reverse-swap{top:37%;left:6%;right:6%;width:88%}
 .reverse-live{top:26%}
 .photo-woofer{font-size:16px}
 .cinema-stage:not([data-view="exterior"]) .cinema-copy{top:12px}
}
@media(max-width:385px){.cinema-stage{height:1135px}}
/* Rear spoiler light is independently switchable; illustrative only. */
.rear-spoiler-led{position:absolute;z-index:7;left:69.5%;top:22%;width:22%;height:7px;border-radius:9px;background:linear-gradient(90deg,transparent,#ff4e94 10%,#fe0d52 50%,#ff4e94 90%,transparent);box-shadow:0 0 22px 7px #f6279c66;transform:rotate(1deg);opacity:0;transition:opacity .35s}
.cinema-stage[data-spoiler="on"] .rear-spoiler-led{opacity:1}
.cinema-scene-actions #spoilerBtn[aria-pressed="true"]{border-color:#f74eff;color:#ffc9fb;box-shadow:0 0 16px #ef1dfc55}
@media(max-width:760px){.rear-spoiler-led{left:57%;top:38%;width:33%}}