/* A continuous background, with independent content layers. No panel resizes. */
.departure-scene { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; }
.departure-heading { position: absolute; inset: 0; z-index: 2; margin: 0; font: 400 clamp(29px,3.15vw,60px)/1.2 Sora,Arial,sans-serif; letter-spacing: -.065em; pointer-events: none; }
.departure-line { position: absolute; top: 23%; left: 5.5%; display: block; overflow: clip; padding: .06em 0 .16em; max-width: 37%; }
.departure-line > span { display: block; }
.departure-line + .departure-line { top: auto; left: auto; right: 5.5%; bottom: 18%; text-align: right; color: #89747c; }
.departure-flight { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.departure-aircraft { position: absolute; top: 49%; left: 50%; width: min(42vw,620px); height: 77%; overflow: visible; transform: translate(-50%,-50%); fill: none; stroke: #626b5c; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.departure-aircraft clipPath path { fill: #000; stroke: none; }
.assembly-piece path { vector-effect: non-scaling-stroke; }
.departure-fuselage { stroke: #424c3e; stroke-width: 1.55; }
.departure-detail { stroke: #8a9080; stroke-width: .75; }
.departure-glazing { stroke: #626b5c; stroke-width: .9; fill: #626b5c0b; }
.departure-seats { stroke: #525c47; stroke-width: 1; }

/* The viewBox and stage never change size. Depth and assembly only transform the drawing. */
.is-animated .assembly-piece { transform-box: view-box; transform-origin: 300px 480px; opacity: calc(.65 + var(--join,1) * .35); transform: translate(calc((1 - var(--join,1)) * var(--part-x,0px)),calc((1 - var(--join,1)) * var(--part-y,0px))) rotate(calc((1 - var(--join,1)) * var(--part-angle,0deg))); }
.is-animated .assembly-body { --join: var(--departure-body,0); --part-y: 40px; }
.is-animated .assembly-nose { --join: var(--departure-nose,0); --part-y: -220px; }
.is-animated .assembly-left-wing { --join: var(--departure-leftWing,0); --part-x: -340px; --part-y: -80px; --part-angle: -9deg; }
.is-animated .assembly-right-wing { --join: var(--departure-rightWing,0); --part-x: 340px; --part-y: -110px; --part-angle: 9deg; }
.is-animated .assembly-left-engine { --join: var(--departure-engines,0); --part-x: -190px; --part-y: 100px; }
.is-animated .assembly-right-engine { --join: var(--departure-engines,0); --part-x: 190px; --part-y: 100px; }
.is-animated .assembly-tail { --join: var(--departure-tail,0); --part-y: 240px; }
.is-animated .assembly-stern { --join: var(--departure-tail,0); --part-y: 190px; }
.is-animated .departure-seats { opacity: var(--departure-cabin,0); }

.is-animated.has-departure { height: calc(var(--story-stage-height) * var(--story-length,8.8)); }
.is-animated .departure-scene { position: absolute; inset: 0; z-index: 0; min-height: 0; opacity: var(--departure-backdrop,0); clip-path: inset(calc((1 - var(--departure-expand,0)) * 12px) round calc((1 - var(--departure-expand,0)) * 30px)); }
.is-animated .aircraft-configurator > .hero-background { opacity: calc(1 - var(--departure-dissolve,0)); }
.is-animated .configuration-content { opacity: calc(1 - var(--departure-dissolve,0)); filter: blur(calc(var(--departure-dissolve,0) * 18px)); }
.is-animated .departure-heading { width: 100%; }
.is-animated .departure-line { opacity: var(--departure-textOpacity,0); transform: translate3d(calc(var(--departure-textExit,0) * -105vw),0,0); }
.is-animated .departure-line > span { transform: translate3d(0,calc((1 - var(--departure-textEnter,0)) * .6em),0); filter: blur(calc((1 - var(--departure-textEnter,0)) * 5px)); }
.is-animated .departure-line + .departure-line { opacity: var(--departure-secondOpacity,0); transform: translate3d(calc(var(--departure-textExit,0) * 105vw),0,0); }
.is-animated .departure-line + .departure-line > span { transform: translate3d(0,calc((1 - var(--departure-secondEnter,0)) * .6em),0); filter: blur(calc((1 - var(--departure-secondEnter,0)) * 5px)); }
.is-animated .departure-aircraft { opacity: var(--departure-plane,0); transform: translate(-50%,-50%) perspective(1100px) rotateX(calc((1 - var(--departure-approach,0)) * 36deg)) scale(calc(.18 + var(--departure-approach,0) * .82)); filter: blur(calc((1 - var(--departure-approach,0)) * 1.2px + var(--departure-planeBlur,0) * 20px)); }

.journey-scene { padding: 12px 12px 86px; background: var(--canvas); }
.journey-film { position: relative; isolation: isolate; overflow: hidden; height: min(76svh,880px); min-height: 340px; border-radius: 30px; background: #2b302e; color: white; }
.journey-film > img,.journey-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.journey-film::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg,#13181433,transparent 35%,#12161199); }
.journey-brand { position: absolute; top: 32px; left: 36px; z-index: 2; display: flex; align-items: center; gap: 9px; font: 400 29px Sora,sans-serif; letter-spacing: -1.7px; }
.journey-brand svg { width: 30px; height: 30px; fill: currentColor; }
.journey-caption { position: absolute; z-index: 2; left: 42px; right: 100px; bottom: 40px; }
.journey-caption h2 { margin: 0; font: 400 clamp(36px,5.3vw,84px)/1.15 Sora,Arial,sans-serif; letter-spacing: -.065em; }
.journey-caption p { font-size: clamp(12px,1.25vw,18px); margin: 14px 0 0; color: #fffd; }
.journey-play { position: absolute; z-index: 3; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 88px; height: 88px; border-radius: 50%; border: 1px solid #ffffff90; background: #ffffff35; color: #fff; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display: grid; place-items: center; transition: background .2s,opacity .2s; }
.journey-play svg { width: 29px; height: 29px; fill: currentColor; }
.journey-film.is-playing .journey-play { inset: auto 30px 30px auto; transform: none; width: 46px; height: 46px; }
.journey-film.is-playing .journey-play svg { width: 17px; height: 17px; }
.journey-play:hover { background: #ffffff50; }
.journey-play:focus-visible,.brand-carousel:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.journey-film .pause-glyph,.journey-film.is-playing .play-glyph { display: none; }
.journey-film.is-playing .pause-glyph { display: block; }
.brand-carousel { position: relative; padding: 36px 0 10px; }
.brand-viewport { overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.brand-track { display: flex; width: max-content; animation: aeren-brands 35s linear infinite; animation-play-state: paused; }
.brand-group { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-around; min-width: 100vw; gap: clamp(60px,7vw,120px); padding: 0 clamp(30px,3.5vw,60px); list-style: none; margin: 0; }
.brand-group li { display: grid; place-items: center; flex: 0 0 180px; height: 55px; }
.brand-group img { width: 100%; max-height: 38px; object-fit: contain; filter: grayscale(1); opacity: .68; }
.brand-carousel.is-running .brand-track { animation-play-state: running; }
.brand-carousel:hover .brand-track,.brand-carousel:focus-within .brand-track { animation-play-state: paused; }
@keyframes aeren-brands { to { transform: translateX(-50%); } }
.is-animated .journey-scene { position: absolute; inset: 0; z-index: 4; overflow-y: auto; opacity: var(--departure-film,0); transform: translate3d(0,calc((1 - var(--departure-film,0)) * 42%),0); pointer-events: none; }
.is-animated .journey-scene.is-ready { pointer-events: auto; }
.is-animated .journey-film { height: calc(var(--story-stage-height) - 230px); min-height: 0; }

@media (max-width:760px) {
  .is-animated .departure-scene { clip-path: inset(calc((1 - var(--departure-expand,0)) * 7px) round calc((1 - var(--departure-expand,0)) * 24px)); }
  .departure-heading { font-size: clamp(25px,7.3vw,43px); line-height: 1.25; }
  .departure-line { top: 9%; left: 7%; max-width: 86%; }
  .departure-line + .departure-line { right: 7%; bottom: 17%; }
  .departure-aircraft { top: 46%; width: 86%; height: 57%; }
  .is-animated .assembly-left-wing { --part-x: -230px; --part-angle: -6deg; }
  .is-animated .assembly-right-wing { --part-x: 230px; --part-angle: 6deg; }
  .journey-scene { padding: 7px 7px 90px; }
  .journey-film { height: 70svh; min-height: 300px; border-radius: 24px; }
  .is-animated .journey-film { height: calc(var(--story-stage-height) - 228px - env(safe-area-inset-bottom)); }
  .journey-film > img,.journey-film video { object-position: 60% 50%; }
  .journey-brand { top: 22px; left: 22px; font-size: 24px; }
  .journey-brand svg { width: 25px; height: 25px; }
  .journey-caption { left: 24px; right: 58px; bottom: 26px; }
  .journey-caption h2 { font-size: clamp(29px,8.7vw,46px); }
  .journey-caption p { font-size: 12px; max-width: 210px; line-height: 1.6; margin-top: 12px; }
  .journey-play { width: 66px; height: 66px; }
  .journey-film.is-playing .journey-play { right: 18px; bottom: 20px; width: 38px; height: 38px; }
  .brand-carousel { padding-top: 26px; }
  .brand-group { gap: 42px; padding-inline: 21px; }
  .brand-group li { flex-basis: 135px; height: 42px; }
  .brand-group img { max-height: 29px; }
}
@media (max-width:760px) and (max-height:570px) {
  .is-animated .journey-film { height: calc(var(--story-stage-height) - 200px - env(safe-area-inset-bottom)); }
  .journey-caption { left: 22px; bottom: 22px; }
  .journey-caption h2 { font-size: 27px; }
  .journey-caption p { display: none; }
  .brand-carousel { padding-top: 18px; }
  .brand-group li { height: 32px; }
  .brand-group img { max-height: 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .brand-track { animation: none; }
  .brand-group[aria-hidden=true] { display: none; }
  .brand-track,.brand-group { width: 100%; }
  .brand-group { flex-wrap: wrap; justify-content: center; row-gap: 28px; }
}