/* Apex hero: animated background. GENERATED by scripts/site/build.mjs (hero.mjs); edit there. */

/* ── stage geometry: one 1600 × 300 design box, centred, as wide as the window (--sw, site.css) ── */
.hero-stage, .hero-front {
  position: absolute; left: 50%; bottom: 0; width: var(--sw, max(1600px, 100vw)); aspect-ratio: 1600 / 300;
  transform: translateX(-50%); pointer-events: none;
}
.hero-stage { z-index: 0; }
.hero-front { z-index: 2; }
.hero-front img { width: 100%; height: 100%; }
.hero-stage > * { position: absolute; }
.stage-art, .stage-routes { left: 0; top: 0; width: 100%; height: 100%; }
.stage-routes { overflow: visible; will-change: transform; }
.route { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1465 1465; }
.route.run { stroke: var(--rose); stroke-dashoffset: 783.34; }
.route.ride { stroke: var(--blue); stroke-dashoffset: 684.39; }

/* runners: .actor carries the path position (translate in % of the stage box), .hop the jump,
   .sprite img the frame (a strip of 17 hand-drawn frames, shifted one frame width at a time) */
.actor, .actor .fade { left: 0; top: 0; width: 100%; height: 100%; }
.actor .fade { position: absolute; }
.actor .hop { position: absolute; left: -1.8%; top: -25.095%; width: 3.6%; aspect-ratio: 128 / 174; }
.actor .sprite { width: 100%; height: 100%; overflow: hidden; }
.actor .sprite img { display: block; width: 1700%; max-width: none; height: 100%; transform: translateX(-70.5882%); }
.actor.ride .sprite { transform: scaleX(-1); }
.actor .shadow { /* the runner's ground shadow stays put while they hop */
  position: absolute; left: -0.7875%; top: 0.0667%; width: 1.575%; height: 0.8%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(45,37,34,.17) 55%, rgba(45,37,34,0));
}
.actor.run { transform: translate(48.5017%, 84.3251%); }
.actor.ride { transform: translate(51.5016%, 84.3282%); }

.meet-heart { left: 48.5642%; top: 43.8461%; width: 2.875%; }
.meet-spark { width: 1.5%; }
.meet-spark.k1 { left: 46.3767%; top: 41.5127%; }
.meet-spark.k2 { left: 52.1267%; top: 38.1794%; width: 1.25%; }

