/*
 * Moving Types case study (/work/moving-types/).
 * Shared building blocks (facts, eyebrows, stage, reflection, credits,
 * teaser) come from case-base.css; this file only holds the page layout and
 * the exhibits. Project colours (logo letters red, blue, yellow) appear only
 * inside G05; the red is the page's --case-accent. All other values come
 * from tokens.css; fixed values only inside graphics.
 *
 * A calm page (26.10.2026):
 * - No boxes around content: the groups list, G02, G05, G03 and G04 stand on
 *   the chapter surface. Devices (iPad, phone frames) stay. The catalogue
 *   pages and the two concept slides are cut to their content, so they read
 *   as pictures, not as white tiles.
 * - Surfaces set the rhythm instead of boxes: white, grey and the dark
 *   chapter 02, plus one full-width dark band for App 3.0 at the end of
 *   chapter 06 (edge to edge, no radius; the second and last accent surface).
 * - No kickers or labels above graphics and blocks; their words live in the
 *   caption. One caption per figure, 12 px under the pictures.
 * - Everything flush with the content edge: phones start on the left edge
 *   of their column, the G04 devices share one bottom line, G05 and the
 *   App 3.0 screens end on the right content edge.
 * - Three graphics in a row would repeat "medium left, list right": G05 is
 *   mirrored.
 * - The visit is a sticky scroll stage (js/case-stage.js), at least as large
 *   as the earlier tabbed G01 and centred in the window; App 3.0 is the one
 *   place where text stays while pictures pass.
 * - G02 and G05 run once as calm sequences with one pause control
 *   (js/moving-types-story.js); the compare slider in G04 is the one demo.
 * Rules on shared case-base.css classes carry .mt-page, so they win there.
 */

:root {
  --mt-night: #14191d; /* hero ground and media placeholders */
  --mt-blue: #497dae; /* logo letter, G05 only */
  --mt-yellow: #fecd0b; /* logo letter, G05 only */
}

.mt-page {
  --case-accent: #e42225; /* logo red, G05 only */
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  overflow-x: clip;
}

.mt-page *,
.mt-page *::before,
.mt-page *::after {
  box-sizing: border-box;
}

.mt-page img,
.mt-page video {
  display: block;
  max-width: 100%;
}

/* :where() keeps the reset weak, so component margins (G04, G05) win. */
:where(.mt-page) figure {
  margin: 0;
}

.mt-page figcaption {
  margin: 12px 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  text-align: left;
}

.mt-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mt-wrap {
  width: var(--content-width);
  margin-inline: auto;
}

/* ---------- Without JavaScript ---------- */

/* main.js never colours the fixed navigation without JavaScript, and its
   white text would run over the light chapters: give it the dark of the
   chapter bar. */
@media (scripting: none) {
  .mt-page #main-nav {
    background: var(--color-surface-dark);
  }

  /* The stage and façade loops get their poster from
     js/moving-types-story.js; without it, the same picture stands behind
     the video as a still. The native controls would cover it with an empty
     grey panel. */
  .mt-page video[data-poster] {
    background: var(--poster) center / cover no-repeat;
  }

  .mt-page video[data-poster]::-webkit-media-controls {
    display: none !important;
  }
}

/* ---------- Buttons ---------- */

/* !important: the global link rule in custom.css sets display and colour on
   every link with a much higher specificity. */
.mt-button {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 16px/1.3 var(--font-sans);
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.mt-button--light {
  background: var(--color-surface);
  color: var(--color-accent) !important;
}

.mt-button--light:hover {
  background: var(--color-surface-alt);
}

.mt-button--outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-ink-on-dark) !important;
}

.mt-button--outline:hover {
  border-color: var(--color-ink-on-dark);
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Hero ---------- */

.mt-hero {
  position: relative;
  min-height: 720px;
  height: 100svh;
  max-height: 1100px;
  overflow: hidden;
  background: var(--mt-night);
  color: var(--color-ink-on-dark);
}

.mt-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* Between 768 and 1279 px the eyebrow and the title sit on the brightest
   cubes; the vertical layer stays dark high up, so every line keeps 4.5 : 1
   (measured against the lightest 5 % of the photo behind it). Below 768 px
   a darker scrim of its own (Responsive). */
.mt-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 15, 18, 0.82) 0%, rgba(12, 15, 18, 0.45) 50%, rgba(12, 15, 18, 0.1) 100%),
    linear-gradient(0deg, rgba(12, 15, 18, 0.92) 0%, rgba(12, 15, 18, 0.52) 50%, rgba(12, 15, 18, 0.45) 72%, rgba(12, 15, 18, 0.3) 100%);
}

