@font-face {
  font-family: "Ogg Medium";
  src: url("https://dcym8fthxf5uu.cloudfront.net/fonts/247a073c-29f5-4a89-aa3a-741020f346fc/OggText-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Animated values are not custom properties: script.js writes transform and opacity on each
   element. A custom property on :root changes the computed style of every element on the page,
   and at 60 writes a second that restyle was most of the frame budget on phones. The values
   below are the first frame (the loader covers the page until script.js takes over). */
:root {
  --ink: #111411;
  --paper: #fdf1e1;
  --shadow: rgba(0, 0, 0, 0.32);
  font-family: Inter, Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--paper);
  background: #0b1110;
  letter-spacing: 0;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: #0b1110;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background: #0b1110;
}

button {
  border: 0;
  font: inherit;
}

.site-shell {
  min-height: 100vh;
}

/* ---------- Loader (same screen as demo3: white canvas, black Xolomai logo) ---------- */

html.is-loading {
  overflow: hidden;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: #000;
  background: #fff;
  transition: opacity 500ms;
}

/* An opaque layer lets the browser skip rasterizing what it covers. While script.js walks the
   timeline behind the loader, this keeps the scene "visible" so every texture is ready. */
.loader.is-warming {
  opacity: 0.999;
}

.loader.is-done {
  opacity: 0;
  pointer-events: none;
}

.loader-logo {
  width: 120px;
  height: auto;
  user-select: none;
}

.loader-bar {
  width: 160px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
}

.loader-bar-fill {
  height: 100%;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-out;
}

.loader-text {
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .loader-logo {
    width: 148px;
  }
}

/* ---------- Scroll rig ---------- */

.cinema-scroll {
  position: relative;
  height: calc(100vh + 3700px);
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #7fb4d4;
}

.world,
.back-stack,
.sky-img,
.shade,
.scene-img,
.site-header,
.sights-slider,
.sights-controls,
.hero-title,
.intro-copy,
.story-panel {
  position: absolute;
}

.world {
  inset: 0;
  overflow: hidden;
  background: #79b7dd;
}

/* ---------- Header ---------- */

.site-header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 32px;
  padding: 32px;
  color: rgba(253, 241, 225, 0.86);
  pointer-events: auto;
}

.site-logo {
  justify-self: start;
  color: rgba(253, 241, 225, 0.92);
  font-family: "Ogg Medium", Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 2.2vw, 44px);
}

