/* Lorencia from the sky (modules/flight, js/flight.js): the client's flight.html framed in a home block or behind a hero
   slide's words, its poster and the site's loader over it until the page is up. */
.flight { position: relative; overflow: hidden; background: #050506; }
.flight > iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.flight-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity 900ms var(--ease); }
.flight.is-ready .flight-poster { opacity: 0; }
.flight-wait { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; transition: opacity 700ms var(--ease), scale 700ms var(--ease); }
.flight-wait[hidden] { display: none; }
.flight-wait .loader-circle { position: relative; display: grid; width: min(200px, 46vw); aspect-ratio: 1; }
.flight.is-ready .flight-wait { opacity: 0; scale: 1.2; }
/* a touch screen: the frame takes the fingers only after a tap, so a finger over it still scrolls the page */
.flight-touch { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px 22px; border: 0; background: none; cursor: pointer; }
.flight-touch[hidden] { display: none; }
.flight-touch span { padding: 9px 18px; border: 1px solid rgba(var(--accent-rgb), 0.6); border-radius: 99px; background: rgba(0, 0, 0, 0.55); color: #fff; font: 600 13px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }

/* the home block: three heights, and on a phone a taller frame (the page keeps its view wide in portrait) */
.w-flight .flight { height: 520px; border-radius: 6px; }
.w-flight .flight.is-short { height: 380px; }
.w-flight .flight.is-tall { height: 680px; }
@media (max-width: 640px) {
  .w-flight .flight, .w-flight .flight:is(.is-short, .is-tall) { height: auto; aspect-ratio: 3 / 4; min-height: 320px; max-height: 72svh; }
}

/* placed as the hero (the block's `place`): edge to edge at the hero's height, no card, no corners */
.w-flight.is-hero .flight { height: clamp(500px, 72vh, 720px); border-radius: 0; }
@media (max-width: 640px) {
  .w-flight.is-hero .flight { height: auto; aspect-ratio: 3 / 4; min-height: 360px; max-height: 80svh; }
}

/* the hero slide (kind `flight`): the frame is the slide's art, its words let the pointer through to it but for their
   buttons, and while the visitor flies the words, the shade and the fade at the side go */
.slide-art.slide-flight { position: absolute; inset: 0; scale: 1; transition: none; }
.slide:has(.slide-flight) .slide-body { pointer-events: none; }
.slide:has(.slide-flight) .slide-body :is(a, button) { pointer-events: auto; }
.slide:has(.slide-flight)::after, .slide:has(.slide-flight) .slide-body { transition: opacity 500ms var(--ease); }
.slide.is-flying::after, .slide.is-flying .slide-body { opacity: 0; }
.slide.is-flying .slide-body :is(a, button) { pointer-events: none; }
.slide.is-flying .slide-flight { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 960px) {
  .slide-art.slide-flight { opacity: 1; }
}