/* J1, the journey flythrough.
   Two layouts out of one piece of markup. In 3D mode the section is a tall
   scroll track, the canvas is the one fixed full-viewport layer behind
   everything, and the step list rides over it in a sticky column. In flat mode
   the same list becomes six drawn cards stacked down the page. Nothing but the
   root class changes between them. */

.jfly { position: relative; z-index: 0; }

/* ------------------------------------------------------------------ the sky
   One fixed canvas, the way vectrfl.com does it: no pinning, ordinary tall
   sections scroll over it. It only pays for itself while the section is in
   view, so it fades and stops rendering outside it. */
.jfly__sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms var(--e-out), visibility 0s linear 700ms;
}
.jfly__sky.is-live {
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms var(--e-out), visibility 0s;
}
.jfly--flat .jfly__sky { display: none; }
.jfly__canvas { width: 100%; height: 100%; }

/* The clap through the lens, and the flash on the slate at step 05. */
.jfly__flash {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  will-change: opacity;
}

/* ------------------------------------------------------- 3D mode: the track */
.jfly--3d { height: var(--jfly-h, 770vh); }

.jfly--3d .jfly__hold {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-content: center;
  z-index: 2;
  pointer-events: none;
}
.jfly--3d .jfly__panel {
  width: min(100% - var(--gut) * 2, var(--page));
  margin-inline: auto;
  pointer-events: auto;
}
.jfly--3d .jfly__col { max-width: 44ch; }
.jfly--3d .jfly__title { font-size: var(--t-2xl); max-width: 22ch; }
.jfly--3d .jfly__draw { display: none; }

/* The list sits on the world, so the left of the screen is darkened under it.
   The ground is the whole side of the viewport and fades out before it ends,
   so there is no edge anywhere for the eye to catch. */
.jfly--3d .jfly__hold::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: min(66%, 58rem);
  background: linear-gradient(90deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 92%, transparent) 38%,
    transparent 100%);
}
.jfly--3d .jfly__panel { position: relative; }

/* ------------------------------------------------------------- the headline */
.jfly__title { font-size: var(--t-3xl); max-width: 26ch; }
.jfly__panel > .jfly__title { margin-bottom: clamp(1.25rem, 3vh, 2.25rem); }

/* -------------------------------------------------------------- the rail
   The same glowing line that traces the route in 3D, as the progress of the
   list. It is the one thing that ties the column to the world behind it. */
.jfly__list { position: relative; }
.jfly--3d .jfly__list { padding-left: 1.1rem; }
.jfly--3d .jfly__list::before,
.jfly--3d .jfly__list::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  border-radius: 2px;
}
.jfly--3d .jfly__list::before { bottom: 0; background: var(--line); }
.jfly--3d .jfly__list::after {
  height: calc(var(--jfly-p, 0) * 100%);
  background: linear-gradient(var(--teal), var(--teal-tint));
  box-shadow: 0 0 10px color-mix(in srgb, var(--teal-tint) 55%, transparent);
}

/* -------------------------------------------------------------- the steps */
.jfly__steps { display: grid; }
.jfly--3d .jfly__step + .jfly__step { border-top: 1px solid var(--line); }

.jfly__btn {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  text-align: start;
  padding: 0.62rem 0;
  border-radius: var(--r-sm);
}
.jfly__n {
  flex: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  transition: color var(--d) var(--e-out);
}
.jfly__ttl {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--muted);
  transition: color var(--d) var(--e-out);
}
.jfly__btn:hover .jfly__ttl { color: var(--text); }

.jfly__step.is-on .jfly__n { color: var(--accent); }
.jfly__step.is-on .jfly__ttl { color: var(--text); }

/* grid-template-rows interpolates, so the body opens to its own height with
   no measured max-height to go stale. */
