/* Three.js is progressive enhancement: the original hero image is the fallback. */
.hero-runway { position: relative; }
.hero-runway.flight-enabled { height: calc(max(760px, 100svh) + 720px); }
.flight-enabled .hero { position: sticky; top: 0; }
@media (min-width: 761px) {
  .hero { height: max(760px, 100svh); }
  .hero .hero-content { top: 50%; transform: translateY(-50%); padding-top: 0; padding-bottom: 0; }
}
.hero-flight { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; }
.hero-flight canvas, .style-flight canvas { display: block; width: 100%; height: 100%; }
.hero.flight-ready .hero-flight { opacity: 1; }
.hero.flight-ready .hero-jets { visibility: hidden; }
.hero .hero-jets { width: 150px; right: 12%; top: 23%; animation: none; }
.hero-flight { mask-image: linear-gradient(90deg, transparent, #0004 24%, #000 48%); }
.hero.flight-ready .hero-world { transform: scale(1.035); }
.flight-cue-touch { display: none; }
.hero:not(.flight-ready) .hero-bottom>span { visibility: hidden; }

.style-flight { position: absolute; left: 33%; right: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none; }
.style-content { position: relative; z-index: 1; pointer-events: none; }
.style-section .style-image { object-position: center; }
.style-flight { mask-image: linear-gradient(90deg, transparent, #000 15%); }

/* Ui.slab: menus.lean = 0.25, 12 px corners at a 72 px reference height.
   Skew the plate only; labels and icons stay upright, just as they do in game. */
.button { position: relative; isolation: isolate; clip-path: none; border: 0; background: transparent; border-radius: 9px; padding-inline: 28px; }
.button::before { content: ''; position: absolute; inset: 0 7px; border-radius: 10px; background: #fff; border: 1.5px solid #fff; transform: skewX(-14.036deg); z-index: -1; transition: background .2s, border-color .2s; }
.button:hover { background: transparent; border-color: transparent; }
.button:hover::before { background: var(--gold); border-color: var(--gold); }
.button-small { padding-inline: 22px; }
.button-small::before { inset-inline: 5px; border-radius: 7px; }
.button:focus-visible { outline-offset: 6px; }

@media(max-width:760px) {
  /* The old static artwork has a different pose. Keep the sky visible until
     the correctly positioned 3D jets have rendered, including on slow loads. */
  .flight-pending .hero .hero-jets { visibility: hidden; }
  .hero-runway.flight-enabled { height: 1300px; }
  .hero-flight { top: 525px; bottom: 40px; mask-image: none; }
  .style-flight { left: 15%; top: 200px; bottom: -45px; }
  .style-section { min-height: 570px; align-items: flex-start; }
  .style-content { padding-top: 55px; padding-bottom: 220px; }
  .style-overlay { background: linear-gradient(180deg,#091420dd, #09142080 45%, transparent 80%); }
  .hero .button { padding-inline: 25px; }
  .flight-cue-desktop { display: none; }
  .flight-cue-touch { display: inline; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-runway.flight-enabled { height: auto; }
  .flight-enabled .hero { position: relative; }
  .hero-bottom>span { visibility: hidden; }
}