/* Gabriel Airlines — fleet page (aircraft cards + spec modal) */

main > .fleet-menu {
  position: relative;
  width: min(1100px, 92vw);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-7) 0 var(--space-8);
  overflow: hidden;
}

/* slow-panning ambient glow behind the whole page, purely decorative */
.fleet-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 1400px;
  height: 900px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 520px 320px at 20% 20%, rgba(34, 211, 238, 0.14), transparent 60%),
    radial-gradient(ellipse 520px 320px at 80% 60%, rgba(108, 140, 255, 0.12), transparent 60%);
  animation: drift 22s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes drift {
  from { transform: translateX(-52%) translateY(0); }
  to { transform: translateX(-48%) translateY(30px); }
}

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- intro ---------- */

main > .fleet-menu > .fleet-intro {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
  margin-bottom: var(--space-7);
}

main > .fleet-menu > .fleet-intro .eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: var(--space-3);
}

main > .fleet-menu > .fleet-intro h1 {
  font-size: 2.6em;
  margin-bottom: var(--space-4);
}

main > .fleet-menu > .fleet-intro p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}

/* ---------- cards grid ---------- */

main > .fleet-menu > .fleet-cards {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

main > .fleet-menu .fleet-card {
  position: relative;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* The tilt/glow/rotating-border hover treatment itself comes from the
   shared .tilt-card class (shared/css/effects.css) - this just adds the
   card-level shadow lift to go with it. */
main > .fleet-menu .fleet-card:hover {
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: var(--shadow-panel), 0 0 40px rgba(34, 211, 238, 0.12);
}

main > .fleet-menu .fleet-card-index {
  position: absolute;
  top: var(--space-4);
  left: var(--space-5);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

main > .fleet-menu .aircraft-image {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

main > .fleet-menu .aircraft-image img {
  width: 100%;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.5));
  animation: float 6s ease-in-out infinite;
}

main > .fleet-menu .fleet-card:hover .aircraft-image img {
  animation-play-state: paused;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

main > .fleet-menu .aircraft-description {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

main > .fleet-menu .aircraft-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6em;
  margin-bottom: var(--space-4);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

main > .fleet-menu .aircraft-desc ul {
  width: 100%;
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-secondary);
  text-align: left;
}

main > .fleet-menu .aircraft-desc li {
  position: relative;
  padding-left: var(--space-4);
}

main > .fleet-menu .aircraft-desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-glow);
}

main > .fleet-menu .know-more-button {
  margin-top: auto;
  width: 100%;
  max-width: 220px;
}

/* ---------- modal ---------- */

main > .fleet-menu .modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.96);
  z-index: 20;
  width: min(760px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    visibility var(--duration-base);
  /* .glass-panel's own background is ~4% opaque - built for a card sitting
     in the page, not a fixed overlay that has to fully hide whatever's
     behind it. Blur alone still lets bright text behind it "ghost" through
     (especially noticeable once you scroll the modal's own content near
     .back-btn, where a fleet card title can land right behind it), so this
     overrides just the background to something near-opaque. */
  background: rgba(8, 11, 20, 0.94);
}

main > .fleet-menu .modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

main > .fleet-menu .modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

main > .fleet-menu .modal-close:hover {
  color: var(--text-primary);
  border-color: var(--accent-cyan);
}

main > .fleet-menu .aircraft-title-modal {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8em;
  margin-bottom: var(--space-4);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

main > .fleet-menu .modal img {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-bottom: var(--space-5);
}

main > .fleet-menu .modal-aircraft-desc {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  text-align: left;
}

main > .fleet-menu .modal-aircraft-desc .subtitle {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05em;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

main > .fleet-menu .modal-aircraft-desc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.92rem;
}

main > .fleet-menu .modal-aircraft-desc li {
  position: relative;
  padding-left: var(--space-4);
}

main > .fleet-menu .modal-aircraft-desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-cyan);
}

main > .fleet-menu .back-btn {
  margin-top: var(--space-6);
}

/* ---------- responsive ---------- */

@media only screen and (max-width: 900px) {
  main > .fleet-menu > .fleet-cards {
    grid-template-columns: 1fr;
  }

  main > .fleet-menu .aircraft-image img {
    max-width: 340px;
  }
}

@media only screen and (max-width: 700px) {
  main > .fleet-menu > .fleet-intro h1 {
    font-size: 2.1em;
  }

  main > .fleet-menu .modal {
    padding: var(--space-5);
  }

  main > .fleet-menu .modal-aircraft-desc {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media only screen and (max-width: 500px) {
  main > .fleet-menu .fleet-card {
    padding: var(--space-5);
  }

  main > .fleet-menu .aircraft-title {
    font-size: 1.3em;
  }

  main > .fleet-menu .aircraft-title-modal {
    font-size: 1.4em;
  }

  main > .fleet-menu .modal {
    width: 94vw;
    max-height: 90vh;
  }

  main > .fleet-menu .modal img {
    max-width: 260px;
  }
}