.jfly__fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--e-out);
}
.jfly__body {
  min-height: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--t-sm);
  opacity: 0;
  transition: opacity 300ms var(--e-out);
}
.jfly__body span { display: block; padding-bottom: 1rem; max-width: 42ch; }
.jfly__step.is-on .jfly__fold { grid-template-rows: 1fr; }
.jfly__step.is-on .jfly__body { opacity: 1; transition-delay: 90ms; }

/* ------------------------------------------------------- flat mode: layout */
.jfly--flat { padding-block: var(--sec); }
.jfly--flat .jfly__panel { width: min(100% - var(--gut) * 2, var(--page)); margin-inline: auto; }
.jfly--flat .jfly__steps { gap: clamp(3.5rem, 8vw, 6rem); }
.jfly--flat .jfly__btn { cursor: default; padding-top: 0; }
.jfly--flat .jfly__n { color: var(--accent); }
.jfly--flat .jfly__ttl { color: var(--text); font-size: var(--t-xl); }
.jfly--flat .jfly__fold { grid-template-rows: 1fr; }
.jfly--flat .jfly__body { opacity: 1; font-size: var(--t-base); }
.jfly--flat .jfly__body span { padding-bottom: 0; }

.jfly--flat .jfly__step {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  grid-template-rows: auto auto;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-content: center;
}
/* Three children, two columns: without placing them the browser wraps the
   drawing under the heading and the body lands beside it. */
