/* =========================================================================
   Troutwood — homepage
   Additive on top of tw-system.css. The hero film, and nothing else yet.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. The journey film

   Copy centred on top, the whole Troutwood loop under it: an advisor in the
   Enterprise Console spots a low shield, reaches out, the guidance lands in
   the app, the person acts, and the shield rises on both screens. The motion
   lives in tw-journey-film.js; this is the stage it plays on.

   Built like the Meet Finn film. The stage is a fixed 1600x900 canvas,
   centred in the film and scaled to the largest size that fits its middle
   1300 units; every position inside it is set from the script in those
   units, so the geometry below is written in them too: px here means stage
   units, not screen pixels. --film-scale is the ratio, written by the script
   whenever the film resizes. The 0.45 fallback is what a reader without JS
   sees: the film's first frame, the console on the participant list.

   Inside each screen the units change again, to that screen's own: the
   console's overlays are in its 1440x900 CSS space and the app's in its
   750x1624 export space, so they can be checked against the captures in
   www/img/journey-film/ directly.
   ------------------------------------------------------------------------- */

.journey-film {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.journey-film__stage {
  position: relative;
  aspect-ratio: 13 / 9;
  max-height: 80svh;
  overflow: hidden;
}

/* The stacked hero: centred copy, then the film under it at a generous,
   fixed size. The film is not fitted to what is left of the viewport: with
   this much copy above it that left it a thumbnail. Instead it starts about
   two thirds of the way down the first screen and runs past the fold, and the
   bottom of the stage fades into the field, so the cut reads as an invitation
   to scroll rather than a crop.

   A faint sage glow sits behind it, so the screens sit in the page rather
   than on it; the screens' own drop shadows are kept soft for the same
   reason (see .journey-film__console and .journey-film__phone).

   Under 62rem the film keeps its own 13:9 box under the copy, as before. */
.hero--stacked .journey-film {
  position: relative;
  isolation: isolate;
}

.hero--stacked .journey-film::before {
  content: '';
  position: absolute;
  inset: -8% -6% 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 55% 50% at 50% 48%,
    rgba(103, 188, 124, 0.16),
    rgba(103, 188, 124, 0.05) 55%,
    transparent 75%
  );
  pointer-events: none;
}

@media (min-width: 62rem) {
  .hero--stacked {
    align-items: start;
    padding-bottom: clamp(2rem, 5svh, 3.5rem);
  }

  /* Two lines rather than three: a step under the lead size, on a slightly
     wider measure, so it sits under the headline instead of competing with
     it. */
  .hero--stacked .hero__sub {
    max-width: 46rem;
    font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.25rem);
  }

  /* Held under the container's full measure so the film does not outweigh
     the copy; centred, as it was at full width. */
  .hero--stacked .journey-film {
    max-width: 60rem;
    margin-top: clamp(2rem, 5svh, 3.25rem);
    margin-inline: auto;
  }

  .hero--stacked .journey-film__stage {
    max-height: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, #000 82%, transparent);
  }
}

.journey-film__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1600px;
  height: 900px;
  transform: translate(-50%, -50%) scale(var(--film-scale, 0.45));
}

/* Hidden until the script places them, so nothing flashes at its CSS
   position before the first frame. The console and its tag are the
   exception: they are the first frame. */
.journey-film__canvas > * {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.journey-film__canvas > [data-film='console'],
.journey-film__canvas > [data-film='tag-console'] {
  visibility: visible;
}

/* A label over each screen. The anchor is a point at the screen's top-left
   corner; the text sits just above it. */
.journey-film__tag {
  width: 0;
  height: 0;
}

.journey-film__tag p {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
}

.journey-film__tag p::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sage-bright);
}

/* The console's dot takes the sky accent. */
.journey-film__canvas > [data-film='tag-console'] p::before {
  background: var(--sky);
}

/* The phone's tag, over its top-left corner. */
.journey-film__canvas > [data-film='tag-phone'] {
  left: 904px;
  top: 57px;
}

/* ---- The console ----

   A 1180-wide window centred on the stage: a 34-unit title bar over a
   1180x737.5 viewport, which the capture's 1440x900 fills at zoom 1. The
   script scales the plate inside the viewport to push in on it, so this
   default transform is zoom 1. */
.journey-film__console {
  left: 210px;
  top: 64.25px;
  width: 1180px;
  height: 771.5px;
  overflow: hidden;
  border-radius: 18px;
  background: #ebf1f4;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px rgba(0, 0, 0, 0.26);
}