.mt-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-block: 120px 28px;
}

.mt-hero__main {
  max-width: 900px;
}

.mt-hero__title {
  margin: 0;
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.mt-hero__lead {
  max-width: 640px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.mt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.mt-hero .case-facts {
  margin-top: clamp(40px, 6vh, 72px);
}

.mt-hero__credit {
  margin: 20px 0 0;
  color: var(--color-ink-on-dark-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

/* ---------- Sections and headings ---------- */

/* Jump targets: the shared rule .case-chapters ~ section[id] sets the offset. */
.mt-section {
  padding-block: var(--space-section);
}

/* Chapter 06 ends in the App 3.0 band, which takes over its bottom padding. */
.mt-section--band-end {
  padding-bottom: 0;
}

.mt-section--white {
  background: var(--color-surface);
}

.mt-section--grey {
  background: var(--color-surface-alt);
}

.mt-section--dark {
  background: var(--color-surface-dark);
  color: var(--color-ink-on-dark);
}

.mt-section--dark figcaption {
  color: var(--color-ink-on-dark-muted);
}

.mt-head {
  margin-bottom: var(--space-block);
}

.mt-h2 {
  max-width: 920px;
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.mt-head__intro {
  max-width: 560px;
  margin: var(--space-intro) 0 0;
  color: var(--color-ink-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.mt-section--dark .mt-head__intro {
  color: var(--color-ink-on-dark-body);
}

@media (min-width: 1024px) {
  .mt-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }

  .mt-head--split .case-eyebrow {
    grid-column: 1 / -1;
  }

  .mt-head--split .mt-head__intro {
    margin-top: 0;
  }
}

.mt-copy p {
  max-width: 640px;
  margin: 0;
  color: var(--color-ink-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.mt-copy p + p {
  margin-top: 22px;
}

.mt-copy .mt-copy__lead {
  color: var(--color-ink);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

/* ---------- Steps beside a graphic (G02, G05) ---------- */

/* The same numbered circles as the stage. While a sequence runs, the
   current step is filled and the others are muted; without JavaScript all
   of them read as plain text. */
.mt-steps {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-steps li {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
}

.mt-steps__num {
  display: inline-flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-round);
  color: var(--color-accent);
  font: var(--weight-semibold) var(--text-caption)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.mt-steps strong {
  padding-top: var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h4);
  transition: color var(--dur-base) var(--ease-out);
}

.mt-steps p {
  margin: 0;
  color: var(--color-ink-body);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  transition: color var(--dur-base) var(--ease-out);
}

.mt-steps.is-live li:not(.is-current) strong,
.mt-steps.is-live li:not(.is-current) p {
  color: var(--color-ink-muted);
}

.mt-steps li.is-current .mt-steps__num {
  background: var(--color-accent);
  color: var(--color-ink-on-dark);
}

.mt-steps--on-dark .mt-steps__num {
  border-color: var(--color-accent-on-dark);
  color: var(--color-accent-on-dark);
}

.mt-steps--on-dark strong {
  color: var(--color-ink-on-dark);
}

.mt-steps--on-dark p {
  color: var(--color-ink-on-dark-body);
}

.mt-steps--on-dark.is-live li:not(.is-current) strong,
.mt-steps--on-dark.is-live li:not(.is-current) p {
  color: var(--color-ink-on-dark-muted);
}

.mt-steps--on-dark li.is-current .mt-steps__num {
  background: var(--color-accent-on-dark);
  color: var(--color-surface-dark);
}

/* ---------- Caption with the pause control at its end ---------- */

.mt-caption-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-4);
}

.mt-caption-row > span {
  max-width: var(--measure);
}

.mt-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* The same width for "Pause" and "Play", so the caption never reflows. */
  min-width: 76px;
  min-height: var(--tap-min);
  /* Centre the 44 px target on the first caption line. */
  margin: -12px calc(-1 * var(--space-2)) -12px 0;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  font: var(--weight-semibold) var(--text-caption)/var(--leading-caption) var(--font-sans);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}

.mt-control[hidden] {
  display: none;
}

.mt-control:hover {
  color: var(--color-accent);
}

.mt-section--dark .mt-control {
  color: var(--color-ink-on-dark-muted);
}

.mt-section--dark .mt-control:hover {
  color: var(--color-accent-on-dark);
}

/* Two bars for "Pause", a triangle for "Play". */
.mt-control__icon {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 3px solid currentColor;
  border-left: 3px solid currentColor;
}

.mt-control[data-action="play"] .mt-control__icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* A paused sequence also stops what is still moving inside the graphic. */
.mt-page .is-paused,
.mt-page .is-paused * {
  animation-play-state: paused !important;
}

/* Set up without transitions (G05 turns from "share" to the camera view). */
.mt-page .is-instant,
.mt-page .is-instant * {
  transition: none !important;
}

/* ---------- 01 Starting point ---------- */

.mt-start {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}

/* The six groups as a plain list between two rules; the own group only
   shows in the accent colour of its name. */
.mt-groups ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}

.mt-groups li {
  position: relative;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
}

.mt-groups li span {
  display: block;
  color: var(--color-ink-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
}

.mt-groups li strong {
  display: block;
  margin-top: 4px;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-small);
}

.mt-groups li.is-own span {
  color: var(--color-accent);
}

/* ---------- 02 Cube field: G02 ---------- */

/* The drawing stands on the dark chapter itself. The viewBox in the markup
   is cut to the drawing, so it starts on the content edge; the glow may
   reach past it. The caption sits under the drawing, 12 px like every other
   caption, so its pause control ends on the drawing's right edge. */
.mt-g02 {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: var(--space-3) clamp(28px, 4vw, 56px);
  align-items: center;
}

.mt-g02__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mt-g02__bg {
  fill: none;
  stroke: none;
}

.mt-g02__wires line {
  stroke: #3b454c;
  stroke-width: 1;
}

.mt-g02__face {
  fill: #f7f7f2;
}

.mt-g02__code {
  fill: none;
  stroke: #9aa0a6;
  stroke-width: 1.4;
  stroke-dasharray: 1.6 1.2;
}

.mt-g02__tier {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  transition: opacity var(--dur-base) var(--ease-standard);
}

.mt-g02__people {
  fill: #59646c;
}

.mt-g02[data-active] .mt-g02__tier {
  opacity: 0.16;
}

.mt-g02[data-active="stories"] .mt-g02__tier[data-tier="stories"],
.mt-g02[data-active="exhibits"] .mt-g02__tier[data-tier="exhibits"],
.mt-g02[data-active="kids"] .mt-g02__tier[data-tier="kids"] {
  opacity: 1;
}

.mt-g02 > figcaption {
  grid-column: 1;
  margin-top: 0;
}

/* Cubes pop in once, tier by tier, when the graphic comes into view. */
.mt-motion .mt-g02 use {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.mt-motion .mt-g02.is-played use {
  animation: mt-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: var(--d, 0s);
}

@keyframes mt-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 02 Cube field: photos ---------- */

.mt-field-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
  margin-top: clamp(64px, 8vw, 120px);
}

.mt-field-media__wide {
  grid-column: 1 / -1;
}

.mt-field-media__wide img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 45%;
}

.mt-field-media > figure:not(.mt-field-media__wide) img,
.mt-field-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--mt-night);
}

.mt-photo img,
.mt-photo video {
  border-radius: var(--radius-md);
}

/* ---------- 03 Visitor journey: the stage ---------- */

/* All loops are 16 : 9, so the frame takes their shape; its ground is dark,
   so the small player picture sits on it like a screen. */
.mt-page .case-stage__screen {
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--color-surface-dark);
}

/* From 1024 px the medium takes two thirds of the width (597 px at 1024,
   864 px at 1440); below 1280 px a 32 px gap leaves the steps a little more
   room. The frame sticks in the middle of the window below navigation and
   chapter bar, never higher than 24 px under them, and never taller than
   the window. The stage is the container the frame measures (cqi); --mt-gap
   is its column gap. 48 px: gap and progress row under the picture. */
.mt-page .mt-stage.is-staged {
  --mt-gap: var(--space-8);
  container-type: inline-size;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: var(--mt-gap);
}

.mt-page .mt-stage.is-staged > .case-stage__frame {
  --mt-frame-w: min((100cqi - var(--mt-gap)) * 2 / 3, (100vh - var(--scroll-offset) - var(--space-24)) * 16 / 9);
  width: var(--mt-frame-w);
  top: calc(var(--scroll-offset) + max(var(--space-6), (100vh - var(--scroll-offset) - var(--mt-frame-w) * 9 / 16 - var(--space-12)) / 2));
}

@media (min-width: 1280px) {
  .mt-page .mt-stage.is-staged {
    --mt-gap: var(--space-12);
  }
}

/* As a list (below 1024 px, without JavaScript, with reduced motion) the
   intro already says where the loops come from; the origin line stays only
   under the player, which shows a film by others. On the stage the line
   under the frame names each step's source. */
.mt-page .mt-stage:not(.is-staged) .case-stage__step:not(.mt-step--player) .case-stage__origin {
  display: none;
}

/* The circles beside the steps and the bars under the frame show the
   position; the "02 / 06" counter is left out. */
.mt-page .case-stage__count {
  display: none;
}

/* case-base.css dims the inactive steps to 0.78, which keeps 4.5 : 1 on
   white; on the grey chapter 0.86 keeps text and numbers above 4.5 : 1. */
.mt-page .case-stage.is-staged .case-stage__step:not(.is-active) .case-stage__text {
  opacity: 0.86;
}

/* "Watch": the 2011 player shows a film by others, so it stays small, as
   proof of the interface: 92 % of the frame height, on the dark ground.
   Flex, not grid: the 92 % height needs the definite height of the box. */
.mt-page .case-stage__media.mt-stage-small {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-dark);
}