.site-nav a,
.language-switcher {
  color: rgba(253, 241, 225, 0.86);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

.site-nav a {
  font-size: 20px;
  font-weight: 400;
}

.language-switcher {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.language-switcher span {
  display: inline-flex;
  line-height: 1;
}

/* ---------- Scene images ---------- */

.scene-img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
  pointer-events: none;
}

.sky-img {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  will-change: auto;
}

/* The reference animates `filter: blur() brightness()` on the sky, the mountains and the bazaar.
   A blur whose radius changes has to be recomputed on the GPU for every layer on every frame, and
   on integrated graphics that was the stutter. Each of those layers now has a small copy with
   blur(14px) brightness(0.745) baked into the file, faded in over the sharp one: opacity is
   free for the compositor and the end state is the same picture. */
.sky-blur {
  opacity: 0;
  will-change: opacity;
}

.back-stack {
  top: 0;
  bottom: 0;
  left: -3vw;
  right: -3vw;
  z-index: 1;
  opacity: 1;
  transform: scale(0.76);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.back-img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-bazaar,
.back-four {
  top: auto;
  bottom: 0;
  left: 48%;
  right: auto;
  width: 112%;
  height: auto;
  object-fit: contain;
}

.back-bazaar {
  z-index: 3;
  opacity: 1;
  transform: translate3d(-50%, 20vh, 0) scale(0.86);
}

.back-four {
  z-index: 1;
  opacity: 0.72;
  mix-blend-mode: screen;
  transform: translate3d(-50%, calc(10vh - 110px), 0) scale(0.78);
}

.back-four-blur,
.back-bazaar-blur {
  opacity: 0;
}

/* ---------- Sights slider ---------- */

.sights-slider {
  left: 0;
  right: 0;
  top: 0;
  /* Above .back-bazaar (z-index 3), which is its sibling inside the back stack: in the reference
     the skyline painted over the cards and a minaret cut through the titles. */
  z-index: 4;
  padding: 0;
  visibility: hidden;
  transform-origin: 0 0;
  pointer-events: auto;
  /* Vertical pans still scroll the page; horizontal swipes go to script.js to change card. */
  touch-action: pan-y;
  will-change: transform;
}

.sights-track {
  display: flex;
  gap: clamp(16px, 1.15vw, 24px);
  align-items: stretch;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.sights-track.is-jumping {
  transition: none;
}

.sight-card {
  position: relative;
  flex: 0 0 clamp(360px, 19.4vw, 430px);
  height: 220px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(253, 241, 225, 0.42);
  border-radius: 24px;
  color: #000;
  background: #fdf1e1;
  box-shadow: 0 18px 52px rgba(2, 47, 64, 0.12);
  backdrop-filter: none;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

.sight-card::before,
.sight-card::after {
  content: none;
}

.sight-card:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}

.sight-kicker,
.sight-card h3,
.sight-card p {
  position: relative;
  z-index: 1;
  text-shadow: none;
}

.sight-kicker {
  display: block;
  margin-bottom: 56px;
  color: #000;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

.sight-pin {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 67.2px;
  height: 67.2px;
  pointer-events: none;
}

.sight-card h3 {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: calc(24px + (16px * 1.16 * 2) + 12px);
  max-width: calc(100% - 76px);
  margin: 0;
  color: #000;
  font-size: 24px;
  font-weight: 800;
  line-height: 0.95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sight-card p {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  max-width: 100%;
  margin: 12px 0 0;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.16;
  display: -webkit-box;
  max-height: calc(2em * 1.16);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sights-controls {
  left: 48px;
  right: auto;
  top: calc(clamp(112px, 19vh, 220px) + 186px);
  z-index: 5;
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.sights-controls.is-ready {
  pointer-events: auto;
}

.sight-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  color: #111411;
  background: rgba(253, 241, 225, 0.94);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.sight-nav:focus-visible,
.note-button:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

/* ---------- Hero title ---------- */

.hero-title {
  left: 50%;
  top: clamp(122px, 19vh, 205px);
  z-index: 3;
  width: min(94vw, 1780px);
  margin: 0;
  color: #fdf1e1;
  font-family: "Ogg Medium", Georgia, "Times New Roman", serif;
  font-size: 14rem;
  font-weight: 500;
  line-height: 0.78;
  text-align: center;
  text-shadow: none;
  transform: translate3d(-50%, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
}

/* ---------- Foreground layers ---------- */

.bridge-img {
  left: 50%;
  bottom: 5vh;
  z-index: 4;
  /* The reference grows `width` from 67.2vw to 105vw and lowers `bottom`: a layout and a fresh
     raster of the image on every frame. The box stays at its largest size and script.js
     reproduces the same growth with `scale`, which the compositor does for free. */
  width: min(105vw, 2140px);
  height: auto;
  /* The hero state: the same scale and offset script.js writes for scroll 0, so the page without
     JavaScript (and the frame before it runs) already shows the bridge under the title. */
  transform: translate3d(-50%, min(11.05vw, 225px), 0) scale(0.666);
  transform-origin: 50% 48%;
}

.splitframe-img {
  left: 50%;
  bottom: -2vh;
  z-index: 6;
  width: min(118vw, 2240px);
  height: auto;
  pointer-events: none;
}

.splitframe-left {
  transform: translate3d(-50%, 0, 0);
  transform-origin: 21% 52%;
}

.splitframe-right {
  transform: translate3d(-50%, 0, 0);
  transform-origin: 79% 52%;
}

.frame-two-img {
  filter: none !important;
  backdrop-filter: none;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(122vw, 2160px);
  height: auto;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(1.06);
  transform-origin: 50% 48%;
}

.shade {
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* The reference animates the three stop alphas, all proportional to one value: the gradient
     is fixed at full strength and only its opacity moves, so it is never repainted. */
  background: linear-gradient(
    180deg,
    rgba(74, 181, 224, 0.465) 0%,
    rgba(74, 181, 224, 0.42) 48%,
    rgba(74, 181, 224, 0.51) 100%
  );
  will-change: opacity;
}

/* ---------- Copy ---------- */

.intro-copy {
  left: 50%;
  bottom: clamp(56px, 28vh, 400px);
  z-index: 9;
  width: min(560px, calc(100vw - 40px));
  text-align: center;
  transform: translate3d(-50%, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
}

.intro-copy p {
  margin: 0 auto;
  max-width: 560px;
  color: #fdf1e1;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.18;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.hero-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 25px;
  color: var(--ink);
  border-radius: 999px;
  background: #fdf1e1;
  font-size: 0.98rem;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.story-panel {
  left: 50%;
  top: 45%;
  z-index: 10;
  width: min(760px, calc(100vw - 42px));
  text-align: center;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
}

.story-panel h2 {
  margin: 0;
  color: #fdf1e1;
  font-family: "Ogg Medium", Georgia, "Times New Roman", serif;
  font-size: 4.75rem;
  font-weight: 500;
  line-height: 0.95;
  text-shadow: 0 16px 38px var(--shadow);
}

.story-panel p {
  width: min(520px, 100%);
  margin: 26px auto 0;
  color: #fdf1e1;
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.18;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.story-panel-bridge {
  top: 60%;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + 58px), 0);
}

.story-panel-bazaar {
  top: 29%;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + 58px), 0);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 86px;
  width: min(470px, 100%);
  margin: 72px auto 0;
}

.facts dt {
  color: #fdf1e1;
  font-family: "Ogg Medium", Georgia, "Times New Roman", serif;
  font-size: 4.2rem;
  font-weight: 500;
  line-height: 0.9;
  text-shadow: 0 14px 34px var(--shadow);
}

.facts dd {
  margin: 18px 0 0;
  color: #fdf1e1;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.14;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.note-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  margin-top: 28px;
  padding: 0 28px;
  border-radius: 999px;
  color: var(--ink);
  background: #fdf1e1;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  cursor: pointer;
}

/* Not in the reference: while its panel is faded out the pill sits invisible on top of a sight
   card and would swallow its clicks. script.js sets .is-live while the panel is on screen. */
.story-panel-bazaar:not(.is-live) .note-button {
  pointer-events: none;
}

.note-button span:first-child {
  font-size: 1.25rem;
  line-height: 1;
}

/* ---------- Media queries ---------- */

@media (max-width: 1500px) {
  .hero-title {
    font-size: 11rem;
  }

  .story-panel h2 {
    font-size: 4.1rem;
  }
}

@media (max-width: 1100px) {
  .hero-title {
    top: 15vh;
    font-size: 7.5rem;
  }

  .bridge-img {
    width: 138vw;
    /* Below 1100px the reference keeps the width fixed, so the hero needs no scale-down. */
    transform: translate3d(-50%, 0, 0) scale(1.02);
  }

  .frame-two-img {
    width: 132vw;
  }

  .story-panel h2 {
    font-size: 3.2rem;
  }

  .facts {
    gap: 34px;
    margin-top: 44px;
  }

  .facts dt {
    font-size: 3.2rem;
  }

  .sight-card {
    flex-basis: clamp(320px, 40vw, 390px);
    min-height: 178px;
  }
}

@media (max-width: 640px) {
  .stage {
    min-height: 640px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding: 24px;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .hero-title {
    top: 16vh;
    font-size: 4.5rem;
  }

  .bridge-img {
    bottom: 2vh;
    width: 190vw;
  }

  .frame-two-img {
    width: 176vw;
  }

  /* The stage is 100vh: the viewport with the browser toolbar hidden. While the toolbar shows it
     covers the bottom of the stage, so the copy rises by exactly its height (100lvh - 100svh). */
  .intro-copy {
    bottom: 42px;
    bottom: calc(42px + 100lvh - 100svh);
  }

  .intro-copy p,
  .story-panel p {
    font-size: 1rem;
  }

  .hero-tags {
    gap: 8px;
  }

  .hero-tags span {
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.88rem;
  }

  .story-panel {
    top: 42%;
  }

  .story-panel-bazaar {
    top: 26%;
  }

  .story-panel h2 {
    font-size: 2.45rem;
  }

  .facts {
    gap: 18px;
    margin-top: 34px;
  }

  .facts dt {
    font-size: 2.5rem;
  }

  .sights-slider {
    padding: 0;
  }

  .sights-track {
    gap: 12px;
  }

  .sight-card {
    flex-basis: min(82vw, 330px);
    height: 220px;
    padding: 24px;
    border-radius: 24px;
  }

  .sights-controls {
    left: 24px;
  }

  .sight-card h3 {
    max-width: 78%;
  }

  .sight-card p {
    max-width: 100%;
    margin-top: 10px;
  }

  .sight-kicker {
    margin-bottom: 56px;
  }

  .sight-pin {
    top: 24px;
    right: 24px;
    width: 57.6px;
    height: 57.6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scene-img,
  .back-stack,
  .hero-title,
  .intro-copy,
  .story-panel,
  .sights-track,
  .sights-slider {
    transition: none;
  }
}