/* The Poko short: a looping story told with the app's mascot.
   Every timeline animation shares --film (25s), so each percentage is a moment
   in the story: 1% = 0.25s. Base styles (no animation) are the final frame, so
   reduced motion shows the finished map instead of an empty stage.

   0–12%    Poko strolls in and a friend walks up
   12–26%   the friend lifts a restaurant off its own map; it settles onto Poko's
   35–60%   the restaurant pops up; Poko goes in and comes out hugging a heart
   60–72%   Poko throws its list as a paper plane
   73–97%   the plane brings friends back; they hold hands and their places unfold as one map */

.film {
  --film: 25s;
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background: #fffaec;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--elevation-3);
}

/* The stage is drawn 1200 wide so entrances and exits have room offstage; the
   square frame shows its middle (x 262 to 938), where the story happens. */
.film-frame {
  position: relative;
  aspect-ratio: 1 / 1;
}

.film-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.film .chip-text {
  font: 700 17px var(--font);
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
  dominant-baseline: central;
}

.film .chip-text-lg {
  font-size: 21px;
}

/* ── Characters ── */

.a-poko { --paper: #fffaea; }
.a-f1 { --paper: #f8e0cf; }
.a-f2 { --paper: #ddf2ef; }
.a-f3 { --paper: #e5f3e9; }

.film .paper,
.film .limb {
  fill: var(--paper);
  stroke: #59662e;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.film .arm-out,
.film .arm-in {
  fill: none;
  stroke-linecap: round;
}

.film .arm-out {
  stroke: #59662e;
  stroke-width: 3.2;
}

.film .arm-in {
  stroke: var(--paper);
  stroke-width: 1.6;
}

.a-f1 .eyes-happy,
.a-f3 .eyes-happy,
.a-poko .eyes-open,
.a-f2 .eyes-open {
  opacity: 0;
}

/* Where each transform pivots. Inside a character, lengths are the 32-unit
   mascot drawing: feet at (16, 30), hips at the tops of the legs. */
.film .actor,
.film .fly-pin,
.film .fly-plane {
  transform-box: view-box;
  transform-origin: 0 0;
}

.film .hop,
.film .squash {
  transform-box: view-box;
  transform-origin: 16px 30px;
}

.film .leg-l {
  transform-box: view-box;
  transform-origin: 12.3px 23.4px;
}

.film .leg-r {
  transform-box: view-box;
  transform-origin: 21.4px 23px;
}

.film .throw-arm {
  transform-box: view-box;
  transform-origin: 28.3px 14.2px;
}

.film .eyes-open,
.film .mouth-o,
.film .bpin,
.film .bpin-ring,
.film .fpin,
.film .hug-heart,
.film .ripple,
.film .chip {
  transform-box: fill-box;
  transform-origin: center;
}

.film .shop {
  transform-box: view-box;
  transform-origin: 770px 585px;
}

/* The camera pushes in on the conversation: at 1.4x this origin frames
   x 333 to 816 and y 190 to 672 of the stage. */
.film .camera {
  transform-box: view-box;
  transform-origin: 510px 665px;
}

.film .shop-door {
  transform-box: fill-box;
  transform-origin: left bottom;
}

.film .bm-pin {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.film .bm-a {
  transform-box: view-box;
  transform-origin: 490px 360px;
}

.film .bm-b {
  transform-box: view-box;
  transform-origin: 595px 360px;
}

.film .bm-c {
  transform-box: view-box;
  transform-origin: 700px 360px;
}

/* ── The final frame (and the reduced-motion picture) ── */

.a-poko { transform: translate(385px, 585px); }
.a-f1 { transform: translate(525px, 585px); }
.a-f2 { transform: translate(665px, 585px); }
.a-f3 { transform: translate(805px, 585px); }

.film .legs-walk,
.film .pose-hug,
.film .pose-throw,
.film .talk,
.film .fly-pin,
.film .ripple,
.film .fly-plane,
.film .score-pop,
.film .shop-glow,
.film .f-curtain {
  opacity: 0;
}

.film .shadow {
  fill: #59662e;
  opacity: 0.1;
}

.film .ripple {
  fill: none;
  stroke: #e76f51;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.film .shop {
  transform: scaleY(0);
}

.film .bm-fill {
  fill: #fffdf5;
}

.film .bm-line {
  fill: none;
  stroke: #59662e;
  stroke-width: 5;
  stroke-linejoin: round;
}

.film .bm-route {
  fill: none;
  stroke: #59662e;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2 12;
  opacity: 0.55;
}

/* ── Timeline: the curtain opens and closes each loop ── */

.film .f-curtain { animation: film-curtain var(--film) linear infinite; }

@keyframes film-curtain {
  0% { opacity: 1; }
  1.6%, 96% { opacity: 0; }
  99.2%, 100% { opacity: 1; }
}

/* ── The camera ── */

.film .camera { animation: camera var(--film) linear infinite; }

@keyframes camera {
  0%, 10.4% { transform: scale(1); animation-timing-function: ease-in-out; }
  15.6%, 28.8% { transform: scale(1.4); animation-timing-function: ease-in-out; }
  33.6%, 100% { transform: scale(1); }
}

/* ── Poko ── */

.film .a-poko { animation: poko-path var(--film) linear infinite; }

@keyframes poko-path {
  0%, 1.6% { transform: translate(170px, 585px) scale(1); opacity: 1; }
  9.8% { transform: translate(452px, 585px) scale(1); opacity: 1; animation-timing-function: ease-out; }
  11.2%, 36.8% { transform: translate(480px, 585px) scale(1); opacity: 1; }
  43.2%, 44% { transform: translate(700px, 585px) scale(1); opacity: 1; }
  44.6% { transform: translate(720px, 566px) scale(0.62); opacity: 1; }
  45.2%, 51.2% { transform: translate(728px, 582px) scale(0.3); opacity: 0; }
  51.6% { transform: translate(712px, 566px) scale(0.62); opacity: 1; animation-timing-function: ease-out; }
  52.4% { transform: translate(630px, 585px) scale(1.12); opacity: 1; }
  53.2%, 72.8% { transform: translate(630px, 585px) scale(1); opacity: 1; }
  82.4%, 99.5% { transform: translate(385px, 585px) scale(1); opacity: 1; }
  99.6%, 100% { transform: translate(170px, 585px) scale(1); opacity: 1; }
}

.film .a-poko .legs-walk { animation: poko-walk var(--film) linear infinite; }
.film .a-poko .legs-still { animation: poko-stand var(--film) linear infinite; }

@keyframes poko-walk {
  0%, 1.5% { opacity: 0; }
  1.6%, 11.1% { opacity: 1; }
  11.2%, 36.7% { opacity: 0; }
  36.8%, 43.1% { opacity: 1; }
  43.2%, 72.7% { opacity: 0; }
  72.8%, 82.3% { opacity: 1; }
  82.4%, 100% { opacity: 0; }
}

@keyframes poko-stand {
  0%, 1.5% { opacity: 1; }
  1.6%, 11.1% { opacity: 0; }
  11.2%, 36.7% { opacity: 1; }
  36.8%, 43.1% { opacity: 0; }
  43.2%, 72.7% { opacity: 1; }
  72.8%, 82.3% { opacity: 0; }
  82.4%, 100% { opacity: 1; }
}

/* Eyes on the friend, up at the pin it lifts (one blink), then down as it lands. */
.film .a-poko .eyes-open { animation: poko-eyes-open var(--film) linear infinite; }
.film .a-poko .eyes-happy { animation: poko-eyes-happy var(--film) linear infinite; }

@keyframes poko-eyes-open {
  0%, 11.9% { opacity: 0; transform: translate(0, 0) scaleY(1); }
  12% { opacity: 1; transform: translate(0, 0) scaleY(1); }
  13.2%, 16% { opacity: 1; transform: translate(0.8px, 0) scaleY(1); }
  17.2%, 19.4% { opacity: 1; transform: translate(0.7px, -0.6px) scaleY(1); }
  19.8% { opacity: 1; transform: translate(0.7px, -0.6px) scaleY(0.1); }
  20.2%, 22% { opacity: 1; transform: translate(0.7px, -0.6px) scaleY(1); }
  23.8%, 24.3% { opacity: 1; transform: translate(0.6px, 0.4px) scaleY(1); }
  24.4%, 100% { opacity: 0; transform: translate(0, 0) scaleY(1); }
}

@keyframes poko-eyes-happy {
  0%, 11.9% { opacity: 1; }
  12%, 24.3% { opacity: 0; }
  24.4%, 100% { opacity: 1; }
}

/* Leaning in to listen, a soft squash as the pin lands, a crouch before the
   door, and a jump for joy. */
.film .a-poko .squash { animation: poko-squash var(--film) linear infinite; }
.film .a-poko .hop { animation: poko-hop var(--film) linear infinite; }

@keyframes poko-squash {
  0%, 12% { transform: rotate(0deg) scale(1, 1); }
  13.2%, 16.4% { transform: rotate(3deg) scale(1, 1); }
  17.6%, 22% { transform: rotate(1.5deg) scale(1, 1); }
  24.2% { transform: rotate(0deg) scale(1, 1); }
  24.9% { transform: rotate(0deg) scale(1.06, 0.93); }
  25.6% { transform: rotate(0deg) scale(0.98, 1.03); }
  26.3%, 43.4% { transform: rotate(0deg) scale(1, 1); }
  44% { transform: rotate(0deg) scale(1.08, 0.9); }
  44.6% { transform: rotate(0deg) scale(0.94, 1.08); }
  45.2%, 90.4% { transform: rotate(0deg) scale(1, 1); }
  90.9% { transform: rotate(0deg) scale(1.08, 0.9); }
  91.7% { transform: rotate(0deg) scale(0.95, 1.07); }
  92.5% { transform: rotate(0deg) scale(1.07, 0.92); }
  93.2%, 100% { transform: rotate(0deg) scale(1, 1); }
}

@keyframes poko-hop {
  0%, 90.9% { transform: translateY(0); animation-timing-function: ease-out; }
  91.7% { transform: translateY(-6px); animation-timing-function: ease-in; }
  92.5%, 100% { transform: translateY(0); }
}

/* Poko's map already has a bakery; the friend's restaurant lands beside it. */
.film .bpin-1,
.film .fpin { animation: fpin-pulse var(--film) linear infinite; }
.film .fpin-src { animation: fpin-src var(--film) linear infinite; }
.film .bpin-2 { animation: bpin-arrive var(--film) linear infinite; }
.film .bpin-ring { animation: bpin-ring var(--film) linear infinite; }

@keyframes bpin-arrive {
  0%, 24.3% { transform: scale(0); }
  24.9% { transform: scale(1.25); }
  25.5% { transform: scale(0.92); }
  26.1%, 85.6% { transform: scale(1); }
  86.6% { transform: scale(1.3); }
  87.6%, 99.5% { transform: scale(1); }
  99.6%, 100% { transform: scale(0); }
}

/* Rated: a teal All-timer ring around the restaurant. */
@keyframes bpin-ring {
  0%, 53.6% { transform: scale(0); opacity: 0; }
  54.4% { transform: scale(1.3); opacity: 1; }
  55.2%, 99.5% { transform: scale(1); opacity: 1; }
  99.6%, 100% { transform: scale(0); opacity: 0; }
}

@keyframes fpin-pulse {
  0%, 85.6% { transform: scale(1); }
  86.6% { transform: scale(1.3); }
  87.6%, 100% { transform: scale(1); }
}

/* The friend's own restaurant pin brightens as it shares it. */
@keyframes fpin-src {
  0%, 13.2% { transform: scale(1); }
  13.8% { transform: scale(1.3); }
  14.6%, 85.6% { transform: scale(1); }
  86.6% { transform: scale(1.3); }
  87.6%, 100% { transform: scale(1); }
}

/* Hugging the heart after the meal: the app's All-timer pose. */
.film .pose-hug { animation: pose-hug var(--film) linear infinite; }
.film .hug-heart { animation: hug-squeeze var(--film) linear infinite; }

@keyframes pose-hug {
  0%, 51.1% { opacity: 0; }
  51.2%, 60% { opacity: 1; }
  60.1%, 100% { opacity: 0; }
}

@keyframes hug-squeeze {
  0%, 53% { transform: scale(1); }
  54% { transform: scale(1.16); }
  55% { transform: scale(0.95); }
  56%, 100% { transform: scale(1); }
}

/* Wind up, throw the list. */
.film .pose-throw { animation: pose-throw var(--film) linear infinite; }
.film .throw-arm { animation: throw-swing var(--film) linear infinite; }
.film .plane-held { animation: plane-held var(--film) linear infinite; }

@keyframes pose-throw {
  0%, 60.7% { opacity: 0; }
  60.8%, 67.6% { opacity: 1; }
  67.7%, 100% { opacity: 0; }
}

@keyframes throw-swing {
  0%, 64.4% { transform: rotate(-40deg); animation-timing-function: ease-in; }
  66%, 100% { transform: rotate(45deg); }
}

@keyframes plane-held {
  0%, 65.9% { opacity: 1; }
  66%, 100% { opacity: 0; }
}

.film .arms-link { animation: film-link var(--film) linear infinite; }

@keyframes film-link {
  0%, 83.1% { opacity: 0; }
  83.2%, 96.8% { opacity: 1; }
  96.9%, 100% { opacity: 0; }
}

/* ── The friend who shares the restaurant ── */

.film .a-f1 { animation: f1-path var(--film) linear infinite; }
.film .a-f1 .legs-walk { animation: f1-walk var(--film) linear infinite; }
.film .a-f1 .legs-still { animation: f1-stand var(--film) linear infinite; }
.film .a-f1 .hop { animation: f1-hop var(--film) linear infinite; }
.film .a-f1 .squash { animation: f1-squash var(--film) linear infinite; }
.film .a-f1 .eyes-open { animation: f1-eyes var(--film) linear infinite; }
.film .a-f1 .mouth { animation: f1-mouth var(--film) linear infinite; }
.film .a-f1 .talk { animation: f1-talk var(--film) linear infinite; }
.film .mouth-o { animation: talk 0.34s ease-in-out infinite alternate; }

@keyframes f1-path {
  0%, 3.2% { transform: translate(1100px, 585px); }
  10.6% { transform: translate(690px, 585px); animation-timing-function: ease-out; }
  12%, 30% { transform: translate(660px, 585px); }
  36.4%, 72.8% { transform: translate(1100px, 585px); }
  81.6%, 99.5% { transform: translate(525px, 585px); }
  99.6%, 100% { transform: translate(1100px, 585px); }
}

@keyframes f1-walk {
  0%, 3.1% { opacity: 0; }
  3.2%, 11.9% { opacity: 1; }
  12%, 29.9% { opacity: 0; }
  30%, 36.3% { opacity: 1; }
  36.4%, 72.7% { opacity: 0; }
  72.8%, 81.5% { opacity: 1; }
  81.6%, 100% { opacity: 0; }
}

@keyframes f1-stand {
  0%, 3.1% { opacity: 1; }
  3.2%, 11.9% { opacity: 0; }
  12%, 29.9% { opacity: 1; }
  30%, 36.3% { opacity: 0; }
  36.4%, 72.7% { opacity: 1; }
  72.8%, 81.5% { opacity: 0; }
  81.6%, 100% { opacity: 1; }
}

@keyframes f1-hop {
  0%, 91.4% { transform: translateY(0); animation-timing-function: ease-out; }
  92.2% { transform: translateY(-6px); animation-timing-function: ease-in; }
  93%, 100% { transform: translateY(0); }
}

/* Leaning in to tell Poko about it, and a happy bounce when Poko saves it. */
@keyframes f1-squash {
  0%, 12% { transform: rotate(0deg) scale(1, 1); }
  13.2%, 24.6% { transform: rotate(-4deg) scale(1, 1); }
  25.2% { transform: rotate(-3deg) scale(1.05, 0.95); }
  25.8% { transform: rotate(-4deg) scale(0.98, 1.03); }
  26.4%, 29.2% { transform: rotate(-4deg) scale(1, 1); }
  30%, 90.9% { transform: rotate(0deg) scale(1, 1); }
  91.4% { transform: rotate(0deg) scale(1.08, 0.9); }
  92.2% { transform: rotate(0deg) scale(0.95, 1.07); }
  93% { transform: rotate(0deg) scale(1.07, 0.92); }
  93.7%, 100% { transform: rotate(0deg) scale(1, 1); }
}

/* It looks at Poko, up at the pin, and back at Poko (one blink). */
@keyframes f1-eyes {
  0%, 12% { transform: translate(0, 0) scaleY(1); }
  13.2%, 16% { transform: translate(-0.8px, 0) scaleY(1); }
  17.2%, 21.6% { transform: translate(-0.6px, -0.5px) scaleY(1); }
  23.8%, 26.8% { transform: translate(-0.8px, 0.2px) scaleY(1); }
  27.2% { transform: translate(-0.8px, 0.2px) scaleY(0.1); }
  27.6%, 29.2% { transform: translate(-0.8px, 0.2px) scaleY(1); }
  30%, 100% { transform: translate(0, 0) scaleY(1); }
}

/* Talking: an open mouth that flaps on its own short clock. */
@keyframes f1-talk {
  0%, 13.5% { opacity: 0; }
  13.6%, 21.9% { opacity: 1; }
  22%, 100% { opacity: 0; }
}

@keyframes f1-mouth {
  0%, 13.5% { opacity: 1; }
  13.6%, 21.9% { opacity: 0; }
  22%, 100% { opacity: 1; }
}

@keyframes talk {
  from { transform: scaleY(0.3); }
  to { transform: scaleY(1); }
}

/* ── More friends arrive with the plane ── */

.film .a-f2 { animation: f2-path var(--film) linear infinite; }
.film .a-f2 .legs-walk { animation: f2-walk var(--film) linear infinite; }
.film .a-f2 .legs-still { animation: f2-stand var(--film) linear infinite; }
.film .a-f2 .hop { animation: f2-hop var(--film) linear infinite; }
.film .a-f2 .squash { animation: f2-squash var(--film) linear infinite; }

@keyframes f2-path {
  0%, 72.8% { transform: translate(1250px, 585px); }
  82.4%, 99.5% { transform: translate(665px, 585px); }
  99.6%, 100% { transform: translate(1250px, 585px); }
}

@keyframes f2-walk {
  0%, 72.7% { opacity: 0; }
  72.8%, 82.3% { opacity: 1; }
  82.4%, 100% { opacity: 0; }
}

@keyframes f2-stand {
  0%, 72.7% { opacity: 1; }
  72.8%, 82.3% { opacity: 0; }
  82.4%, 100% { opacity: 1; }
}

@keyframes f2-hop {
  0%, 91.9% { transform: translateY(0); animation-timing-function: ease-out; }
  92.7% { transform: translateY(-6px); animation-timing-function: ease-in; }
  93.5%, 100% { transform: translateY(0); }
}

@keyframes f2-squash {
  0%, 91.4% { transform: scale(1, 1); }
  91.9% { transform: scale(1.08, 0.9); }
  92.7% { transform: scale(0.95, 1.07); }
  93.5% { transform: scale(1.07, 0.92); }
  94.2%, 100% { transform: scale(1, 1); }
}

.film .a-f3 { animation: f3-path var(--film) linear infinite; }
.film .a-f3 .legs-walk { animation: f3-walk var(--film) linear infinite; }
.film .a-f3 .legs-still { animation: f3-stand var(--film) linear infinite; }
.film .a-f3 .hop { animation: f3-hop var(--film) linear infinite; }
.film .a-f3 .squash { animation: f3-squash var(--film) linear infinite; }

@keyframes f3-path {
  0%, 72.8% { transform: translate(1400px, 585px); }
  83.2%, 99.5% { transform: translate(805px, 585px); }
  99.6%, 100% { transform: translate(1400px, 585px); }
}

@keyframes f3-walk {
  0%, 72.7% { opacity: 0; }
  72.8%, 83.1% { opacity: 1; }
  83.2%, 100% { opacity: 0; }
}

@keyframes f3-stand {
  0%, 72.7% { opacity: 1; }
  72.8%, 83.1% { opacity: 0; }
  83.2%, 100% { opacity: 1; }
}

@keyframes f3-hop {
  0%, 92.4% { transform: translateY(0); animation-timing-function: ease-out; }
  93.2% { transform: translateY(-6px); animation-timing-function: ease-in; }
  94%, 100% { transform: translateY(0); }
}

@keyframes f3-squash {
  0%, 91.9% { transform: scale(1, 1); }
  92.4% { transform: scale(1.08, 0.9); }
  93.2% { transform: scale(0.95, 1.07); }
  94% { transform: scale(1.07, 0.92); }
  94.7%, 100% { transform: scale(1, 1); }
}

/* Everyone walks on the same short stride. */
.film .leg-l { animation: film-stride 0.42s ease-in-out infinite alternate; }
.film .leg-r { animation: film-stride 0.42s ease-in-out infinite alternate-reverse; }

@keyframes film-stride {
  from { transform: rotate(-16deg); }
  to { transform: rotate(16deg); }
}

/* ── The restaurant lifts off the friend's map and settles onto Poko's ── */

.film .fly-pin { animation: fly-pin var(--film) linear infinite; }
.film .ripple-f1 { animation: ripple-f1 var(--film) linear infinite; }
.film .ripple-p { animation: ripple-p var(--film) linear infinite; }

@keyframes fly-pin {
  0%, 14.3% { opacity: 0; transform: translate(628px, 553px) rotate(0deg) scale(0.7); }
  14.4% { opacity: 1; transform: translate(628px, 553px) rotate(0deg) scale(0.7); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  16.4% { opacity: 1; transform: translate(574px, 427px) rotate(-3deg) scale(1.06); animation-timing-function: ease-in-out; }
  17.2% { opacity: 1; transform: translate(572px, 432px) rotate(0deg) scale(1); animation-timing-function: ease-in-out; }
  19.2% { opacity: 1; transform: translate(572px, 424px) rotate(0deg) scale(1); animation-timing-function: ease-in-out; }
  21.2% { opacity: 1; transform: translate(572px, 431px) rotate(0deg) scale(1); animation-timing-function: ease-in-out; }
  22.2% { opacity: 1; transform: translate(571px, 427px) rotate(0deg) scale(1); animation-timing-function: ease-in; }
  23.3% { opacity: 1; transform: translate(537px, 476px) rotate(-7deg) scale(0.87); animation-timing-function: ease-out; }
  24.4% { opacity: 1; transform: translate(509px, 549px) rotate(0deg) scale(0.7); }
  24.5%, 100% { opacity: 0; transform: translate(509px, 549px) rotate(0deg) scale(0.7); }
}

@keyframes ripple-f1 {
  0%, 13.1% { opacity: 0; transform: scale(1); }
  13.2% { opacity: 0.7; transform: scale(1); animation-timing-function: ease-out; }
  15.2%, 100% { opacity: 0; transform: scale(2.4); }
}

@keyframes ripple-p {
  0%, 24.3% { opacity: 0; transform: scale(1); }
  24.4% { opacity: 0.7; transform: scale(1); animation-timing-function: ease-out; }
  26.8%, 100% { opacity: 0; transform: scale(2.6); }
}

/* ── The restaurant pops up ── */

.film .shop { animation: shop var(--film) linear infinite; }
.film .shop-glow { animation: shop-glow var(--film) linear infinite; }
.film .shop-door { animation: shop-door var(--film) linear infinite; }
.film .puff { animation: steam 2.4s ease-out infinite; }
.film .puff-2 { animation-delay: 0.8s; }
.film .puff-3 { animation-delay: 1.6s; }

@keyframes shop {
  0%, 35.2% { transform: scaleY(0) rotate(0deg); animation-timing-function: ease-out; }
  37.6% { transform: scaleY(1.12) rotate(0deg); }
  38.6% { transform: scaleY(0.96) rotate(0deg); }
  39.2%, 46% { transform: scaleY(1) rotate(0deg); }
  47% { transform: scaleY(1) rotate(-2.5deg); }
  48% { transform: scaleY(1) rotate(2.5deg); }
  49% { transform: scaleY(1) rotate(-2deg); }
  50% { transform: scaleY(1) rotate(1.5deg); }
  51.2%, 60% { transform: scaleY(1) rotate(0deg); animation-timing-function: ease-in; }
  63.2%, 100% { transform: scaleY(0) rotate(0deg); }
}

@keyframes shop-door {
  0%, 43.2% { transform: scaleX(1); animation-timing-function: ease-out; }
  44%, 45.4% { transform: scaleX(0.12); animation-timing-function: ease-in; }
  46.2%, 50.4% { transform: scaleX(1); animation-timing-function: ease-out; }
  51.1%, 52.6% { transform: scaleX(0.12); animation-timing-function: ease-in; }
  53.4%, 100% { transform: scaleX(1); }
}

@keyframes shop-glow {
  0%, 45.6% { opacity: 0; }
  46.6%, 51.2% { opacity: 1; }
  52.4%, 100% { opacity: 0; }
}

@keyframes steam {
  from { transform: translate(0, 0) scale(0.5); opacity: 0.9; }
  to { transform: translate(8px, -58px) scale(1.5); opacity: 0; }
}

.film .score-pop { animation: score-pop var(--film) linear infinite; }

@keyframes score-pop {
  0%, 52.8% { opacity: 0; transform: translate(0, 0) scale(0); }
  53.6% { opacity: 1; transform: translate(0, 0) scale(1.15); }
  54.4%, 59.2% { opacity: 1; transform: translate(0, 0) scale(1); }
  60.8%, 100% { opacity: 0; transform: translate(0, -14px) scale(1); }
}

/* ── The plane: out to the right, back with friends, into the map ── */

.film .fly-plane { animation: plane var(--film) linear infinite; }

@keyframes plane {
  0%, 65.9% { opacity: 0; transform: translate(711px, 483px) rotate(-30deg) scale(1, 1); }
  66% { opacity: 1; transform: translate(711px, 483px) rotate(-30deg) scale(1, 1); animation-timing-function: ease-out; }
  68% { opacity: 1; transform: translate(860px, 370px) rotate(-22deg) scale(1, 1); }
  70%, 78.4% { opacity: 1; transform: translate(1060px, 280px) rotate(-12deg) scale(1, 1); }
  78.5% { opacity: 1; transform: translate(1060px, 190px) rotate(0deg) scale(-1, 1); }
  80.8% { opacity: 1; transform: translate(900px, 160px) rotate(-8deg) scale(-1, 1); }
  82.4% { opacity: 1; transform: translate(760px, 220px) rotate(10deg) scale(-1, 1); animation-timing-function: ease-in; }
  84% { opacity: 1; transform: translate(606px, 322px) rotate(18deg) scale(-0.5, 0.5); }
  84.1%, 100% { opacity: 0; transform: translate(606px, 322px) rotate(18deg) scale(-0.5, 0.5); }
}

/* ── Everyone's places unfold into one map ── */

.film .bm-a,
.film .bm-c { animation: bm-side var(--film) linear infinite; }
.film .bm-b { animation: bm-center var(--film) linear infinite; }
.film .bm-detail { animation: bm-detail var(--film) linear infinite; }
.film .bm-route { animation: bm-route var(--film) linear infinite, film-march 1s linear infinite; }

@keyframes bm-center {
  0%, 84% { transform: scaleX(0); animation-timing-function: ease-out; }
  85.2% { transform: scaleX(1.06); }
  85.8%, 99.5% { transform: scaleX(1); }
  99.6%, 100% { transform: scaleX(0); }
}

@keyframes bm-side {
  0%, 84.8% { transform: scaleX(0); animation-timing-function: ease-out; }
  86% { transform: scaleX(1.05); }
  86.6%, 99.5% { transform: scaleX(1); }
  99.6%, 100% { transform: scaleX(0); }
}

@keyframes bm-detail {
  0%, 85.6% { opacity: 0; }
  87%, 99.5% { opacity: 1; }
  99.6%, 100% { opacity: 0; }
}

@keyframes bm-route {
  0%, 87.2% { opacity: 0; }
  88.8%, 99.5% { opacity: 0.55; }
  99.6%, 100% { opacity: 0; }
}

@keyframes film-march {
  to { stroke-dashoffset: -14; }
}

.film .bm-pin-1 { animation: bm-pin-1 var(--film) linear infinite; }
.film .bm-pin-2 { animation: bm-pin-2 var(--film) linear infinite; }
.film .bm-pin-3 { animation: bm-pin-3 var(--film) linear infinite; }
.film .bm-pin-4 { animation: bm-pin-4 var(--film) linear infinite; }
.film .bm-pin-5 { animation: bm-pin-5 var(--film) linear infinite; }
.film .bm-pin-6 { animation: bm-pin-6 var(--film) linear infinite; }
.film .bm-chip-1 { animation: bm-chip-1 var(--film) linear infinite; }
.film .bm-chip-2 { animation: bm-chip-2 var(--film) linear infinite; }

@keyframes bm-pin-1 {
  0%, 86.4% { transform: scale(0); }
  87.2% { transform: scale(1.25); }
  87.8% { transform: scale(0.92); }
  88.4%, 99.5% { transform: scale(1); }
  99.6%, 100% { transform: scale(0); }
}

@keyframes bm-pin-2 {
  0%, 86.9% { transform: scale(0); }
  87.7% { transform: scale(1.25); }
  88.3% { transform: scale(0.92); }
  88.9%, 99.5% { transform: scale(1); }
  99.6%, 100% { transform: scale(0); }
}

@keyframes bm-pin-3 {
  0%, 87.4% { transform: scale(0); }
  88.2% { transform: scale(1.25); }
  88.8% { transform: scale(0.92); }
  89.4%, 99.5% { transform: scale(1); }
  99.6%, 100% { transform: scale(0); }
}

@keyframes bm-pin-4 {
  0%, 87.9% { transform: scale(0); }
  88.7% { transform: scale(1.25); }
  89.3% { transform: scale(0.92); }
  89.9%, 99.5% { transform: scale(1); }
  99.6%, 100% { transform: scale(0); }
}

@keyframes bm-pin-5 {
  0%, 88.4% { transform: scale(0); }
  89.2% { transform: scale(1.25); }
  89.8% { transform: scale(0.92); }
  90.4%, 99.5% { transform: scale(1); }
  99.6%, 100% { transform: scale(0); }
}

@keyframes bm-pin-6 {
  0%, 88.9% { transform: scale(0); }
  89.7% { transform: scale(1.25); }
  90.3% { transform: scale(0.92); }
  90.9%, 99.5% { transform: scale(1); }
  99.6%, 100% { transform: scale(0); }
}

@keyframes bm-chip-1 {
  0%, 89.6% { transform: scale(0); }
  90.4% { transform: scale(1.2); }
  91%, 99.5% { transform: scale(1); }
  99.6%, 100% { transform: scale(0); }
}

@keyframes bm-chip-2 {
  0%, 90.2% { transform: scale(0); }
  91% { transform: scale(1.2); }
  91.6%, 99.5% { transform: scale(1); }
  99.6%, 100% { transform: scale(0); }
}

/* Clouds drift on their own clock. */
.film .cloud-1 { animation: cloud 48s linear infinite; }
.film .cloud-2 { animation: cloud 70s linear -30s infinite; }

@keyframes cloud {
  from { transform: translateX(180px); }
  to { transform: translateX(1020px); }
}

/* ── Captions and chapter dots, on the same clock ── */

.film-captions {
  display: grid;
  justify-items: center;
  padding: 20px 24px 6px;
  color: #303a2c;
  text-align: center;
}

.cap {
  grid-area: 1 / 1;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  opacity: 0;
}

.cap-5 {
  opacity: 1;
}

.film-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 22px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #dfddc9;
}

.film .cap-1 { animation: cap-1 var(--film) linear infinite; }
.film .cap-2 { animation: cap-2 var(--film) linear infinite; }
.film .cap-3 { animation: cap-3 var(--film) linear infinite; }
.film .cap-4 { animation: cap-4 var(--film) linear infinite; }
.film .cap-5 { animation: cap-5 var(--film) linear infinite; }
.film .dot-1 { animation: dot-1 var(--film) linear infinite; }
.film .dot-2 { animation: dot-2 var(--film) linear infinite; }
.film .dot-3 { animation: dot-3 var(--film) linear infinite; }
.film .dot-4 { animation: dot-4 var(--film) linear infinite; }
.film .dot-5 { animation: dot-5 var(--film) linear infinite; }

@keyframes cap-1 {
  0%, 10.6% { opacity: 0; transform: translateY(8px); }
  11.6%, 20.8% { opacity: 1; transform: translateY(0); }
  21.8%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes cap-2 {
  0%, 22.4% { opacity: 0; transform: translateY(8px); }
  23.4%, 33.4% { opacity: 1; transform: translateY(0); }
  34.4%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes cap-3 {
  0%, 37.6% { opacity: 0; transform: translateY(8px); }
  38.6%, 60.6% { opacity: 1; transform: translateY(0); }
  61.6%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes cap-4 {
  0%, 62.4% { opacity: 0; transform: translateY(8px); }
  63.4%, 75.8% { opacity: 1; transform: translateY(0); }
  76.8%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes cap-5 {
  0%, 78.4% { opacity: 0; transform: translateY(8px); }
  79.4%, 96% { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes dot-1 {
  0%, 10.6% { width: 8px; background: #dfddc9; }
  11.6%, 20.8% { width: 24px; background: #59662e; }
  21.8%, 100% { width: 8px; background: #dfddc9; }
}

@keyframes dot-2 {
  0%, 22.4% { width: 8px; background: #dfddc9; }
  23.4%, 33.4% { width: 24px; background: #59662e; }
  34.4%, 100% { width: 8px; background: #dfddc9; }
}

@keyframes dot-3 {
  0%, 37.6% { width: 8px; background: #dfddc9; }
  38.6%, 60.6% { width: 24px; background: #59662e; }
  61.6%, 100% { width: 8px; background: #dfddc9; }
}

@keyframes dot-4 {
  0%, 62.4% { width: 8px; background: #dfddc9; }
  63.4%, 75.8% { width: 24px; background: #59662e; }
  76.8%, 100% { width: 8px; background: #dfddc9; }
}

@keyframes dot-5 {
  0%, 78.4% { width: 8px; background: #dfddc9; }
  79.4%, 96% { width: 24px; background: #59662e; }
  97%, 100% { width: 8px; background: #dfddc9; }
}

/* ── Pause control (WCAG 2.2.2: moving content can be stopped) ── */

.film-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dfddc9;
  border-radius: 50%;
  background: #fffdf5;
  box-shadow: 0 2px 8px rgba(48, 58, 44, 0.12);
  color: #303a2c;
  cursor: pointer;
}

.film-toggle[hidden] {
  display: none;
}

.film-toggle-icon {
  display: block;
  width: 12px;
  height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

.film-toggle[aria-pressed="true"] .film-toggle-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
  border-right: 0;
}

.film-toggle:focus-visible {
  outline: 3px solid #59662e;
  outline-offset: 3px;
}

.film.is-paused *,
.film.is-paused *::before,
.film.is-paused *::after {
  animation-play-state: paused !important;
}

@media (prefers-color-scheme: dark) {
  .film {
    border-color: #424a35;
  }
}

@media (max-width: 680px) {
  .film {
    border-radius: 28px;
  }

  .film-toggle {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .film *,
  .film *::before,
  .film *::after {
    animation: none !important;
  }

  .film-toggle,
  .film-dots {
    display: none;
  }

  .film-captions {
    padding-bottom: 24px;
  }
}