﻿/* v672: cream cabin, brass doors and a moving shaft viewed through side windows. */
.company-map-visit-scene:has(.hq-transit),.district-detail-art:has(.hq-transit){position:relative;overflow:hidden}
.hq-transit{position:absolute;inset:0;z-index:20;overflow:hidden;pointer-events:auto;border:clamp(5px,1vw,14px) solid #d8c59d;background:transparent;color:#382c1a;isolation:isolate}
.hq-transit-shaft{position:absolute;inset:-160px 0;background:repeating-linear-gradient(180deg,#e9dfca 0 58px,#fff9dc 58px 68px,#bca777 68px 74px,#f5edde 74px 160px);border-inline:12px solid #b9a27b}
.hq-transit[data-phase="moving"] .hq-transit-shaft{animation:hq-shaft-up 900ms cubic-bezier(.35,0,.25,1) both}
.hq-transit[data-direction="down"][data-phase="moving"] .hq-transit-shaft{animation-name:hq-shaft-down}
.hq-transit-door{position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,#e2d4b8,#fff9ed 45%,#d5be91);border:2px solid #b99a59;transition:transform 300ms ease-in-out;z-index:1}
.hq-transit-door.left{left:10%;animation:hq-door-left 300ms both}
.hq-transit-door.right{right:10%;animation:hq-door-right 300ms both}
.hq-transit[data-phase="moving"] .hq-transit-door{animation:hq-rattle 150ms linear 4}
.hq-transit[data-phase="opening"] .hq-transit-door.left{animation:none;transform:translateX(-130%)}
.hq-transit[data-phase="opening"] .hq-transit-door.right{animation:none;transform:translateX(130%)}
.hq-transit[data-phase="opening"] .hq-transit-shaft{opacity:0;transition:opacity 200ms}
.hq-transit-panel{position:absolute;z-index:2;top:5%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 20px;border:2px solid #b78b32;border-radius:10px;background:#fff5d9;color:#382c1a!important;box-shadow:0 3px 12px #70562926;white-space:nowrap;font:700 clamp(20px,4vh,36px)/1.2 system-ui}
.hq-transit-panel :is(span,strong,small){color:#382c1a!important;text-shadow:none!important}
.hq-transit-panel small{font-size:14px}
.hq-transit.is-reduced{animation:hq-fade 200ms ease; background:#fff8e9}
.hq-transit.is-reduced :is(.hq-transit-shaft,.hq-transit-door){display:none}
body :is(dialog.company-map,dialog.district-map) .hq-floors{background:#fff9ed!important;color:#382c1a!important}
body :is(dialog.company-map,dialog.district-map):not(#app#app) :is(.hq-floors,.hq-lift) button{background:#fff9ed!important;color:#382c1a!important;border-color:#c4a467!important}
body :is(dialog.company-map,dialog.district-map):not(#app#app) :is(.hq-floors,.hq-lift) button[aria-current]{background:#f4d684!important;color:#382c1a!important}
@keyframes hq-door-left{from{transform:translateX(-130%)}to{transform:translateX(0)}}
@keyframes hq-door-right{from{transform:translateX(130%)}to{transform:translateX(0)}}
@keyframes hq-shaft-up{from{transform:translateY(-160px)}to{transform:translateY(160px)}}
@keyframes hq-shaft-down{from{transform:translateY(160px)}to{transform:translateY(-160px)}}
@keyframes hq-rattle{0%,100%{translate:0 0}50%{translate:0 1px}}
@keyframes hq-fade{from{opacity:0}50%{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.hq-transit *{animation:none!important;transition:none!important}.hq-transit{animation:hq-fade 200ms ease}}
/* Scene captions also target small; keep the destination inside the cabin panel. */
.company-map-visit-scene .hq-transit-panel small{position:static;inset:auto;background:transparent!important;color:#382c1a!important;padding:0;border:0;border-radius:0;font-size:14px;line-height:1.2}
