/* Immersive Web Demo (2026-09-11). Two faces, one document:
   - default: a readable page. Every stop is a picture plus its words. This is what
     no-script, reduced-motion and Data Saver visitors get, and what search engines read.
   - body.is-world: immersive-demo.js takes over. The stage goes fixed behind the copy,
     the pictures in the flow are hidden, and flight spacers between the stops carry the
     scrubbed video. The copy still scrolls like ordinary page content, which is the
     "stop and read" moment.
   Holo language matches the homepage shell (cyan glass, ORRIS bubble orb). */

:root {
  --cyan: #34d8ff;
  --violet: #b044ff;
  --gold: #ffc14d;
  --ink: #eaf6ff;
  --ink-soft: #bcd2ea;
  --bg: #06122b;
  --glass: linear-gradient(180deg, rgba(10, 18, 48, 0.9), rgba(7, 11, 32, 0.93));
  --edge: rgba(52, 216, 255, 0.5);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.idemo {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: var(--cyan); }

.idemo-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: rgba(7, 11, 32, 0.95);
  border: 1.5px solid var(--edge);
  border-radius: 0 0 12px 0;
  z-index: 90;
}
.idemo-skip:focus { left: 0; }

/* ---- top bar ---- */
.idemo-bar {
  position: fixed;
  z-index: 60;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 30px calc(14px + env(safe-area-inset-left, 0px));
  /* stop copy scrolls up underneath this bar, so the scrim has to be deep enough to keep
     the words legible as they pass */
  background: linear-gradient(180deg, rgba(4, 9, 24, 0.94) 0%, rgba(4, 9, 24, 0.74) 52%, rgba(4, 9, 24, 0) 100%);
  pointer-events: none;
}
.idemo-bar > * { pointer-events: auto; }

.idemo-back, .idemo-mode {
  padding: 9px 15px;
  border-radius: 999px;
  text-decoration: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #bfe9ff;
  background: rgba(7, 11, 32, 0.8);
  border: 1.5px solid var(--edge);
  cursor: pointer;
}
.idemo-count {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa8d8;
}

/* ---- the fixed flight stage (world mode only) ---- */
.idemo-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #04091a;
  display: none;
}
body.is-world .idemo-stage { display: block; }
.idemo-stage img, .idemo-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0;
  transition: opacity 0.18s linear;
}
.idemo-stage .on { opacity: 1; }
.idemo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(3, 8, 20, 0.6) 100%),
    linear-gradient(90deg, rgba(4, 9, 24, 0.82) 0%, rgba(4, 9, 24, 0.45) 38%, transparent 66%);
}
body.is-world .idemo-stage.flash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  animation: idemo-restart 1.6s steps(1, end) 1;
}
@keyframes idemo-restart {
  0%, 22% { opacity: 0.92; }
  24%, 30% { opacity: 0.1; }
  32%, 44% { opacity: 0.88; }
  46%, 60% { opacity: 0.06; }
  62%, 70% { opacity: 0.5; }
  72%, 100% { opacity: 0; }
}

/* ---- stop list: a plain contents list on the page, a rail in the world ---- */
.idemo-toc {
  position: relative;
  z-index: 4;
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 22px 0;
}
.idemo-toc ol {
  margin: 0;
  padding: 0 0 0 20px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.idemo-toc li { margin: 4px 0; }

body.is-world .idemo-toc {
  position: fixed;
  right: max(8px, env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  max-width: none;
  margin: 0;
  padding: 10px 6px;
}
body.is-world .idemo-toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}
body.is-world .idemo-toc a {
  display: block;
  width: 26px;
  height: 26px;
  position: relative;
  text-indent: -9999px;
  overflow: hidden;
}
body.is-world .idemo-toc a::before {
  content: "";
  position: absolute;
  left: 9px; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(52, 216, 255, 0.35);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
body.is-world .idemo-toc a.on::before {
  background: var(--cyan);
  transform: scale(1.5);
  box-shadow: 0 0 0 5px rgba(52, 216, 255, 0.16);
}

/* ---- stops ---- */
.idemo-stops {
  position: relative;
  z-index: 5;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 22px 90px;
}
.stop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 46px 0;
  border-top: 1px solid rgba(52, 216, 255, 0.14);
}
.stop:first-child { border-top: 0; }
.stop-shot img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(52, 216, 255, 0.28);
  display: block;
}
.stop-shot { margin: 0; position: relative; }

