/* HOME OPENING SEQUENCE (Kam, Nov 1: "Home Page - Opening Sequence")
   Window view -> zoom through the glass into the clouds -> Dubai emerges -> the existing cloud transition.
   The stage sits where the hero video used to (inside Sticky Video, so it stays behind the page for the whole of
   Div Block 252), and opening.js drives every layer from the scroll position. The hero section is made taller so
   there is room to scroll the zoom; its text panel is pinned meanwhile. */

/* the stage: one screen, fixed behind the hero for as long as Div Block 252 lasts (same box as the old video) */
/* the foot is neutral black: iOS 26 Safari tints its toolbar from the colour at the bottom of the screen, brightened
   about 7x, and the old wine-dark #0e0809 came out as the pink bar in Kam's screenshots (106,59,75 = 7.5x 14,8,10) */
[data-op=stage] { position: absolute; left: 0; right: 0; top: -100vh; height: 100vh; overflow: hidden;
  background: linear-gradient(#2d201e, #120c0c 70%, #000 94%); pointer-events: none; }
/* the large viewport, so the scene still fills the screen once the iPhone address bar tucks away (opening.js
   pins it to the top of the screen) */
@supports (height: 100lvh) { [data-op=stage] { height: 100lvh; } }
[data-op=stage] > * { position: absolute; }

/* Dubai, graded to Kam's mock-up: rosier and brighter through the city and fog (a soft-light rose wash), with a
   cool lavender veil over the top of the sky so the title reads */
/* hidden until opening.js shows it, once the window has filled the screen: iOS 26 Safari tints its toolbar from what
   sits at the foot of the screen, and Dubai there (even under the window) turned it pink (Kam, Nov 4) */
[data-op=dubai] { inset: 0; transform-origin: 50% 55%; will-change: transform; visibility: hidden; }
[data-op=dubai] picture { display: block; width: 100%; height: 100%; }
[data-op=dubai] img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-op=dubai]::after { content: ""; position: absolute; inset: 0; background: rgba(255, 120, 170, .4); mix-blend-mode: soft-light; }
[data-op=dubai]::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(170, 160, 190, .36), rgba(170, 160, 190, 0) 40%); }

/* inside the cloud: what you see between the window clouds and Dubai. It lives in the window plane, under the video,
   so it only ever shows through the glass */
