/* History page: the scroll-driven road film and the sourced timeline. */

.page-history .nav:not(.is-solid) { background: transparent; }

/* ---------- The pinned stage ---------- */
.hero-scrub { position: relative; height: var(--film-length, 1100vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #081B14; isolation: isolate; }
.stage__poster { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease-out); transform: translateZ(0); will-change: transform; }
.stage.video-ready .stage__video { opacity: 1; }
.stage.video-failed .stage__video { display: none; }
.stage__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5, 14, 10, .55), rgba(5, 14, 10, 0) 18%),
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(5, 14, 10, 0) 38%, rgba(5, 14, 10, .6) 100%);
}

/* ---------- Caption bands (opacity written by JS, entrances scrubbed by --k) ---------- */
.bands { position: absolute; inset: 0; }
.band { position: absolute; top: 50%; width: min(40vw, 580px); opacity: 0; transform: translateY(-46%); text-shadow: var(--tshadow); pointer-events: none; isolation: isolate; }
.band--left { left: max(var(--gutter), 6vw); }
.band--right { right: max(var(--gutter), 6vw); }
.band.is-live { pointer-events: auto; }

/* Legibility: the side of the frame that holds a caption darkens while it is on; the centre lane stays clear */
.stage__shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.stage__shade--l { background: linear-gradient(90deg, rgba(5, 12, 9, .84) 0%, rgba(5, 12, 9, .78) 40%, rgba(5, 12, 9, .34) 54%, rgba(5, 12, 9, 0) 66%); opacity: var(--shade-l, 0); }
.stage__shade--r { background: linear-gradient(270deg, rgba(5, 12, 9, .84) 0%, rgba(5, 12, 9, .78) 40%, rgba(5, 12, 9, .34) 54%, rgba(5, 12, 9, 0) 66%); opacity: var(--shade-r, 0); }
.stage__shade--t { background: linear-gradient(180deg, rgba(5, 12, 9, .8) 0%, rgba(5, 12, 9, .72) 30%, rgba(5, 12, 9, .3) 40%, rgba(5, 12, 9, 0) 50%); opacity: var(--shade-t, 0); }
.band__year {
  display: flex; align-items: center; gap: 16px; margin: 0;
  font-style: italic; font-weight: 800; font-stretch: 118%; font-size: clamp(4.2rem, 9vw, 8.8rem); line-height: .86; letter-spacing: -.02em;
  opacity: clamp(0, var(--k, 0) * 2.4, 1);
}
.band__head { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.04; margin-top: .3em; max-width: 17ch; }
.band__sub {
  margin-top: .9em; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.5; max-width: 40ch;
  --ks: clamp(0, (var(--k, 0) - .35) * 2.5, 1); opacity: var(--ks); transform: translateY(calc((1 - var(--ks)) * 12px));
}
.band .w, .band .c { display: inline-block; white-space: pre; }
.band .w { white-space: nowrap; }

/* Entrances: each echoes what the film is doing at that moment */
.band[data-entrance="depth"] .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: scale(calc(.8 + .2 * var(--kc))); transform-origin: 50% 80%; }
.band[data-entrance="snap"] .c { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1); opacity: var(--kc); transform: translateX(calc((1 - var(--kc)) * var(--jx, 0px))); }
.band[data-entrance="part"] .half { display: inline-block; --kc: clamp(0, var(--k, 0) * 1.8, 1); opacity: var(--kc); }
.band[data-entrance="part"] .half--a { transform: translateX(calc((1 - var(--kc)) * 46px)); }
.band[data-entrance="part"] .half--b { transform: translateX(calc((1 - var(--kc)) * -46px)); }
.band__year--recolor { position: relative; }
.band__year--recolor .yr { display: inline-block; }
.band__year--recolor .yr--red { position: absolute; color: #D0463A; opacity: calc(1 - clamp(0, (var(--k, 0) - .15) * 2.2, 1)); }
.band__year--recolor .yr--green { color: var(--observed); opacity: clamp(0, (var(--k, 0) - .15) * 2.2, 1); }
.band[data-entrance="recolor"] .w { --kc: clamp(0, (var(--k, 0) - .25 - var(--th, 0)) * 3, 1); opacity: var(--kc); }
.band[data-entrance="punch"] .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1);
  --ks: clamp(0, (var(--k, 0) - var(--th, 0) - .1) * 3.2, 1);
  opacity: var(--kc); transform: scale(calc(.6 + .52 * var(--kc) - .12 * var(--ks)));
}
.band__head--twin { position: relative; }
.band__head--twin .twin { display: block; }
.band__head--twin .twin--soft { position: absolute; inset: 0; filter: blur(10px); opacity: calc(1 - var(--k, 0)); }
.band__head--twin .twin--sharp { opacity: clamp(0, (var(--k, 0) - .1) * 1.6, 1); }
.band[data-entrance="weave"] .c { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * var(--jy, 0px))); }
.band[data-entrance="count"] .band__head { opacity: clamp(0, var(--k, 0) * 2.4, 1); }
.band--today .band__head [data-count] { color: var(--accent); }
.band[data-entrance="drift"] .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 26px)) scale(calc(1 - (1 - var(--kc)) * .08)); }
.band--future .band__year { color: var(--accent); }
.band--settle { left: 50%; right: auto; top: 11%; width: min(94vw, 1240px); text-align: center; transform: translateX(-50%); }
.band--settle .band__head { font-size: clamp(2.2rem, 4.4vw, 4.4rem); max-width: none; margin-inline: auto; }
.band[data-entrance="settle"] .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 30px)); }
.band__cta { justify-content: center; margin-top: 30px; --kb: clamp(0, (var(--k, 0) - .62) * 4, 1); opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 14px)); }