.journey-film__chrome {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding-left: 18px;
  background: #0e2216;
}

.journey-film__chrome span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.journey-film__chrome p {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 300px;
  margin-left: -150px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

.journey-film__viewport {
  position: absolute;
  top: 34px;
  left: 0;
  width: 1180px;
  height: 737.5px;
  overflow: hidden;
}

.journey-film__plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  transform: scale(0.819444);
  transform-origin: 0 0;
}

.journey-film__plate > * {
  position: absolute;
  opacity: 0;
}

.journey-film__plate > [data-film^='page-'] {
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
}

.journey-film__plate > [data-film='page-list'] {
  opacity: 1;
}

/* Diana's row, and the 65% in it. */
.journey-film__row {
  left: 310px;
  top: 478px;
  width: 1080px;
  height: 45px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.09);
}

.journey-film__cell {
  left: 852px;
  top: 480px;
  width: 88px;
  height: 41px;
  border: 3px solid #f59e0b;
  border-radius: 9px;
  box-shadow: 0 0 0 var(--halo, 0px) rgba(245, 158, 11, 0.22);
}

/* Her yellow Adequacy shield, asking to be looked at. */
.journey-film__alert {
  left: 401px;
  top: 211px;
  width: 64px;
  height: 64px;
  border: 3px solid #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.18);
}

/* The message. Grows out of its top-right corner, under the button that
   opened it. Written in the console's own type and colours. */
.journey-film__compose {
  left: 880px;
  top: 132px;
  width: 536px;
  height: 300px;
  border: 1px solid #e3e8ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  color: #111827;
  font-size: 14px;
  transform-origin: 100% 0;
}

.journey-film__compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  font-size: 17px;
  font-weight: 700;
}

.journey-film__compose-head span {
  color: #9aa3ae;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}

.journey-film__compose-to {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef0f3;
  color: #6b7280;
  font-size: 13px;
}

.journey-film__compose-to b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  background: #f1f5f4;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
}

.journey-film__compose-to i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2f6f4a;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.journey-film__compose-body {
  margin: 14px 22px 0;
  font-size: 15.5px;
  line-height: 24px;
  color: #1f2937;
}

/* The caret, while the message is being written. */
.journey-film__compose.is-typing .journey-film__compose-body::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 1px;
  vertical-align: -3px;
  background: #5f8ee8;
}

.journey-film__send {
  position: absolute;
  right: 22px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 96px;
  height: 38px;
  border-radius: 8px;
  background: #5f8ee8;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.journey-film__send.is-sent {
  background: #21973f;
}

.journey-film__send .is-after,
.journey-film__send.is-sent .is-before {
  display: none;
}

.journey-film__send.is-sent .is-after {
  display: inline;
}

/* Progress, in the console: the green shield over the yellow one, the score
   under it, and the plan chip. Each covers exactly what it replaces. */
.journey-film__shield {
  left: 415px;
  top: 225px;
  width: 36px;
  height: 36px;
}

.journey-film__score {
  left: 410px;
  top: 263px;
  width: 46px;
  height: 24px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #21973f;
  font-size: 17px;
  font-weight: 700;
}

.journey-film__chip {
  left: 885px;
  top: 224px;
  width: 96px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #b9e3c6;
  border-radius: 12px;
  background: #e9f6ee;
  color: #1e7b3c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-film__chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #21973f;
}

/* ---- The phone ----

   A handset drawn here around the app's raw exports: 340x736 of screen in an
   11-unit bezel, centred on (1085, 450). The app plate is the exports'
   750x1624, scaled to the screen. */
.journey-film__phone {
  left: 904px;
  top: 71px;
  width: 362px;
  height: 758.2px;
  padding: 11px;
  border-radius: 56px;
  background: #050a07;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.28);
}

.journey-film__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 45px;
  background: #0c1f14;
}

.journey-film__app {
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 1624px;
  transform: scale(0.453333);
  transform-origin: 0 0;
}

.journey-film__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateX(100%);
}

.journey-film__layer[data-film='app-team'] {
  transform: none;
}

.journey-film__layer > img {
  display: block;
  width: 750px;
  height: 1624px;
}

.journey-film__layer > :not(img),
.journey-film__banner {
  position: absolute;
  opacity: 0;
}