.stop-eyebrow {
  margin: 0 0 6px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.stop h1, .stop h2 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: 0.01em;
  color: #f2faff;
}
.stop-could h2, .stop h3, .stop h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe9ff;
}
.stop-what { color: var(--ink-soft); }
.stop-note { font-size: 0.85rem; color: #8fa8d8; }

/* ORRIS bubble: same language as the dive demo */
.orris {
  position: relative;
  margin: 0 0 16px;
  padding: 13px 18px 13px 74px;
  border-radius: 20px;
  background: var(--glass);
  border: 1.5px solid rgba(52, 216, 255, 0.55);
  box-shadow: 0 0 26px rgba(52, 216, 255, 0.16);
  color: #f2faff;
}
.orris p { margin: 0; }
.orris .orb {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(120, 230, 255, 0.9);
  box-shadow: 0 0 16px rgba(52, 216, 255, 0.5), inset 0 0 10px rgba(52, 216, 255, 0.3);
  background: radial-gradient(circle at 38% 34%, rgba(52, 216, 255, 0.3), rgba(7, 11, 32, 0.25));
}
.orris .orb::before, .orris .orb::after {
  content: "";
  position: absolute;
  border-radius: 3px;
  background: #c9f4ff;
  box-shadow: 0 0 5px #7fe6ff;
  width: 5px; height: 8px; top: 14px;
}
.orris .orb::before { left: 12px; }
.orris .orb::after { left: 27px; }
.orris .orb i {
  position: absolute;
  left: 16px; top: 27px;
  width: 12px; height: 6px;
  border: 2px solid #c9f4ff;
  border-top: none;
  border-radius: 0 0 7px 7px;
}

.stop-could {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(52, 216, 255, 0.07);
  border: 1px solid rgba(52, 216, 255, 0.25);
}
.stop-could p { margin: 0; }

.stop-try { margin-top: 16px; }
.try-label {
  margin: 0 0 8px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.idemo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--edge);
  background: rgba(7, 11, 32, 0.75);
  color: #dff4ff;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
}
.idemo-btn.primary {
  color: #04101f;
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 22px rgba(52, 216, 255, 0.4);
}
.idemo-btn.ghost { background: transparent; }
.end-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- the in-place page (stop 2) ---- */
.stop-page {
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid rgba(52, 216, 255, 0.3);
}
.stop-page.as-overlay {
  position: fixed;
  z-index: 80;
  inset: calc(64px + env(safe-area-inset-top, 0px)) 0 0;
  margin: 0;
  border-radius: 22px 22px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px max(18px, 6vw) calc(40px + env(safe-area-inset-bottom, 0px));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(8, 15, 40, 0.96), rgba(5, 9, 26, 0.98));
}
.stop-page.as-overlay > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.steps { margin: 0 0 12px; padding-left: 20px; color: var(--ink-soft); }
.steps li { margin: 8px 0; }
.steps b, .flow b { color: #f2faff; }

/* ---- hotspots ---- */
.hotspots { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.hotspots li { margin: 6px 0; }
.hotspots b { color: #f2faff; display: block; }

.hot-marker {
  position: absolute;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  background: rgba(52, 216, 255, 0.18);
  box-shadow: 0 0 16px rgba(52, 216, 255, 0.5);
  cursor: pointer;
  padding: 0;
}
.hot-marker::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--cyan);
}
.hot-marker.on { border-color: var(--gold); }
.hot-marker.on::after { background: var(--gold); }
.hot-note {
  position: absolute;
  z-index: 3;
  max-width: min(280px, 70vw);
  padding: 10px 13px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--edge);
  font-size: 0.86rem;
  color: #eaf6ff;
}
.hot-note b { display: block; color: var(--gold); }

