/* ZDeck - openable doors on the surface scene (doors.js).
   Each door is a box in scene percent, like the hotspots, so it scales with the picture. Layers inside a door:
   .sdoor__pit   the open art (interior), under everything
   .sdoor__board the hatch's standing screen (part of the open art), folds up from the hinge, carries the label
   .sdoor__lid   the closed lid cut from the scene; folds onto its hinge (hatches, bays) or slides up (engine, bridge)
   Folding is an affine squash towards the hinge line: matrix = I + k * v.n (v the side edge, n its dual), with
   k a registered number so it transitions smoothly; --fa..--fd are written per element by doors.js.
   Only transform, opacity and clip-path change. A closed door is hidden: the scene itself shows the closed state. */

@property --k{syntax:'<number>';inherits:false;initial-value:0}

.sdoors{position:absolute;inset:0;pointer-events:none}
.sdoor{position:absolute;visibility:hidden}
.sdoor.is-on{visibility:visible}
/* hatches and the bridge sit above the drifting copies of the picture (fx.js .air__live: drones, craft, foam);
   the hull doors stay under them, so the foam glints still cross the bay ramps at the waterline */
.sdoor--top{z-index:1}
.sdoor img{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none;user-select:none}
.sdoor__pit,.sdoor__board,.sdoor__lid,.sdoor__slot{position:absolute;inset:0}
.sdoor svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* the fold */
.sdoor__lid,.sdoor__board{
  transform:matrix(calc(1 + var(--k)*var(--fa)),calc(var(--k)*var(--fb)),calc(var(--k)*var(--fc)),calc(1 + var(--k)*var(--fd)),0,0)}
.sdoor.is-on .sdoor__lid,.sdoor.is-on .sdoor__board{will-change:transform,opacity}

/* closing (the base state carries the closing timings) */
.sdoor__lid{--k:0;opacity:1;transition:--k .38s cubic-bezier(.2,.7,.3,1) .26s,opacity .12s linear .25s}
.sdoor__board{--k:-.97;opacity:0;transition:--k .3s cubic-bezier(.6,0,.9,.5),opacity .1s linear .24s}
/* opening */
.sdoor.is-open .sdoor__lid{--k:-.97;opacity:0;transition:--k .42s cubic-bezier(.55,0,.85,.45),opacity .16s linear .3s}
.sdoor.is-open .sdoor__board{--k:0;opacity:1;transition:--k .4s cubic-bezier(.15,.75,.3,1) .3s,opacity .1s linear .28s}

/* bays: the ramp side of the open art is uncovered from the top down while the door swings down */
.sdoor--bay .sdoor__pit{clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .36s cubic-bezier(.6,0,.9,.5)}
.sdoor--bay.is-open .sdoor__pit{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .55s cubic-bezier(.3,.1,.3,1) .06s}

/* engine and bridge: the lid slides up inside the opening */
.sdoor__lid--slide{--k:0;transform:translate3d(0,0,0);opacity:1;transition:transform .5s cubic-bezier(.3,.1,.2,1),opacity .1s linear}
.sdoor.is-open .sdoor__lid--slide{transform:translate3d(0,var(--slide),0);opacity:1;transition:transform .6s cubic-bezier(.5,0,.25,1)}
.sdoor--slide .sdoor__pit{opacity:0;transition:opacity .2s linear .3s}
.sdoor--slide.is-open .sdoor__pit{opacity:1;transition:opacity .12s linear}

/* labels on the standing screens: the dark top panel of each board */
.sdoor__label text{font-family:var(--font-h);text-anchor:middle;dominant-baseline:alphabetic}
.sdoor__code{font-weight:700;letter-spacing:.05em;fill:var(--hatch-ink,#eaf4fb);paint-order:stroke fill;stroke:rgba(2,10,18,.5);stroke-width:1px}
.sdoor__name{font-weight:600;letter-spacing:.04em;fill:var(--hatch-ink,#eaf4fb);opacity:.92;paint-order:stroke fill;stroke:rgba(2,10,18,.5);stroke-width:.8px}
.sdoor__chip rect{fill:rgba(2,10,18,.35);stroke:var(--cyan);stroke-width:.8}
.sdoor__chip text{font-weight:700;letter-spacing:.08em;fill:var(--cyan)}
.sdoor__chip--live rect{fill:var(--cyan)}
.sdoor__chip--live text{fill:var(--on-accent)}
.sdoor__chip--soon rect{stroke:var(--amber)}
.sdoor__chip--soon text{fill:var(--amber)}
.sdoor__rule{stroke:rgba(var(--accent-rgb),.55);stroke-width:.5}
.sdoor__chip--soon~.sdoor__rule{stroke:rgba(240,179,65,.5)}

/* hatch names in the scene SVG are hidden while their lid (which carries its own copy) is moving */
.stage__marks g.is-lifted{visibility:hidden}

/* hotspots of open doors: lifted above the door so the hover/focus outline frames the opening, no tint over it */
.hs--hatch.is-door-open,.hs--door{z-index:2}
.hs--hatch.is-door-open polygon{fill:none}
.hs--hatch.is-door-open .hs__ready{opacity:0}
/* touch: the first tap opens the door and shows its tag; the second tap acts */
.hs.is-armed+.tag--quiet,.hs.is-armed .tag--quiet{opacity:1}
.hs.is-armed polygon{opacity:1}
/* bridge, engine and side bays: toggles with the hatch look */
.hs--door polygon{stroke:var(--cyan)}
.hs--door[aria-pressed=true] polygon{opacity:.9;fill:none}

@media (prefers-reduced-motion:reduce){
  .sdoor .sdoor__lid{display:none}
  .sdoor .sdoor__board,.sdoor.is-open .sdoor__board{--k:0;opacity:1;transition:none}
  .sdoor .sdoor__pit{clip-path:none;opacity:1;transition:none}
  .sdoor{opacity:0;transition:opacity .2s linear}
  .sdoor.is-open{opacity:1}
}

/* Matrix night: the door interiors were drawn warmer than the dark green scene; grade them down toward green-cyan */
html[data-theme="matrix"] .sdoor__pit img,html[data-theme="matrix"] .sdoor__board>img{filter:brightness(.62) saturate(.62) hue-rotate(58deg) contrast(1.08)}