/* The advisor's message, as a notification. */
.journey-film__banner {
  left: 20px;
  top: 24px;
  width: 710px;
  display: flex;
  gap: 22px;
  padding: 26px 28px;
  border-radius: 40px;
  background: rgba(246, 248, 246, 0.97);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  color: #0b1a11;
  transform-origin: 50% 0;
}

.journey-film__banner img {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 20px;
}

.journey-film__banner-title {
  display: flex;
  justify-content: space-between;
  font-size: 26px;
  font-weight: 600;
}

.journey-film__banner-title span {
  font-weight: 400;
  color: #6b7570;
}

.journey-film__banner-msg {
  margin-top: 4px;
  font-size: 29px;
  line-height: 1.32;
}

/* Dollar per Day's Apply, applied. */
.journey-film__applied {
  left: 159px;
  top: 570px;
  width: 236px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  background: #43a35c;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
}

/* The Adequacy shield on her plan: the ring that asks, then the green shield
   with the needs-attention dot painted out from under it, and the headline
   over the shields, from four strong to five. The patches are the card's
   own colour, sampled from the export. */
.journey-film__app-alert {
  left: 320px;
  top: 641px;
  width: 110px;
  height: 110px;
  border: 5px solid #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(245, 158, 11, 0.18);
}

.journey-film__app-shield {
  left: 323px;
  top: 644px;
  width: 104px;
  height: 104px;
}

.journey-film__app-shield span {
  position: absolute;
  left: 78px;
  top: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #173821;
}

.journey-film__app-shield img {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 84px;
  height: 84px;
}

.journey-film__app-strong {
  left: 50px;
  top: 584px;
  width: 420px;
  height: 44px;
  padding-left: 8px;
  background: #173821;
  color: #fff;
  font-size: 31px;
  font-weight: 500;
  line-height: 44px;
}

/* ---- Between the screens ---- */

/* The thread: one bright point with a short tail, carrying the message out
   and the result back. */
.journey-film__pulse {
  left: -11px;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c9f2d5;
  box-shadow: 0 0 0 6px rgba(143, 217, 163, 0.35), 0 0 36px 10px rgba(143, 217, 163, 0.55);
}

/* The arrow's tip is at (2, 2) in its own box. */
.journey-film__cursor {
  left: -2.8px;
  top: -2.8px;
  width: 39px;
  height: 56px;
  transform-origin: 2.8px 2.8px;
}

/* A tap or a click, and a shield turning green: one ring each, centred on
   the point. */
.journey-film__ring span {
  position: absolute;
  left: -45px;
  top: -45px;
  width: 90px;
  height: 90px;
  border: 4px solid #fff;
  border-radius: 50%;
}

.journey-film__ring--burst span {
  border-color: var(--sage-bright);
  border-width: 5px;
}

/* ---- The chapters ----

   The four steps of the loop, the current one lit and filling as it plays,
   and a pause. They only mean something once the script is running, so
   without it they are not shown. */
.journey-film__bar {
  display: none;
}

/* Under the film. Centred on it, since it labels the film and not the
   copy. */
.journey-film.is-live .journey-film__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
}

.journey-film__chapters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
}

/* One progress bar across all four names rather than one under each: a faint
   track the full width of the row, and a fill that tw-journey-film.js sets as
   --fill, timed so its leading edge runs under each name while that chapter
   plays. */
.journey-film__chapters::before,
.journey-film__chapters::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
}

.journey-film__chapters::before {
  background: var(--rule);
}

.journey-film__chapters::after {
  background: var(--sage);
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
}

.journey-film__chapter,
.journey-film__toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.journey-film__chapter {
  position: relative;
  padding: 0.4rem 0;
  font-size: var(--step-fine);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  transition: color 0.3s var(--ease);
}

.journey-film__chapter:hover,
.journey-film__chapter[aria-current] {
  color: var(--text-primary);
}

.journey-film__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--text-primary);
  transition: border-color 0.3s var(--ease);
}

.journey-film__toggle:hover {
  border-color: var(--sage-bright);
}

.journey-film__icon-play,
.journey-film.is-paused .journey-film__icon-pause {
  display: none;
}

.journey-film.is-paused .journey-film__icon-play {
  display: block;
}

/* Under 36rem the four names wrap to two lines and turn a caption into a
   menu; the pause is the one control that has to stay. */
@media (max-width: 36rem) {
  .journey-film__chapters {
    display: none;
  }
}