[data-op=plane] [data-op=haze] { position: absolute; inset: 0; will-change: opacity;
  background: radial-gradient(120% 90% at 50% 45%, #fbf1ef 0%, #f1dde2 45%, #d9c3d3 100%); }

/* the window: video and the frame cut-out share one plane that zooms about the glass */
[data-op=plane] { left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
[data-op=plane] video, [data-op=plane] img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-op=plane] video { object-fit: fill; background: center / 100% 100% no-repeat; will-change: opacity; }
/* portrait screens see the top and bottom of the video: fade them into the stage colour */
[data-op=stage].is-tall [data-op=plane] {
  -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }

/* ---- hero text ---- */
.div-block-252 .hero-section.clouded { display: block; padding: 0; min-height: 0; }
/* full screen width: the panel is the frame for everything centred on the screen (cue, Dubai title) */
.div-block-252 .hero-section.clouded > .full-container { position: sticky; top: 0; width: 100%; height: 100vh; max-width: none;
  padding: 0; margin: 0; }
@supports (height: 100svh) { .div-block-252 .hero-section.clouded > .full-container { height: 100svh; } }

/* 1. window view: title, rule and line of copy, left of the window on wide screens */
.div-block-252 .hero-section.clouded .hero-wrapper { position: absolute; left: 7.3vw; top: 50%; width: min(25vw, 440px);
  transform: translateY(-50%); margin: 0; padding: 0; text-align: left; align-items: flex-start; will-change: opacity, transform, filter; }
.div-block-252 .hero-section.clouded .hero-wrapper h1 { margin: 0; font-family: Prata, Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 3.5vw, 64px); line-height: 1.13; letter-spacing: 0; text-transform: none; color: #f6e4d7;
  text-shadow: 0 2px 24px rgba(20, 10, 10, .35); }
.div-block-252 .hero-section.clouded .hero-wrapper h1 .blur-1 { display: inline; }
[data-op=rule] { height: 1px; width: 100%; margin: clamp(22px, 2.3vw, 40px) 0 clamp(18px, 1.9vw, 32px);
  background: rgba(246, 228, 215, .45); }
[data-op=lede] { margin: 0; max-width: 22em; font-family: Avenir, Arial, sans-serif; font-size: clamp(15px, 1.45vw, 24px);
  line-height: 1.45; font-weight: 300; letter-spacing: 0; text-transform: none; color: rgba(246, 228, 215, .92); }

/* 3. Dubai: centred title near the top */
[data-op=outro] { position: absolute; left: 6vw; right: 6vw; top: 15.5%; text-align: center; opacity: 0;
  will-change: opacity, transform, filter; }
[data-op=title] { margin: 0 auto; max-width: 13em; font-family: Prata, Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 3.35vw, 58px); line-height: 1.16; letter-spacing: .01em; text-transform: uppercase;
  color: #fbe6da; text-shadow: 0 2px 22px rgba(90, 60, 80, .38); }

/* scroll cue at the foot of the screen */
[data-op=cue] { position: absolute; left: 50%; bottom: clamp(18px, 3.4vh, 36px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; color: rgba(255, 255, 255, .85); }
/* once the "Plan your flight" pill shows (after the first screen) the cue sits just above it, still centred */
[data-op=cue] { transition: bottom .5s cubic-bezier(.2, .7, .2, 1); }
body:has([data-mgj=booking].bk-show) [data-op=cue] { bottom: calc(clamp(18px, 3.4vh, 36px) + 68px); }
@media (max-width: 767px) { body:has([data-mgj=booking].bk-show) [data-op=cue] { bottom: calc(clamp(18px, 3.4vh, 36px) + 50px); } }
[data-op=cue-text] { font-size: clamp(8.5px, .7vw, 10.5px); font-weight: 400; letter-spacing: .4em; text-transform: uppercase;
  padding-left: .4em; line-height: 1; } /* sized from Kam's mock-ups */
[data-op=cue-line] { width: 1px; height: clamp(40px, 7vh, 64px); background: currentColor; opacity: .8; }
[data-op=cue-chev] { width: 12px; height: 12px; margin-top: -14px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: .8; }

/* smaller landscape screens: the window takes more of the width, so the text tightens up */
@media (max-width: 1279px) and (min-aspect-ratio: 1/1) {
  .div-block-252 .hero-section.clouded .hero-wrapper { left: 5vw; }
  .div-block-252 .hero-section.clouded .hero-wrapper h1 { font-size: clamp(30px, 3.1vw, 40px); }
  [data-op=lede] { font-size: clamp(14px, 1.3vw, 16px); }
}

/* phones held sideways and other short landscape screens: smaller type, the text centred below the header */
@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
  .div-block-252 .hero-section.clouded .hero-wrapper { top: calc(50% + 26px); }
  .div-block-252 .hero-section.clouded .hero-wrapper h1 { font-size: clamp(20px, 6vh, 28px); line-height: 1.12; }
  [data-op=rule] { margin: 12px 0 10px; }
  [data-op=lede] { font-size: 12.5px; line-height: 1.4; }
  [data-op=outro] { top: calc(58px + 5vh); }
  [data-op=title] { font-size: clamp(22px, 7.5vh, 34px); }
  [data-op=cue-line] { height: 28px; }
}

/* phones and portrait tablets: window in the upper middle, the text under it */
@media (max-aspect-ratio: 1/1) {
  .div-block-252 .hero-section.clouded .hero-wrapper { left: 24px; right: 24px; top: auto; bottom: 7svh; width: auto; transform: none; }
  .div-block-252 .hero-section.clouded .hero-wrapper h1 { font-size: clamp(26px, 7.4vw, 44px); line-height: 1.15; letter-spacing: 0; }
  [data-op=rule] { margin: 18px 0 14px; width: min(100%, 300px); }
  [data-op=lede] { font-size: clamp(14px, 3.7vw, 18px); max-width: 24em; }
  [data-op=outro] { left: 16px; right: 16px; top: 15%; }
  [data-op=title] { font-size: clamp(28px, 8.4vw, 48px); line-height: 1.18; }
}
/* phones: a soft shade behind the title and copy, so they read clear of the window frame and the cabin ledge behind
   them (Kam, Nov 9). It sits inside the text block, so it fades out with the text as the zoom starts */
@media (max-aspect-ratio: 1/1) {
  .div-block-252 .hero-section.clouded .hero-wrapper::before { content: ""; position: absolute; z-index: -1;
    left: -24px; right: -24px; top: -48px; bottom: -40px; pointer-events: none;
    background: linear-gradient(rgba(12, 7, 7, 0), rgba(12, 7, 7, .5) 40%, rgba(8, 5, 5, .72)); }
}

/* phones and portrait tablets: the scroll cue shows on Dubai only, not under the window (Kam, Nov 6 and 7;
   opening.js sets when) */

/* the old hero headline rules from the page head don't apply to this layout */
@media (prefers-reduced-motion: reduce) {
  [data-op=plane], [data-op=haze] { display: none; }
}

/* "Your world. Closer.": Kam's new line reads in two, "Private aviation, / tailored to you." The column was sized
   for the old "A higher standard of travel." and broke it into four with "you." alone. */
.div-block-252 .mgj-journey-note { width: auto; max-width: 18em; }

/* HOME PARITY: the duplicated page lost Home's IX2 page interactions, so they are redone here and in opening.js */
/* "Site Load In": the logo screen. Logo fades in (.5-1s), holds, fades out (1.3-1.6s), the screen lifts (1.9-2.4s),
   then the window text resolves (opening.js, from 2.4s) */
.load-in { display: flex; animation: op-loadin .5s ease 1.9s both; }
.load-in .logo.loaded-in { animation: op-logo 1.6s both; }
@keyframes op-loadin { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes op-logo { 0%, 31.25% { opacity: 0; } 62.5%, 81.25% { opacity: 1; } 100% { opacity: 0; } }
/* the window text stays hidden until opening.js takes over (no flash before the logo screen arrives at the end of
   the page); if the script never runs, it appears after 4s anyway */
html:not(.op-ready) .div-block-252 .hero-section.clouded .hero-wrapper { opacity: 0; animation: op-fallback 0s 4s forwards; }
@keyframes op-fallback { to { opacity: 1; } }
/* "Slide Top 0.4" on the two Discover banners and their titles */
html.op-rise [data-mgb=banner], html.op-rise [data-mgb=banner] h2 { opacity: 0; translate: 0 20px;
  transition: opacity 1s ease .4s, translate 1s ease .4s; }
html.op-rise [data-mgb=banner].op-in, html.op-rise [data-mgb=banner] h2.op-in { opacity: 1; translate: none; }