/* =========================================================================
   The way home

   Every stage of how a SOLUM comes to be yours, set as the page sets
   everything else: centred over it, the eyebrow, the headline and the
   one line under it (as every section's opening is), and with clear air
   below them the choice of delivery, on the same toggle as the choice of
   model, since this too is a decision rather than a colour. Then the stages in one row
   that runs off the side of the screen — each a mono number, a name and a
   line or two beneath a hairline. Nothing is carded or boxed.

   The row scrolls sideways by trackpad, touch or keys, and by the two
   arrows above it (src/js/ui/journey.js). Beneath it a hairline lights up
   along the stretch that is in view — the house's own detail, the LED
   line at the foot of the wall, used as the way through.

   The first four stages are everyone's. From the fifth on, each delivery
   has its own run of stages, and only the chosen one is in the row
   (src/js/ui/variants.js); they fade in as they are swapped.
   ========================================================================= */
.journey {
  position: relative;
  /* After the floor plan, before My SOLUM: the last choice to make, how
     the house reaches you, before the whole build is shown. My SOLUM's
     own rule (.rule-top) divides the two. */
  padding: var(--section-pad) var(--gutter-safe);
  background: var(--c-black);
}

/* The dividing hairline from the floor plan above. */
.journey::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter-safe);
  right: var(--gutter-safe);
  height: 1px;
  background: var(--c-hairline);
  pointer-events: none;
}

/* ---- What it is ---- */
/* ---- The opening, centred as the choice of model is ----
   The eyebrow, the line, the note and the toggle, one under another. */
.journey .section-head {
  justify-content: center;
  text-align: center;
  /* an eyebrow over its own headline */
  margin-bottom: var(--space-6);
}

.journey__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 50rem;
  margin: 0 auto var(--block-gap);
  text-align: center;
}

/* The headline, in the voice of every section's from here down (My
   SOLUM's, the form's, the questions'): one line of it, at full size. */
.journey__headline,
.mysolum__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-headline);
  line-height: 1.04;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #f4f8fb 0%, #c9d6e0 45%, var(--c-obsidian) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-ink);
  text-wrap: balance;
}

.journey__headline em,
.mysolum__heading em {
  font-style: italic;
}

/* Why there are three, under it: one quiet sentence, as the line under
   each of those headlines is, so the toggle needs no note of its own. */
.journey__why,
.mysolum__under {
  max-width: 40rem;
  margin: var(--space-5) 0 0;
  font-size: var(--fs-headline-line);
  line-height: 1.45;
  color: var(--c-ink-3);
  text-wrap: balance;
}

/* the choice, with clear air above it */
.journey__choose {
  display: grid;
  justify-items: center;
  width: 100%;
  margin-top: var(--block-gap);
}

/* The model's toggle, three across: the lit pill a third wide, and moved
   under whichever option is chosen. */
.journey__toggle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 30rem);
  margin: 0 auto;
}

.journey__toggle .models__option {
  color: var(--c-ink-2);
}

.journey__toggle .models__option.is-selected {
  color: #fff;
}

/* on phones the three names, at the toggle's full tracking, would not fit */
@media (max-width: 39.99rem) {
  .journey__toggle .models__option {
    padding-inline: 0.25rem;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }
}

.journey__toggle::before {
  width: calc((100% - 8px) / 3);
}

/* set for all three, so the model's own rule for Studio cannot move it */
.journey .journey__toggle:has([data-variant="supply"].is-selected)::before {
  translate: 0 0;
}

.journey .journey__toggle:has([data-variant="delivery"].is-selected)::before {
  translate: 100% 0;
}

.journey .journey__toggle:has([data-variant="install"].is-selected)::before {
  translate: 200% 0;
}

/* ---- Above the row: how many stages, and the arrows ---- */
.journey__rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.journey__count {
  display: grid;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-4);
}

.journey__count-n {
  grid-area: 1 / 1;
}

.journey__count-n:not(.is-shown) {
  visibility: hidden;
}

.journey__arrows {
  display: flex;
  gap: var(--space-2);
}

/* small glass rounds, as the day and night thumb is */
.journey__arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  color: var(--c-ink);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
  transition: border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.journey__arrow svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .journey__arrow:not(:disabled):hover {
    border-color: rgb(255 255 255 / 0.4);
  }
}

.journey__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.journey__arrow:focus-visible {
  outline: 1px solid var(--c-led-core);
  outline-offset: 3px;
}

/* nothing to scroll: no arrows */
.journey:not(.is-scrollable) .journey__arrows {
  visibility: hidden;
}

/* ---- The row ----
   Out to the page's edges, so stages pass under the side of the screen
   rather than stopping short at the gutter; it starts and snaps in line
   with everything else. */
