/* Scroll choreography. The unenhanced page stays in ordinary document flow. */
.heading-line,
.ink-line { display: block; }
.heading-line { width: fit-content; max-width: 100%; }
.pin-copy h2 .heading-line { font-family: inherit; }
.city-list { overflow: hidden; }
.campaign-heading, .cities-heading, .wall-heading { overflow: hidden; }

.campaign-track { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.campaign-track .campaign-card { min-height: 0; aspect-ratio: 4 / 5; }
.campaign-track .campaign-card:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.campaign-track .campaign-card img { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line-light);
  color: var(--heritage);
  text-transform: uppercase;
  font-size: .65rem;
  letter-spacing: .15em;
}
.reel-instruction { display: none; }
.reel-controls { display: none; align-items: center; gap: 18px; }
.reel-controls button {
  width: 42px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-light);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font-size: 1.2rem;
  transition: color .2s, background .2s;
}
.reel-controls button:hover { background: var(--red); color: var(--night); }
.reel-controls button:disabled { opacity: .3; cursor: default; background: transparent; color: var(--cream); }
.reel-controls button:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.reel-counter { min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; }
.reel-counter [data-reel-current] { color: var(--cream); }
.reel-progress { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero { --hero-leave: 0; }
  .motion-ready .hero-title span {
    translate: calc(var(--hero-leave) * -56px) calc(var(--hero-leave) * -24px);
  }
  .motion-ready .hero-title span:nth-child(2) {
    translate: calc(var(--hero-leave) * 36px) calc(var(--hero-leave) * -12px);
  }
  .motion-ready .hero-title span:nth-child(3) {
    translate: calc(var(--hero-leave) * -22px) calc(var(--hero-leave) * 8px);
  }
  .motion-ready .hero-image > img {
    transform: translate3d(0, var(--hero-photo-y, 0px), 0) scale(var(--hero-photo-scale, 1.12));
  }
  .motion-ready .hero-ticker .ticker-track { translate: calc(var(--hero-leave) * -100px) 0; }
  .motion-ready .image-stamp { rotate: calc(var(--hero-leave) * -14deg); }

  .motion-ready .manifesto-title .ink-line {
    position: relative;
    width: fit-content;
    padding-block: .13em;
    margin-block: -.13em;
    color: transparent;
    background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(rgba(6, 17, 11, .2), rgba(6, 17, 11, .2));
    background-repeat: no-repeat;
    background-size: var(--ink-fill, 100%) 100%, 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    translate: var(--ink-x, 0px) 0;
  }
  .motion-ready .manifesto-title .ink-line:last-child::after {
    content: "";
    position: absolute;
    bottom: -.1em;
    left: 0;
    width: 100%;
    height: .045em;
    background: var(--red);
    transform: scaleX(var(--underline, 0));
    transform-origin: left;
    rotate: -1deg;
  }

  .motion-ready .campaign { padding-bottom: clamp(60px, 7vw, 110px); }
  .motion-ready .campaign-reel { height: 330svh; }
  .motion-ready .campaign-stage {
    position: sticky;
    top: 64px;
    height: calc(100svh - 64px);
    display: flex;
    flex-direction: column;
    padding-bottom: 22px;
  }
  .motion-ready .reel-instruction,
  .motion-ready .reel-controls { display: inline-flex; }
  .motion-ready .reel-instruction { align-items: center; gap: 16px; }
  .motion-ready .reel-instruction > span { color: var(--red); font-size: 1.4rem; }
  .motion-ready .campaign-viewport {
    flex: 1;
    min-height: 0;
    margin-right: calc(-1 * var(--page));
    overflow: hidden;
  }
  .motion-ready .campaign-track {
    display: flex;
    height: 100%;
    gap: clamp(16px, 2vw, 30px);
    transform: translate3d(var(--reel-x, 0px), 0, 0);
    will-change: transform;
  }
  .motion-ready .campaign-track .campaign-card {
    flex: 0 0 min(70%, 56svh);
    height: 100%;
    aspect-ratio: auto;
    min-width: 0;
    clip-path: inset(var(--card-inset, 0%) 0);
  }
  .motion-ready .campaign-track .campaign-card img {
    transform: translate3d(var(--card-pan, 0px), 0, 0) scale(1.08);
    transition: filter .55s ease;
  }
  .motion-ready .campaign-track .campaign-card img { object-position: 50% 25%; }
  .motion-ready .campaign-track .campaign-card:first-child img { object-position: 50% 18%; }
  .motion-ready .reel-progress { display: flex; gap: 8px; margin-top: 18px; }
  .motion-ready .reel-progress > span {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--line-light);
    overflow: hidden;
  }
  .motion-ready .reel-progress > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: scaleX(var(--segment-fill, 0));
    transform-origin: left;
  }

  .motion-ready .heading-line {
    translate: var(--line-x, 0px) 0;
    opacity: var(--line-opacity, 1);
  }
  .motion-ready .wall-frame {
    transform: translate3d(0, var(--frame-y, 0px), 0) rotate(var(--frame-r, 0deg));
    scale: var(--frame-scale, 1);
    transform-origin: center;
  }
  .motion-ready .tw-line { translate: var(--question-x, 0px) 0; }
  .motion-ready .city-row {
    opacity: var(--row-opacity, 1);
    translate: var(--row-x, 0px) 0;
  }
  .motion-ready .city-row:focus-visible { opacity: 1; translate: none; }
  .motion-ready .city-preview img { scale: var(--city-zoom, 1); }
  .motion-ready .pin-cta { position: relative; }
  .motion-ready .pin-mark {
    --reveal-rest: rotate(var(--pin-rotate, 4deg));
    rotate: var(--pin-turn, 0deg);
    scale: var(--pin-scale, 1);
  }
  .motion-ready .pin-mark i { rotate: var(--pin-star, 0deg); }
  .motion-ready .footer-logo img {
    transform: translate3d(0, var(--footer-y, 0px), 0) scale(var(--footer-scale, 1));
    clip-path: inset(var(--footer-clip, 0%) 0 0);
    transform-origin: center bottom;
  }

  @media (max-width: 820px) {
    .motion-ready .campaign-reel { height: 280svh; }
    .motion-ready .campaign-stage { height: calc(88svh - 64px); }
    .motion-ready .campaign-track .campaign-card { flex-basis: min(86%, 56svh); }
    .motion-ready .wall-col { transform: none; }
  }
  @media (max-width: 560px) {
    .motion-ready .campaign-reel { height: 270svh; }
    .motion-ready .campaign-stage { height: calc(90svh - 64px); }
    .reel-meta { font-size: .52rem; letter-spacing: .08em; gap: 10px; }
    .reel-controls { gap: 8px; }
    .reel-controls button { width: 34px; height: 38px; }
    .reel-counter { min-width: 46px; }
    .motion-ready .reel-instruction { gap: 6px; }
  }
  /* A short landscape viewport cannot fit a useful pinned photograph. */
  @media (max-height: 480px) {
    .motion-ready .campaign-reel { height: auto; }
    .motion-ready .campaign-stage { position: relative; top: auto; height: auto; }
    .motion-ready .campaign-viewport { overflow: visible; margin-right: 0; }
    .motion-ready .campaign-track { display: grid; transform: none; }
    .motion-ready .campaign-track .campaign-card { aspect-ratio: 4 / 5; }
    .motion-ready .reel-meta, .motion-ready .reel-progress { display: none; }
  }
}

@media (max-width: 560px) {
  .campaign-track { grid-template-columns: 1fr; }
  .campaign-track .campaign-card:last-child { grid-column: auto; aspect-ratio: 4 / 5; }
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wall-frame figcaption { padding: 24px 8px 8px; font-size: .48rem; letter-spacing: .04em; }
  .wall-frame figcaption i { display: none; }
}

@media (max-width: 820px) {
  .pin-mark.reveal.in { opacity: .12; }
}