.mt-page .case-stage__media.mt-stage-small img {
  width: auto;
  height: 92%;
  border: 0;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

/* ---------- 04 App: concept slides with their notes ---------- */

.mt-app-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px clamp(32px, 5vw, 80px);
  align-items: start;
}

.mt-app-notes p {
  max-width: 640px;
  margin: 24px 0 0;
  color: var(--color-ink-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* The two concept slides, cut to title and content: without slide border,
   running head, page number and date, both in the same frame (1240 × 645
   of the 1600 × 917 slide, from x 137 and y 177), so their captions and
   notes start on one line. */
.mt-slide {
  aspect-ratio: 1240 / 645;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.mt-app-notes .mt-slide img {
  width: calc(100% * 1600 / 1240);
  max-width: none;
  margin: calc(-100% * 177 / 1240) 0 0 calc(-100% * 137 / 1240);
  border-radius: 0;
}

/* ---------- 04 App: G05 code to film ---------- */

/* Mirrored to G02 and the stage: from 1024 px the steps start on the left
   content edge, the device ends on the right one, its caption under it. */
.mt-g05 {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.25fr);
  gap: var(--space-3) clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(64px, 8vw, 120px);
}

.mt-g05 > figcaption {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .mt-g05 > .mt-g05__device {
    grid-column: 2;
    grid-row: 1;
  }

  .mt-g05 > .mt-steps {
    grid-column: 1;
    grid-row: 1;
  }

  .mt-g05 > figcaption {
    grid-column: 2;
    grid-row: 2;
  }
}

.mt-g05__device {
  padding: clamp(10px, 1.6vw, 20px);
  border-radius: clamp(20px, 2.6vw, 32px);
  background: var(--color-surface-dark);
}

.mt-g05__screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #2b3034;
  perspective: 1400px;
}

.mt-g05__camera {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.5) 0 2.4%, transparent 4.5%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.45) 0 3%, transparent 5.5%),
    radial-gradient(circle at 76% 72%, rgba(255, 255, 255, 0.4) 0 2.6%, transparent 5%),
    radial-gradient(circle at 22% 78%, rgba(255, 255, 255, 0.35) 0 3.2%, transparent 6%),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.3) 0 1.8%, transparent 4%),
    linear-gradient(90deg, transparent 0 9%, rgba(255, 255, 255, 0.06) 9% 9.3%, transparent 9.3% 31%, rgba(255, 255, 255, 0.06) 31% 31.3%, transparent 31.3% 69%, rgba(255, 255, 255, 0.06) 69% 69.3%, transparent 69.3% 91%, rgba(255, 255, 255, 0.06) 91% 91.3%, transparent 91.3%),
    #262b2f;
  filter: blur(1.5px);
  transition: opacity var(--dur-reveal) var(--ease-standard);
}