.journey__scroller {
  margin-inline: calc(-1 * var(--gutter-safe));
  padding-inline: var(--gutter-safe);
  scroll-padding-inline: var(--gutter-safe);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* stages fade as they pass into the gutter at either side */
  -webkit-mask-image: linear-gradient(90deg,
    transparent, #000 var(--gutter-safe),
    #000 calc(100% - var(--gutter-safe)), transparent);
  mask-image: linear-gradient(90deg,
    transparent, #000 var(--gutter-safe),
    #000 calc(100% - var(--gutter-safe)), transparent);
}

.journey__scroller::-webkit-scrollbar {
  display: none;
}

.journey__scroller:focus-visible {
  outline: 1px solid var(--c-led-core);
  outline-offset: 4px;
}

.journey__steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(14rem, 22vw, 18rem);
  column-gap: clamp(var(--space-7), 5.5vw, 6rem);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each stage takes three rows of the row's grid — the number and any
   tag, the name, the line — so that across every stage the names start
   level, and the lines do too, however many lines a name runs to. */
.journey__steps {
  grid-template-rows: auto auto auto;
  row-gap: 0;
}

.journey__step {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-3) var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-hairline);
  scroll-snap-align: start;
}

.journey__step > .journey__name,
.journey__step > .journey__text {
  grid-column: 1 / -1;
}

/* Every name over two lines, each line its own, so the names sit as an
   even band across the row rather than one line here and two there. */
.journey__step > .journey__name {
  align-self: start;
}

.journey__name span {
  display: block;
  white-space: nowrap;
}

.journey__step > .journey__text {
  align-self: start;
}

/* the other deliveries' stages are out of the row altogether */
.journey__step[data-variant]:not(.is-shown) {
  display: none;
}

.journey__step[data-variant].is-shown {
  animation: journey-in 0.5s ease both;
}

@keyframes journey-in {
  from { opacity: 0; translate: 0.75rem 0; }
  to   { opacity: 1; translate: none; }
}

.journey__num {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  color: var(--c-ink-4);
}

/* Optional, Required, In parallel: beside the number */
.journey__tag {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.journey__tag--required {
  color: var(--c-gold);
}

/* in the face and size of the finishes' key lines */
.journey__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.35;
  color: var(--c-ink);
}

.journey__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--c-ink-3);
  text-wrap: pretty;
}

/* where the paths divide, and where they end: numbered in gold */
.journey__step--fork .journey__num,
.journey__step--last .journey__num {
  color: var(--c-gold);
}

/* ---- Beneath the row: the stretch in view, lit ---- */
.journey__progress {
  --seen: 1;
  --along: 0;
  position: relative;
  height: 1px;
  margin-top: var(--space-6);
  background: var(--c-hairline);
}

.journey__progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--seen) * 100%);
  left: calc(var(--along) * (1 - var(--seen)) * 100%);
  background: var(--c-led);
  box-shadow: 0 0 8px var(--c-led-glow);
}

.journey:not(.is-scrollable) .journey__progress {
  display: none;
}

/* ---- The way to the form, and the small print ---- */
/* the way on, then the small print under it, as the plan closes */
.journey__foot {
  display: grid;
  justify-items: start;
  gap: var(--fine-gap);
  margin-top: var(--block-gap);
}

.journey__enquire {
  margin-top: 0;
}

.journey__disclaimer {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-4);
}

/* =========================================================================
   As a card, with the scenes (scene.js)

   The opening — the eyebrow, the headline and the line under it — is
   lifted out to a stage of its own, centred as the palettes' and the
   floor plan's words are; the rest rises over it on a card, the same
   card as the chooser's (models.css): graphite at the top under a soft
   light, sinking to black, the page's edges and the finish cards'
   rounding, and as tall as they are. Across its head the toggle; then
   the stages, running out to the card's sides; and at its foot the way
   on and the small print. Every inset is a share of the card's width
   (the card is a size container), as the finish cards' are, so the
   children carry them.
   ========================================================================= */
.journey__intro {
  display: grid;
  justify-items: center;
  text-align: center;
}

.journey__intro .section-head {
  justify-content: center;
  text-align: center;
  margin-bottom: var(--space-6);
}

.has-scene .scene--overlay .scene__pin > .journey--card {
  --u: min(1cqw, 1.434vh);
  /* no band over the card: the tray sits in its notch (finish-card.css) */
  --card-top: 0px;
  --card-x: calc(3.9 * var(--u));

  display: flex;
  flex-direction: column;
  isolation: isolate;
  container-type: inline-size;
  background: none;
}