.jfly--flat .jfly__step > h3 { grid-column: 1; grid-row: 1; align-self: end; }
.jfly--flat .jfly__fold { grid-column: 1; grid-row: 2; align-self: start; padding-top: 0.9rem; }
.jfly--flat .jfly__draw { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* The drawings alternate sides so six cards down a page do not march. */
.jfly--flat .jfly__step:nth-child(even) > h3,
.jfly--flat .jfly__step:nth-child(even) .jfly__fold { grid-column: 2; }
.jfly--flat .jfly__step:nth-child(even) .jfly__draw { grid-column: 1; }

/* -------------------------------------------------------- flat mode: drawn
   Six drawings, one argument each, in the four colours. Every one of them is
   the same composition: the raw thing, the teal pass going over it, and the
   organised thing the pass leaves behind. */
.jfly__draw {
  margin: 0;
  border-radius: var(--r);
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.jfly__draw svg { width: 100%; height: auto; }

.jfly__draw .f-paper { fill: var(--paper); }
.jfly__draw .f-teal { fill: var(--teal); }
.jfly__draw .f-deep { fill: var(--teal-deep); }
.jfly__draw .f-tint { fill: var(--teal-tint); }
.jfly__draw .f-sig { fill: var(--signal); }
.jfly__draw .f-dark { fill: var(--surface); }
.jfly__draw .f-dim { fill: var(--raised-2); }
.jfly__draw .f-ink { fill: var(--ink); }

/* The four tag tones, and the pass. Teal tint and paper are the same white in
   the mono brand, so the ramp is built off the accent and a mix of ink and
   paper: four values that stay four, and a pass that is never white on white. */
.jfly__draw .f-pass { fill: var(--accent); }
.jfly__draw .f-c1 { fill: var(--teal); }
.jfly__draw .f-c2 { fill: var(--accent); }
.jfly__draw .f-c3 { fill: var(--paper); }
.jfly__draw .f-c4 { fill: color-mix(in srgb, var(--ink) 58%, var(--paper)); }
.jfly__draw .s-tint { stroke: var(--teal-tint); fill: none; stroke-width: 1.5; }
.jfly__draw .s-paper { stroke: var(--paper); fill: none; }
.jfly__draw .s-ink { stroke: var(--ink); fill: none; stroke-width: 1.4; }
.jfly__draw .s-line { stroke: var(--line-2); fill: none; stroke-width: 1.5; }
.jfly__draw .f-ground { fill: var(--bg-deep); }
.jfly__draw .before { opacity: 0.4; }

/* The numbers a crew reads off a board: mono for the unit, display for the
   count, because step 03 is about the day count coming down. */
.jfly__draw text { font-variant-numeric: tabular-nums; }
.jfly__draw .jnum--was {
  font-family: var(--mono); font-weight: 500; font-size: 22px; fill: var(--faint);
}
.jfly__draw .jnum--is {
  font-family: var(--display); font-weight: 900; font-size: 48px; fill: var(--paper);
}
.jfly__draw .junit {
  font-family: var(--mono); font-weight: 500; font-size: 15px;
  letter-spacing: 1.4px; fill: var(--teal-tint);
}

/* One pass per drawing, played once as the card arrives. */
@media (prefers-reduced-motion: no-preference) {
  .jfly--flat .jfly__draw .pass { opacity: 0; }
  .jfly--flat .jfly__draw .after > * { opacity: 0; }
  .jfly--flat .jfly__step.is-near .jfly__draw .pass {
    animation: jfly-sweep 1100ms var(--e-out) both;
  }
  .jfly--flat .jfly__step.is-near .jfly__draw .after > * {
    animation: jfly-settle 520ms var(--e-out) both;
  }
  .jfly--flat .jfly__step.is-near .jfly__draw .after > *:nth-child(1) { animation-delay: 240ms; }
  .jfly--flat .jfly__step.is-near .jfly__draw .after > *:nth-child(2) { animation-delay: 310ms; }
  .jfly--flat .jfly__step.is-near .jfly__draw .after > *:nth-child(3) { animation-delay: 380ms; }
  .jfly--flat .jfly__step.is-near .jfly__draw .after > *:nth-child(4) { animation-delay: 450ms; }
  .jfly--flat .jfly__step.is-near .jfly__draw .after > *:nth-child(5) { animation-delay: 520ms; }
  .jfly--flat .jfly__step.is-near .jfly__draw .after > *:nth-child(6) { animation-delay: 590ms; }
  .jfly--flat .jfly__step.is-near .jfly__draw .after > *:nth-child(n+7) { animation-delay: 650ms; }
}

@keyframes jfly-sweep {
  0% { transform: translateY(-74px); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
/* Opacity only. A CSS transform here would override the SVG transform
   attribute that places each pile, tick and crew mark, and collapse the lot
   onto the origin. */
@keyframes jfly-settle {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------------------------------------------------------ phone
   The canvas gets simpler and quieter and the steps become the main event. */
@media (max-width: 860px) {
  .jfly--3d { --jfly-h: 640vh; }
  .jfly--3d .jfly__sky.is-live { opacity: 0.72; }
  .jfly--3d .jfly__col { max-width: none; }
  .jfly--3d .jfly__hold::before {
    inset: 0;
    width: auto;
    background: linear-gradient(color-mix(in srgb, var(--bg) 30%, transparent) 0%,
                                color-mix(in srgb, var(--bg) 74%, transparent) 26%,
                                color-mix(in srgb, var(--bg) 82%, transparent) 100%);
  }
  .jfly--3d .jfly__title { font-size: var(--t-xl); max-width: none; }
  .jfly--3d .jfly__ttl { font-size: var(--t-base); }
  /* One column, drawing on top. The desktop placement has to be unset here or
     its second column survives and squeezes the copy to one word a line. */
  .jfly--flat .jfly__step { grid-template-columns: minmax(0, 1fr); }
  .jfly--flat .jfly__step > h3,
  .jfly--flat .jfly__step .jfly__fold,
  .jfly--flat .jfly__step .jfly__draw,
  .jfly--flat .jfly__step:nth-child(even) > h3,
  .jfly--flat .jfly__step:nth-child(even) .jfly__fold,
  .jfly--flat .jfly__step:nth-child(even) .jfly__draw { grid-column: 1; }
  .jfly--flat .jfly__draw { grid-row: 1; margin-bottom: 1.4rem; }
  .jfly--flat .jfly__step > h3 { grid-row: 2; }
  .jfly--flat .jfly__fold { grid-row: 3; padding-top: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jfly__fold { transition: none; }
  .jfly__body { transition: none; }
}