.mt-g05__card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.2, 1);
}

.mt-g05__front,
.mt-g05__back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mt-g05__back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #f4f4f4;
  color: var(--color-ink);
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 600;
  transform: rotateY(180deg);
}

.mt-g05__back .mt-qr {
  width: 42%;
}

.mt-qr {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--color-surface-dark);
}

.mt-g05__code {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32%;
  border-radius: 4px;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%);
  transition: transform 0.8s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.5s var(--ease-standard) var(--dur-fast);
}

.mt-g05__film {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  background: #101316;
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard) 0.35s;
}

/* The logo idea: three coloured letters drift apart and add up to white
   where they overlap. */
.mt-g05__type {
  display: inline-grid;
}

.mt-g05__type b {
  grid-area: 1 / 1;
  font-weight: inherit;
  mix-blend-mode: screen;
}

@supports (mix-blend-mode: plus-lighter) {
  .mt-g05__type b {
    mix-blend-mode: plus-lighter;
  }
}

.mt-g05__type b:nth-child(1) {
  color: var(--case-accent);
}

.mt-g05__type b:nth-child(2) {
  color: var(--mt-blue);
}

.mt-g05__type b:nth-child(3) {
  color: var(--mt-yellow);
}

.mt-g05__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-base) var(--ease-standard);
}