/* the storybook page: lands on the hill beside the couple; px-sized so it stays legible */
.chapter-pop { left: 53.3767%; bottom: 22%; width: 0; height: 0; perspective: 700px; }
.chapter-pop .page {
  position: absolute; left: 0; bottom: 0; width: 150px; padding: 6px 6px 8px; border-radius: 12px;
  background: var(--card); box-shadow: 0 1px 0 rgba(45,37,34,.06), 0 14px 26px -14px rgba(45,37,34,.45);
  transform: rotate(-4deg); transform-origin: 0 50%;
}
.chapter-pop .page::after { /* the page's inked edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(45,37,34,.82);
}
.chapter-pop .page > img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 7px; }
.chapter-pop span { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 5px; font-size: 12px; font-weight: 800; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.chapter-pop span img { width: 17px; height: 17px; }

/* Peak & Path flag (the pole is drawn in hero-stage.svg) */
.stage-flag { left: 86.4625%; top: 1.5667%; width: 1.6625%; transform-origin: 6% 50%; }

/* ── the scene behind the phone: sun glow, clouds, Sunny ─────────────────────────────── */
.scene .sky { left: 0; top: 0; width: 100%; height: auto; }
.scene .cloud { width: 17%; height: auto; }
.scene .cloud.c1 { left: 1%; top: 25%; }
.scene .cloud.c2 { left: 86%; top: 17%; width: 12%; }
.scene .sunny { left: 10%; top: 12%; width: 30%; aspect-ratio: 144 / 128; }
.scene .sunny img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .sunny-blink { opacity: 0; }

/* ── phones: a smaller window of the stage, bigger runners ─────────────────────────────── */
@media (max-width: 760px) {
  .hero-stage, .hero-front { width: 1600px; transform-origin: 50% 100%; transform: translateX(calc(-50% - 30px)) scale(0.6); }
  .actor .fade { transform: scale(1.15); transform-origin: 0 0; }
  .meet-heart { left: 48.3485%; top: 37.7661%; width: 3.3063%; }
  .meet-spark { width: 1.725%; }
  .meet-spark.k1 { left: 45.8329%; top: 35.0827%; }
  .meet-spark.k2 { left: 52.4454%; top: 31.2494%; width: 1.4375%; }
  /* the page lands on the hill left of the couple, under Sunny's bubble (the phone is on the right) */
  .chapter-pop { left: 46.4704%; transform: scale(1.467); transform-origin: 0 100%; }
  .chapter-pop .page { left: auto; right: 0; transform-origin: 100% 50%; }
}
@media (max-width: 480px) {
  .hero-stage, .hero-front { width: 1600px; transform-origin: 50% 100%; transform: translateX(calc(-50% - 21px)) scale(0.42); }
  .actor .fade { transform: scale(1.35); transform-origin: 0 0; }
  .meet-heart { left: 48.061%; top: 29.6594%; width: 3.8813%; }
  .meet-spark { width: 2.025%; }
  .meet-spark.k1 { left: 45.1079%; top: 26.5094%; }
  .meet-spark.k2 { left: 52.8704%; top: 22.0094%; width: 1.6875%; }
  /* the page lands on the hill left of the couple, under Sunny's bubble (the phone is on the right) */
  .chapter-pop { left: 46.0954%; transform: scale(1.873); transform-origin: 0 100%; }
  .chapter-pop .page { left: auto; right: 0; transform-origin: 100% 50%; }
}

/* ── motion ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero { --t: 0s; }
  .route.run  { animation: route-run 14s linear var(--t) infinite; }
  .route.ride { animation: route-ride 14s linear var(--t) infinite; }
  .actor.run  { animation: actor-run 14s linear var(--t) infinite; }
  .actor.ride { animation: actor-ride 14s linear var(--t) infinite; }
  .actor .fade { animation: actor-fade 14s linear var(--t) infinite; }
  .actor .hop, .actor .shadow { animation: hop 14s linear var(--t) infinite; }
  .actor .shadow { animation-name: hop-shadow; }
  .actor.run .sprite img  { animation: frames-ava 14s step-end var(--t) infinite; }
  .actor.ride .sprite img { animation: frames-leo 14s step-end var(--t) infinite; }
  .meet-heart { animation: heart-pop 14s linear var(--t) infinite; }
  .meet-spark { animation: spark-pop 14s linear var(--t) infinite; }
  .meet-spark.k2 { animation-name: spark-pop-2; }
  .chapter-pop .page { animation: page-flip 14s linear var(--t) infinite; }
  .stage-flag { animation: flag-wave 1.7s ease-in-out var(--t) infinite; }
  .scene .sky { animation: sky-rise 2.4s cubic-bezier(.2,.7,.3,1) var(--t) both; }
  .scene .sunny { animation: sunny-rise 2s cubic-bezier(.2,.8,.3,1.15) calc(var(--t) + .2s) both, sunny-float 6s ease-in-out calc(var(--t) + 2.2s) infinite alternate; }
  .scene .sunny-blink { animation: blink 5.2s linear calc(var(--t) + 2.6s) infinite; }
  .scene .cloud.c1 { animation: drift 26s ease-in-out var(--t) infinite alternate; }
  .scene .cloud.c2 { animation: drift 34s ease-in-out calc(var(--t) - 9s) infinite alternate-reverse; }
  .hero.is-paused *, .hero.is-frozen * { animation-play-state: paused !important; }
}

/* Ava: 97.7 u/s, stride 65.7 u, 178.487 steps/min · Leo: 112.4 u/s, stride 74.7 u, 180.6 steps/min.
   Phones see only the middle of the stage: the runners simply enter from off screen. */
@keyframes route-run {
  0%, 0% { stroke-dashoffset: 1465; opacity: 1; }
  1.7857% { stroke-dashoffset: 1440.57; }
  3.5714% { stroke-dashoffset: 1416.14; }
  5.3571% { stroke-dashoffset: 1391.71; }
  7.1429% { stroke-dashoffset: 1367.28; }
  8.9286% { stroke-dashoffset: 1342.85; }
  10.7143% { stroke-dashoffset: 1318.42; }
  12.5% { stroke-dashoffset: 1293.99; }
  14.2857% { stroke-dashoffset: 1269.56; }
  16.0714% { stroke-dashoffset: 1245.13; }
  17.8571% { stroke-dashoffset: 1220.7; }
  19.6429% { stroke-dashoffset: 1196.27; }
  21.4286% { stroke-dashoffset: 1171.84; }
  23.2143% { stroke-dashoffset: 1147.41; }
  25% { stroke-dashoffset: 1122.98; }
  26.7857% { stroke-dashoffset: 1098.54; }
  28.5714% { stroke-dashoffset: 1074.11; }
  30.3571% { stroke-dashoffset: 1049.68; }
  32.1429% { stroke-dashoffset: 1025.25; }
  33.9286% { stroke-dashoffset: 1000.82; }
  35.7143% { stroke-dashoffset: 976.39; }
  37.5% { stroke-dashoffset: 951.96; }
  39.2857% { stroke-dashoffset: 927.53; }
  41.0714% { stroke-dashoffset: 903.1; }
  42.8571% { stroke-dashoffset: 878.67; }
  43.5714% { stroke-dashoffset: 868.9; }
  44% { stroke-dashoffset: 862.85; }
  44.4286% { stroke-dashoffset: 856.48; }
  44.8571% { stroke-dashoffset: 849.87; }
  45.2857% { stroke-dashoffset: 843.11; }
  45.7143% { stroke-dashoffset: 836.29; }
  46.1429% { stroke-dashoffset: 829.49; }
  46.5714% { stroke-dashoffset: 822.8; }
  47% { stroke-dashoffset: 816.3; }
  47.4286% { stroke-dashoffset: 810.08; }
  47.8571% { stroke-dashoffset: 804.22; }
  48.2857% { stroke-dashoffset: 798.8; }
  48.7143% { stroke-dashoffset: 793.92; }
  49.1429% { stroke-dashoffset: 789.66; }
  49.5714% { stroke-dashoffset: 786.1; }
  50% { stroke-dashoffset: 783.34; }
  50%, 88% { stroke-dashoffset: 783.34; opacity: 1; }
  94% { stroke-dashoffset: 783.34; opacity: 0; }
  94.5%, 100% { stroke-dashoffset: 1465; opacity: 0; }
}
@keyframes route-ride {
  0%, 0% { stroke-dashoffset: 1465; opacity: 1; }
  1.7857% { stroke-dashoffset: 1436.89; }
  3.5714% { stroke-dashoffset: 1408.79; }
  5.3571% { stroke-dashoffset: 1380.68; }
  7.1429% { stroke-dashoffset: 1352.58; }
  8.9286% { stroke-dashoffset: 1324.47; }
  10.7143% { stroke-dashoffset: 1296.36; }
  12.5% { stroke-dashoffset: 1268.26; }
  14.2857% { stroke-dashoffset: 1240.15; }
  16.0714% { stroke-dashoffset: 1212.05; }
  17.8571% { stroke-dashoffset: 1183.94; }
  19.6429% { stroke-dashoffset: 1155.84; }
  21.4286% { stroke-dashoffset: 1127.73; }
  23.2143% { stroke-dashoffset: 1099.62; }
  25% { stroke-dashoffset: 1071.52; }
  26.7857% { stroke-dashoffset: 1043.41; }
  28.5714% { stroke-dashoffset: 1015.31; }
  30.3571% { stroke-dashoffset: 987.2; }
  32.1429% { stroke-dashoffset: 959.09; }
  33.9286% { stroke-dashoffset: 930.99; }
  35.7143% { stroke-dashoffset: 902.88; }
  37.5% { stroke-dashoffset: 874.78; }
  39.2857% { stroke-dashoffset: 846.67; }
  41.0714% { stroke-dashoffset: 818.57; }
  42.8571% { stroke-dashoffset: 790.46; }
  43.5714% { stroke-dashoffset: 779.22; }
  44% { stroke-dashoffset: 772.3; }
  44.4286% { stroke-dashoffset: 765.1; }
  44.8571% { stroke-dashoffset: 757.7; }
  45.2857% { stroke-dashoffset: 750.18; }
  45.7143% { stroke-dashoffset: 742.64; }
  46.1429% { stroke-dashoffset: 735.15; }
  46.5714% { stroke-dashoffset: 727.81; }
  47% { stroke-dashoffset: 720.69; }
  47.4286% { stroke-dashoffset: 713.88; }
  47.8571% { stroke-dashoffset: 707.48; }
  48.2857% { stroke-dashoffset: 701.55; }
  48.7143% { stroke-dashoffset: 696.2; }
  49.1429% { stroke-dashoffset: 691.49; }
  49.5714% { stroke-dashoffset: 687.53; }
  50% { stroke-dashoffset: 684.39; }
  50%, 88% { stroke-dashoffset: 684.39; opacity: 1; }
  94% { stroke-dashoffset: 684.39; opacity: 0; }
  94.5%, 100% { stroke-dashoffset: 1465; opacity: 0; }
}
@keyframes actor-run {
  0%, 0% { transform: translate(7.5%, 87.3333%); }
  1.7857% { transform: translate(9.006%, 85.9923%); }
  3.5714% { transform: translate(10.5167%, 84.8106%); }
  5.3571% { transform: translate(12.0312%, 83.7758%); }
  7.1429% { transform: translate(13.5488%, 82.8766%); }
  8.9286% { transform: translate(15.0688%, 82.1032%); }
  10.7143% { transform: translate(16.5907%, 81.4469%); }
  12.5% { transform: translate(18.1141%, 80.8998%); }
  14.2857% { transform: translate(19.6387%, 80.4549%); }
  16.0714% { transform: translate(21.1642%, 80.1058%); }
  17.8571% { transform: translate(22.6903%, 79.8467%); }
  19.6429% { transform: translate(24.2169%, 79.6726%); }
  21.4286% { transform: translate(25.7436%, 79.5788%); }
  23.2143% { transform: translate(27.2705%, 79.561%); }
  25% { transform: translate(28.7974%, 79.6152%); }
  26.7857% { transform: translate(30.3241%, 79.7379%); }
  28.5714% { transform: translate(31.8506%, 79.9258%); }
  30.3571% { transform: translate(33.3768%, 80.1758%); }
  32.1429% { transform: translate(34.9026%, 80.4853%); }
  33.9286% { transform: translate(36.4279%, 80.8516%); }
  35.7143% { transform: translate(37.9528%, 81.2723%); }
  37.5% { transform: translate(39.4771%, 81.7453%); }
  39.2857% { transform: translate(41.0008%, 82.2683%); }
  41.0714% { transform: translate(42.524%, 82.8396%); }
  42.8571% { transform: translate(44.0467%, 83.4359%); }
  43.5714% { transform: translate(44.6564%, 83.6285%); }
  44% { transform: translate(45.015%, 83.7308%); }
  44.4286% { transform: translate(45.3591%, 83.8212%); }
  44.8571% { transform: translate(45.6886%, 83.901%); }
  45.2857% { transform: translate(46.0034%, 83.971%); }
  45.7143% { transform: translate(46.3037%, 84.0323%); }
  46.1429% { transform: translate(46.5894%, 84.0857%); }
  46.5714% { transform: translate(46.8604%, 84.132%); }
  47% { transform: translate(47.1168%, 84.1719%); }
  47.4286% { transform: translate(47.3586%, 84.2062%); }
  47.8571% { transform: translate(47.5857%, 84.2354%); }
  48.2857% { transform: translate(47.7982%, 84.2602%); }
  48.7143% { transform: translate(47.9961%, 84.2811%); }
  49.1429% { transform: translate(48.1793%, 84.2986%); }
  49.5714% { transform: translate(48.3478%, 84.3131%); }
  50% { transform: translate(48.5017%, 84.3251%); }
  50%, 95% { transform: translate(48.5017%, 84.3251%); }
  100% { transform: translate(7.5%, 87.3333%); }
}
@keyframes actor-ride {
  0%, 0% { transform: translate(98.75%, 78.6667%); }
  1.7857% { transform: translate(96.9943%, 78.9532%); }
  3.5714% { transform: translate(95.2377%, 78.9604%); }
  5.3571% { transform: translate(93.4814%, 78.7914%); }
  7.1429% { transform: translate(91.7255%, 78.5242%); }
  8.9286% { transform: translate(89.9699%, 78.2169%); }
  10.7143% { transform: translate(88.2142%, 77.9126%); }
  12.5% { transform: translate(86.4583%, 77.643%); }
  14.2857% { transform: translate(84.7021%, 77.4314%); }
  16.0714% { transform: translate(82.9457%, 77.2945%); }
  17.8571% { transform: translate(81.1891%, 77.2442%); }
  19.6429% { transform: translate(79.4325%, 77.289%); }
  21.4286% { transform: translate(77.6762%, 77.4659%); }
  23.2143% { transform: translate(75.9205%, 77.7558%); }
  25% { transform: translate(74.1653%, 78.1272%); }
  26.7857% { transform: translate(72.4106%, 78.5688%); }
  28.5714% { transform: translate(70.6565%, 79.0687%); }
  30.3571% { transform: translate(68.9028%, 79.6141%); }
  32.1429% { transform: translate(67.1496%, 80.1918%); }
  33.9286% { transform: translate(65.3965%, 80.7876%); }
  35.7143% { transform: translate(63.6435%, 81.387%); }
  37.5% { transform: translate(61.8903%, 81.9747%); }
  39.2857% { transform: translate(60.1369%, 82.535%); }
  41.0714% { transform: translate(58.3829%, 83.0514%); }
  42.8571% { transform: translate(56.6284%, 83.5072%); }
  43.5714% { transform: translate(55.9264%, 83.6687%); }
  44% { transform: translate(55.5136%, 83.7574%); }
  44.4286% { transform: translate(55.1176%, 83.8378%); }
  44.8571% { transform: translate(54.7384%, 83.9104%); }
  45.2857% { transform: translate(54.376%, 83.9756%); }
  45.7143% { transform: translate(54.0305%, 84.0338%); }
  46.1429% { transform: translate(53.7018%, 84.0853%); }
  46.5714% { transform: translate(53.39%, 84.1308%); }
  47% { transform: translate(53.0949%, 84.1706%); }
  47.4286% { transform: translate(52.8168%, 84.2053%); }
  47.8571% { transform: translate(52.5554%, 84.2351%); }
  48.2857% { transform: translate(52.311%, 84.2607%); }
  48.7143% { transform: translate(52.0834%, 84.2823%); }
  49.1429% { transform: translate(51.8726%, 84.3006%); }
  49.5714% { transform: translate(51.6787%, 84.3157%); }
  50% { transform: translate(51.5016%, 84.3282%); }
  50%, 95% { transform: translate(51.5016%, 84.3282%); }
  100% { transform: translate(98.75%, 78.6667%); }
}
@keyframes frames-ava {
  0% { transform: translateX(-5.8824%); }
  0.0571% { transform: translateX(-11.7647%); }
  0.4571% { transform: translateX(-17.6471%); }
  0.8571% { transform: translateX(-23.5294%); }
  1.2643% { transform: translateX(-29.4118%); }
  1.6643% { transform: translateX(-35.2941%); }
  2.0643% { transform: translateX(-41.1765%); }
  2.4643% { transform: translateX(-47.0588%); }
  2.8643% { transform: translateX(-52.9412%); }
  3.2643% { transform: translateX(-58.8235%); }
  3.6643% { transform: translateX(-64.7059%); }
  4.0643% { transform: translateX(0%); }
  4.4643% { transform: translateX(-5.8824%); }
  4.8643% { transform: translateX(-11.7647%); }
  5.2643% { transform: translateX(-17.6471%); }
  5.6643% { transform: translateX(-23.5294%); }
  6.0643% { transform: translateX(-29.4118%); }
  6.4643% { transform: translateX(-35.2941%); }
  6.8643% { transform: translateX(-41.1765%); }
  7.2643% { transform: translateX(-47.0588%); }
  7.6643% { transform: translateX(-52.9412%); }
  8.0643% { transform: translateX(-58.8235%); }
  8.4643% { transform: translateX(-64.7059%); }
  8.8643% { transform: translateX(0%); }
  9.2643% { transform: translateX(-5.8824%); }
  9.6643% { transform: translateX(-11.7647%); }
  10.0643% { transform: translateX(-17.6471%); }
  10.4643% { transform: translateX(-23.5294%); }
  10.8643% { transform: translateX(-29.4118%); }
  11.2643% { transform: translateX(-35.2941%); }
  11.6643% { transform: translateX(-41.1765%); }
  12.0643% { transform: translateX(-47.0588%); }
  12.4643% { transform: translateX(-52.9412%); }
  12.8643% { transform: translateX(-58.8235%); }
  13.2643% { transform: translateX(-64.7059%); }
  13.6643% { transform: translateX(0%); }
  14.0643% { transform: translateX(-5.8824%); }
  14.4643% { transform: translateX(-11.7647%); }
  14.8643% { transform: translateX(-17.6471%); }
  15.2643% { transform: translateX(-23.5294%); }
  15.6643% { transform: translateX(-29.4118%); }
  16.0643% { transform: translateX(-35.2941%); }
  16.4714% { transform: translateX(-41.1765%); }
  16.8714% { transform: translateX(-47.0588%); }
  17.2714% { transform: translateX(-52.9412%); }
  17.6714% { transform: translateX(-58.8235%); }
  18.0714% { transform: translateX(-64.7059%); }
  18.4714% { transform: translateX(0%); }
  18.8714% { transform: translateX(-5.8824%); }
  19.2714% { transform: translateX(-11.7647%); }
  19.6714% { transform: translateX(-17.6471%); }
  20.0714% { transform: translateX(-23.5294%); }
  20.4714% { transform: translateX(-29.4118%); }
  20.8714% { transform: translateX(-35.2941%); }
  21.2714% { transform: translateX(-41.1765%); }
  21.6714% { transform: translateX(-47.0588%); }
  22.0714% { transform: translateX(-52.9412%); }
  22.4714% { transform: translateX(-58.8235%); }
  22.8714% { transform: translateX(-64.7059%); }
  23.2714% { transform: translateX(0%); }
  23.6714% { transform: translateX(-5.8824%); }
  24.0714% { transform: translateX(-11.7647%); }
  24.4714% { transform: translateX(-17.6471%); }
  24.8714% { transform: translateX(-23.5294%); }
  25.2714% { transform: translateX(-29.4118%); }
  25.6714% { transform: translateX(-35.2941%); }
  26.0714% { transform: translateX(-41.1765%); }
  26.4714% { transform: translateX(-47.0588%); }
  26.8714% { transform: translateX(-52.9412%); }
  27.2714% { transform: translateX(-58.8235%); }
  27.6714% { transform: translateX(-64.7059%); }
  28.0714% { transform: translateX(0%); }
  28.4714% { transform: translateX(-5.8824%); }
  28.8714% { transform: translateX(-11.7647%); }
  29.2714% { transform: translateX(-17.6471%); }
  29.6714% { transform: translateX(-23.5294%); }
  30.0714% { transform: translateX(-29.4118%); }
  30.4714% { transform: translateX(-35.2941%); }
  30.8714% { transform: translateX(-41.1765%); }
  31.2786% { transform: translateX(-47.0588%); }
  31.6786% { transform: translateX(-52.9412%); }
  32.0786% { transform: translateX(-58.8235%); }
  32.4786% { transform: translateX(-64.7059%); }
  32.8786% { transform: translateX(0%); }
  33.2786% { transform: translateX(-5.8824%); }
  33.6786% { transform: translateX(-11.7647%); }
  34.0786% { transform: translateX(-17.6471%); }
  34.4786% { transform: translateX(-23.5294%); }
  34.8786% { transform: translateX(-29.4118%); }
  35.2786% { transform: translateX(-35.2941%); }
  35.6786% { transform: translateX(-41.1765%); }
  36.0786% { transform: translateX(-47.0588%); }
  36.4786% { transform: translateX(-52.9412%); }
  36.8786% { transform: translateX(-58.8235%); }
  37.2786% { transform: translateX(-64.7059%); }
  37.6786% { transform: translateX(0%); }
  38.0786% { transform: translateX(-5.8824%); }
  38.4786% { transform: translateX(-11.7647%); }
  38.8786% { transform: translateX(-17.6471%); }
  39.2786% { transform: translateX(-23.5294%); }
  39.6786% { transform: translateX(-29.4118%); }
  40.0786% { transform: translateX(-35.2941%); }
  40.4786% { transform: translateX(-41.1765%); }
  40.8786% { transform: translateX(-47.0588%); }
  41.2786% { transform: translateX(-52.9412%); }
  41.6786% { transform: translateX(-58.8235%); }
  42.0786% { transform: translateX(-64.7059%); }
  42.4786% { transform: translateX(0%); }
  42.8786% { transform: translateX(-5.8824%); }
  43.2786% { transform: translateX(-11.7647%); }
  43.6786% { transform: translateX(-17.6471%); }
  44.0929% { transform: translateX(-23.5294%); }
  44.5214% { transform: translateX(-29.4118%); }
  44.9714% { transform: translateX(-35.2941%); }
  45.4429% { transform: translateX(-41.1765%); }
  45.9429% { transform: translateX(-47.0588%); }
  46.4714% { transform: translateX(-52.9412%); }
  47.0429% { transform: translateX(-58.8235%); }
  47.6643% { transform: translateX(-64.7059%); }
  48.3429% { transform: translateX(0%); }
  49.1143% { transform: translateX(-5.8824%); }
  50% { transform: translateX(-70.5882%); }
  50.8571% { transform: translateX(-76.4706%); }
  51.7143% { transform: translateX(-82.3529%); }
  54% { transform: translateX(-76.4706%); }
  54.7143% { transform: translateX(-70.5882%); }
  56.7857% { transform: translateX(-88.2353%); }
  58.2143% { transform: translateX(-94.1176%); }
  59.6429% { transform: translateX(-88.2353%); }
  61.0714% { transform: translateX(-94.1176%); }
  62.5% { transform: translateX(-88.2353%); }
  63.9286% { transform: translateX(-94.1176%); }
  65.3571% { transform: translateX(-88.2353%); }
  66.7857% { transform: translateX(-94.1176%); }
  68.2143% { transform: translateX(-88.2353%); }
  69.6429% { transform: translateX(-70.5882%); }
  95% { transform: translateX(-5.8824%); }
  100% { transform: translateX(-5.8824%); }
}
@keyframes frames-leo {
  0% { transform: translateX(0%); }
  0.2286% { transform: translateX(-5.8824%); }
  0.6214% { transform: translateX(-11.7647%); }
  1.0143% { transform: translateX(-17.6471%); }
  1.4143% { transform: translateX(-23.5294%); }
  1.8071% { transform: translateX(-29.4118%); }
  2.2071% { transform: translateX(-35.2941%); }
  2.6% { transform: translateX(-41.1765%); }
  2.9929% { transform: translateX(-47.0588%); }
  3.3929% { transform: translateX(-52.9412%); }
  3.7857% { transform: translateX(-58.8235%); }
  4.1786% { transform: translateX(-64.7059%); }
  4.5786% { transform: translateX(0%); }
  4.9714% { transform: translateX(-5.8824%); }
  5.3714% { transform: translateX(-11.7647%); }
  5.7643% { transform: translateX(-17.6471%); }
  6.1571% { transform: translateX(-23.5294%); }
  6.5571% { transform: translateX(-29.4118%); }
  6.95% { transform: translateX(-35.2941%); }
  7.3429% { transform: translateX(-41.1765%); }
  7.7429% { transform: translateX(-47.0588%); }
  8.1357% { transform: translateX(-52.9412%); }
  8.5357% { transform: translateX(-58.8235%); }
  8.9286% { transform: translateX(-64.7059%); }
  9.3214% { transform: translateX(0%); }
  9.7214% { transform: translateX(-5.8824%); }
  10.1143% { transform: translateX(-11.7647%); }
  10.5071% { transform: translateX(-17.6471%); }
  10.9071% { transform: translateX(-23.5294%); }
  11.3% { transform: translateX(-29.4118%); }
  11.6929% { transform: translateX(-35.2941%); }
  12.0929% { transform: translateX(-41.1765%); }
  12.4857% { transform: translateX(-47.0588%); }
  12.8857% { transform: translateX(-52.9412%); }
  13.2786% { transform: translateX(-58.8235%); }
  13.6714% { transform: translateX(-64.7059%); }
  14.0714% { transform: translateX(0%); }
  14.4643% { transform: translateX(-5.8824%); }
  14.8571% { transform: translateX(-11.7647%); }
  15.2571% { transform: translateX(-17.6471%); }
  15.65% { transform: translateX(-23.5294%); }
  16.05% { transform: translateX(-29.4118%); }
  16.4429% { transform: translateX(-35.2941%); }
  16.8357% { transform: translateX(-41.1765%); }
  17.2357% { transform: translateX(-47.0588%); }
  17.6286% { transform: translateX(-52.9412%); }
  18.0214% { transform: translateX(-58.8235%); }
  18.4214% { transform: translateX(-64.7059%); }
  18.8143% { transform: translateX(0%); }
  19.2143% { transform: translateX(-5.8824%); }
  19.6071% { transform: translateX(-11.7647%); }
  20% { transform: translateX(-17.6471%); }
  20.4% { transform: translateX(-23.5294%); }
  20.7929% { transform: translateX(-29.4118%); }
  21.1857% { transform: translateX(-35.2941%); }
  21.5857% { transform: translateX(-41.1765%); }
  21.9786% { transform: translateX(-47.0588%); }
  22.3714% { transform: translateX(-52.9412%); }
  22.7714% { transform: translateX(-58.8235%); }
  23.1643% { transform: translateX(-64.7059%); }
  23.5643% { transform: translateX(0%); }
  23.9571% { transform: translateX(-5.8824%); }
  24.35% { transform: translateX(-11.7647%); }
  24.75% { transform: translateX(-17.6471%); }
  25.1429% { transform: translateX(-23.5294%); }
  25.5357% { transform: translateX(-29.4118%); }
  25.9357% { transform: translateX(-35.2941%); }
  26.3286% { transform: translateX(-41.1765%); }
  26.7286% { transform: translateX(-47.0588%); }
  27.1214% { transform: translateX(-52.9412%); }
  27.5143% { transform: translateX(-58.8235%); }
  27.9143% { transform: translateX(-64.7059%); }
  28.3071% { transform: translateX(0%); }
  28.7% { transform: translateX(-5.8824%); }
  29.1% { transform: translateX(-11.7647%); }
  29.4929% { transform: translateX(-17.6471%); }
  29.8929% { transform: translateX(-23.5294%); }
  30.2857% { transform: translateX(-29.4118%); }
  30.6786% { transform: translateX(-35.2941%); }
  31.0786% { transform: translateX(-41.1765%); }
  31.4714% { transform: translateX(-47.0588%); }
  31.8643% { transform: translateX(-52.9412%); }
  32.2643% { transform: translateX(-58.8235%); }
  32.6571% { transform: translateX(-64.7059%); }
  33.0571% { transform: translateX(0%); }
  33.45% { transform: translateX(-5.8824%); }
  33.8429% { transform: translateX(-11.7647%); }
  34.2429% { transform: translateX(-17.6471%); }
  34.6357% { transform: translateX(-23.5294%); }
  35.0286% { transform: translateX(-29.4118%); }
  35.4286% { transform: translateX(-35.2941%); }
  35.8214% { transform: translateX(-41.1765%); }
  36.2143% { transform: translateX(-47.0588%); }
  36.6143% { transform: translateX(-52.9412%); }
  37.0071% { transform: translateX(-58.8235%); }
  37.4071% { transform: translateX(-64.7059%); }
  37.8% { transform: translateX(0%); }
  38.1929% { transform: translateX(-5.8824%); }
  38.5929% { transform: translateX(-11.7647%); }
  38.9857% { transform: translateX(-17.6471%); }
  39.3786% { transform: translateX(-23.5294%); }
  39.7786% { transform: translateX(-29.4118%); }
  40.1714% { transform: translateX(-35.2941%); }
  40.5714% { transform: translateX(-41.1765%); }
  40.9643% { transform: translateX(-47.0588%); }
  41.3571% { transform: translateX(-52.9412%); }
  41.7571% { transform: translateX(-58.8235%); }
  42.15% { transform: translateX(-64.7059%); }
  42.5429% { transform: translateX(0%); }
  42.9429% { transform: translateX(-5.8824%); }
  43.3357% { transform: translateX(-11.7647%); }
  43.7357% { transform: translateX(-17.6471%); }
  44.1429% { transform: translateX(-23.5294%); }
  44.5714% { transform: translateX(-29.4118%); }
  45.0143% { transform: translateX(-35.2941%); }
  45.4857% { transform: translateX(-41.1765%); }
  45.9786% { transform: translateX(-47.0588%); }
  46.5071% { transform: translateX(-52.9412%); }
  47.0714% { transform: translateX(-58.8235%); }
  47.6857% { transform: translateX(-64.7059%); }
  48.3571% { transform: translateX(0%); }
  49.1214% { transform: translateX(-5.8824%); }
  50% { transform: translateX(-70.5882%); }
  50.8571% { transform: translateX(-76.4706%); }
  51.7143% { transform: translateX(-82.3529%); }
  54% { transform: translateX(-76.4706%); }
  54.7143% { transform: translateX(-70.5882%); }
  57.7143% { transform: translateX(-88.2353%); }
  59.1429% { transform: translateX(-94.1176%); }
  60.5714% { transform: translateX(-88.2353%); }
  62% { transform: translateX(-94.1176%); }
  63.4286% { transform: translateX(-88.2353%); }
  64.8571% { transform: translateX(-94.1176%); }
  66.2857% { transform: translateX(-88.2353%); }
  67.7143% { transform: translateX(-94.1176%); }
  69.1429% { transform: translateX(-88.2353%); }
  70.5714% { transform: translateX(-70.5882%); }
  95% { transform: translateX(0%); }
  100% { transform: translateX(0%); }
}
@keyframes hop {
  0%, 51.7143% { transform: translateY(0); animation-timing-function: cubic-bezier(.25,.7,.45,1); }
  52.8571% { transform: translateY(-11%); animation-timing-function: cubic-bezier(.55,0,.75,.3); }
  54%, 100% { transform: translateY(0); }
}
@keyframes hop-shadow {
  0%, 51.7143% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.25,.7,.45,1); }
  52.8571% { transform: scale(.7); opacity: .6; animation-timing-function: cubic-bezier(.55,0,.75,.3); }
  54%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes actor-fade {
  0% { opacity: 0; } 4% { opacity: 1; } 88% { opacity: 1; } 94%, 100% { opacity: 0; }
}
@keyframes heart-pop {
  0%, 50% { opacity: 0; transform: scale(.2) rotate(-12deg); }
  52% { opacity: 1; transform: scale(1.22) rotate(6deg); }
  53.6% { transform: scale(.94) rotate(-3deg); }
  55%, 88% { opacity: 1; transform: scale(1) rotate(0); }
  94%, 100% { opacity: 0; transform: scale(.85) translateY(-10%); }
}
@keyframes spark-pop {
  0%, 52% { opacity: 0; transform: translate(40%, 40%) scale(.3); }
  55%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  94%, 100% { opacity: 0; transform: translate(0, -30%) scale(.8); }
}
@keyframes spark-pop-2 {
  0%, 53% { opacity: 0; transform: translate(-40%, 40%) scale(.3) rotate(-30deg); }
  56%, 88% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  94%, 100% { opacity: 0; transform: translate(0, -30%) scale(.8); }
}
@keyframes page-flip {
  0%, 55% { opacity: 0; transform: translateY(14px) rotate(-4deg) rotateY(-88deg); }
  56% { opacity: 1; }
  60% { transform: translateY(0) rotate(-4deg) rotateY(8deg); }
  62%, 88% { opacity: 1; transform: translateY(0) rotate(-4deg) rotateY(0); }
  94%, 100% { opacity: 0; transform: translateY(-8px) rotate(-4deg) rotateY(0); }
}
@keyframes flag-wave {
  0%, 100% { transform: scaleX(1) skewY(0); }
  35% { transform: scaleX(.84) skewY(7deg); }
  70% { transform: scaleX(.95) skewY(-4deg); }
}
@keyframes sky-rise { from { transform: translateY(7%); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes sunny-rise { from { transform: translateY(45%) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sunny-float { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-5%) rotate(2deg); } }
@keyframes blink {
  0%, 88% { opacity: 0; } 89%, 91% { opacity: 1; } 92%, 94% { opacity: 0; } 95%, 96.5% { opacity: 1; } 97.5%, 100% { opacity: 0; }
}
@keyframes drift { from { transform: translateX(-10%); } to { transform: translateX(22%); } }