/* Award-level motion layer (see motion.js). Every hidden state is scoped to html.mo, which exists only
   when motion is allowed and is removed after 2.5 s if motion.js never runs. */
@media (prefers-reduced-motion:no-preference){
  /* masked words */
  .mo .mw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.04em .08em .16em;margin:-.04em -.08em -.16em}
  .mo .mwi{display:inline-block;translate:0 112%;transition:translate 1.05s cubic-bezier(.16,1,.3,1)}
  .mo .mo-in .mwi{translate:0 0}
  .mo .mw-l .mwi{display:inline-block;transition-duration:1.2s}
  /* smooth scroll owns the glide: no CSS smooth on top of it */
  html.mo-smooth{scroll-behavior:auto!important}
  /* Arabic: the whole heading rises (no word split) */
  .mo .mo-whole{opacity:0;translate:0 24px;transition:opacity .9s cubic-bezier(.22,1,.36,1),translate 1.05s cubic-bezier(.16,1,.3,1)}
  .mo .mo-whole.mo-in{opacity:1;translate:0 0}
  /* the hero headline waits for its split, so it never flashes unstyled */
  .mo #heroQ:not(.mo-split),.mo .hero h1:not(.mo-split){visibility:hidden}
  .mo .hero .q,.mo .hero h1{animation:none!important;transform:none!important}

  /* hero photograph: a curtain rises and the picture comes into focus */
  .mo .hero-media img,.mo .hero-img{animation:none!important;clip-path:inset(100% 0 0 0);scale:1.16;filter:blur(16px)}
  .mo .hero-img{filter:saturate(.9) contrast(1.03) blur(16px)}
  .mo.mo-hero .hero-media img,.mo.mo-hero .hero-img{clip-path:inset(0 0 0 0);scale:1;filter:blur(0);
    transition:clip-path 1.5s cubic-bezier(.77,0,.175,1),filter 1.7s cubic-bezier(.22,1,.36,1) .15s,scale 2.4s cubic-bezier(.16,1,.3,1)}
  .mo.mo-hero .hero-img{filter:saturate(.9) contrast(1.03) blur(0)}

  /* hero copy follows the headline */
  .mo .hero .eyebrow,.mo .hero .lede,.mo .hero-cta,.mo .hero-ctas,.mo .hero .tlink,.mo .hero .note{animation:none!important;opacity:0;translate:0 26px;transform:none}
  /* buttons do not move: they fade in where they stand */
  .mo .hero-cta,.mo .hero-ctas{translate:0 0}
  .mo.mo-hero .hero .eyebrow,.mo.mo-hero .hero .lede,.mo.mo-hero .hero-cta,.mo.mo-hero .hero-ctas,.mo.mo-hero .hero .tlink,.mo.mo-hero .hero .note{opacity:1;translate:0 0;transition:opacity .9s cubic-bezier(.22,1,.36,1),translate 1.1s cubic-bezier(.16,1,.3,1)}
  .mo.mo-hero .hero .eyebrow{transition-delay:.35s}
  .mo.mo-hero .hero .lede{transition-delay:1.0s}
  .mo.mo-hero .hero-cta,.mo.mo-hero .hero-ctas{transition-delay:1.18s}
  .mo.mo-hero .hero .tlink,.mo.mo-hero .hero .note{transition-delay:1.32s}
  

  /* after the opening: the photograph keeps breathing (slow drift and zoom), and the scroll drives the stage */
  .mo.mo-hero-done .hero-media img,.mo.mo-hero-done .hero-img{animation:mo-breathe 18s ease-in-out infinite alternate!important;transition:scale .25s linear,filter .25s linear,clip-path 0s}
  html[dir="rtl"].mo.mo-hero-done .hero-media img{animation-name:mo-breathe-rtl!important}
  @keyframes mo-breathe{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,-1.5%,0) scale(1.07)}}
  @keyframes mo-breathe-rtl{from{transform:scaleX(-1) translate3d(0,0,0) scale(1)}to{transform:scaleX(-1) translate3d(-2%,-1.5%,0) scale(1.07)}}
  .mo.mo-hero-done .hero .eyebrow,.mo.mo-hero-done .hero .lede,.mo.mo-hero-done .hero-cta,.mo.mo-hero-done .hero-ctas,.mo.mo-hero-done .hero .tlink,.mo.mo-hero-done .hero .note,.mo.mo-hero-done #heroQ,.mo.mo-hero-done .hero h1{transition:none!important}
  .mo #heroQ,.mo .hero h1{transform-origin:0 100%}
  html[dir="rtl"].mo #heroQ{transform-origin:100% 100%}

  /* ---------- Gold Rides: 'drive' (sideways, like a car passing; mirrored for Arabic) ---------- */
  .mo[data-motion="drive"] .hero-media img{clip-path:inset(0 100% 0 0);filter:blur(10px)}
  html[dir="rtl"].mo[data-motion="drive"] .hero-media img{clip-path:inset(0 0 0 100%)}
  .mo[data-motion="drive"].mo-hero .hero-media img{clip-path:inset(0 0 0 0);filter:blur(0);transition:clip-path 1.6s cubic-bezier(.83,0,.17,1),filter 1.4s cubic-bezier(.22,1,.36,1) .3s,scale 2.4s cubic-bezier(.16,1,.3,1)}
  .mo[data-motion="drive"] .mwi{translate:-112% 0}
  html[dir="rtl"].mo[data-motion="drive"] .mwi{translate:112% 0}
  .mo[data-motion="drive"] .mo-in .mwi{translate:0 0}
  .mo[data-motion="drive"] .mo-whole{translate:-40px 0}
  html[dir="rtl"].mo[data-motion="drive"] .mo-whole{translate:40px 0}
  .mo[data-motion="drive"] .mo-whole.mo-in{translate:0 0}
  .mo[data-motion="drive"] .hero .eyebrow,.mo[data-motion="drive"] .hero .lede{translate:-36px 0}
  html[dir="rtl"].mo[data-motion="drive"] .hero .eyebrow,html[dir="rtl"].mo[data-motion="drive"] .hero .lede{translate:36px 0}
  .mo[data-motion="drive"].mo-hero .hero .eyebrow,.mo[data-motion="drive"].mo-hero .hero .lede,.mo[data-motion="drive"].mo-hero .hero-cta{translate:0 0}
  /* Arabic final states (the RTL start rules are more specific, so the end states are restated for RTL) */
  html[dir="rtl"].mo[data-motion="drive"].mo-hero .hero-media img{clip-path:inset(0 0 0 0)}
  html[dir="rtl"].mo[data-motion="drive"] .mo-in .mwi{translate:0 0}
  html[dir="rtl"].mo[data-motion="drive"] .mo-whole.mo-in{translate:0 0}
  /* headlight sheen: a soft band of light glides across the photograph after the reveal, then every 9 s */
  .mo[data-motion="drive"] .hero-media::before{content:"";position:absolute;inset:-10% 0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 0%,transparent 40%,rgba(255,226,170,.16) 48%,rgba(255,240,210,.28) 50%,rgba(255,226,170,.16) 52%,transparent 60%,transparent 100%);transform:translateX(-110%);mix-blend-mode:screen}
  .mo[data-motion="drive"].mo-hero-done .hero-media::before{animation:mo-sheen 9s cubic-bezier(.45,0,.2,1) .2s infinite}
  html[dir="rtl"].mo[data-motion="drive"].mo-hero-done .hero-media::before{animation-name:mo-sheen-rtl}
  @keyframes mo-sheen{0%{transform:translateX(-110%)}22%{transform:translateX(110%)}100%{transform:translateX(110%)}}
  @keyframes mo-sheen-rtl{0%{transform:translateX(110%)}22%{transform:translateX(-110%)}100%{transform:translateX(-110%)}}
  /* the photograph drifts sideways while idle, like the view from a moving car */
  .mo[data-motion="drive"].mo-hero-done .hero-media img{animation-name:mo-drive!important;animation-duration:22s!important}
  html[dir="rtl"].mo[data-motion="drive"].mo-hero-done .hero-media img{animation-name:mo-drive-rtl!important}
  @keyframes mo-drive{from{transform:translate3d(0,0,0) scale(1.03)}to{transform:translate3d(-3%,0,0) scale(1.05)}}
  @keyframes mo-drive-rtl{from{transform:scaleX(-1) translate3d(0,0,0) scale(1.03)}to{transform:scaleX(-1) translate3d(-3%,0,0) scale(1.05)}}

  /* statements light up word by word with the scroll */
  .mo .mo-scrub .sw{opacity:.16;transition:opacity .25s linear}

  /* Gold Rides fleet band: blur to sharp as it enters */
  .mo .fleet img{filter:blur(14px)}
  .mo .fleet.in img{filter:blur(0);transition:filter 1.5s cubic-bezier(.22,1,.36,1),transform 2.4s cubic-bezier(.22,.61,.36,1)}

  /* Royal Ocean cards and tiles: a curtain and a focus pull on entering */
  .mo.rv-ready .rv .ph{clip-path:inset(16% 0 0 0);transition:clip-path 1.15s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
  .mo.rv-ready .rv.in .ph{clip-path:inset(0 0 0 0)}

  /* photographs drift inside their frames: a little oversize so no edge shows */
  .mo .mo-drift{scale:1.08}

  /* scroll progress line */
  .mo-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1000;background:var(--gold,#C9A25C);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
  html[dir="rtl"] .mo-progress{transform-origin:100% 50%}
}
/* the statement band (Royal Ocean) and its type */
.statement{padding-block:clamp(72px,10vw,150px)}
.statement p{margin:0;max-width:22ch;font-family:var(--f-display,var(--display,Georgia,serif));font-weight:400;font-size:clamp(34px,5.4vw,76px);line-height:1.08;letter-spacing:-.015em;color:var(--navy,inherit);font-variation-settings:"SOFT" 50,"WONK" 0;text-wrap:balance}
.statement .label{display:block;margin-bottom:24px}