/* Portfolio polish overrides */

/* Keep the loading screen fully opaque and above the page while React boots. */
.flight-loader {
  z-index: 9999 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  transform: none !important;
  overflow: hidden !important;
  background: #05070a !important;
}

/* Slightly left-angled 747 outline cursor. */
html,
body,
button,
a,
.photo-tile,
.project-card,
.cockpit-grid button,
.lightbox {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='rotate(-18 14 14)' fill='none' stroke='%2389d8ff' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2.5C12.8 5.2 12.2 8.1 12.2 11.3L12.2 25.3L14 26.5L15.8 25.3L15.8 11.3C15.8 8.1 15.2 5.2 14 2.5Z'/%3E%3Cpath d='M12.5 12.2L3.2 8.7L2.3 10.1L11.8 16.2'/%3E%3Cpath d='M15.5 12.2L24.8 8.7L25.7 10.1L16.2 16.2'/%3E%3Cpath d='M12.3 19.2L7.5 23.5L8.8 24.5L12.8 22.5'/%3E%3Cpath d='M15.7 19.2L20.5 23.5L19.2 24.5L15.2 22.5'/%3E%3C/g%3E%3C/svg%3E") 4 4, auto !important;
}

/* Keep the navigation tiles completely inside their rail. */
.flight-nav {
  width: 7.6rem;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-right: 0.55rem;
  padding-left: 0.55rem;
}

.flight-nav a,
.flight-nav button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.flight-nav a > *,
.flight-nav button > * {
  min-width: 0;
  max-width: 100%;
}

/* Concorde copy gets its own readable layer above the image instead of sharing its space. */
.mascot-card {
  min-height: 27rem;
  overflow: hidden;
}

.concorde-line {
  position: absolute !important;
  top: 1.15rem;
  right: 1.5rem;
  left: 1.5rem;
  z-index: 5;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.7rem 1rem !important;
  border: 1px solid rgba(137, 216, 255, 0.28);
  border-radius: 8px;
  background: rgba(5, 7, 10, 0.9);
  color: #fff1df !important;
  text-shadow: 0 2px 12px #05070a;
  backdrop-filter: blur(8px);
}

.concorde-photo-wrap {
  top: 65% !important;
  width: min(66%, 24rem) !important;
  z-index: 2;
}

.mini-runway {
  bottom: 19% !important;
  z-index: 3;
}

/* Drop the Flying Towards Aviation status readout slightly lower so it clears the Concorde motion path. */
.mascot-readout {
  bottom: 0.35rem !important;
  z-index: 6;
}

/* Mission content uses the available card height instead of bunching at the top. */
.mission {
  align-items: stretch;
}

.mission-copy {
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.mission-copy p {
  margin: 0;
}

.mission-status {
  margin-top: auto;
}

.mission > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

/* Make Other Stuff Worth Keeping on the Radar cards follow the actual image dimensions. */
.signal-grid article {
  grid-template-rows: auto 1fr !important;
}

.signal-grid img {
  width: 100% !important;
  height: auto !important;
  max-height: 18rem;
  object-fit: contain !important;
  object-position: center;
  display: block;
  background: rgba(5, 7, 10, 0.28);
}

/* Remove the decorative back-face label requested by the user. */
.project-back > span {
  display: none !important;
}

@media (max-width: 980px) {
  .flight-nav {
    width: auto;
    overflow: hidden;
    padding: 0.45rem;
  }

  .mascot-card {
    min-height: 25rem;
  }

  .signal-grid img {
    max-height: 16rem;
  }
}

@media (max-width: 620px) {
  .concorde-line {
    top: 1rem;
    right: 1rem;
    left: 1rem;
    font-size: 0.95rem;
  }

  .concorde-photo-wrap {
    top: 68% !important;
    width: 70% !important;
  }

  .mascot-readout {
    bottom: 0.2rem !important;
    font-size: 0.75rem;
  }

  .signal-grid img {
    max-height: 13rem;
  }
}