/* A rally in seven gestures. Motion stays inside clipped decorative interludes;
   native scrolling, anchors and the existing chapter scenes keep their layout. */
.chapter-transition { display: none; }
.organic-motion .chapter-transition {
  position: relative;
  display: block;
  height: clamp(380px, 76svh, 760px);
  background: var(--cream);
  pointer-events: none;
}
.chapter-transition__stage { position: relative; height: 100%; overflow: clip; isolation: isolate; }
.chapter-transition__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.chapter-transition__words {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .025em;
  padding: 36px var(--edge);
  color: var(--cream);
  font: 800 clamp(3.5rem, 10.8vw, 10rem)/.93 "Barlow Condensed", sans-serif;
  letter-spacing: -.025em;
  text-align: center;
}
.chapter-transition__words span {
  display: block;
  white-space: nowrap;
  transform: translate3d(var(--line-one-x, 0px), var(--line-one-y, 0px), 0) rotate(var(--line-one-angle, 0deg));
}
.chapter-transition__words span + span {
  transform: translate3d(var(--line-two-x, 0px), var(--line-two-y, 0px), 0) rotate(var(--line-two-angle, 0deg));
}

/* The poster flexes into a sheet of cream; its two lines find each other. */
[data-transition="project"] .chapter-transition__stage { background: var(--plum); }
[data-transition="project"] .chapter-transition__rim { fill: var(--rose); }
.chapter-transition__opening { fill: var(--cream); }
[data-transition="project"] .chapter-transition__words { color: var(--plum); }
[data-transition="project"] .chapter-transition__words span + span { color: var(--raspberry); }

/* Two complementary fields meet along a shared curve before the portraits. */
.organic-motion .chapter-transition--team { height: clamp(360px, 68svh, 680px); }
.chapter-transition--team .chapter-transition__stage { background: var(--duo-underlay, var(--plum)); }
.chapter-transition__duo--left { fill: var(--plum); transform: translate3d(var(--duo-left-x, 0px), 0, 0); }
.chapter-transition__duo--right { fill: var(--raspberry); transform: translate3d(var(--duo-right-x, 0px), 0, 0); }
.chapter-transition__thread {
  fill: none;
  stroke: var(--rose);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--thread-offset, 0);
}
.chapter-transition--team .chapter-transition__words { font-size: clamp(3rem, 9.4vw, 9rem); opacity: var(--duo-words-opacity, 1); }
.team__aperture { display: none; }

/* Bodywork and rotating wheel geometry resolve into one diagonal banner. */
.organic-motion .chapter-transition--car { height: clamp(360px, 68svh, 680px); }
.chapter-transition--car .chapter-transition__stage { background: var(--cream); }
.chapter-transition__part--back {
  fill: var(--plum);
  transform: translate3d(var(--part-back-x, 0px), var(--part-back-y, 0px), 0);
}
.chapter-transition__part--front {
  fill: var(--raspberry);
  transform: translate3d(var(--part-front-x, 0px), var(--part-front-y, 0px), 0);
}
.chapter-transition--car .chapter-transition__words { font-size: clamp(3.5rem, 11.4vw, 10rem); transform: rotate(-8deg); }
.chapter-transition__wheel {
  position: absolute;
  width: clamp(100px, 19vw, 280px);
  height: auto;
  stroke: var(--raspberry);
  stroke-width: 1.5;
  transform: translate3d(var(--wheel-x, 0px), 0, 0) rotate(var(--wheel-angle, 0deg));
}
.chapter-transition__wheel--left { left: 5%; top: -12%; }
.chapter-transition__wheel--right {
  right: 3%;
  bottom: -10%;
  stroke: var(--plum);
  transform: translate3d(calc(-1 * var(--wheel-x, 0px)), 0, 0) rotate(calc(-1 * var(--wheel-angle, 0deg)));
}

