/* THRUST canopy: the view from the nose tip (canopy.js draws the window; this places it and its HUD) */
.dvc-canopy{position:relative;height:clamp(300px,58vh,620px);margin:0 0 14px;border-radius:14px;overflow:hidden;background:#02040a;
  box-shadow:inset 0 0 0 1px rgba(46,232,138,.18),0 18px 40px rgba(0,0,0,.45)}
.dvc-canopy canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dvc-canopy__hud{position:absolute;top:12px;display:flex;flex-direction:column;gap:6px;font:10.5px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.16em;color:rgba(46,232,138,.75);text-shadow:0 0 8px rgba(46,232,138,.4);pointer-events:none;max-width:44%}
.dvc-canopy__hud b{display:block;color:#e8f6ee;font-weight:600;letter-spacing:.06em;word-break:break-all}
.dvc-canopy__hud--l{left:14px}
.dvc-canopy__hud--r{right:14px;text-align:right}
.dvc-canopy__label{position:absolute;left:14px;right:14px;bottom:10px;margin:0;font:11px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;
  text-transform:uppercase;color:#FFB547;text-shadow:0 0 10px rgba(255,181,71,.45);pointer-events:none}
.dvc-callsigns{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:10px;margin:0 0 10px;padding:0;list-style:none}
.dvc-callsigns li{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid rgba(46,232,138,.15);border-radius:8px;min-width:0}
.dvc-callsigns img{width:44px;height:44px;border-radius:6px;flex:none}
.dvc-callsigns span{display:flex;flex-direction:column;min-width:0}
.dvc-callsigns b{overflow-wrap:anywhere}
.dvc-callsigns small,.dvc-flightlinks small{display:block;opacity:.7;font-size:11px}
.dvc-flightlinks{margin:6px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:8px}
@media (max-width:560px){.dvc-canopy__hud{font-size:9.5px;max-width:48%}.dvc-canopy{height:min(70vh,440px)}}

/* the deep (v1.2.7): the forward view along the z-axis, behind the frame the canvas draws. Far is dim and soft, near is
   bright and sharp; everything converges on the vanishing point at the nose tip (--vx/--vy, set each frame). */
.dvc-canopy canvas{z-index:2}
.dvc-canopy__hud,.dvc-canopy__label,.dvc-boarding{z-index:3}
.dvc-deep{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;--warp:9s;contain:strict;
  background:radial-gradient(ellipse at var(--vx,50%) var(--vy,50%),#0b1630 0%,#050a18 22%,#02040a 60%)}
.dvc[data-delivery="visitor"] .dvc-deep{--warp:12s}
.dvc:not(.dvc-is-connected) .dvc-deep{--warp:20s}   /* before you enter (v1.6.1): calm and inviting, a slow drift */
.dvc[data-delivery="vip"] .dvc-deep,.dvc[data-pilot="vip"] .dvc-deep{--warp:5.5s}
.dvc-canopy[data-phase="afterburner"] .dvc-deep{--warp:3s}
.dvc-deep__space{position:absolute;inset:0;perspective:520px;perspective-origin:var(--vx,50%) var(--vy,50%);transform-style:preserve-3d}
/* rings: portals that leave the vanishing point and pass the window, far = faint and blurred, near = crisp */
.dvc-deep__ring{position:absolute;left:50%;top:50%;width:62vmin;height:62vmin;margin:-31vmin 0 0 -31vmin;border-radius:50%;
  border:1.5px solid rgba(46,232,138,.55);
  transform:translateZ(-3200px);opacity:0;animation:dvc-ring var(--warp) linear infinite;will-change:transform,opacity}
.dvc-deep__ring.r1{animation-delay:calc(var(--warp) * -0.167)}
.dvc-deep__ring.r2{animation-delay:calc(var(--warp) * -0.333)}
.dvc-deep__ring.r3{animation-delay:calc(var(--warp) * -0.500)}
.dvc-deep__ring.r4{animation-delay:calc(var(--warp) * -0.667)}
.dvc-deep__ring.r5{animation-delay:calc(var(--warp) * -0.833)}
.dvc-deep__ring.is-gold{border-color:rgba(212,175,55,.6)}
@keyframes dvc-ring{
  0%{transform:translateZ(-3200px);opacity:0}
  15%{opacity:.18}
  72%{opacity:.8}
  100%{transform:translateZ(160px);opacity:0}}
/* star planes at four depths, drifting toward the eye: far planes small and dim, near planes bright */
.dvc-deep__plane{position:absolute;left:-20%;top:-20%;width:140%;height:140%;animation:dvc-plane calc(var(--warp) * 2.4) linear infinite;will-change:transform,opacity}
.dvc-deep__plane.p1{animation-delay:calc(var(--warp) * -0.6)}
.dvc-deep__plane.p2{animation-delay:calc(var(--warp) * -1.2)}
.dvc-deep__plane.p3{animation-delay:calc(var(--warp) * -1.8)}
.dvc-deep__plane i{position:absolute;width:2px;height:2px;border-radius:50%;background:#dfe9f5}
.dvc-deep__plane i.is-big{width:3px;height:3px;background:#fff6dc}
@keyframes dvc-plane{0%{transform:translateZ(-2600px);opacity:0}15%{opacity:.35}80%{opacity:.9}100%{transform:translateZ(420px);opacity:0}}
/* the lanes: grids above and below that run to the vanishing point and stream toward the eye */
.dvc-deep__grid{position:absolute;left:-50%;width:200%;height:100%;opacity:.16;overflow:hidden}
/* the lane streams by moving its own tile with transform (compositor only), never by repainting the background */
.dvc-deep__grid::before{content:"";position:absolute;left:0;right:0;top:-80px;bottom:0;will-change:transform;
  background-image:linear-gradient(rgba(46,232,138,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(46,232,138,.4) 1px,transparent 1px);
  background-size:80px 80px;animation:dvc-lane calc(var(--warp) * .5) linear infinite}
.dvc-deep__grid--floor{top:var(--vy,50%);transform-origin:50% 0;transform:rotateX(84deg)}
.dvc-deep__grid--ceil{bottom:calc(100% - var(--vy,50%));transform-origin:50% 100%;transform:rotateX(-84deg);opacity:.09}
@keyframes dvc-lane{from{transform:translateY(0)}to{transform:translateY(80px)}}
.dvc-deep__grid--ceil::before{animation-direction:reverse}
/* the vanishing point: where the ship is heading; the haze darkens the edges so the centre reads as far away */
/* the event horizon (v1.7.0, operator: "we had an event horizon and a burning flame improve that too"): dead ahead, the
   vanishing point is a black hole's shadow ringed by its photon ring, with a burning accretion disk crossing in front and
   its far side lensed up over the top. CSS only (the parts are empty <i>s from canopy.js); the disk's fire turns through
   a registered angle, so nothing repaints the page */
@property --dvc-eh-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.dvc-deep__core{position:absolute;left:var(--vx,50%);top:var(--vy,50%);border-radius:50%;width:30vmin;height:30vmin;margin:-15vmin 0 0 -15vmin;background:radial-gradient(circle,rgba(255,170,70,.22) 0%,rgba(255,120,40,.1) 32%,rgba(63,169,245,.05) 50%,transparent 70%);
  animation:dvc-eh-breathe 4.8s ease-in-out infinite}
@keyframes dvc-eh-breathe{50%{transform:scale(1.06)}}
.dvc-eh{position:absolute;display:block;border-radius:50%;pointer-events:none}
.dvc-eh--disk{left:2%;right:2%;top:42%;height:16%;
  background:conic-gradient(from var(--dvc-eh-a),#fff4d6,#ffc061 12%,#ff6a1f 28%,#a8300c 45%,#ff6a1f 60%,#ffd27a 78%,#fff4d6);
  -webkit-mask:radial-gradient(closest-side,transparent 40%,#000 50%,#000 80%,transparent 100%);mask:radial-gradient(closest-side,transparent 40%,#000 50%,#000 80%,transparent 100%);
  filter:blur(.6px) drop-shadow(0 0 6px rgba(255,140,50,.8));animation:dvc-eh-spin 7s linear infinite,dvc-eh-burn 1.9s steps(1) infinite}
.dvc-eh--back{z-index:1}
.dvc-eh--front{z-index:3;clip-path:inset(50% 0 0 0)}
.dvc-eh--lens{z-index:2;left:29%;right:29%;top:29%;bottom:29%;border:4px solid transparent;border-top-color:rgba(255,214,140,.95);border-left-color:rgba(255,170,80,.35);border-right-color:rgba(255,170,80,.35);border-bottom-color:rgba(255,150,60,.6);
  filter:blur(1.6px) drop-shadow(0 0 5px rgba(255,150,60,.9));animation:dvc-eh-burn 2.3s steps(1) infinite}
.dvc-eh--shadow{z-index:2;left:33%;right:33%;top:33%;bottom:33%;background:#000;
  box-shadow:0 0 0 1.5px rgba(255,240,205,.95),0 0 10px 2px rgba(255,190,100,.75),0 0 28px 6px rgba(255,110,40,.35)}
@keyframes dvc-eh-spin{to{--dvc-eh-a:360deg}}
/* the burning: a flicker that never settles into a rhythm (uneven steps) */
@keyframes dvc-eh-burn{0%{opacity:1}13%{opacity:.86}21%{opacity:1}37%{opacity:.9}52%{opacity:.97}61%{opacity:.82}74%{opacity:1}88%{opacity:.9}}
.dvc-canopy[data-phase="afterburner"] .dvc-deep__core{filter:brightness(1.7) saturate(1.2)}
.dvc-canopy.is-away .dvc-eh,.dvc-canopy.is-away .dvc-deep__core{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.dvc-eh,.dvc-deep__core{animation:none}}
.dvc-deep__haze{position:absolute;inset:0;background:radial-gradient(ellipse at var(--vx,50%) var(--vy,50%),transparent 0%,transparent 30%,rgba(2,4,10,.55) 70%,rgba(2,4,10,.9) 100%)}
@media (prefers-reduced-motion:reduce){
  .dvc-deep__ring,.dvc-deep__plane,.dvc-deep__grid::before,.dvc-deep__core{animation:none}
  .dvc-deep__ring{opacity:.45}
  .dvc-deep__ring.r1{transform:translateZ(-2400px)}.dvc-deep__ring.r2{transform:translateZ(-1800px)}.dvc-deep__ring.r3{transform:translateZ(-1300px)}
  .dvc-deep__ring.r4{transform:translateZ(-900px)}.dvc-deep__ring.r5{transform:translateZ(-560px)}.dvc-deep__ring.r6{transform:translateZ(-280px)}
  .dvc-deep__plane{opacity:.7}.dvc-deep__plane.p0{transform:translateZ(-1800px)}.dvc-deep__plane.p1{transform:translateZ(-1000px)}
  .dvc-deep__plane.p2{transform:translateZ(-400px)}.dvc-deep__plane.p3{transform:translateZ(-100px)}}
/* THRUSTstrate's surface (anti-z): over the whole page, never in the way of a click */
.dvc-thrustrate{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;pointer-events:none;z-index:40}
.dvc-canopy.is-away .dvc-deep__ring,.dvc-canopy.is-away .dvc-deep__plane,.dvc-canopy.is-away .dvc-deep__grid::before,.dvc-canopy.is-away .dvc-deep__core{animation-play-state:paused}
/* phones (v1.3.7): nothing reads under 12 px. Every rule above that sets a smaller size, at 12 px under 640 px
   (the same selectors, so the same weight; written from this sheet's own rules) */
@media (max-width:640px){.dvc-canopy__hud,.dvc-canopy__label,.dvc-callsigns small,.dvc-flightlinks small{font-size:12px}}

/* the rear view (v1.4.0 → v1.7.3): the aft scene (rearview.js). v1.7.3 (operator: "this perspective should not show up until
   the cockpit view rotates at 180 with the cockpit acting like a turret to the rocket"): it is not a mirror any more. The
   canopy turns like a turret: TURN 180° swings the forward view away and the aft view in (rotateY about the seat), and
   FACE FORWARD swings it back. Until then the aft view is not shown, and rearview.js does not draw it */
.dvc-canopy{perspective:1400px}
.dvc-deep,.dvc-canopy>canvas,.dvc-rearview{transition:transform 1.1s cubic-bezier(.65,0,.35,1),opacity .55s ease;backface-visibility:hidden}
.dvc-rearview{position:absolute;inset:0;z-index:3;pointer-events:none;background:#020306;opacity:0;visibility:hidden;
  transform:rotateY(180deg);transition:transform 1.1s cubic-bezier(.65,0,.35,1),opacity .55s ease .3s,visibility 0s linear 1.1s}
.dvc-rearview canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dvc-rearview__k{position:absolute;z-index:3;left:50%;top:14px;transform:translateX(-50%);font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.24em;color:rgba(232,246,238,.7)}
.dvc-canopy.is-aft .dvc-rearview{opacity:1;visibility:visible;transform:rotateY(0);transition:transform 1.1s cubic-bezier(.65,0,.35,1),opacity .55s ease .3s,visibility 0s}
.dvc-canopy.is-aft .dvc-deep,.dvc-canopy.is-aft>canvas{transform:rotateY(-180deg);opacity:0}
.dvc-canopy.is-aft .dvc-deep__ring,.dvc-canopy.is-aft .dvc-deep__plane,.dvc-canopy.is-aft .dvc-deep__grid::before,.dvc-canopy.is-aft .dvc-deep__core,
.dvc-canopy.is-aft .dvc-eh{animation-play-state:paused}
/* the turret control: bottom right of the canopy, a 44 px target */
.dvc-turret{position:absolute;z-index:6;right:12px;bottom:10px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid rgba(46,232,138,.45);border-radius:22px;background:rgba(2,4,10,.72);color:#E8F6EE;cursor:pointer;
  font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.2em}
.dvc-turret:hover,.dvc-turret:focus-visible{border-color:#2EE88A;color:#2EE88A;outline:none;box-shadow:0 0 16px rgba(46,232,138,.3)}
.dvc-turret i{display:inline-block;font-style:normal;font-size:15px;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.dvc-canopy.is-aft .dvc-turret i{transform:rotate(180deg)}
.dvc-turret__aft{display:none}.dvc-canopy.is-aft .dvc-turret__aft{display:inline}.dvc-canopy.is-aft .dvc-turret__fwd{display:none}
/* the HUD stays on the glass whichever way the turret faces; the canopy label leaves room for the turret control */
.dvc-canopy.is-aft .dvc-canopy__hud{z-index:5}
.dvc-canopy__label{right:170px}
.dvc-turret b{font-weight:inherit}
/* phones: the turret at the top centre, between the HUD's two columns, in short words; the aft mark gives way to the HUD */
@media (max-width:640px){.dvc-turret{right:auto;left:50%;bottom:auto;top:8px;transform:translateX(-50%);padding:0 12px;font-size:12px;letter-spacing:.12em}
  .dvc-turret b{display:none}.dvc-rearview__k{display:none}.dvc-canopy__label{right:14px}}
@media (prefers-reduced-motion:reduce){.dvc-deep,.dvc-canopy>canvas,.dvc-rearview,.dvc-turret i{transition:none!important}}
@media print{.dvc-rearview,.dvc-turret{display:none}}
