/* ENVOY — tour.css
   the sticky 360° board tour and its cards

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map. */

/* ------------------------------------------------------------------ tour */

/* The stage is one screen tall and in the flow, followed by the .tour-hold
   pause and four .tour-step spacers — five and a half screens of section, of
   which the stage can travel four and a half. The pause is taken off the front
   and the four gaps between the five panels share the rest, so the panels are
   still exactly one screen apart; lengthening the hold pushes them all down
   the page together rather than crowding them.

   It is written this way rather than as a stage overlaid on five spacers with
   `margin-bottom: -100vh`, which gives identical heights and looks equivalent
   but is not. A negative bottom margin equal to the height collapses the
   sticky element's *margin box* to nothing, and the margin box is what the
   containing block constrains — so the stage never got pushed out at the foot
   of the section and stayed pinned to the viewport for the rest of the page,
   carrying the heading and the cards down over whatever came next. */
.tour {
  position: relative;
  z-index: 1;
  background: #000;
  /* The model's canvas sizes itself late, inside a sticky box. Left alone the
     browser re-anchors the scroll position when that happens and shunts the
     reader down the page. */
  overflow-anchor: none;
}

.tour-step { height: 100vh; }

/* The beat before the turn. The reader arrives out of the last rig in "Why
   Envoy?", where four panels have been changing under them the whole way down,
   and the board would otherwise be turning before they had read the two words
   telling them why it is turning. This much scroll is spent holding it dead
   still under its own title instead, and the tour proper starts at the far
   side of it.

   Half a screen: long enough to be a pause rather than a hitch, short enough
   that nobody sits wondering whether the page has stopped working.

   This is the only place the length is stated. js/tour.js measures the spacer
   and spreads the five panels over whatever runway is left, so the pause is
   lengthened or shortened here and nothing else has to be told. Panel stepping
   is off for its duration — it is not part of the stepped range, so the wheel
   is left alone and the reader scrolls through the pause at their own speed,
   which is the only way a pause can be one. */
.tour-hold { height: 50vh; }

.tour-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  overflow-anchor: none;
  z-index: 2;
}

/* ---- the plate ---- */

/* Black and burgundy, waving, generated by tools/gradient-gif.py. It sits at
   the bottom of the stage's stacking order: the board is z-index 1 above it and
   the heading and cards are 3, so it is behind everything without any of them
   having to know it exists.

   `cover` rather than `100% 100%`: the plate is wider than any viewport it will
   land in, and stretching one aspect into another would pull the sweeps flat on
   a tall phone. Cropping the sides of an abstract loses nothing.

   The black underneath is not belt-and-braces. The GIF is a megabyte and the
   section is five screens of dark; until it has arrived, this is what the
   heading is read against, and #000 is what the sections either side are
   painted anyway, so the arrival is a fade-up rather than a change of scene. */
.tour-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000 url(../assets/tour-plate.gif) center / cover no-repeat;
  /* Decoration should not be in the way of anything, the same reason
     #backdrop and the board itself are let through. */
  pointer-events: none;
}

/* ---- heading ---- */

.tour-head {
  position: absolute;
  top: calc(var(--nav-h) + clamp(18px, 5vh, 54px));
  left: clamp(16px, 5vw, 74px);
  z-index: 3;
  pointer-events: none;
}

.tour-eyebrow {
  margin: 0 0 clamp(6px, 1vh, 12px);
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: clamp(9px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--red);
}

.tour-title {
  margin: 0;
  font-family: "Cormorant Garamond";
  font-size: clamp(38px, 6.2vw, 96px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---- the board ---- */

#tour-mv {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62vw, 760px);
  height: 78vh;
  /* --tx is written by js/tour.js; the -50% keeps it centred as it travels */
  transform: translate(calc(-50% + var(--tx, 0vw)), -50%);
  --poster-color: transparent;
  background: transparent;
  z-index: 1;
  /* model-viewer eats wheel events over its own box even with zoom disabled,
     which traps the reader in the section whenever the cursor happens to be
     over the board. Nothing here is meant to be handled — the scroll drives
     it — so let every pointer event through to the page. */
  pointer-events: none;
}

/* ---- fact cards ---- */

.tour-cards {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.tour-card {
  position: absolute;
  width: min(25rem, 42vw);
  padding: clamp(18px, 2vw, 30px) clamp(20px, 2.2vw, 34px);
  border-left: 2px solid var(--red);
  background: linear-gradient(to right, rgba(10, 0, 0, 0.92), rgba(10, 0, 0, 0.66));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.62s ease, transform 0.62s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.tour-card.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* Board starts left and travels right, so the early cards sit right of it and
   the late ones sit left.

   The heading sits top-left and never goes away, so anything else on that side
   has to start below it. --head-clear is the floor of that block — nav bar,
   the eyebrow, and two lines of a heading that is sized in vw — and the
   left-hand cards hang off it rather than off numbers picked by eye, so they
   cannot drift back under the title when the type rescales. The right-hand
   cards are clear of it by being on the other side. */
:root { --head-clear: 38vh; }

.tour-card[data-step="0"] { right: 6vw; top: 22vh; }
.tour-card[data-step="1"] { right: 8vw; bottom: 16vh; }
.tour-card[data-step="2"] { left: 6vw;  top: var(--head-clear); }
.tour-card[data-step="3"] { left: 7vw;  top: calc(var(--head-clear) + 12vh); }
.tour-card[data-step="4"] { left: 6vw;  bottom: 14vh; }

.tour-ref {
  display: inline-block;
  margin-bottom: clamp(8px, 1vh, 14px);
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--red);
}

.tour-card h3 {
  margin: 0 0 clamp(6px, 0.9vh, 12px);
  font-family: "Bodoni Moda", "Bodoni MT", Didot, serif;
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ink);
}

.tour-card p {
  margin: 0;
  font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(243, 228, 226, 0.82);
}

.tour-card p strong {
  font-weight: 600;
  color: var(--red-bright);
}

/* ---- progress ---- */

.tour-progress {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 6vh, 58px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  width: min(520px, 72vw);
  transform: translateX(-50%);
}

.tour-bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(239, 32, 21, 0.28);
}

.tour-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: var(--red);
  /* No transition: --p is now written continuously from the scroll position,
     so an easing here would only ever trail the bar behind the page. */
}

.tour-num {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(243, 228, 226, 0.6);
}