/* ---------- The stage (html.stage-on: motion allowed, set in <head>; js/stage.js) ----------
   The shell is the viewport: the one nav above one stage, fixed, so the document itself has no height to scroll.
   Every chapter from About to Contact is a view filling the stage; only the active one is shown (and, while the view
   changes, the one it changes from). A view taller than the screen scrolls inside itself. Without .stage-on the
   chapters are laid out as one document, as before. */

.stage-on .site-shell {
  position: fixed;
  inset: 0;
  z-index: 1; /* under the hero sheet (.hero-pin, 50) while it turns away */
}
.stage-on .site-nav { z-index: 10; } /* above the stage */
.stage-on .stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-white);
}
.stage-on .view {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; /* no view is narrowed by a scrollbar, so nothing shifts from one view to the next */
}
.stage-on .view::-webkit-scrollbar { display: none; }
/* A view not shown is still laid out (the chapters measure themselves), but nothing of it can show: opacity too,
   since a part set visibility: visible (Sea Freight's chosen cargo) would show through visibility alone. */
.stage-on .view:not(.is-active):not(.is-shown) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.stage-on .view:focus { outline: none; }

/* The full-screen chapters fill the stage exactly; Freight at least fills it (on phones it is taller, and scrolls). */
.stage-on .svx-stage,
.stage-on .cc-stage { height: 100%; }
.stage-on .sf-stage { min-height: 100%; }

/* Our Services under the Customs chapter as it opens: the navy that spreads through its sky. */
.stage-on .svx.svx--under { background: linear-gradient(180deg, #0c1828 0%, #0b1624 60%, #0a1422 100%); }
/* The Customs chapter opening over Our Services: see-through until it has arrived. */
.stage-on .cc.cc-arriving,
.stage-on .cc.cc-arriving .cc-stage { background: transparent; }

/* Freight as it changes over with another view (Our Services, or Customs): see-through, so its own sky can come in
   and go (js/services-intro.js, js/customs.js). */
.stage-on .sf.is-arriving,
.stage-on .sf.is-crossing { background: transparent; }
/* Why Choose Clarion over Freight while the camera closes in on the container (js/why.js): see-through, until its own
   air has come in. */
.stage-on .why.is-arriving { background: transparent; }

/* Contact fills the stage (on phones it is taller, and scrolls). Coming in over Global Reach it is see-through, so the
   world beneath can close in on Dar es Salaam and its own air comes in last (js/contact.js). */
.stage-on .contact-stage { min-height: 100%; }
.stage-on .contact.is-arriving { background: transparent; }