.has-scene .journey--card::before {
  top: var(--card-top);
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  z-index: -1;
  border-radius: var(--card-radius);
  clip-path: var(--card-notch-clip);
  /* brighter than the chooser's, and with more play: a broad light from
     the upper left as the finish cards have, a brighter glow behind the
     toggle, a cooler one under the stages to the right, and the whole
     sinking to black only near its foot */
  background:
    var(--frost-sheen),
    linear-gradient(180deg, transparent 46%, rgb(0 0 0 / 0.58) 74%, rgb(0 0 0 / 0.95) 96%),
    var(--frost-grain),
    radial-gradient(34cqw 12cqw at 50% 9cqw,
      rgb(236 242 247 / 0.16),
      rgb(236 242 247 / 0.05) 55%,
      transparent),
    radial-gradient(46cqw 20cqw at 74% 30cqw,
      rgb(150 172 192 / 0.13),
      rgb(150 172 192 / 0.04) 60%,
      transparent),
    radial-gradient(150cqw 46cqw at 22% 0,
      rgb(92 98 106 / 0.75),
      rgb(60 65 71 / 0.35) 40%,
      transparent 75%),
    linear-gradient(180deg, rgb(42 45 49 / 0.62), rgb(27 29 32 / 0.6) 55%),
    rgb(0 0 0 / 0.42);
  /* frosted, as the finish cards are (tokens.css) */
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
  box-shadow: var(--frost-rim);
}

/* The toggle midway between the card's top edge and the row's count: the
   card's spare height is shared equally over the toggle, under it and
   over the foot (auto margins), and the toggle's own air is the same
   above as below it, so it sits in the middle of its stretch. */
.has-scene .journey--card .journey__top {
  margin: auto var(--card-x);
  /* less under it by the count's drop in its row: the count is centred
     on the arrows beside it, which stand taller than its line */
  /* (and its recess kept clear of the notch the tray sits in, with a
     little air: my-solum.js, finish-card.css) */
  padding: max(calc(var(--card-top) + 2.5 * var(--u)),
      calc(var(--card-top) + var(--notch-d, 0px) + max(10px, 1.15 * var(--u)) + 0.5rem))
    0 max(0px, calc(2.5 * var(--u) - 0.75rem));
  max-width: none;
}

/* Set into the card: the glass bar sits in a cutout in the surface, a
   pill of black a little larger than it, shaded from above as a recess
   is, with a lip of light along its lower edge and the card's shadow
   falling below it. */
.has-scene .journey--card .journey__choose {
  --well: max(10px, calc(1.15 * var(--u)));
  position: relative;
  isolation: isolate;
  margin-top: 0;
}

.has-scene .journey--card .journey__choose::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--well));
  bottom: calc(-1 * var(--well));
  left: 50%;
  z-index: -1;
  width: calc(min(100%, 30rem) + 2 * var(--well));
  translate: -50% 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #000 0%, #050606 60%, #0b0c0d 100%);
  box-shadow:
    inset 0 4px 10px rgb(0 0 0 / 0.95),
    inset 0 -1px 0 rgb(255 255 255 / 0.07),
    0 1px 0 rgb(255 255 255 / 0.03),
    0 22px 40px -18px rgb(0 0 0 / 0.95);
  pointer-events: none;
}

.has-scene .journey--card .journey__rail,
.has-scene .journey--card .journey__progress {
  margin-inline: var(--card-x);
}



/* the stages run out to the card's sides, and fade as they pass under them */
.has-scene .journey--card .journey__scroller {
  margin-inline: 0;
  padding-inline: var(--card-x);
  scroll-padding-inline: var(--card-x);
  -webkit-mask-image: linear-gradient(90deg,
    transparent, #000 var(--card-x),
    #000 calc(100% - var(--card-x)), transparent);
  mask-image: linear-gradient(90deg,
    transparent, #000 var(--card-x),
    #000 calc(100% - var(--card-x)), transparent);
}

/* The stages grow with the card, as the finish cards' type does, so on a
   large screen they are not left small in the middle of it: never under
   the page's own sizes, larger as the card is. */
.has-scene .journey--card .journey__steps {
  grid-auto-columns: max(clamp(14rem, 22vw, 18rem), calc(22 * var(--u)));
  column-gap: max(clamp(var(--space-7), 5.5vw, 6rem), calc(5 * var(--u)));
}

.has-scene .journey--card .journey__name {
  font-size: max(clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem), calc(1.6 * var(--u)));
}

.has-scene .journey--card .journey__text {
  font-size: max(var(--fs-small), calc(1.1 * var(--u)));
}

.has-scene .journey--card .journey__num,
.has-scene .journey--card .journey__tag,
.has-scene .journey--card .journey__count {
  font-size: max(var(--fs-micro), calc(0.9 * var(--u)));
}

/* the way on and the small print at the card's foot */
.has-scene .journey--card .journey__foot {
  margin: auto var(--card-x) calc(3.4 * var(--u));
  padding-top: calc(4 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  .journey__step[data-variant].is-shown {
    animation: none;
  }
}