/* ══════════════════════════════════════════════════════════════
   COCKPIT / COMMAND CENTER — Cinematic viewport frame 2.0
   Architectural depth, metallic lighting, integrated consoles
   ══════════════════════════════════════════════════════════════ */

.cockpit{position:fixed;inset:0;z-index:3;pointer-events:none;perspective:1200px}

/* ═══ FRAME EDGES — structural thickness ═══ */
.cockpit-frame-top{
  position:absolute;top:0;left:0;right:0;height:65px;
  background:linear-gradient(180deg,
    rgba(4,4,10,.97) 0%,
    rgba(6,6,16,.92) 30%,
    rgba(8,8,22,.7) 60%,
    rgba(10,10,30,.3) 85%,
    transparent 100%);
  border-bottom:1px solid rgba(80,180,255,.04);
}
.cockpit-frame-top::before{
  content:'';position:absolute;bottom:-1px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(80,180,255,.08),rgba(128,96,240,.05),rgba(80,180,255,.08),transparent);
}
.cockpit-frame-top::after{
  content:'';position:absolute;bottom:0;left:15%;width:25%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(80,232,208,.12),transparent);
}

.cockpit-frame-left{
  position:absolute;top:0;left:0;width:150px;bottom:0;
  background:linear-gradient(90deg,
    rgba(4,4,10,.95) 0%,
    rgba(6,6,16,.85) 25%,
    rgba(8,8,22,.5) 50%,
    rgba(10,10,30,.15) 75%,
    transparent 100%);
  border-right:1px solid rgba(80,180,255,.03);
}
.cockpit-frame-left::before{
  content:'';position:absolute;top:12%;right:-1px;width:1px;height:35%;
  background:linear-gradient(180deg,transparent,rgba(80,232,208,.06),rgba(128,96,240,.04),transparent);
}
.cockpit-frame-left::after{
  content:'';position:absolute;top:55px;right:0;width:1px;height:100px;
  background:linear-gradient(180deg,rgba(80,180,255,.08),transparent);
}

.cockpit-frame-right{
  position:absolute;top:0;right:0;width:90px;bottom:0;
  background:linear-gradient(270deg,
    rgba(4,4,10,.9) 0%,
    rgba(6,6,16,.6) 30%,
    rgba(8,8,22,.2) 60%,
    transparent 100%);
}
.cockpit-frame-right::after{
  content:'';position:absolute;top:20%;left:0;width:1px;height:30%;
  background:linear-gradient(180deg,transparent,rgba(128,96,240,.05),transparent);
}

.cockpit-frame-bottom{
  position:absolute;bottom:0;left:0;right:0;height:110px;
  background:linear-gradient(0deg,
    rgba(4,4,10,.95) 0%,
    rgba(6,6,16,.8) 25%,
    rgba(8,8,22,.4) 55%,
    rgba(10,10,30,.1) 80%,
    transparent 100%);
  border-top:1px solid rgba(80,180,255,.03);
}
.cockpit-frame-bottom::before{
  content:'';position:absolute;top:-1px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(80,180,255,.06),rgba(80,232,208,.04),rgba(80,180,255,.06),transparent);
}
.cockpit-frame-bottom::after{
  content:'';position:absolute;top:0;left:35%;width:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(80,232,208,.1),transparent);
}

/* ═══ STRUCTURAL BEAMS — angled supports ═══ */
.cockpit-beam{position:absolute;background:linear-gradient(180deg,rgba(40,40,60,.35) 0%,rgba(30,30,50,.18) 50%,rgba(40,40,60,.35) 100%);border:1px solid rgba(80,180,255,.04)}
.cockpit-beam-1{top:60px;left:0;width:200px;height:3px;border-radius:0 0 2px 0;transform:rotate(-1.5deg);transform-origin:left center}
.cockpit-beam-2{top:60px;right:0;width:130px;height:3px;border-radius:0 0 0 2px;transform:rotate(1.5deg);transform-origin:right center}
.cockpit-beam-3{top:65px;left:145px;width:2px;height:90px;transform:rotate(4deg);transform-origin:top center;opacity:.45}
.cockpit-beam-4{top:65px;right:88px;width:2px;height:70px;transform:rotate(-3deg);transform-origin:top center;opacity:.35}
.cockpit-beam-5{bottom:105px;left:0;width:100px;height:2px;transform:rotate(1deg);transform-origin:left center;opacity:.3}
.cockpit-beam-6{bottom:105px;right:0;width:80px;height:2px;transform:rotate(-1deg);transform-origin:right center;opacity:.25}

/* ═══ INDICATOR LIGHTS ═══ */
.cockpit-light{position:absolute;border-radius:50%;pointer-events:none}
.cockpit-light-1{top:62px;left:150px;width:4px;height:4px;background:rgba(80,232,208,.65);box-shadow:0 0 8px rgba(80,232,208,.45),0 0 24px rgba(80,232,208,.15);animation:cockpitBlink 4s ease-in-out infinite}
.cockpit-light-2{top:62px;left:195px;width:3px;height:3px;background:rgba(240,192,96,.55);box-shadow:0 0 6px rgba(240,192,96,.35);animation:cockpitBlink 6s ease-in-out infinite 1s}
.cockpit-light-3{top:66px;right:92px;width:3px;height:3px;background:rgba(128,96,240,.55);box-shadow:0 0 6px rgba(128,96,240,.35);animation:cockpitBlink 5s ease-in-out infinite 2s}
.cockpit-light-4{bottom:108px;left:100px;width:2px;height:2px;background:rgba(80,232,208,.4);box-shadow:0 0 4px rgba(80,232,208,.3);animation:cockpitBlink 7s ease-in-out infinite 0.5s}
.cockpit-light-5{bottom:108px;right:80px;width:2px;height:2px;background:rgba(240,192,96,.4);box-shadow:0 0 4px rgba(240,192,96,.3);animation:cockpitBlink 8s ease-in-out infinite 3s}
@keyframes cockpitBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* ═══ BOTTOM CONSOLE — integrated command strip ═══ */
.cockpit-console{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;gap:18px;align-items:center;opacity:.22;
}
.cockpit-console-dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(80,232,208,.6);
  animation:consolePulse 3s ease-in-out infinite;
}
.cockpit-console-dot:nth-child(2){animation-delay:.8s;background:rgba(240,192,96,.5)}
.cockpit-console-dot:nth-child(3){animation-delay:1.6s;background:rgba(128,96,240,.5)}
.cockpit-console-dot:nth-child(4){animation-delay:2.4s;background:rgba(80,232,208,.4)}
.cockpit-console-dot:nth-child(5){animation-delay:3.2s;background:rgba(240,192,96,.35)}
.cockpit-console-line{
  width:35px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(80,180,255,.12),transparent);
}
@keyframes consolePulse{0%,100%{opacity:1;box-shadow:0 0 4px currentColor}50%{opacity:.25;box-shadow:none}}

/* ═══ CORNER ACCENTS — metallic edge highlights ═══ */
.cockpit::before{
  content:'';position:absolute;top:60px;left:148px;width:40px;height:1px;
  background:linear-gradient(90deg,rgba(80,232,208,.15),transparent);
}
.cockpit::after{
  content:'';position:absolute;top:60px;right:88px;width:30px;height:1px;
  background:linear-gradient(270deg,rgba(128,96,240,.12),transparent);
}