/* ---------- Loading progress and scroll prompt ---------- */
.ring { position: absolute; left: 26px; bottom: 26px; width: 34px; height: 34px; color: var(--text); transform: rotate(-90deg); transition: opacity .6s var(--ease-out); }
.stage.video-ready .ring, .stage.video-failed .ring { opacity: 0; }
.cue { position: absolute; left: 50%; bottom: 26px; margin: 0; transform: translateX(-50%); font-weight: 600; letter-spacing: .04em; color: var(--text-2); text-shadow: var(--tshadow); transition: opacity .5s var(--ease-out); }
.stage.scrolled .cue { opacity: 0; }

/* ---------- Static hero: the five gates, identical to the JS list ---------- */
.static-hero { display: none; }
/* Only reduced motion: phones scrub the film too (see the phone layout below) */
@media (prefers-reduced-motion: reduce) {
  .hero-scrub { height: auto; }
  .stage { position: relative; height: auto; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; }
  .stage__poster { background-image: url("../video/history-static.jpg"); background-position: 50% 60%; }
  .stage__video, .bands, .ring, .cue { display: none; }
  .stage__scrim { background: linear-gradient(to bottom, rgba(5, 14, 10, .55), rgba(5, 14, 10, .05) 30%, rgba(5, 14, 10, .2) 55%, rgba(5, 14, 10, .9) 100%); }
  .static-hero { display: block; position: relative; width: 100%; padding: 170px 0 56px; text-shadow: var(--tshadow); }
  .static-hero__title { font-size: clamp(2.5rem, 9vw, 4.4rem); line-height: .98; max-width: 14ch; margin: 0 0 16px; }
  .static-hero .lede { color: var(--text); }
  .static-hero .btn-row { margin-top: 26px; }
}
@media (max-height: 560px) { .cue, .ring { display: none; } }

