/* The landing journey's motion (0017), served as written in /journey.css with the generated dot
   rules (src/journey/journey.ts). Not through the site's bundled CSS: its minifier folds
   animation-timeline into the animation shorthand, which can't carry it, and the browser drops the
   rule. It loads before the bundled styles, so its rules start with .home (on <html>) to win. */

/* Motion: with motion on, scroll timelines supported and a window at least 700px tall. Each screen
   is 70vh taller than the window, and its inner part sticks (under the header from 64rem): it holds
   for that 70vh while its picture draws (its view timeline's "contain" range), then scrolls away as
   the next screen arrives (the next one's "entry" range), when the dots ride along into the next
   picture. The dot layer sticks for the whole journey. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    /* Under 1000px wide, screen 1's words need 760px of height to fit their half. */
    /* Laptops 700px tall and up; phones and tablets from 620px (0023: most iPhones in Safari,
       about 660px with its bars, now play it; the shortest phones keep the finished pictures). */
    @media (min-height: 700px) and (min-width: 1000px), (max-width: 999px) and (min-height: 620px) {
      .home .jr {
        timeline-scope: --w1, --w2, --w3, --w4;
      }

      .home .jr .sc1 {
        view-timeline: --w1 block;
      }

      .home .jr .sc2 {
        view-timeline: --w2 block;
      }

      .home .jr .sc3 {
        view-timeline: --w3 block;
      }

      .home .jr .sc4 {
        view-timeline: --w4 block;
      }

      .home .jr .sc {
        height: calc(100svh - var(--jr-top) + 70vh);
        view-timeline-inset: var(--jr-top) 0;
      }

      .home .jr .sc-in,
      .home .jr .dl {
        position: sticky;
        top: var(--jr-top);
        display: flex;
        align-items: center;
        height: calc(100svh - var(--jr-top));
        padding-block: 0;
      }

      .home .jr .dl {
        z-index: 3;
        margin-bottom: calc(var(--jr-top) - 100svh);
        pointer-events: none;
      }

      /* Each screen sits above the dot layer, so its words (on page-coloured blocks) cover the
         passing dots and trails; the shapes the dots land in let them show through. */
      .home .jr .sc-in {
        z-index: 4;
      }

      .home .jr .planbox,
      .home .jr .step:not(.node) {
        fill: none;
      }

      .home .jr .grid {
        width: 100%;
      }

      .home .jr .rest-only {
        display: none;
      }

      @media (min-width: 1000px) {
        .home .jr .grid {
          --dw: min(
            720px,
            calc((min(100vw, 80rem) - 2rem - 48px) * 0.6),
            calc((100svh - var(--jr-top) - 64px) * 600 / 560)
          );

          grid-template-columns: minmax(0, 1fr) var(--dw);
        }

        .home .jr .dbox {
          width: var(--dw);
          max-width: none;
        }
      }

      /* Phones: the words above, the picture below. Half and half (the sample's 42/58 left the
         hero's longest A/B words no room on a 360px phone); a phone's picture is as wide as the
         screen and still fits its half. Every screen and the dot layer share it, so the dots land. */
      @media (max-width: 999px) {
        .home .jr .grid {
          grid-template-rows: 50% 50%;
          gap: 0;
          height: 100%;
          align-items: center;
        }

        .home .jr .jt {
          align-self: end;
          padding-block: 0;
        }

        /* Tablets (0023): the words in the middle of their half, not pressed onto the picture. */
        @media (min-width: 600px) {
          .home .jr .jt {
            align-self: center;
          }
        }

        .home .jr .dbox {
          align-self: center;
          width: min(100%, calc((100svh - var(--jr-top)) * var(--jr-pic, 0.48) * 600 / 560));
        }

        /* Phones under 760px tall (0023): 44% words, 56% picture, so the picture keeps its words
           at 11px or more from 375px wide; screen 1 keeps its headline, button and highlights,
           not its paragraph. */
        @media (max-height: 759px) {
          .home .jr .grid {
            --jr-pic: 0.56;

            grid-template-rows: 44% 56%;
          }

          .home .jr .sc1 .lede {
            display: none;
          }
        }
      }

      .home .jr .lit {
        animation: appear linear both;
        animation-timeline: --w1;
        animation-range: contain 0% contain 40%;
      }

      .home .jr .s1cap,
      .home .jr .s1leg {
        animation: appear linear both;
        animation-timeline: --w1;
        animation-range: contain 60% contain 72%;
      }

      /* The designer's phone note: the column labels come in once the dots have landed in the
         first column, so no dot passes over "400 new". */
      .home .jr .collbl {
        animation: appear linear both;
        animation-timeline: --w2;
        animation-range: entry 60% entry 100%;
      }

      @media (max-width: 599px) {
        .home .jr .collbl {
          animation-range: contain 0% contain 8%;
        }
      }

      .home .jr .bar {
        animation: grow linear both;
        animation-timeline: --w2;
        animation-range: contain 48% contain 56%;
      }

      .home .jr .bar.top {
        animation-name: grow, barsaff;
        animation-timeline: --w2, --w2;
        animation-range:
          contain 48% contain 56%,
          contain 58% contain 60%;
        animation-fill-mode: both;
        animation-timing-function: linear;
      }

      .home .jr .s2leg {
        animation: appear linear both;
        animation-timeline: --w2;
        animation-range: contain 50% contain 58%;
      }

      .home .jr .mk.dl0 {
        animation: draw linear both;
        animation-timeline: --w3;
        animation-range: contain 10% contain 22%;
      }

      .home .jr .mk.dl1 {
        animation: draw linear both;
        animation-timeline: --w3;
        animation-range: contain 14% contain 26%;
      }

      .home .jr .mk.dl2 {
        animation: draw linear both;
        animation-timeline: --w3;
        animation-range: contain 18% contain 30%;
      }

      .home .jr .dest {
        animation: appear linear both;
        animation-timeline: --w3;
        animation-range: contain 30% contain 40%;
      }

      .home .jr .mk.trk {
        animation: draw linear both;
        animation-timeline: --w4;
        animation-range: contain 5% contain 74%;
      }

      .home .jr .doc {
        animation: docfly linear both;
        animation-timeline: --w4;
        animation-range: contain 18% contain 32%;
      }

      .home .jr .step.node {
        animation: nodefill linear both;
        animation-timeline: --w4;
        animation-range: contain 47.9% contain 48%;
      }

      .home .jr .lb.won {
        animation: appear linear both;
        animation-timeline: --w4;
        animation-range: contain 48% contain 50%;
      }

      .home .jr .coin {
        animation: appear linear both;
        animation-timeline: --w4;
        animation-range: contain 74% contain 80%;
      }
    }

    /* Worth a bid?: the chart grows as one while the card comes into view. */
    .worth-chart .bars {
      view-timeline: --bars block;
    }

    .worth-chart .tr i {
      animation: grow linear both;
      animation-timeline: --bars;
      animation-range: entry 0% entry 80%;
    }
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1.06;
  }
}

