/* Easter egg: three quick clicks on the lamp colour strip play the transmission. */
/* The fades are declared on the transient states only, so the launch sequence keeps its own timing. */
body.egg-playing #deck-hud,
body.egg-playing #bridge-screens,
body.egg-playing #hud,
body.egg-playing .chart-surface,
body.egg-fading #deck-hud,
body.egg-fading #bridge-screens,
body.egg-fading #hud,
body.egg-fading .chart-surface {
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
}
body.egg-playing #deck-hud,
body.egg-playing #bridge-screens,
body.egg-playing #hud,
body.egg-playing .chart-surface {
  opacity: 0 !important;
  pointer-events: none;
}

/* While the transmission runs the static strips hand over to the metre-driven layer. */
.bridge-perimeter > use { transition: opacity .35s ease; }
.lamps-live { opacity: 0; transition: opacity .35s ease; }
body.egg-playing .lamps-live { opacity: 1; }
body.egg-playing .bridge-perimeter > use { opacity: 0; }

/* visibility flips after the panel has faded, so the exit reads as a fade rather than a cut. */
.egg-panel { position: fixed; inset: 0; z-index: 9; visibility: hidden; pointer-events: none; transition: visibility 0s linear .5s; }
body.egg-playing .egg-panel { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.egg-stage { position: absolute; width: 1600px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--bridge-fit)); }
.egg-world { position: absolute; inset: 0; transform: translate3d(var(--bridge-look-x), var(--bridge-look-y), 0) rotateX(var(--bridge-look-pitch)) rotateY(var(--bridge-look-yaw)); }
/* Anchor covers the main window opening of cockpit.svg (0 0 1672 941), mapped into the 1600x900 stage. */
.egg-holo { position: absolute; left: 268px; top: 36px; width: 1064px; height: 594px; }
/* Width and height are set in JS from the video's own aspect ratio, centred inside the window opening. */
.egg-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 690px;
  height: 518px;
  display: block;
  margin: 0;
  background: rgba(3, 15, 21, .76);
  border: 1px solid rgba(145, 229, 239, .46);
  box-shadow: 0 0 42px rgba(95, 211, 237, .2), inset 0 0 64px rgba(95, 211, 237, .12);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.975);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
body.egg-playing .egg-frame { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.egg-frame video { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; filter: saturate(.9) contrast(1.06) brightness(1.04); }
.egg-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(150, 235, 255, .06) 0 1px, transparent 1px 3px);
  animation: egg-flicker 3.6s steps(2, end) infinite;
}
@keyframes egg-flicker { 0%, 100% { opacity: .92 } 47% { opacity: 1 } 53% { opacity: .76 } }
.egg-note {
  position: absolute;
  left: 50%;
  bottom: -25px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(160, 235, 240, .58);
}
@media (prefers-reduced-motion: reduce) {
  .egg-frame { transition: opacity .3s ease; }
  body.egg-playing .egg-frame { transform: translate(-50%, -50%); }
  .egg-frame::after { animation: none; }
}