/* ---------- Timeline: a typographic list, years in their own column ---------- */
.stops { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.stop { display: grid; grid-template-columns: 140px 1fr; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--ink-line); }
.stop__year { font-style: italic; font-weight: 800; font-stretch: 115%; font-size: 2.2rem; line-height: 1; color: var(--brand); }
.stop__body h3 { margin-bottom: 8px; }
.stop__body > p { max-width: 64ch; }
.stop__src { margin-top: 10px !important; font-size: .875rem; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stop--planned .stop__year { color: #8A6A00; }
.plans { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
@media (max-width: 640px) { .stop { grid-template-columns: 1fr; gap: 6px; } .stop__year { font-size: 1.8rem; } }

/* ---------- Lübeck and Riga ---------- */
.team-link__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.team-link h2 { margin-bottom: 22px; max-width: 14ch; }
.team-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.team-facts div { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.team-facts dt { color: var(--text-2); }
.team-facts dd { margin: 0; font-style: italic; font-weight: 800; font-stretch: 110%; font-size: 1.6rem; text-align: right; }
.team-facts + .fine { margin-top: 12px; }
@media (max-width: 820px) { .team-link__grid { grid-template-columns: 1fr; } }

/* ---------- Closing ---------- */
.closing__inner { display: grid; gap: 18px; justify-items: start; max-width: 780px; }
.closing .btn-row { margin-top: 10px; }

/* Read more from a caption: it arrives with the subline and is clickable only while its caption is on */
.band__more { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 22px; text-shadow: none; --km: clamp(0, (var(--k, 0) - .5) * 3, 1); opacity: var(--km); }
.band--settle .band__more { justify-content: center; }
.band__more .more { font-size: 1.02rem; }

/* ---------- The stats bar: today's fleet rolled back to the year on screen ---------- */
.statsbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: 14px max(var(--gutter), 6vw) 12px; opacity: 0;
  background: linear-gradient(to top, rgba(5, 12, 9, .92), rgba(5, 12, 9, .74));
  border-top: 1px solid var(--line);
}
.statsbar__row { display: flex; align-items: stretch; gap: 0; }
.stat { display: grid; align-content: end; gap: 2px; padding: 0 22px; border-left: 1px solid var(--line); min-width: 0; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__label { font-size: .8125rem; color: var(--text-2); white-space: nowrap; }
.stat__value { font-style: italic; font-weight: 800; font-stretch: 110%; font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1; white-space: nowrap; }
.stat__value small { font-size: .55em; font-weight: 600; font-style: normal; color: var(--text-2); margin-left: 3px; }
.stat--year .stat__value { color: var(--accent); }
.stat--pie { grid-template-columns: auto auto; align-items: center; gap: 12px; }
.pie { width: 46px; height: 46px; }
.pie__gas { fill: #7FCB9B; }
.pie__dual { fill: #9DB8C9; }
.pie__diesel { fill: #E3D9BE; }
.pie__legend { list-style: none; margin: 0; padding: 0; font-size: .8125rem; color: var(--text-2); line-height: 1.35; white-space: nowrap; }
.pie__legend b { color: var(--text); font-weight: 700; display: inline-block; min-width: 2ch; text-align: right; margin-right: 4px; }
.pie__legend li:nth-child(1) b { color: #7FCB9B; }
.pie__legend li:nth-child(2) b { color: #9DB8C9; }
.pie__legend li:nth-child(3) b { color: #E3D9BE; }
.statsbar__note { margin-top: 8px; font-size: .75rem; color: var(--text-3); }
.statsbar.is-planned .stat--year .stat__value::after { content: " planned"; font-size: .5em; font-weight: 600; font-style: normal; color: var(--text-2); }
@media (max-width: 1180px) { .stat { padding: 0 14px; } .stat--pie .pie__legend { display: none; } }
@media (max-height: 640px) { .statsbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .statsbar { display: none; } }
.statsbar__row { justify-content: space-between; }
.stat { flex: 1 1 auto; }

/* ---------- Phones and portrait tablets: the same film, captions along the bottom, the stats bar under the nav ---------- */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px) {
  .band { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: max(64px, 8svh); transform: none; }
  .band__year { font-size: clamp(3.4rem, 17vw, 5.4rem); gap: 12px; }
  .band__head { font-size: clamp(1.6rem, 7vw, 2.2rem); max-width: 18ch; }
  .band__sub { font-size: 1rem; max-width: 36ch; }
  .band__more { margin-top: 12px; }
  .band--settle { top: auto; bottom: max(64px, 8svh); left: var(--gutter); right: var(--gutter); width: auto; transform: none; }
  .band--settle .band__head { font-size: clamp(2rem, 9vw, 2.8rem); }
  .band__cta { margin-top: 22px; }
  /* Every caption sits low, so both side shades become one shade rising from the bottom */
  .stage__shade--l, .stage__shade--r { background: linear-gradient(0deg, rgba(5, 12, 9, .9) 0%, rgba(5, 12, 9, .78) 34%, rgba(5, 12, 9, .3) 52%, rgba(5, 12, 9, 0) 64%); }
  .stage__shade--t { background: linear-gradient(0deg, rgba(5, 12, 9, .9) 0%, rgba(5, 12, 9, .7) 36%, rgba(5, 12, 9, 0) 60%); }
  .ring { left: var(--gutter); bottom: 18px; width: 28px; height: 28px; }
  .cue { bottom: 20px; font-size: .9375rem; }
  .statsbar { top: 122px; bottom: auto; padding: 10px var(--gutter) 8px; border-top: 0; border-bottom: 1px solid var(--line);
    background: linear-gradient(to bottom, rgba(5, 12, 9, .86), rgba(5, 12, 9, .66)); }
  .statsbar__row { gap: 0; }
  .stat { padding: 0 10px; gap: 1px; }
  .stat--pie, .statsbar .stat:last-child { display: none; }
  .stat__label { font-size: .6875rem; white-space: normal; line-height: 1.2; }
  .stat__value { font-size: 1.15rem; }
  .statsbar__note { margin-top: 6px; font-size: .625rem; line-height: 1.3; }
  .statsbar.is-planned .stat--year .stat__value::after { content: none; }  /* the note says the plans are not in the numbers */
}