@keyframes tfade {
  from {
    opacity: 0.9;
  }

  to {
    opacity: 0;
  }
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes barsaff {
  from {
    fill: var(--th-map-1);
  }

  to {
    fill: var(--th-saffron);
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

@keyframes nodefill {
  from {
    fill: var(--th-surface);
  }

  to {
    fill: var(--th-saffron);
  }
}

@keyframes opdim {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.15;
  }
}

@keyframes opout {
  from {
    opacity: 0.15;
  }

  to {
    opacity: 0;
  }
}

@keyframes opout1 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes tosaffron {
  from {
    fill: var(--th-map-2);
  }

  to {
    fill: var(--th-saffron);
  }
}

@keyframes docfly {
  0% {
    transform: translate(220px, 340px);
    opacity: 0;
  }

  10% {
    transform: translate(220px, 340px);
    opacity: 1;
  }

  85% {
    transform: translate(300px, 205px);
    opacity: 1;
  }

  100% {
    transform: translate(300px, 205px);
    opacity: 0;
  }
}

/* Generated from apps/site/src/journey/journey.ts: the dots of the landing's journey (0017). */
.tk.t0{--x0:416.6px;--y0:462.7px;--i:0;--d1x:-382.6px;--d1y:-332.7px;--d2x:150px;--d2y:18px;--d3x:134px;--d3y:-28px;--d4x:192px;--d4y:30px;--d5x:-444px;--d5y:72px;--d6x:4px;--d6y:118px;--d7x:150px;--d7y:0px;--d8x:150px;--d8y:0px;--d9x:150px;--d9y:0px}
.tk.t1{--x0:355.8px;--y0:375.9px;--i:1;--d1x:-249.8px;--d1y:-119.9px;--d2x:114px;--d2y:-18px;--d3x:98px;--d3y:82px;--d4x:192px;--d4y:-136px;--d5x:-444px;--d5y:72px}
.tk.t2{--x0:324.2px;--y0:266.1px;--i:2;--d1x:-236.2px;--d1y:-136.1px;--d2x:114px;--d2y:18px;--d3x:116px;--d3y:-8px;--d4x:192px;--d4y:78px;--d5x:-444px;--d5y:72px}
.tk.t3{--x0:329.4px;--y0:467.3px;--i:3;--d1x:-223.4px;--d1y:-265.3px;--d2x:78px;--d2y:18px;--d3x:134px;--d3y:40px;--d4x:192px;--d4y:-8px;--d5x:-444px;--d5y:72px}
.tk.t4{--x0:252.9px;--y0:325.6px;--i:4;--d1x:-182.9px;--d1y:-105.6px;--d2x:150px;--d2y:0px;--d3x:98px;--d3y:60px;--d4x:192px;--d4y:6px;--d5x:-444px;--d5y:72px}
.tk.t5{--x0:279.3px;--y0:508.5px;--i:5;--d1x:-209.3px;--d1y:-324.5px;--d2x:168px;--d2y:0px;--d3x:80px;--d3y:36px}
.tk.t6{--x0:443px;--y0:426.2px;--i:6;--d1x:-355px;--d1y:-278.2px;--d2x:114px;--d2y:18px;--d3x:116px;--d3y:-6px}
.tk.t7{--x0:366.4px;--y0:421.6px;--i:7;--d1x:-242.4px;--d1y:-165.6px;--d2x:114px;--d2y:-18px;--d3x:80px;--d3y:102px}
.tk.t8{--x0:326.8px;--y0:252.4px;--i:8;--d1x:-274.8px;--d1y:-50.4px;--d2x:168px;--d2y:0px;--d3x:98px;--d3y:38px}
.tk.t9{--x0:403.4px;--y0:394.2px;--i:9;--d1x:-297.4px;--d1y:-228.2px;--d2x:96px;--d2y:18px;--d3x:116px;--d3y:16px}
.tk.t10{--x0:408.6px;--y0:412.5px;--i:10;--d1x:-338.6px;--d1y:-246.5px;--d2x:168px;--d2y:0px;--d3x:80px;--d3y:14px}
.tk.t11{--x0:353.2px;--y0:298.2px;--i:11;--d1x:-319.2px;--d1y:-42.2px;--d2x:150px;--d2y:-18px;--d3x:134px;--d3y:62px}
.tk.t12{--x0:324.2px;--y0:458.2px;--i:12;--d1x:-218.2px;--d1y:-328.2px;--d2x:114px;--d2y:18px}
.tk.t13{--x0:321.5px;--y0:453.6px;--i:13;--d1x:-233.5px;--d1y:-287.6px;--d2x:96px;--d2y:18px}
.tk.t14{--x0:337.4px;--y0:362.2px;--i:14;--d1x:-303.4px;--d1y:-214.2px;--d2x:204px;--d2y:0px}
.tk.t15{--x0:239.7px;--y0:330.2px;--i:15;--d1x:-151.7px;--d1y:-128.2px;--d2x:150px;--d2y:0px}
.tk.t16{--x0:403.4px;--y0:476.5px;--i:16;--d1x:-279.4px;--d1y:-310.5px;--d2x:96px;--d2y:18px}
.tk.t17{--x0:287.2px;--y0:202.2px;--i:17;--d1x:-235.2px;--d1y:-54.2px;--d2x:132px;--d2y:18px}
.tk.t18{--x0:311px;--y0:499.3px;--i:18;--d1x:-205px;--d1y:-315.3px;--d2x:96px;--d2y:18px}
.tk.t19{--x0:437.7px;--y0:407.9px;--i:19;--d1x:-385.7px;--d1y:-151.9px;--d2x:150px;--d2y:-18px}
.tk.t20{--x0:329.4px;--y0:247.8px;--i:20;--d1x:-205.4px;--d1y:-45.8px;--d2x:78px;--d2y:18px}
.tk.t21{--x0:326.8px;--y0:325.6px;--i:21;--d1x:-256.8px;--d1y:-87.6px;--d2x:168px;--d2y:-18px}
.tk.t22{--x0:334.7px;--y0:375.9px;--i:22;--d1x:-228.7px;--d1y:-227.9px;--d2x:114px;--d2y:18px}
.tk.t23{--x0:379.6px;--y0:499.3px;--i:23;--d1x:-291.6px;--d1y:-315.3px;--d2x:96px;--d2y:18px}
.tk.t24{--x0:334.7px;--y0:458.2px;--i:24;--d1x:-300.7px;--d1y:-292.2px}
.tk.t25{--x0:353.2px;--y0:444.5px;--i:25;--d1x:-229.2px;--d1y:-260.5px}
.tk.t26{--x0:350.6px;--y0:503.9px;--i:26;--d1x:-262.6px;--d1y:-247.9px}
.tk.t27{--x0:237px;--y0:325.6px;--i:27;--d1x:-167px;--d1y:-123.6px}
.tk.t28{--x0:363.8px;--y0:307.3px;--i:28;--d1x:-329.8px;--d1y:-69.3px}
.tk.t29{--x0:369px;--y0:362.2px;--i:29;--d1x:-335px;--d1y:-142.2px}
.tk.t30{--x0:340px;--y0:412.5px;--i:30;--d1x:-252px;--d1y:-174.5px}
.tk.t31{--x0:445.6px;--y0:421.6px;--i:31;--d1x:-393.6px;--d1y:-291.6px}
.tk.t32{--x0:382.2px;--y0:467.3px;--i:32;--d1x:-312.2px;--d1y:-211.3px}
.tk.t33{--x0:369px;--y0:334.7px;--i:33;--d1x:-245px;--d1y:-96.7px}
.tk.t34{--x0:308.3px;--y0:503.9px;--i:34;--d1x:-238.3px;--d1y:-373.9px}
.tk.t35{--x0:382.2px;--y0:348.4px;--i:35;--d1x:-294.2px;--d1y:-128.4px}
.tk.t36{--x0:403.4px;--y0:485.6px;--i:36;--d1x:-351.4px;--d1y:-319.6px}
.tk.t37{--x0:413.9px;--y0:430.8px;--i:37;--d1x:-343.9px;--d1y:-282.8px}
.tk.t38{--x0:392.8px;--y0:357.6px;--i:38;--d1x:-268.8px;--d1y:-137.6px}
.tk.t39{--x0:406px;--y0:490.2px;--i:39;--d1x:-354px;--d1y:-306.2px}
.tk.t40{--x0:337.4px;--y0:490.2px;--i:40;--d1x:-213.4px;--d1y:-360.2px}
.tk.t41{--x0:334.7px;--y0:357.6px;--i:41;--d1x:-228.7px;--d1y:-137.6px}
.tk.t42{--x0:382.2px;--y0:412.5px;--i:42;--d1x:-276.2px;--d1y:-174.5px}
.tk.t43{--x0:292.5px;--y0:284.4px;--i:43;--d1x:-258.5px;--d1y:-100.4px}
.tk.t44{--x0:279.3px;--y0:517.6px;--i:44;--d1x:-227.3px;--d1y:-279.6px}
.tk.t45{--x0:395.4px;--y0:353px;--i:45;--d1x:-361.4px;--d1y:-151px}
.tk.t46{--x0:366.4px;--y0:302.8px;--i:46;--d1x:-314.4px;--d1y:-82.8px}
.tk.t47{--x0:366.4px;--y0:357.6px;--i:47;--d1x:-242.4px;--d1y:-209.6px}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()) and (timeline-scope:--a){@media (min-height: 700px) and ((min-width: 1000px) or (min-height: 760px)){
.tk.a{animation-name:appear,mv1,opdim,opout;animation-timeline:--w1,--w2,--w2,--w3;animation-range:contain calc(var(--i) * 1.1%) contain calc(var(--i) * 1.1% + 6%),entry 0% entry 100%,contain 12% contain 20%,entry 0% entry 30%;animation-fill-mode:both,both,forwards,forwards;animation-composition:replace,add,replace,replace;animation-timing-function:linear;animation-duration:auto}
.tk.b{animation-name:appear,mv1,mv2,opdim,opout;animation-timeline:--w1,--w2,--w2,--w2,--w3;animation-range:contain calc(var(--i) * 1.1%) contain calc(var(--i) * 1.1% + 6%),entry 0% entry 100%,contain 12% contain 26%,contain 30% contain 38%,entry 0% entry 30%;animation-fill-mode:both,both,both,forwards,forwards;animation-composition:replace,add,add,replace,replace;animation-timing-function:linear;animation-duration:auto}
.tk.c{animation-name:appear,mv1,mv2,mv3,opdim,opout;animation-timeline:--w1,--w2,--w2,--w2,--w2,--w3;animation-range:contain calc(var(--i) * 1.1%) contain calc(var(--i) * 1.1% + 6%),entry 0% entry 100%,contain 12% contain 26%,contain 30% contain 44%,contain 64% contain 72%,entry 0% entry 30%;animation-fill-mode:both,both,both,both,forwards,forwards;animation-composition:replace,add,add,add,replace,replace;animation-timing-function:linear;animation-duration:auto}
.tk.d{animation-name:appear,mv1,mv2,mv3,mv4,mv5,tosaffron,opout1;animation-timeline:--w1,--w2,--w2,--w2,--w2,--w3,--w2,--w4;animation-range:contain calc(var(--i) * 1.1%) contain calc(var(--i) * 1.1% + 6%),entry 0% entry 100%,contain 12% contain 26%,contain 30% contain 44%,contain 64% contain 78%,entry 0% entry 100%,contain 58% contain 60%,entry 0% entry 30%;animation-fill-mode:both,both,both,both,both,both,both,forwards;animation-composition:replace,add,add,add,add,add,replace,replace;animation-timing-function:linear;animation-duration:auto}
.tk.m{animation-name:appear,mv1,mv2,mv3,mv4,mv5,mv6,mv7,mv8,mv9,tosaffron,opout1;animation-timeline:--w1,--w2,--w2,--w2,--w2,--w3,--w4,--w4,--w4,--w4,--w2,--w4;animation-range:contain calc(var(--i) * 1.1%) contain calc(var(--i) * 1.1% + 6%),entry 0% entry 100%,contain 12% contain 26%,contain 30% contain 44%,contain 64% contain 78%,entry 0% entry 100%,entry 0% entry 100%,contain 5% contain 22%,contain 35% contain 48%,contain 60% contain 74%,contain 58% contain 60%,contain 80% contain 88%;animation-fill-mode:both,both,both,both,both,both,both,both,both,both,both,forwards;animation-composition:replace,add,add,add,add,add,add,add,add,add,replace,replace;animation-timing-function:linear;animation-duration:auto}
@keyframes mv1{from{transform:translate(0,0)}to{transform:translate(var(--d1x),var(--d1y))}}
@keyframes mv2{from{transform:translate(0,0)}to{transform:translate(var(--d2x),var(--d2y))}}
@keyframes mv3{from{transform:translate(0,0)}to{transform:translate(var(--d3x),var(--d3y))}}
@keyframes mv4{from{transform:translate(0,0)}to{transform:translate(var(--d4x),var(--d4y))}}
@keyframes mv5{from{transform:translate(0,0)}to{transform:translate(var(--d5x),var(--d5y))}}
@keyframes mv6{from{transform:translate(0,0)}to{transform:translate(var(--d6x),var(--d6y))}}
@keyframes mv7{from{transform:translate(0,0)}to{transform:translate(var(--d7x),var(--d7y))}}
@keyframes mv8{from{transform:translate(0,0)}to{transform:translate(var(--d8x),var(--d8y))}}
@keyframes mv9{from{transform:translate(0,0)}to{transform:translate(var(--d9x),var(--d9y))}}
.mk.tm1{animation:draw linear both;animation-timeline:--w2;animation-range:entry 0% entry 100%}
.trail.tl1{animation:tfade linear both;animation-timeline:--w2;animation-range:contain 0% contain 10%}
.mk.tm2{animation:draw linear both;animation-timeline:--w2;animation-range:contain 12% contain 26%}
.trail.tl2{animation:tfade linear both;animation-timeline:--w2;animation-range:contain 26% contain 32%}
.mk.tm3{animation:draw linear both;animation-timeline:--w2;animation-range:contain 30% contain 44%}
.trail.tl3{animation:tfade linear both;animation-timeline:--w2;animation-range:contain 44% contain 50%}
.mk.tm4{animation:draw linear both;animation-timeline:--w2;animation-range:contain 64% contain 78%}
.trail.tl4{animation:tfade linear both;animation-timeline:--w2;animation-range:contain 78% contain 86%}
.mk.tm5{animation:draw linear both;animation-timeline:--w3;animation-range:entry 0% entry 100%}
.trail.tl5{animation:tfade linear both;animation-timeline:--w3;animation-range:contain 0% contain 10%}
.mk.tm6{animation:draw linear both;animation-timeline:--w4;animation-range:entry 0% entry 100%}
.trail.tl6{animation:tfade linear both;animation-timeline:--w4;animation-range:contain 0% contain 8%}
}}}