/* ---- carousels ---- */
.carousel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.carousel figure { margin: 0; }
.carousel img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(52, 216, 255, 0.25);
  display: block;
}
.carousel figcaption {
  margin-top: 7px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.carousel figcaption b { display: block; color: #f2faff; }

.carousel.is-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 4px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.carousel.is-strip > li {
  flex: 0 0 min(330px, 78%);
  scroll-snap-align: start;
}
.carousel-nav { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.carousel-nav button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--edge);
  background: rgba(7, 11, 32, 0.75);
  color: #dff4ff;
  font: inherit;
  cursor: pointer;
}
.carousel-count { font-size: 0.8rem; color: #8fa8d8; }

/* ---- flow steps and recap ---- */
.flow { list-style: none; margin: 0; padding: 0; }
.flow li {
  position: relative;
  padding: 8px 0 8px 26px;
  color: var(--ink-soft);
  border-left: 2px solid rgba(52, 216, 255, 0.3);
  margin-left: 7px;
}
.flow-dot {
  position: absolute;
  left: -7px; top: 16px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(52, 216, 255, 0.6);
}
.recap { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; }
.recap a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(52, 216, 255, 0.35);
  background: rgba(52, 216, 255, 0.08);
  text-decoration: none;
  font-size: 0.86rem;
}

/* ---- lightbox ---- */
.idemo-lb {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px;
  background: rgba(2, 5, 14, 0.93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.idemo-lb.open { display: flex; }
.idemo-lb img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 14px;
  border: 1px solid rgba(52, 216, 255, 0.35);
}
.idemo-lb figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.idemo-lb .lb-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--edge);
  background: rgba(7, 11, 32, 0.85);
  color: #dff4ff;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ---- world mode ---- */
body.is-world .idemo-stops { max-width: none; padding: 0; }
body.is-world .stop {
  display: block;
  border-top: 0;
  /* lead-in and lead-out: the copy rises into the middle of the screen and leaves again
     before the next flight starts, so the stop reads as a page you scroll through */
  padding: 20vh 0 26vh;
  position: relative;
}
body.is-world .hotspots { display: none; }
.idemo-hotlayer { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.idemo-hotlayer > * { pointer-events: auto; }
body.is-world .stop-shot { display: none; }
body.is-world .stop-copy {
  position: relative;
  width: min(46vw, 520px);
  margin-left: max(24px, 4vw);
  padding: 22px 24px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--edge);
  box-shadow: 0 0 40px rgba(3, 8, 20, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
body.is-world .stop.is-near .stop-copy { opacity: 1; transform: none; }
body.is-world .idemo-flight { position: relative; }

.idemo-hint {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fb7d8;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.idemo-hint i {
  width: 20px; height: 30px;
  border-radius: 11px;
  border: 2px solid rgba(190, 220, 255, 0.4);
  position: relative;
}
.idemo-hint i::after {
  content: "";
  position: absolute;
  left: 50%; top: 6px;
  width: 4px; height: 6px;
  border-radius: 2px;
  background: var(--cyan);
  transform: translateX(-50%);
  animation: idemo-wheel 1.7s ease-in-out infinite;
}
@keyframes idemo-wheel {
  0% { opacity: 0; top: 5px; }
  40% { opacity: 1; }
  100% { opacity: 0; top: 15px; }
}

.idemo-next {
  position: fixed;
  z-index: 50;
  right: calc(46px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ---- phones and small screens ---- */
@media (max-width: 860px) {
  .stop { grid-template-columns: 1fr; gap: 16px; }
  .idemo-toc { padding-top: 74px; }
  body.is-world .stop-copy {
    width: auto;
    margin: 0 12px;
    /* the hint and the Next stop button are fixed over the bottom of a phone screen, so
       the panel keeps its last line clear of them */
    padding: 18px 18px calc(74px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px;
  }
  body.is-world .idemo-toc { right: 2px; }
  body.is-world .idemo-toc ol { gap: 8px; }
  .idemo-next { right: 30px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px; }
  .idemo-hint { font-size: 0.68rem; }
  .idemo-hint span { opacity: 0.75; }
  .carousel.is-strip > li { flex-basis: 84%; }
}

@media (hover: hover) {
  .idemo-btn:hover { border-color: var(--cyan); box-shadow: 0 0 18px rgba(52, 216, 255, 0.25); }
  .recap a:hover { background: rgba(52, 216, 255, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .idemo-hint i::after { animation: none; }
  body.is-world .stop-copy { transition: none; }
  .idemo-stage img, .idemo-stage video { transition: none; }
}