.section-join {
  position: relative;
  height: clamp(150px, 24svh, 280px);
  overflow: clip;
  isolation: isolate;
  background: var(--cream);
  pointer-events: none;
}
.section-join > svg { display: block; width: 100%; height: 100%; }
.section-join--route { height: clamp(160px, 30svh, 330px); }
.section-join__road-bed, .section-join__trace, .section-join__road-line { fill: none; stroke-linecap: round; }
.section-join__road-bed { stroke: var(--rose); stroke-width: 96; }
.section-join__trace { stroke: var(--raspberry); stroke-width: 66; stroke-dasharray: 1; stroke-dashoffset: var(--trace-offset, 0); }
.section-join__road-line { stroke: var(--cream); stroke-width: 2; stroke-dasharray: .008 .014; stroke-dashoffset: var(--road-offset, 0); }
.section-join__traveller { opacity: var(--traveller-opacity, 1); }
.section-join__traveller circle { fill: var(--plum); stroke: var(--cream); stroke-width: 2; }
.section-join__traveller path { fill: none; stroke: var(--cream); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* A die-cut sheet lifts to uncover the sticker wall. */
.section-join--sponsors { height: clamp(150px, 26svh, 290px); }
.section-join__peel-under { fill: var(--raspberry); }
.section-join__peel {
  transform-origin: 65% 100%;
  transform: translate3d(var(--peel-x, 0px), var(--peel-y, 0px), 0) rotate(var(--peel-angle, 0deg));
}
.section-join__paper-edge { fill: var(--rose); }
.section-join__paper { fill: var(--cream); }
.section-join__fold { fill: var(--sand); }

/* A loose film strip feeds into the album and settles onto its plum surface. */
.section-join--album { height: clamp(170px, 30svh, 330px); }
.section-join__film, .section-join__film-tail {
  position: absolute;
  inset: 22% -20% -65%;
  border-radius: 48% 12% 0 0 / 25% 10% 0 0;
  background: var(--plum);
  transform: translate3d(var(--film-x, 0px), var(--film-y, 0px), 0) rotate(var(--film-angle, -4deg));
  transform-origin: 68% 50%;
}
.section-join__film-tail {
  inset: 9% -25% -65%;
  background: var(--rose);
  transform: translate3d(calc(-.35 * var(--film-x, 0px)), 0, 0) rotate(6deg);
}
.section-join__film span {
  position: absolute;
  inset: 36px 32px auto;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--rose) 0 16px, transparent 16px 42px);
  opacity: .7;
}
.section-join__film span + span { top: 66px; height: 3px; opacity: .3; }

/* An expanding heart carries the album's plum into the donation section's pink. */
.section-join--donations { height: clamp(180px, 34svh, 360px); background: var(--plum); }
.section-join__heart, .section-join__heart-echo { transform-box: view-box; transform-origin: 720px 166px; }
.section-join__heart { fill: var(--rose); transform: scale(var(--heart-scale, 24)); }
.section-join__heart-echo { fill: var(--raspberry); transform: scale(var(--heart-echo-scale, 28)); }

@media (max-width: 700px) {
  .organic-motion .chapter-transition { height: clamp(300px, 54svh, 470px); }
  .organic-motion .chapter-transition--team, .organic-motion .chapter-transition--car { height: clamp(290px, 50svh, 430px); }
  .chapter-transition__words { font-size: 14vw; padding-inline: 16px; }
  .chapter-transition--team .chapter-transition__words { font-size: 12.2vw; }
  .chapter-transition--car .chapter-transition__words { font-size: 15vw; }
  .chapter-transition__wheel { width: 28vw; }
  .chapter-transition__wheel--left { top: 3%; left: -5%; }
  .chapter-transition__wheel--right { bottom: 1%; right: -3%; }
  .section-join--route { height: 150px; }
  .section-join--sponsors { height: 140px; }
  .section-join--album { height: 160px; }
  .section-join--donations { height: 180px; }
  .section-join__film span { top: 24px; height: 7px; }
  .section-join__film span + span { top: 45px; height: 2px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .organic-motion .chapter-transition { height: 300px; }
  .chapter-transition__words { font-size: min(9vw, 6rem); }
  .chapter-transition--team .chapter-transition__words { font-size: min(8vw, 5.5rem); }
  .chapter-transition--car .chapter-transition__words { font-size: min(10vw, 6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .organic-motion .chapter-transition { display: none; }
  .section-join { height: 96px; }
  .section-join__trace, .section-join__road-line { stroke-dashoffset: 0; }
  .section-join__traveller { opacity: 1; }
  .section-join__peel { transform: none; }
  .section-join__film { transform: rotate(-4deg); }
  .section-join__film-tail { transform: rotate(6deg); }
  .section-join__heart { transform: scale(24); }
  .section-join__heart-echo { transform: scale(28); }
}