.mt-g05__frame i {
  position: absolute;
  width: 22%;
  height: 22%;
  border: 3px solid #fff;
}

.mt-g05__frame i:nth-child(1) {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.mt-g05__frame i:nth-child(2) {
  top: 0;
  right: 0;
  border-bottom: 0;
  border-left: 0;
}

.mt-g05__frame i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-top: 0;
  border-right: 0;
}

.mt-g05__frame i:nth-child(4) {
  right: 0;
  bottom: 0;
  border-top: 0;
  border-left: 0;
}

.mt-g05__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4%;
  height: 13%;
  padding-inline: 5%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.4s var(--ease-standard);
}

.mt-g05__play {
  flex: none;
  width: 0;
  height: 0;
  border-top: 0.55em solid transparent;
  border-bottom: 0.55em solid transparent;
  border-left: 0.9em solid #fff;
  font-size: clamp(10px, 1.2vw, 16px);
}

.mt-g05__progress {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff 0 38%, rgba(255, 255, 255, 0.3) 38%);
}

.mt-g05__share {
  flex: none;
  width: clamp(18px, 2.4vw, 28px);
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 4px;
  background:
    linear-gradient(#fff 0 0) 22% 22% / 26% 26% no-repeat,
    linear-gradient(#fff 0 0) 78% 22% / 26% 26% no-repeat,
    linear-gradient(#fff 0 0) 22% 78% / 26% 26% no-repeat;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

/* States: scan, watch, share (the resting state, also without JavaScript). */
.mt-g05[data-state="scan"] .mt-g05__frame {
  opacity: 1;
  animation: mt-lock 1.5s cubic-bezier(0.3, 0.7, 0.2, 1) both;
}

.mt-g05:not([data-state="scan"]) .mt-g05__camera {
  opacity: 0;
}

.mt-g05:not([data-state="scan"]) .mt-g05__code {
  opacity: 0;
  transform: translate(-50%, -50%) scale(3.2);
}

.mt-g05:not([data-state="scan"]) .mt-g05__film {
  opacity: 1;
}

.mt-g05[data-state="watch"] .mt-g05__bar {
  opacity: 1;
}

.mt-g05[data-state="share"] .mt-g05__card {
  transform: rotateY(180deg);
}

/* The letters only drift while the sequence shows the film. */
.mt-g05.is-running:not([data-state="scan"]) .mt-g05__type b:nth-child(1) {
  animation: mt-drift-a 3.2s ease-in-out infinite alternate;
}

.mt-g05.is-running:not([data-state="scan"]) .mt-g05__type b:nth-child(3) {
  animation: mt-drift-b 3.2s ease-in-out infinite alternate;
}

.mt-g05__type:nth-child(2) b {
  animation-delay: -0.8s !important;
}

.mt-g05__type:nth-child(3) b {
  animation-delay: -1.6s !important;
}

.mt-g05__type:nth-child(4) b {
  animation-delay: -2.4s !important;
}

@keyframes mt-lock {
  from {
    width: 74%;
    opacity: 0.35;
  }

  70% {
    width: 39%;
    opacity: 1;
  }

  to {
    width: 40%;
    opacity: 1;
  }
}

@keyframes mt-drift-a {
  from {
    transform: translate(-0.09em, -0.04em);
  }

  to {
    transform: none;
  }
}

@keyframes mt-drift-b {
  from {
    transform: translate(0.08em, 0.05em);
  }

  to {
    transform: none;
  }
}

/* ---------- 04 App: final screens ---------- */

/* One pair of pictures, one caption under both. */
.mt-screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(56px, 7vw, 96px);
}

.mt-screens img {
  width: 100%;
  border-radius: var(--radius-md);
}

.mt-screens figcaption {
  grid-column: 1 / -1;
  margin-top: calc(var(--space-3) - var(--space-6));
}

/* ---------- 05 Catalogue ---------- */

.mt-catalogue-cover img {
  width: 100%;
  border-radius: var(--radius-md);
}

.mt-codes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

/* Each page is cut to its square illustration, without page margin and
   running head (--cut-x, --cut-y in the markup), so the five read as
   pictures, not as white tiles with a frame. */
.mt-codes figure {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.mt-codes img {
  width: 123.63%;
  max-width: none;
  margin: var(--cut-y, -16.9%) 0 0 var(--cut-x, -16.35%);
}

.mt-codes__caption {
  margin: 12px 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.mt-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px clamp(32px, 5vw, 80px);
  margin-top: clamp(48px, 6vw, 80px);
}

.mt-columns p {
  margin: 0;
  color: var(--color-ink-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* ---------- 06 Fifteen years: G03 timeline ---------- */

/* Without frame and row head: the axis and the bars use the full width. */
.mt-g03__chart {
  --years: 6; /* 2011 to 2017 */
}

.mt-g03__axis {
  position: relative;
  height: 24px;
  border-bottom: 1px solid var(--color-line);
}

.mt-g03__axis span {
  position: absolute;
  bottom: 6px;
  left: calc((var(--s) - 2011) / var(--years) * 100%);
  color: var(--color-ink-muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mt-g03__axis span::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  height: 6px;
  border-left: 1px solid rgba(35, 35, 35, 0.3);
}

.mt-g03__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 18px;
  border-bottom: 1px solid var(--color-line);
}

.mt-g03__track {
  position: relative;
  height: calc(28px + var(--lanes, 1) * 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-g03__track li {
  position: absolute;
  top: 0;
  left: calc((var(--s) - 2011) / var(--years) * 100%);
  width: max(12px, calc((var(--e) - var(--s)) / var(--years) * 100%));
}

.mt-g03__bar {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: #b9bcc2;
  transform-origin: left center;
}

.mt-g03__text {
  position: absolute;
  top: calc(20px + var(--lane, 0) * 44px);
  left: 0;
  color: var(--color-ink-muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.mt-g03__text strong {
  display: block;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
}

.mt-g03__text time {
  display: none;
}

.mt-g03__track li.is-end .mt-g03__text {
  right: 0;
  left: auto;
  text-align: right;
}

.mt-motion .mt-g03:not(.is-played) .mt-g03__bar {
  transform: scaleX(0);
}

.mt-motion .mt-g03.is-played .mt-g03__bar {
  transition: transform 0.9s cubic-bezier(0.3, 0.8, 0.3, 1);
  transition-delay: calc((var(--s) - 2011) * 0.06s);
}

/* Below 1024 px the lanes get too narrow: the timeline becomes a list. */
@media (max-width: 1023.98px) {
  .mt-g03__axis {
    display: none;
  }

  .mt-g03__track {
    display: grid;
    gap: 12px;
    height: auto;
  }

  .mt-g03__track li {
    position: static;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
    width: auto;
  }

  .mt-g03__bar {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: var(--radius-round);
  }

  .mt-g03__text {
    position: static;
    white-space: normal;
  }

  .mt-g03__track li.is-end .mt-g03__text {
    text-align: left;
  }

  .mt-g03__text time {
    display: block;
    margin-top: 2px;
    color: var(--color-accent);
    font-weight: 600;
  }
}

/* ---------- 06 Fifteen years: text and photos ---------- */

.mt-years {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(56px, 7vw, 96px);
}

.mt-years__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.mt-years__photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- 06 Fifteen years: media façade teaser ---------- */

/* Without label and rule: space separates it. */
.mt-facade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 96px);
}

.mt-facade video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--mt-night);
}

.mt-facade h3 {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

.mt-facade__copy p {
  margin: 16px 0 0;
  color: var(--color-ink-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* ---------- 06 Fifteen years: G04 app generations ---------- */

.mt-g04 {
  margin-top: clamp(64px, 8vw, 120px);
}

.mt-g04__grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}

.mt-g04__meta {
  margin: 16px 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.mt-g04__meta strong {
  display: block;
  margin: 0 0 2px;
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 600;
}

.mt-g04 > figcaption {
  margin-top: 24px;
}

/* One bottom line for the three devices, one top line for their titles:
   each item spans two shared rows (device, text). Without subgrid the
   items keep the bottom alignment above. */
@supports (grid-template-rows: subgrid) {
  .mt-g04__grid {
    grid-template-rows: auto auto;
    align-items: stretch;
  }

  .mt-g04__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .mt-g04__item > :first-child {
    align-self: end;
  }

  .mt-g04__meta {
    align-self: start;
  }
}

/* Phones start on the left edge of their column, in line with the text
   under them. */
.mt-phone {
  width: 100%;
  max-width: 260px;
  padding: 7px;
  border-radius: 26px;
  background: var(--color-surface-dark);
}

.mt-phone img {
  width: 100%;
  border-radius: 20px;
}

/* From 1024 px the phones fill their column, so App 3.0 ends on the right
   content edge. */
@media (min-width: 1024px) {
  .mt-g04 .mt-phone {
    max-width: none;
  }
}

/* Before/after slider: 2011 library on the left, 2014 redesign on the right. */
.mt-compare {
  --pad: clamp(8px, 1.2vw, 14px);
  position: relative;
  padding: var(--pad);
  border-radius: 20px;
  background: var(--color-surface-dark);
}

.mt-compare > img,
.mt-compare__before {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
}

.mt-compare > img {
  object-fit: cover;
}

.mt-compare__before {
  position: absolute;
  inset: var(--pad);
  width: auto;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0);
}

.mt-compare__before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mt-compare__handle {
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--pos) / 100);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  pointer-events: none;
}

.mt-compare__handle::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: #fff;
  color: var(--color-accent);
  font-size: 18px;
  font-weight: 700;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.mt-compare__label input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* The range input is invisible, so the frame carries the shared focus ring. */
.mt-compare:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-halo);
}

.mt-compare__tag {
  position: absolute;
  top: calc(var(--pad) + 10px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(20, 25, 29, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.mt-compare__tag--left {
  left: calc(var(--pad) + 10px);
}

.mt-compare__tag--right {
  right: calc(var(--pad) + 10px);
}

/* ---------- 06 Fifteen years: App 3.0 band ---------- */

/* Edge to edge at the end of chapter 06, without radius, so it is a
   surface, not a box: the second and last accent surface after chapter 02. */
.mt-band {
  margin-top: var(--space-section);
  padding-block: var(--space-section);
  background: var(--color-surface-dark);
  color: var(--color-ink-on-dark);
}

.mt-band figcaption {
  color: var(--color-ink-on-dark-muted);
}

/* Device frames a shade darker than the band. */
.mt-band .mt-phone,
.mt-band .mt-tablet img {
  background: #0c0f12;
}

/* From 1024 px the text stays while the screens pass beside it, only on
   windows tall enough for the whole text. The text starts on the left
   content edge, the screens end on the right one, and both screen figures
   have the width of their column, so their edges line up. */
.mt-pin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(560px, 50%));
  gap: var(--space-10) var(--space-12);
  align-items: start;
}

.mt-pin__text h3 {
  margin: 0;
  color: var(--color-ink-on-dark);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

.mt-pin__text p {
  max-width: var(--measure-narrow);
  margin: var(--space-5) 0 0;
  color: var(--color-ink-on-dark-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.mt-pin__text a {
  color: var(--color-accent-on-dark) !important;
  font-weight: var(--weight-semibold);
  text-underline-offset: 3px;
}

.mt-pin__media {
  display: grid;
  gap: var(--space-block);
}

.mt-phones__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.mt-phones .mt-phone {
  max-width: none;
}

.mt-tablet img {
  width: 100%;
  padding: clamp(8px, 1vw, 12px);
  border-radius: 28px;
}

@media (min-width: 1024px) and (min-height: 720px) {
  .mt-pin__text {
    position: sticky;
    top: calc(var(--scroll-offset) + var(--space-6));
  }
}

/* The four platforms as one quiet row, no label, no box. */
.mt-platforms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
}

.mt-platforms li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-on-dark);
}

.mt-platforms strong {
  color: var(--color-ink-on-dark);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
}

.mt-platforms p {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-on-dark-body);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* ---------- 07 What remains ---------- */

.mt-head__intro a,
.mt-page .case-reflection a {
  color: var(--color-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ---------- Reveal on scroll (only with JS and without reduced motion) ---------- */

.mt-motion .mt-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.mt-motion .mt-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1023.98px) {
  .mt-start,
  .mt-years,
  .mt-facade {
    grid-template-columns: 1fr;
  }

  .mt-g02,
  .mt-g05 {
    grid-template-columns: 1fr;
  }

  /* One column: the caption (with its pause control) stays right under the
     graphic, the steps follow. */
  .mt-g02 > figcaption,
  .mt-g05 > figcaption {
    order: 1;
  }

  .mt-g02 > .mt-steps,
  .mt-g05 > .mt-steps {
    order: 2;
    margin-top: var(--space-6);
  }

  .mt-g04__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mt-g04__item--wide {
    grid-column: 1 / -1;
  }

  .mt-pin {
    grid-template-columns: minmax(0, 1fr);
  }

  .mt-platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .mt-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .mt-hero__photo {
    object-position: 38% 40%;
  }

  .mt-hero__scrim {
    background:
      linear-gradient(0deg, rgba(12, 15, 18, 0.96) 0%, rgba(12, 15, 18, 0.8) 60%, rgba(12, 15, 18, 0.5) 100%);
  }

  .mt-hero__content {
    padding-block: 104px 20px;
  }

  .mt-hero__lead {
    margin-top: 20px;
  }

  .mt-hero__actions {
    margin-top: 28px;
  }

  .mt-field-media,
  .mt-screens,
  .mt-app-notes,
  .mt-columns,
  .mt-years__photos {
    grid-template-columns: 1fr;
  }

  .mt-field-media__wide img {
    aspect-ratio: 3 / 2;
  }

  .mt-codes {
    display: flex;
    gap: 12px;
    margin-inline: -16px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }

  .mt-codes figure {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  .mt-g04__grid {
    gap: 24px 16px;
  }

  .mt-steps {
    gap: var(--space-5);
  }

  .mt-phones__row {
    max-width: 420px;
    gap: var(--space-3);
  }

  .mt-tablet img {
    max-width: 300px;
  }

  /* The stage as a list: a little less air between the steps on phones. */
  .mt-page .case-stage__steps {
    gap: var(--space-12);
  }
}

@media (max-width: 639.98px) {
  .mt-platforms {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 379.98px) {
  .mt-hero__actions .mt-button {
    padding-inline: 20px;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .mt-page *,
  .mt-page *::before,
  .mt-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mt-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .mt-steps__num,
  .mt-steps strong,
  .mt-steps p,
  .mt-control {
    transition: none;
  }
}