/* r8 / mockup only. Normal document scroll raises the map over a still hero. */
html.r8-entry-enabled [data-fullsite-hero]{position:sticky;top:0;z-index:0}
.fullsite-import[data-fullsite-hero] .hero{height:100svh;min-height:0}
html.r8-entry-enabled .fullsite-import.fullsite-navigation{position:sticky;top:0;height:0;z-index:1}
html.r8-entry-enabled .fullsite-navigation .full-header{position:absolute;top:0}
html.r8-entry-enabled:is([data-r8-entry-state="journey"],[data-r8-entry-state="after"]) [data-fullsite-hero],
html.r8-entry-enabled:is([data-r8-entry-state="journey"],[data-r8-entry-state="after"]) .fullsite-import.fullsite-navigation{position:relative;top:auto}
html.r8-entry-enabled #journey{z-index:2;isolation:isolate}
html.r8-entry-enabled #stage{border-radius:calc(18px * (1 - var(--r8-entry-cover,0))) calc(18px * (1 - var(--r8-entry-cover,0))) 0 0}
html[data-r8-entry-state="lifting"] #stage{box-shadow:0 -18px 65px #00161455}

/* The SVG is above the existing movie and below its original typography. Its
   transparent country aperture reveals precisely the decoded pixels beneath. */
.r8-entry-visual{position:absolute;inset:0;z-index:2;pointer-events:none;contain:paint}
.r8-entry-atlas{display:block;width:100%;height:100%;overflow:visible}
#stage[data-r8-map="relief"] #map-credit{visibility:hidden}
#stage[data-r8-map="relief"] .scene-shade{background:linear-gradient(90deg,#061d2357,transparent 42%),linear-gradient(180deg,#051c2238,transparent 25%,transparent 72%,#051c2299)}
#stage[data-r8-map="relief"] .city-marker{background:linear-gradient(125deg,#21473deb,#12342fee);box-shadow:0 10px 28px #001b2330;border-color:#e8e4c455;border-radius:4px}
#stage[data-r8-map="relief"] .city-marker[data-city="riyadh"]{background:linear-gradient(125deg,#3a5949f0,#234739f2);border-color:#d9d6aa99}
#stage[data-r8-map="relief"] .coordinate-halo{fill:#133d2f33;stroke:#fff6c955}
#stage[data-r8-map="relief"] .coordinate-ring{fill:#284d3e;stroke:#fff0c8}
#stage[data-r8-map="relief"] .city-leader{stroke:#f5eccd;stroke-opacity:.8}

@media(max-aspect-ratio:4/5){
  html.r8-entry-enabled #stage{border-radius:calc(12px * (1 - var(--r8-entry-cover,0))) calc(12px * (1 - var(--r8-entry-cover,0))) 0 0}
  #stage[data-r8-map="relief"] .scene-shade{background:linear-gradient(180deg,#061e234d,transparent 31%,transparent 68%,#051c22aa)}
}
@media(prefers-reduced-motion:reduce){
  html.r8-entry-enabled #stage{border-radius:0}
  .r8-entry-visual,.r8-entry-visual *{transition:none!important;animation:none!important}
}