/* Scene 3: The dose. A night topographic map; the car drives the hairpins
   without the advice while the dose gauge climbs S → M → Md → H and the map sways
   in High. Then the map shrinks into the window beside scene 4's phone, where the
   ride rewinds to bend 3 (site/scenes-src/story.py). The poster frame (base
   styles) is the ride's end: six hairpins lit, two still dark ahead, gauge at 34.0. */

@property --s3-n {
  syntax: '<integer>';
  inherits: true;
  initial-value: 270;
}

@property --s3-i {
  syntax: '<integer>';
  inherits: true;
  initial-value: 27;
}

@property --s3-d {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

.scene--3 > .stage {
  --scene-bg: #070e17;
}

/* Its own layer: Chrome dropped near layers on some frames while the scroll
   timeline repainted the art with the page. */
.s3-art {
  will-change: transform;
}

/* ---------- Map ---------- */
.s3-frame,
.s3-cam,
.s3-fog {
  transform-box: view-box;
  transform-origin: 900px 450px;
}

.s3-cam {
  transform-origin: 0 0;
}

.s3-fog {
  opacity: 0.3;
}

.s3-fog--1 {
  transform: translate(-340px, -80px);
}

.s3-fog--2 {
  transform: translate(240px, 50px);
}

.s3-cont {
  fill: none;
  stroke: #38485b;
  stroke-width: 0.8;
  opacity: 0.55;
}

.s3-cont--idx {
  stroke: #52657a;
  stroke-width: 1.25;
  opacity: 0.7;
}

.s3-coast {
  fill: none;
  stroke: #8fb6c4;
  stroke-width: 1.4;
  opacity: 0.7;
}

.s3-surf {
  fill: none;
  stroke: #6fcfd9;
  stroke-width: 7;
  opacity: 0.07;
}

.s3-bathy {
  fill: none;
  stroke: #2c8c9c;
  stroke-width: 0.8;
}

.s3-grat {
  fill: none;
  stroke: #6fcfd9;
  stroke-width: 0.6;
  stroke-dasharray: 1 7;
  opacity: 0.18;
}

.s3-river {
  fill: none;
  stroke: #2c8c9c;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.55;
}

.s3-river--trib {
  stroke-width: 1.2;
  opacity: 0.42;
}

.s3-road2 {
  fill: none;
  stroke: #4a5a6c;
  stroke-width: 1.5;
  opacity: 0.6;
}

.s3-track {
  fill: none;
  stroke: #4a5a6c;
  stroke-width: 1.1;
  stroke-dasharray: 5 4;
  opacity: 0.55;
}

.s3-town {
  fill: #f2d29b;
}

.s3-lbl text,
.s3-furn text {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.16em;
  fill: #a7b0ba;
  paint-order: stroke;
  stroke: #0b131c;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.s3-lbl .s3-lbl--water {
  font-style: italic;
  letter-spacing: 0.08em;
  fill: #4fadbb;
  font-size: 11px;
}

.s3-lbl .s3-lbl--wood {
  letter-spacing: 0.3em;
  fill: #6b9aa2;
}

.s3-lbl .s3-lbl--sea {
  letter-spacing: 0.5em;
  fill: #6b9aa2;
  font-size: 12px;
}

.s3-furn text {
  text-anchor: middle;
}

/* The poster on wide, short screens: the lede runs over the map's foot. The film fades these
   two per frame (s3/gen.py label_fades), which outranks this. */
@media (min-aspect-ratio: 2/1) {
  .s3-l--ostarre,
  .s3-l--esclots {
    opacity: 0;
  }
}

.s3-peak {
  fill: #8e97a2;
  opacity: 0.8;
}

.s3-scale {
  fill: none;
  stroke: #8e97a2;
  stroke-width: 1.2;
  opacity: 0.7;
}

.s3-trail {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

.s3-pin {
  fill: #0b131c;
  stroke: #c7cdd4;
  stroke-width: 1.5;
}

.s3-bend text {
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.02em;
}

.s3-bend {
  transform-box: fill-box;
  transform-origin: center;
}

/* The hand-over: the map shrinks under .s3-frame, the stage's ink closes in round the window. */
.s3-shrink {
  transform-box: view-box;
  transform-origin: 0 0;
}

.s3-hole {
  opacity: 0;
}

/* Darkens the lit hairpins under scene 4's incoming headline (top-left). */
.s3-scrim-t {
  opacity: 0;
}

/* Poster pose: parked at Ostarre. The drive keyframes are sampled from the route. */
.s3-car {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(924px, 640px) rotate(18.8deg); /* gen:car-final */
}

/* ---------- Gauge + legend ---------- */
.s3-dash {
  position: absolute;
  z-index: 2;
  right: calc(var(--gutter) * 0.7);
  top: 50%;
  translate: 0 -46%;
  box-sizing: border-box;
  width: clamp(19rem, 25.5vw, 24rem);
  padding: 1.5rem 1.1rem 0.9rem;
}

.scene--3 .copy {
  z-index: 3;
}

/* The card behind gauge + legend; it arrives with the legend. */
.s3-dash::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 1.5rem;
  background: rgb(8 16 26 / 0.8);
  box-shadow:
    inset 0 0 0 1px rgb(56 72 91 / 0.55),
    0 1.5rem 4rem rgb(3 7 12 / 0.5);
}

.s3-gauge {
  position: relative;
  container-type: inline-size;
}

/* Keeps the map's roads and labels from running through the readout before the card arrives. */
.s3-gauge::before {
  content: '';
  position: absolute;
  inset: -12% -14% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(5 9 15 / 0.85) 55%,
    rgb(5 9 15 / 0.5) 78%,
    rgb(5 9 15 / 0)
  );
}

.s3-gsvg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.s3-gtick {
  fill: none;
  stroke: #38485b;
  stroke-width: 1;
}

.s3-gnum,
.s3-gglyph {
  font: 500 8px/1 var(--mono);
  fill: #8e97a2;
  text-anchor: middle;
}

.s3-gglyph {
  font-weight: 600;
}

.s3-fill {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.s3-fill--safe,
.s3-fill--mild,
.s3-fill--moderate {
  stroke-dashoffset: 0;
}

.s3-fill--high {
  stroke-dashoffset: 0.7335; /* gen:high-fill */
}

.s3-bead {
  transform-box: view-box;
  transform-origin: 120px 112px;
  transform: rotate(182.13deg); /* gen:bead-final */
}

.s3-beadc {
  stroke: #c5562a;
}

.s3-read {
  position: absolute;
  left: 0;
  right: 0;
  top: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.s3-num {
  font: 600 17cqi/1 var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.s3-unit {
  font: 500 3.6cqi/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--fg-3);
}

.s3-chips {
  display: grid;
  margin-top: 9cqi;
}

.s3-chip {
  grid-area: 1 / 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.9em 0.3em 0.35em;
  border-radius: 999px;
  font: 600 max(0.72rem, 3.8cqi)/1 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
}

.s3-chip .s3-glyph {
  width: 1.75em;
  height: 1.75em;
  font-size: 0.95em;
  text-transform: none;
}

.s3-chip--high {
  opacity: 1;
}

/* stylelint-disable-next-line no-descending-specificity -- the chip's glyph size wins by specificity; the glyph base sits with the chip */
.s3-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  font: 700 0.72rem/1 var(--mono);
  letter-spacing: 0;
  color: var(--s3-on, #fff);
}

.s3-legend {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid rgb(56 72 91 / 0.55);
  display: grid;
  gap: 0.2rem;
}

.s3-row {
  position: relative;
  display: grid;
  /* Grows for a longer band name (ru "БЕЗОПАСНЫЙ"); English keeps 5.1rem. */
  grid-template-columns: 1.6rem minmax(5.1rem, max-content) 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.38rem 0.6rem 0.38rem 0.4rem;
  border-radius: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.25;
}

.s3-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--s3-dim);
  box-shadow: inset 0 0 0 1px var(--s3-mark);
  opacity: 0;
}

.s3-row--high::before {
  opacity: 1;
}

/* Severe is where this trip is heading: a dashed outline marks it as next. */
.s3-row--severe::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed var(--s3-mark);
  border-radius: inherit;
  opacity: 0.55;
}

/* One name column for every row, so a long name moves all descriptions alike. */
@supports (grid-template-columns: subgrid) {
  .s3-legend {
    grid-template-columns: 1.6rem minmax(5.1rem, max-content) 1fr;
    column-gap: 0.6rem;
  }

  .s3-row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}

.s3-row .s3-glyph {
  width: 1.6rem;
  height: 1.6rem;
  background: var(--s3-mark);
}

.s3-name {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--s3-ink);
}

.s3-desc {
  color: var(--fg-2);
}

.s3-row--safe,
.s3-chip--safe {
  --s3-mark: var(--safe);
  --s3-ink: var(--safe-ink);
  --s3-dim: #1f3035;
}

.s3-row--mild,
.s3-chip--mild {
  --s3-mark: var(--mild);
  --s3-on: #000;
  --s3-ink: var(--mild-ink);
  --s3-dim: #2e2c0e;
}

.s3-row--moderate,
.s3-chip--moderate {
  --s3-mark: var(--moderate);
  --s3-on: #000;
  --s3-ink: var(--moderate-ink);
  --s3-dim: #3a2706;
}

.s3-row--high,
.s3-chip--high {
  --s3-mark: var(--high);
  --s3-on: #000;
  --s3-ink: var(--high-ink);
  --s3-dim: #3a1709;
}

.s3-row--severe {
  --s3-mark: var(--severe);
  --s3-ink: var(--severe-ink);
  --s3-dim: #2c0a1a;
}

/* stylelint-disable-next-line no-duplicate-selectors -- the band colours, apart from the chip's layout above */
.s3-chip {
  background: var(--s3-dim);
  color: var(--s3-ink);
  box-shadow: inset 0 0 0 1px var(--s3-mark);
}

/* stylelint-disable-next-line no-duplicate-selectors -- the band colours, apart from the chip's layout above */
.s3-chip .s3-glyph {
  background: var(--s3-mark);
}

/* ---------- The last minute's band ---------- */
.s3-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqi;
  margin-top: 2.5cqi;
}

.s3-rate .s3-chips {
  margin: 0;
}

.s3-rate-k {
  font: 500 max(0.6rem, 3.2cqi)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}

.s3-rchip {
  font-size: max(0.6rem, 3.2cqi);
}

.s3-rchip--safe {
  --s3-mark: var(--safe);
  --s3-ink: var(--safe-ink);
  --s3-dim: #1f3035;
  opacity: 0; /* gen:rate-safe */
}

.s3-rchip--mild {
  --s3-mark: var(--mild);
  --s3-on: #000;
  --s3-ink: var(--mild-ink);
  --s3-dim: #2e2c0e;
  opacity: 0; /* gen:rate-mild */
}

.s3-rchip--moderate {
  --s3-mark: var(--moderate);
  --s3-on: #000;
  --s3-ink: var(--moderate-ink);
  --s3-dim: #3a2706;
  opacity: 0; /* gen:rate-moderate */
}

.s3-rchip--high {
  --s3-mark: var(--high);
  --s3-on: #000;
  --s3-ink: var(--high-ink);
  --s3-dim: #3a1709;
  opacity: 1; /* gen:rate-high */
}

/* ---------- Squarer screens: pull the route clear of the card ---------- */
@media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 4/5) {
  .s3-frame {
    transform: translate(-150px, -60px) scale(0.82); /* gen:frame-q */
  }

  .s3-dash {
    width: clamp(18rem, 28vw, 22rem);
  }

  .s3-scalebar,
  .s3-l--wood,
  .s3-l--golfe {
    display: none;
  }
}

/* ---------- Phone portrait ---------- */
@media (max-aspect-ratio: 4/5) {
  .s3-frame {
    transform: translate(26px, -162px) scale(0.595); /* gen:frame-p */
  }

  .s3-dash {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 12rem;
    translate: -50% 0;
    width: min(26rem, 100% - 2.5rem);
    padding: 0;
  }

  .s3-car .s3-carbody {
    transform: scale(1.7);
  }

  .s3-dash::before {
    display: none;
  }

  .s3-chip {
    font-size: max(0.6rem, 3.8cqi);
  }

  .s3-gauge {
    width: min(48%, 15rem);
    margin-inline: auto;
  }

  .s3-gnum {
    font-size: 13px;
  }

  .s3-gglyph {
    display: none;
  }

  .s3-legend {
    max-width: 26rem;
    margin-inline: auto;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    margin-top: 0.9rem;
  }

  .s3-row {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.1rem;
  }

  .s3-row .s3-glyph {
    width: 1.5rem;
    height: 1.5rem;
  }

  .s3-name {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
  }

  .s3-bend text {
    font-size: 24px;
  }

  .s3-desc,
  .s3-lbl,
  .s3-furn {
    display: none;
  }
}

/* Portrait tablets: wider art window, so the map can stay larger. */
@media (min-aspect-ratio: 3/5) and (max-aspect-ratio: 4/5) {
  .s3-frame {
    transform: translate(40px, -150px) scale(0.66); /* gen:frame-t */
  }

  .s3-dash {
    width: min(34rem, 100% - 2.5rem);
  }

  .s3-gauge {
    width: min(52%, 19rem);
  }
}

/* Phones: the copy below is taller, so the gauge sits higher. */
@media (max-aspect-ratio: 3/5) {
  .s3-unit {
    display: none;
  }

  .s3-dash {
    bottom: 16.5rem;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) and (min-height: 30rem) {
  @supports (animation-timeline: view()) {
    .s3-cam,
    .s3-fog,
    .s3-car,
    .s3-trail,
    .s3-fill,
    .s3-bead,
    .s3-beadc,
    .s3-num,
    .s3-chip,
    .s3-row::before,
    .s3-row--severe::after,
    .s3-warm,
    .s3-legend,
    .s3-bend,
    .s3-bendv,
    .s3-shrink,
    .s3-ground,
    .s3-air,
    .s3-hole,
    .s3-l {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --s3;
      animation-range: contain 0% contain 100%;
    }

    .s3-cam {
      animation-name: s3-camera;
    }
    .s3-fog--1 {
      animation-name: s3-fog-1;
    }
    .s3-fog--2 {
      animation-name: s3-fog-2;
    }
    .s3-car {
      animation-name: s3-drive;
    }
    .s3-fill--safe {
      animation-name: s3-g-safe;
    }
    .s3-fill--mild {
      animation-name: s3-g-mild;
    }
    .s3-fill--moderate {
      animation-name: s3-g-moderate;
    }
    .s3-fill--high {
      animation-name: s3-g-high;
    }
    .s3-fill--severe {
      animation-name: s3-g-severe;
    }
    .s3-bead {
      animation-name: s3-bead;
    }
    .s3-beadc {
      animation-name: s3-beadc;
    }
    .s3-chip--safe {
      animation-name: s3-chip-safe;
    }
    .s3-chip--mild {
      animation-name: s3-chip-mild;
    }
    .s3-chip--moderate {
      animation-name: s3-chip-moderate;
    }
    .s3-chip--high {
      animation-name: s3-chip-high;
    }
    .s3-row--safe::before {
      animation-name: s3-on-safe;
    }
    .s3-row--mild::before {
      animation-name: s3-on-mild;
    }
    .s3-row--moderate::before {
      animation-name: s3-on-moderate;
    }
    .s3-row--high::before {
      animation-name: s3-on-high;
    }
    .s3-row--severe::after {
      animation-name: s3-next;
    }
    .s3-warm {
      animation-name: s3-warm;
    }
    .s3-bend {
      animation-name: s3-pop;
    }
    .s3-rchip--safe {
      animation-name: s3-rate-safe;
    }
    .s3-rchip--mild {
      animation-name: s3-rate-mild;
    }
    .s3-rchip--moderate {
      animation-name: s3-rate-moderate;
    }
    .s3-rchip--high {
      animation-name: s3-rate-high;
    }

    /* The card lands first, then the legend fills it. */
    .s3-legend {
      animation-name: s3-legend-in;
      animation-range: contain 31% contain 37%;
    }

    .s3-dash::before,
    .s3-furn,
    .s3-scrim-t {
      animation: s3-fade-in linear both;
      animation-timeline: --s3;
      animation-range: contain 28% contain 32%;
    }

    /* Map furniture arrives once the view has flattened. */
    .s3-furn {
      animation-range: contain 44% contain 58%;
    }

    /* Scene 4's headline lands top-left, over the lit hairpins: darken them as it comes. */
    .s3-scrim-t {
      animation-range: contain 66% contain 80%;
    }

    /* gen:begin hand-over (written by site/scenes-src/s3/gen.py: the map into scene 4's window, per layout) */
    .s3-shrink {
      animation-name: s3-shrink-d;
      animation-range: contain 71% contain 79%;
    }
    .s3-ground,
    .s3-air,
    .s3-bendv {
      animation-name: s3-fade-out;
      animation-range: contain 71% contain 76%;
    }
    .s3-hole {
      animation-name: s3-fade-in;
      animation-range: contain 71% contain 74%;
    }
    @media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 4/5) {
      .s3-shrink {
        animation-name: s3-shrink-q;
      }
    }
    @media (max-aspect-ratio: 4/5) {
      .s3-shrink {
        animation-name: s3-shrink-p;
      }
      .scene--3 .s3-art {
        transform-origin: 50% 0;
        animation: s3-pull-p linear both;
        animation-timeline: --s3;
        animation-range: contain 71% contain 79%;
      }
    }
    @media (max-aspect-ratio: 4/5) and (min-aspect-ratio: 3/5) {
      .s3-shrink {
        animation-name: s3-shrink-t;
      }
      .scene--3 .s3-art {
        transform-origin: 50% 0;
        animation: s3-pull-t linear both;
        animation-timeline: --s3;
        animation-range: contain 71% contain 79%;
      }
    }
    /* gen:end hand-over */

    /* gen:begin bends (written by site/scenes-src/s3/gen.py) */
    .s3-lit--p0 .s3-trail {
      animation-name: s3-lit-p0;
    }
    .s3-lit--p1 .s3-trail {
      animation-name: s3-lit-p1;
    }
    .s3-lit--p2 .s3-trail {
      animation-name: s3-lit-p2;
    }
    .s3-lit--a0 .s3-trail {
      animation-name: s3-lit-a0;
    }
    .s3-bend--1 {
      animation-range: contain 8.76% contain 15.22%;
    }
    .s3-bend--2 {
      animation-range: contain 17.93% contain 24.95%;
    }
    .s3-bend--3 {
      animation-range: contain 31.8% contain 38.39%;
    }
    .s3-bend--4 {
      animation-range: contain 40.61% contain 47.28%;
    }
    .s3-bend--5 {
      animation-range: contain 48.88% contain 55.48%;
    }
    .s3-bend--6 {
      animation-range: contain 56.59% contain 65.91%;
    }
    .s3-l--pic {
      animation-name: s3-l-pic;
    }
    .s3-l--crete {
      animation-name: s3-l-crete;
    }
    .s3-l--tete {
      animation-name: s3-l-tete;
    }
    .s3-l--col {
      animation-name: s3-l-col;
    }
    .s3-l--wood {
      animation-name: s3-l-wood;
    }
    .s3-l--ostarre {
      animation-name: s3-l-ostarre;
    }
    .s3-l--esclots {
      animation-name: s3-l-esclots;
    }
    .s3-l--menil {
      animation-name: s3-l-menil;
    }
    .s3-l--golfe {
      animation-name: s3-l-golfe;
    }
    @media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 4/5) {
      .s3-l--wood {
        animation-name: s3-l-wood-q;
      }
      .s3-l--ostarre {
        animation-name: s3-l-ostarre-q;
      }
      .s3-l--esclots {
        animation-name: s3-l-esclots-q;
      }
      .s3-l--menil {
        animation-name: s3-l-menil-q;
      }
      .s3-l--sorbe {
        animation-name: s3-l-sorbe-q;
      }
      .s3-l--golfe {
        animation-name: s3-l-golfe-q;
      }
    }
    /* gen:end bends */

    /* Opening tilt: the map starts as an oblique view of the col and lays flat as it pulls back. */
    .s3-art {
      transform-origin: 50% 40%;
      animation: s3-tilt linear both;
      animation-timeline: --s3;
      animation-range: contain 0% contain 70%; /* gen:tilt-range */
    }

    /* Clear this copy before scene 4's copy arrives over it. */
    .scene--3 .copy {
      animation: s3-copy-out linear both;
      animation-timeline: --s3;
      animation-range: contain 66% contain 74%;
    }

    /* The gauge fades in after the hand-in and clears before scene 4's phone gauge shows. */
    .s3-dash {
      animation: s3-dash linear both;
      animation-timeline: --s3;
      animation-range: contain 0% contain 100%;
    }

    @media (max-aspect-ratio: 4/5) {
      /* The tilt would stretch the art's fade mask down over the legend. */
      .s3-art {
        animation: none;
      }
    }

    /* The readout ticks: --s3-n is tenths of MSDV; i/d split it for counter(). */
    .s3-num {
      animation-name: s3-num;
      --s3-i: calc((var(--s3-n) - 4.5) / 10);
      --s3-d: calc(var(--s3-n) - var(--s3-i) * 10);
      counter-reset: s3-i var(--s3-i) s3-d var(--s3-d);
    }

    .s3-num::before {
      content: counter(s3-i) var(--decimal) counter(s3-d);
    }

    .s3-still {
      display: none;
    }
  }
}

@keyframes s3-tilt {
  from {
    transform: perspective(1600px) rotateX(20deg) scale(1.2);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }

  to {
    transform: perspective(1600px) rotateX(0deg) scale(1);
  }
}

@keyframes s3-fog-1 {
  from {
    opacity: 1;
    transform: scale(1.6);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }

  64% {
    opacity: 0.35;
    transform: translate(-260px, -60px) scale(1.05);
  }
  to {
    opacity: 0.3;
    transform: translate(-340px, -80px);
  }
}

@keyframes s3-fog-2 {
  from {
    opacity: 0.8;
    transform: scale(1.3);
    animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1);
  }

  64% {
    opacity: 0.4;
    transform: translate(180px, 40px) scale(1.02);
  }
  to {
    opacity: 0.3;
    transform: translate(240px, 50px);
  }
}

@keyframes s3-copy-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes s3-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes s3-dash {
  from {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  71% {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}

@keyframes s3-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes s3-pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes s3-legend-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* gen:begin keyframes (written by site/scenes-src/s3/gen.py: drive, camera, dose and labels sampled from the route) */
@keyframes s3-drive {
  0% {
    transform: translate(318px, 122px) rotate(3.5deg);
  }
  3% {
    transform: translate(318px, 122px) rotate(3.5deg);
  }
  3.75% {
    transform: translate(332.1px, 122.8px) rotate(3.2deg);
  }
  4% {
    transform: translate(337.9px, 123.2px) rotate(3.1deg);
  }
  4.25% {
    transform: translate(344.7px, 123.5px) rotate(3.1deg);
  }
  4.5% {
    transform: translate(353px, 124px) rotate(3.2deg);
  }
  4.75% {
    transform: translate(363.5px, 124.6px) rotate(3.4deg);
  }
  5% {
    transform: translate(376.7px, 125.4px) rotate(4deg);
  }
  5.25% {
    transform: translate(392.7px, 126.7px) rotate(5.2deg);
  }
  6% {
    transform: translate(446.9px, 132.9px) rotate(7.8deg);
  }
  6.5% {
    transform: translate(482.9px, 138.5px) rotate(10.1deg);
  }
  7% {
    transform: translate(519.5px, 145.8px) rotate(12deg);
  }
  7.75% {
    transform: translate(575.9px, 158px) rotate(12.5deg);
  }
  8% {
    transform: translate(594px, 162.1px) rotate(13.1deg);
  }
  8.25% {
    transform: translate(610.5px, 166.1px) rotate(13.9deg);
  }
  8.5% {
    transform: translate(624.7px, 169.7px) rotate(14.6deg);
  }
  8.75% {
    transform: translate(636.3px, 172.9px) rotate(15.8deg);
  }
  9% {
    transform: translate(646px, 175.7px) rotate(17deg);
  }
  9.25% {
    transform: translate(654px, 178.3px) rotate(17deg);
  }
  9.5% {
    transform: translate(661.1px, 180.4px) rotate(17.1deg);
  }
  9.75% {
    transform: translate(667.4px, 182.3px) rotate(18.7deg);
  }
  10% {
    transform: translate(673px, 184.2px) rotate(22.2deg);
  }
  10.5% {
    transform: translate(682.5px, 188.9px) rotate(33.3deg);
  }
  10.75% {
    transform: translate(686.3px, 191.8px) rotate(39.2deg);
  }
  11.25% {
    transform: translate(692.8px, 198.2px) rotate(52.2deg);
  }
  11.5% {
    transform: translate(695.3px, 201.7px) rotate(62.2deg);
  }
  11.75% {
    transform: translate(697.3px, 205.5px) rotate(75.6deg);
  }
  12% {
    transform: translate(698px, 209.6px) rotate(90.4deg);
  }
  12.25% {
    transform: translate(697.1px, 213.6px) rotate(105.3deg);
  }
  12.5% {
    transform: translate(695.2px, 217.4px) rotate(118.4deg);
  }
  13% {
    transform: translate(689.8px, 223.9px) rotate(137.5deg);
  }
  13.25% {
    transform: translate(686.4px, 226.7px) rotate(146.2deg);
  }
  13.5% {
    transform: translate(682.5px, 228.9px) rotate(154.7deg);
  }
  13.75% {
    transform: translate(678px, 230.4px) rotate(162.4deg);
  }
  14% {
    transform: translate(673.2px, 231.5px) rotate(168.3deg);
  }
  14.25% {
    transform: translate(667.9px, 232.2px) rotate(171.5deg);
  }
  14.75% {
    transform: translate(656.2px, 233.7px) rotate(172.8deg);
  }
  15% {
    transform: translate(649.4px, 234.6px) rotate(173.3deg);
  }
  15.25% {
    transform: translate(641.7px, 235.4px) rotate(174.8deg);
  }
  15.5% {
    transform: translate(632.8px, 236.1px) rotate(175.8deg);
  }
  15.75% {
    transform: translate(622.6px, 236.8px) rotate(175.6deg);
  }
  16% {
    transform: translate(610.8px, 237.9px) rotate(173.6deg);
  }
  16.25% {
    transform: translate(597.4px, 239.8px) rotate(170.5deg);
  }
  16.5% {
    transform: translate(583.1px, 242.5px) rotate(168.3deg);
  }
  17% {
    transform: translate(553.6px, 249.6px) rotate(164.8deg);
  }
  17.25% {
    transform: translate(539.5px, 253.6px) rotate(162.9deg);
  }
  17.5% {
    transform: translate(526.5px, 257.8px) rotate(161.5deg);
  }
  17.75% {
    transform: translate(515.1px, 261.8px) rotate(160.6deg);
  }
  18% {
    transform: translate(505.2px, 265.3px) rotate(161.4deg);
  }
  18.25% {
    transform: translate(496.5px, 268px) rotate(162.7deg);
  }
  18.5% {
    transform: translate(488.8px, 270.4px) rotate(162.2deg);
  }
  18.75% {
    transform: translate(481.9px, 272.6px) rotate(159deg);
  }
  19% {
    transform: translate(475.9px, 275.1px) rotate(153.2deg);
  }
  19.25% {
    transform: translate(470.6px, 278.1px) rotate(146.3deg);
  }
  19.75% {
    transform: translate(462.3px, 285.3px) rotate(134.3deg);
  }
  20.25% {
    transform: translate(455.9px, 292.9px) rotate(124.2deg);
  }
  20.5% {
    transform: translate(453.3px, 296.9px) rotate(117.2deg);
  }
  20.75% {
    transform: translate(451.3px, 301.2px) rotate(107.4deg);
  }
  21% {
    transform: translate(450.1px, 305.6px) rotate(95.3deg);
  }
  21.25% {
    transform: translate(450.2px, 310.1px) rotate(82.6deg);
  }
  21.5% {
    transform: translate(451.6px, 314.4px) rotate(70.7deg);
  }
  21.75% {
    transform: translate(453.6px, 318.5px) rotate(60.9deg);
  }
  22% {
    transform: translate(456.2px, 322.3px) rotate(53.8deg);
  }
  22.5% {
    transform: translate(462.5px, 329.3px) rotate(42.6deg);
  }
  23% {
    transform: translate(470.6px, 335.3px) rotate(28.7deg);
  }
  23.25% {
    transform: translate(475.5px, 337.6px) rotate(20.6deg);
  }
  23.5% {
    transform: translate(481px, 339px) rotate(13deg);
  }
  23.75% {
    transform: translate(487.1px, 340px) rotate(7.6deg);
  }
  24% {
    transform: translate(493.8px, 340.6px) rotate(4.8deg);
  }
  24.25% {
    transform: translate(501.3px, 341px) rotate(4.4deg);
  }
  24.56% {
    transform: translate(512px, 342px) rotate(5.8deg);
  }
  24.75% {
    transform: translate(519.3px, 342.8px) rotate(6.1deg);
  }
  25% {
    transform: translate(530.6px, 343.9px) rotate(5deg);
  }
  25.25% {
    transform: translate(544.2px, 345px) rotate(4.5deg);
  }
  25.5% {
    transform: translate(559.9px, 346.2px) rotate(4.6deg);
  }
  25.75% {
    transform: translate(577.3px, 347.7px) rotate(5.5deg);
  }
  26.25% {
    transform: translate(613.4px, 351.9px) rotate(6.9deg);
  }
  26.5% {
    transform: translate(630.6px, 353.9px) rotate(6.6deg);
  }
  26.75% {
    transform: translate(646.7px, 355.7px) rotate(5.4deg);
  }
  27% {
    transform: translate(661.8px, 356.8px) rotate(2.9deg);
  }
  27.25% {
    transform: translate(675.9px, 357.3px) rotate(2.3deg);
  }
  27.5% {
    transform: translate(689.1px, 358px) rotate(4.9deg);
  }
  27.75% {
    transform: translate(701.8px, 359.6px) rotate(10.1deg);
  }
  28% {
    transform: translate(714px, 362.5px) rotate(16.1deg);
  }
  28.25% {
    transform: translate(725.9px, 366.5px) rotate(19.6deg);
  }
  28.5% {
    transform: translate(737.9px, 370.9px) rotate(20deg);
  }
  28.75% {
    transform: translate(750.4px, 375.3px) rotate(17.4deg);
  }
  29% {
    transform: translate(763.7px, 378.9px) rotate(13.4deg);
  }
  29.25% {
    transform: translate(777.8px, 381.9px) rotate(11.1deg);
  }
  29.5% {
    transform: translate(792.7px, 384.6px) rotate(9.5deg);
  }
  29.75% {
    transform: translate(808.6px, 387.1px) rotate(8.4deg);
  }
  30% {
    transform: translate(825.1px, 389.4px) rotate(7.5deg);
  }
  30.5% {
    transform: translate(859.7px, 392.9px) rotate(4.4deg);
  }
  31% {
    transform: translate(894.5px, 395.6px) rotate(5.5deg);
  }
  31.25% {
    transform: translate(910px, 397.3px) rotate(6.1deg);
  }
  31.5% {
    transform: translate(922.9px, 398.7px) rotate(6.8deg);
  }
  31.75% {
    transform: translate(933.6px, 400px) rotate(8deg);
  }
  32% {
    transform: translate(942.4px, 401.4px) rotate(9deg);
  }
  32.25% {
    transform: translate(949.9px, 402.7px) rotate(9.1deg);
  }
  32.75% {
    transform: translate(962.5px, 404.6px) rotate(10.6deg);
  }
  33% {
    transform: translate(967.8px, 405.6px) rotate(13.8deg);
  }
  33.5% {
    transform: translate(977.2px, 408.5px) rotate(24.9deg);
  }
  34% {
    transform: translate(984.6px, 413.2px) rotate(38deg);
  }
  34.25% {
    transform: translate(987.8px, 415.9px) rotate(45.5deg);
  }
  34.5% {
    transform: translate(990.6px, 418.8px) rotate(56deg);
  }
  34.75% {
    transform: translate(992.8px, 422.1px) rotate(70deg);
  }
  35% {
    transform: translate(994px, 425.8px) rotate(85.8deg);
  }
  35.25% {
    transform: translate(993.4px, 429.6px) rotate(101.7deg);
  }
  35.5% {
    transform: translate(991.7px, 433.1px) rotate(116.1deg);
  }
  35.75% {
    transform: translate(989.4px, 436.4px) rotate(127.6deg);
  }
  36.25% {
    transform: translate(983.6px, 441.9px) rotate(145.4deg);
  }
  36.5% {
    transform: translate(980px, 444px) rotate(153.8deg);
  }
  37% {
    transform: translate(971.5px, 446.5px) rotate(168.6deg);
  }
  37.25% {
    transform: translate(966.8px, 447.1px) rotate(173.2deg);
  }
  37.5% {
    transform: translate(961.7px, 447.5px) rotate(175.8deg);
  }
  38.01% {
    transform: translate(950px, 448px) rotate(178.3deg);
  }
  38.25% {
    transform: translate(943.5px, 448.2px) rotate(179.6deg);
  }
  38.5% {
    transform: translate(935.9px, 448.1px) rotate(181.7deg);
  }
  38.75% {
    transform: translate(927.2px, 447.6px) rotate(183.4deg);
  }
  39% {
    transform: translate(917.2px, 446.9px) rotate(184.4deg);
  }
  39.25% {
    transform: translate(905.7px, 446px) rotate(185.2deg);
  }
  39.5% {
    transform: translate(893.6px, 444.7px) rotate(186.7deg);
  }
  39.75% {
    transform: translate(882px, 443.2px) rotate(186.7deg);
  }
  40% {
    transform: translate(871.6px, 442.1px) rotate(185.3deg);
  }
  40.25% {
    transform: translate(862.7px, 441.4px) rotate(184.3deg);
  }
  40.5% {
    transform: translate(854.8px, 440.8px) rotate(182.7deg);
  }
  40.75% {
    transform: translate(847.9px, 440.6px) rotate(179.4deg);
  }
  41.25% {
    transform: translate(836.1px, 441.5px) rotate(173deg);
  }
  41.75% {
    transform: translate(826px, 443.1px) rotate(165.9deg);
  }
  42% {
    transform: translate(821.5px, 444.3px) rotate(159.5deg);
  }
  42.5% {
    transform: translate(813.8px, 448.2px) rotate(142.8deg);
  }
  42.75% {
    transform: translate(810.8px, 451px) rotate(133.8deg);
  }
  43.25% {
    transform: translate(806.2px, 457.5px) rotate(114.6deg);
  }
  43.5% {
    transform: translate(804.7px, 461.1px) rotate(102.6deg);
  }
  43.75% {
    transform: translate(804px, 464.9px) rotate(89.6deg);
  }
  44% {
    transform: translate(804.6px, 468.8px) rotate(76.4deg);
  }
  44.25% {
    transform: translate(806.2px, 472.3px) rotate(64.1deg);
  }
  44.5% {
    transform: translate(808.5px, 475.5px) rotate(53.7deg);
  }
  45% {
    transform: translate(814.2px, 481.3px) rotate(37.8deg);
  }
  45.5% {
    transform: translate(821.6px, 485.7px) rotate(21.8deg);
  }
  45.75% {
    transform: translate(826.1px, 486.9px) rotate(14.5deg);
  }
  46% {
    transform: translate(830.9px, 487.7px) rotate(8.9deg);
  }
  46.25% {
    transform: translate(836.2px, 488.2px) rotate(6.2deg);
  }
  46.5% {
    transform: translate(841.8px, 488.7px) rotate(6.2deg);
  }
  46.75% {
    transform: translate(848.1px, 489.4px) rotate(7.9deg);
  }
  47% {
    transform: translate(855px, 490.6px) rotate(9.9deg);
  }
  47.25% {
    transform: translate(862.8px, 492.1px) rotate(10.9deg);
  }
  47.5% {
    transform: translate(871.9px, 493.8px) rotate(11.2deg);
  }
  47.75% {
    transform: translate(882.7px, 496px) rotate(12deg);
  }
  48% {
    transform: translate(895px, 498.8px) rotate(13.6deg);
  }
  48.5% {
    transform: translate(920.9px, 506px) rotate(17.2deg);
  }
  48.75% {
    transform: translate(931.9px, 509.5px) rotate(17.7deg);
  }
  49% {
    transform: translate(941.2px, 512.5px) rotate(17.3deg);
  }
  49.25% {
    transform: translate(949.3px, 515px) rotate(15.7deg);
  }
  49.5% {
    transform: translate(956.4px, 516.8px) rotate(14.5deg);
  }
  49.75% {
    transform: translate(962.8px, 518.4px) rotate(15.2deg);
  }
  50% {
    transform: translate(968.5px, 519.9px) rotate(18.3deg);
  }
  50.25% {
    transform: translate(973.6px, 521.7px) rotate(23.5deg);
  }
  50.75% {
    transform: translate(982.2px, 526.5px) rotate(35.1deg);
  }
  51.25% {
    transform: translate(989px, 532.3px) rotate(46.4deg);
  }
  51.5% {
    transform: translate(991.9px, 535.5px) rotate(54.7deg);
  }
  51.75% {
    transform: translate(994.3px, 538.9px) rotate(66.9deg);
  }
  52% {
    transform: translate(995.8px, 542.7px) rotate(81.5deg);
  }
  52.25% {
    transform: translate(995.8px, 546.7px) rotate(96.9deg);
  }
  52.5% {
    transform: translate(994.3px, 550.5px) rotate(111.4deg);
  }
  52.75% {
    transform: translate(992.2px, 554px) rotate(123.3deg);
  }
  53.25% {
    transform: translate(986.6px, 560px) rotate(141.5deg);
  }
  53.5% {
    transform: translate(983.2px, 562.5px) rotate(150.2deg);
  }
  54% {
    transform: translate(974.7px, 565.5px) rotate(165.8deg);
  }
  54.25% {
    transform: translate(970.1px, 566.3px) rotate(170.8deg);
  }
  54.5% {
    transform: translate(965.1px, 566.8px) rotate(173.6deg);
  }
  55% {
    transform: translate(954.2px, 567.8px) rotate(175.1deg);
  }
  55.25% {
    transform: translate(948.2px, 568.4px) rotate(176deg);
  }
  55.75% {
    transform: translate(935.2px, 568.8px) rotate(178.4deg);
  }
  56.25% {
    transform: translate(921.4px, 569.4px) rotate(175deg);
  }
  57% {
    transform: translate(902px, 572.1px) rotate(169deg);
  }
  57.25% {
    transform: translate(896.3px, 573.3px) rotate(165.3deg);
  }
  57.75% {
    transform: translate(886.6px, 576.6px) rotate(154.2deg);
  }
  58.25% {
    transform: translate(879.1px, 581.3px) rotate(143.1deg);
  }
  58.5% {
    transform: translate(876px, 583.9px) rotate(138.1deg);
  }
  59% {
    transform: translate(870.9px, 589.1px) rotate(127.5deg);
  }
  59.5% {
    transform: translate(867.3px, 594.6px) rotate(112.8deg);
  }
  60% {
    transform: translate(865.6px, 600.4px) rotate(97.1deg);
  }
  60.5% {
    transform: translate(865.9px, 606px) rotate(82.8deg);
  }
  61% {
    transform: translate(867.2px, 611px) rotate(71.4deg);
  }
  62% {
    transform: translate(871.6px, 619.5px) rotate(50.3deg);
  }
  62.5% {
    transform: translate(874.7px, 622.6px) rotate(40.5deg);
  }
  63% {
    transform: translate(878.2px, 624.9px) rotate(32.3deg);
  }
  63.75% {
    transform: translate(883.7px, 627.5px) rotate(24.2deg);
  }
  64.5% {
    transform: translate(889.1px, 629.5px) rotate(21deg);
  }
  66% {
    transform: translate(899.1px, 633.1px) rotate(17.6deg);
  }
  67.5% {
    transform: translate(908.7px, 635.7px) rotate(14.8deg);
  }
  68.5% {
    transform: translate(914.9px, 637.3px) rotate(15.4deg);
  }
  70% {
    transform: translate(924px, 640px) rotate(18.8deg);
  }
  100% {
    transform: translate(924px, 640px) rotate(18.8deg);
  }
}

@keyframes s3-camera {
  0% {
    transform: translate(234.7px, 150.9px) scale(1.45);
  }
  0.5% {
    transform: translate(228.5px, 150.2px) scale(1.45);
  }
  1% {
    transform: translate(220.9px, 149.3px) scale(1.45);
  }
  1.5% {
    transform: translate(211.8px, 148.2px) scale(1.45);
  }
  2% {
    transform: translate(200.9px, 146.7px) scale(1.4499);
  }
  2.5% {
    transform: translate(188px, 145px) scale(1.4498);
  }
  3% {
    transform: translate(172.8px, 142.8px) scale(1.4497);
  }
  3.25% {
    transform: translate(164.3px, 141.6px) scale(1.4496);
  }
  3.5% {
    transform: translate(155.3px, 140.2px) scale(1.4495);
  }
  3.75% {
    transform: translate(145.6px, 138.7px) scale(1.4494);
  }
  4% {
    transform: translate(135.3px, 137.1px) scale(1.4492);
  }
  4.5% {
    transform: translate(112.9px, 133.4px) scale(1.4489);
  }
  4.75% {
    transform: translate(100.9px, 131.3px) scale(1.4487);
  }
  5.25% {
    transform: translate(75.2px, 126.7px) scale(1.4483);
  }
  5.75% {
    transform: translate(47.8px, 121.5px) scale(1.4478);
  }
  6.5% {
    transform: translate(4.4px, 112.7px) scale(1.4469);
  }
  7.25% {
    transform: translate(-39.8px, 102.6px) scale(1.4457);
  }
  7.75% {
    transform: translate(-68.6px, 95.3px) scale(1.4449);
  }
  8.25% {
    transform: translate(-96px, 87.7px) scale(1.4439);
  }
  8.75% {
    transform: translate(-121.4px, 79.9px) scale(1.4428);
  }
  9.25% {
    transform: translate(-144.4px, 71.8px) scale(1.4416);
  }
  9.5% {
    transform: translate(-154.8px, 67.7px) scale(1.4409);
  }
  9.75% {
    transform: translate(-164.3px, 63.7px) scale(1.4402);
  }
  10% {
    transform: translate(-173px, 59.6px) scale(1.4395);
  }
  10.25% {
    transform: translate(-180.8px, 55.5px) scale(1.4388);
  }
  10.5% {
    transform: translate(-187.7px, 51.5px) scale(1.438);
  }
  10.75% {
    transform: translate(-193.6px, 47.5px) scale(1.4372);
  }
  11% {
    transform: translate(-198.6px, 43.5px) scale(1.4364);
  }
  11.25% {
    transform: translate(-202.6px, 39.5px) scale(1.4355);
  }
  11.5% {
    transform: translate(-205.7px, 35.6px) scale(1.4346);
  }
  11.75% {
    transform: translate(-207.8px, 31.8px) scale(1.4337);
  }
  12% {
    transform: translate(-209px, 28px) scale(1.4328);
  }
  12.25% {
    transform: translate(-209.2px, 24.2px) scale(1.4318);
  }
  12.5% {
    transform: translate(-208.6px, 20.5px) scale(1.4307);
  }
  12.75% {
    transform: translate(-207.1px, 16.8px) scale(1.4297);
  }
  13% {
    transform: translate(-204.7px, 13.2px) scale(1.4286);
  }
  13.25% {
    transform: translate(-201.6px, 9.7px) scale(1.4275);
  }
  13.5% {
    transform: translate(-197.7px, 6.1px) scale(1.4263);
  }
  13.75% {
    transform: translate(-193px, 2.7px) scale(1.4252);
  }
  14% {
    transform: translate(-187.8px, -0.8px) scale(1.4239);
  }
  14.25% {
    transform: translate(-181.9px, -4.2px) scale(1.4227);
  }
  14.75% {
    transform: translate(-168.4px, -10.9px) scale(1.4201);
  }
  14.83% {
    transform: translate(-168.3px, -10.9px) scale(1.4196);
  }
  15% {
    transform: translate(-161.1px, -14.3px) scale(1.4187);
  }
  15.75% {
    transform: translate(-136.9px, -24.2px) scale(1.4145);
  }
  17% {
    transform: translate(-94.3px, -40.9px) scale(1.4067);
  }
  17.5% {
    transform: translate(-77.9px, -47.6px) scale(1.4034);
  }
  18.22% {
    transform: translate(-55.8px, -57.7px) scale(1.3984);
  }
  18.25% {
    transform: translate(-55.8px, -57.7px) scale(1.3982);
  }
  18.75% {
    transform: translate(-43.3px, -64.5px) scale(1.3945);
  }
  19.25% {
    transform: translate(-32.9px, -71.1px) scale(1.3908);
  }
  19.5% {
    transform: translate(-28.7px, -74.4px) scale(1.3888);
  }
  19.75% {
    transform: translate(-25.1px, -77.6px) scale(1.3869);
  }
  20% {
    transform: translate(-22.1px, -80.8px) scale(1.3849);
  }
  20.25% {
    transform: translate(-19.8px, -84px) scale(1.3829);
  }
  20.5% {
    transform: translate(-18.3px, -87px) scale(1.3808);
  }
  20.75% {
    transform: translate(-17.4px, -90px) scale(1.3787);
  }
  21% {
    transform: translate(-17.2px, -92.9px) scale(1.3766);
  }
  21.25% {
    transform: translate(-17.8px, -95.7px) scale(1.3745);
  }
  21.5% {
    transform: translate(-19.1px, -98.5px) scale(1.3723);
  }
  21.75% {
    transform: translate(-21px, -101.1px) scale(1.3701);
  }
  22% {
    transform: translate(-23.7px, -103.6px) scale(1.3679);
  }
  22.25% {
    transform: translate(-27px, -106px) scale(1.3656);
  }
  22.5% {
    transform: translate(-31px, -108.3px) scale(1.3633);
  }
  22.75% {
    transform: translate(-35.6px, -110.5px) scale(1.361);
  }
  23% {
    transform: translate(-40.8px, -112.5px) scale(1.3587);
  }
  23.25% {
    transform: translate(-46.6px, -114.5px) scale(1.3563);
  }
  23.75% {
    transform: translate(-59.8px, -118.1px) scale(1.3516);
  }
  24% {
    transform: translate(-67.1px, -119.7px) scale(1.3491);
  }
  24.5% {
    transform: translate(-83.1px, -122.7px) scale(1.3442);
  }
  24.56% {
    transform: translate(-83px, -122.4px) scale(1.3435);
  }
  24.75% {
    transform: translate(-91.6px, -124px) scale(1.3417);
  }
  25.25% {
    transform: translate(-109.6px, -126.5px) scale(1.3366);
  }
  26% {
    transform: translate(-138.2px, -129.6px) scale(1.3288);
  }
  27.25% {
    transform: translate(-187.3px, -133.6px) scale(1.3154);
  }
  28% {
    transform: translate(-215.7px, -135.5px) scale(1.3072);
  }
  28.5% {
    transform: translate(-233.5px, -136.5px) scale(1.3016);
  }
  29% {
    transform: translate(-250.1px, -137.3px) scale(1.2959);
  }
  29.5% {
    transform: translate(-265.2px, -137.9px) scale(1.2902);
  }
  29.75% {
    transform: translate(-272.2px, -138.1px) scale(1.2873);
  }
  30.25% {
    transform: translate(-284.7px, -138.5px) scale(1.2816);
  }
  30.5% {
    transform: translate(-290.2px, -138.6px) scale(1.2786);
  }
  31% {
    transform: translate(-299.8px, -138.6px) scale(1.2728);
  }
  31.25% {
    transform: translate(-303.8px, -138.5px) scale(1.2699);
  }
  31.75% {
    transform: translate(-310.1px, -138.3px) scale(1.2639);
  }
  32% {
    transform: translate(-312.4px, -138px) scale(1.261);
  }
  32.25% {
    transform: translate(-314.3px, -137.8px) scale(1.258);
  }
  32.75% {
    transform: translate(-316.2px, -137.1px) scale(1.252);
  }
  33.25% {
    transform: translate(-316.1px, -136.2px) scale(1.2461);
  }
  33.5% {
    transform: translate(-315.3px, -135.7px) scale(1.2431);
  }
  34% {
    transform: translate(-312.1px, -134.5px) scale(1.237);
  }
  34.25% {
    transform: translate(-309.9px, -133.9px) scale(1.234);
  }
  34.75% {
    transform: translate(-304px, -132.3px) scale(1.228);
  }
  35% {
    transform: translate(-300.5px, -131.5px) scale(1.225);
  }
  35.5% {
    transform: translate(-292.5px, -129.6px) scale(1.219);
  }
  35.75% {
    transform: translate(-287.9px, -128.6px) scale(1.216);
  }
  35.87% {
    transform: translate(-285.8px, -127.7px) scale(1.2145);
  }
  36% {
    transform: translate(-283.1px, -127.6px) scale(1.213);
  }
  36.75% {
    transform: translate(-267.3px, -124px) scale(1.2039);
  }
  37.5% {
    transform: translate(-250px, -120px) scale(1.195);
  }
  39.5% {
    transform: translate(-202.1px, -108px) scale(1.1714);
  }
  40.25% {
    transform: translate(-185.3px, -103.4px) scale(1.1627);
  }
  40.75% {
    transform: translate(-174.8px, -100.3px) scale(1.1569);
  }
  41.5% {
    transform: translate(-160.5px, -95.9px) scale(1.1484);
  }
  42.25% {
    transform: translate(-147.9px, -91.6px) scale(1.1401);
  }
  43% {
    transform: translate(-137px, -87.4px) scale(1.1319);
  }
  43.75% {
    transform: translate(-127.8px, -83.4px) scale(1.1238);
  }
  44.5% {
    transform: translate(-120.1px, -79.5px) scale(1.116);
  }
  45.25% {
    transform: translate(-113.5px, -75.6px) scale(1.1083);
  }
  46.25% {
    transform: translate(-106.1px, -70.4px) scale(1.0984);
  }
  46.75% {
    transform: translate(-102.7px, -67.8px) scale(1.0937);
  }
  46.9% {
    transform: translate(-102.1px, -67.2px) scale(1.0923);
  }
  47% {
    transform: translate(-101px, -66.5px) scale(1.0913);
  }
  48.75% {
    transform: translate(-89.3px, -57.4px) scale(1.0755);
  }
  50% {
    transform: translate(-80.1px, -51.1px) scale(1.0651);
  }
  51.25% {
    transform: translate(-69.9px, -44.8px) scale(1.0555);
  }
  54% {
    transform: translate(-46.2px, -31.5px) scale(1.037);
  }
  54.75% {
    transform: translate(-40.3px, -28.2px) scale(1.0326);
  }
  55.5% {
    transform: translate(-35px, -25.1px) scale(1.0286);
  }
  55.75% {
    transform: translate(-32.9px, -23.8px) scale(1.0273);
  }
  56.5% {
    transform: translate(-25.4px, -18.7px) scale(1.0237);
  }
  56.75% {
    transform: translate(-23.6px, -17.1px) scale(1.0225);
  }
  57% {
    transform: translate(-22.7px, -15.9px) scale(1.0214);
  }
  57.25% {
    transform: translate(-22.7px, -15.2px) scale(1.0203);
  }
  57.75% {
    transform: translate(-23.6px, -15.2px) scale(1.0182);
  }
  58% {
    transform: translate(-23.4px, -15.6px) scale(1.0172);
  }
  58.25% {
    transform: translate(-22.2px, -16.1px) scale(1.0163);
  }
  58.5% {
    transform: translate(-20.1px, -16.5px) scale(1.0154);
  }
  59% {
    transform: translate(-14.3px, -16.4px) scale(1.0136);
  }
  59.25% {
    transform: translate(-11.5px, -15.8px) scale(1.0128);
  }
  59.5% {
    transform: translate(-9.4px, -14.7px) scale(1.012);
  }
  59.75% {
    transform: translate(-8.3px, -13.3px) scale(1.0112);
  }
  60% {
    transform: translate(-8.3px, -11.6px) scale(1.0105);
  }
  60.75% {
    transform: translate(-11.4px, -5.9px) scale(1.0084);
  }
  61% {
    transform: translate(-12.1px, -4.4px) scale(1.0078);
  }
  61.25% {
    transform: translate(-11.8px, -3.1px) scale(1.0072);
  }
  61.5% {
    transform: translate(-10.6px, -2.4px) scale(1.0067);
  }
  62% {
    transform: translate(-6.1px, -2.2px) scale(1.0056);
  }
  62.5% {
    transform: translate(-1.7px, -3.5px) scale(1.0047);
  }
  62.75% {
    transform: translate(-0.6px, -4.4px) scale(1.0043);
  }
  63% {
    transform: translate(-0.6px, -5.3px) scale(1.0039);
  }
  63.25% {
    transform: translate(-1.5px, -6.1px) scale(1.0035);
  }
  63.75% {
    transform: translate(-4.6px, -6.7px) scale(1.0028);
  }
  64% {
    transform: translate(-5.9px, -6.4px) scale(1.0025);
  }
  64.25% {
    transform: translate(-6.4px, -5.7px) scale(1.0022);
  }
  64.5% {
    transform: translate(-5.9px, -4.6px) scale(1.0019);
  }
  64.75% {
    transform: translate(-4.5px, -3.2px) scale(1.0017);
  }
  65.53% {
    transform: translate(1.8px, 1.3px) scale(1.0011);
  }
  65.75% {
    transform: translate(2.7px, 2.2px) scale(1.0009);
  }
  66% {
    transform: translate(2.8px, 2.8px) scale(1.0008);
  }
  66.25% {
    transform: translate(1.9px, 2.9px) scale(1.0006);
  }
  66.75% {
    transform: translate(-1.1px, 1.9px) scale(1.0004);
  }
  67% {
    transform: translate(-2.2px, 1.1px) scale(1.0003);
  }
  67.25% {
    transform: translate(-2.5px, 0.2px) scale(1.0003);
  }
  67.5% {
    transform: translate(-2.2px, -0.5px) scale(1.0002);
  }
  68% {
    transform: translate(-0.6px, -1px) scale(1.0001);
  }
  68.25% {
    transform: translate(0px, -0.9px) scale(1.0001);
  }
  68.75% {
    transform: translate(0.3px, -0.4px) scale(1);
  }
  69.75% {
    transform: translate(-0px, -0px) scale(1);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes s3-lit-p0 {
  0% {
    stroke-dashoffset: 1;
  }
  3% {
    stroke-dashoffset: 1;
  }
  4% {
    stroke-dashoffset: 0.9676;
  }
  4.5% {
    stroke-dashoffset: 0.9429;
  }
  4.75% {
    stroke-dashoffset: 0.9259;
  }
  5% {
    stroke-dashoffset: 0.9044;
  }
  5.25% {
    stroke-dashoffset: 0.8781;
  }
  6.75% {
    stroke-dashoffset: 0.7001;
  }
  8% {
    stroke-dashoffset: 0.5453;
  }
  8.25% {
    stroke-dashoffset: 0.5176;
  }
  8.5% {
    stroke-dashoffset: 0.4938;
  }
  8.75% {
    stroke-dashoffset: 0.4742;
  }
  9% {
    stroke-dashoffset: 0.4579;
  }
  9.5% {
    stroke-dashoffset: 0.4321;
  }
  10.25% {
    stroke-dashoffset: 0.4028;
  }
  11.25% {
    stroke-dashoffset: 0.3719;
  }
  13.75% {
    stroke-dashoffset: 0.3014;
  }
  14.5% {
    stroke-dashoffset: 0.2755;
  }
  15% {
    stroke-dashoffset: 0.2542;
  }
  15.5% {
    stroke-dashoffset: 0.2272;
  }
  16% {
    stroke-dashoffset: 0.1912;
  }
  16.25% {
    stroke-dashoffset: 0.1693;
  }
  17.25% {
    stroke-dashoffset: 0.0722;
  }
  17.5% {
    stroke-dashoffset: 0.05;
  }
  17.75% {
    stroke-dashoffset: 0.0304;
  }
  18.22% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s3-lit-p1 {
  0% {
    stroke-dashoffset: 1;
  }
  18.22% {
    stroke-dashoffset: 1;
  }
  19% {
    stroke-dashoffset: 0.9652;
  }
  19.75% {
    stroke-dashoffset: 0.9391;
  }
  22.5% {
    stroke-dashoffset: 0.8601;
  }
  23.25% {
    stroke-dashoffset: 0.8364;
  }
  24% {
    stroke-dashoffset: 0.8079;
  }
  24.56% {
    stroke-dashoffset: 0.78;
  }
  25% {
    stroke-dashoffset: 0.7514;
  }
  25.25% {
    stroke-dashoffset: 0.7305;
  }
  25.5% {
    stroke-dashoffset: 0.7064;
  }
  26.5% {
    stroke-dashoffset: 0.5977;
  }
  27% {
    stroke-dashoffset: 0.5498;
  }
  27.5% {
    stroke-dashoffset: 0.5079;
  }
  28.75% {
    stroke-dashoffset: 0.4102;
  }
  29.25% {
    stroke-dashoffset: 0.3671;
  }
  30% {
    stroke-dashoffset: 0.2938;
  }
  31% {
    stroke-dashoffset: 0.1872;
  }
  31.25% {
    stroke-dashoffset: 0.1633;
  }
  31.5% {
    stroke-dashoffset: 0.1435;
  }
  31.75% {
    stroke-dashoffset: 0.1271;
  }
  32.25% {
    stroke-dashoffset: 0.1018;
  }
  33% {
    stroke-dashoffset: 0.074;
  }
  34% {
    stroke-dashoffset: 0.0456;
  }
  35.87% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s3-lit-p2 {
  0% {
    stroke-dashoffset: 1;
  }
  35.87% {
    stroke-dashoffset: 1;
  }
  36.5% {
    stroke-dashoffset: 0.8787;
  }
  37% {
    stroke-dashoffset: 0.7742;
  }
  37.25% {
    stroke-dashoffset: 0.7179;
  }
  37.5% {
    stroke-dashoffset: 0.6578;
  }
  37.75% {
    stroke-dashoffset: 0.5929;
  }
  38% {
    stroke-dashoffset: 0.5219;
  }
  38.25% {
    stroke-dashoffset: 0.443;
  }
  38.5% {
    stroke-dashoffset: 0.3535;
  }
  38.75% {
    stroke-dashoffset: 0.2509;
  }
  39% {
    stroke-dashoffset: 0.1321;
  }
  39.25% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s3-lit-a0 {
  0% {
    stroke-dashoffset: 1;
  }
  39.25% {
    stroke-dashoffset: 0.9995;
  }
  39.75% {
    stroke-dashoffset: 0.957;
  }
  40.25% {
    stroke-dashoffset: 0.9226;
  }
  40.75% {
    stroke-dashoffset: 0.8964;
  }
  41.25% {
    stroke-dashoffset: 0.8752;
  }
  42.5% {
    stroke-dashoffset: 0.8335;
  }
  45.5% {
    stroke-dashoffset: 0.7474;
  }
  46.25% {
    stroke-dashoffset: 0.7212;
  }
  46.75% {
    stroke-dashoffset: 0.6999;
  }
  47.25% {
    stroke-dashoffset: 0.6733;
  }
  47.5% {
    stroke-dashoffset: 0.6568;
  }
  47.75% {
    stroke-dashoffset: 0.6374;
  }
  48.5% {
    stroke-dashoffset: 0.5672;
  }
  48.75% {
    stroke-dashoffset: 0.5467;
  }
  49% {
    stroke-dashoffset: 0.5293;
  }
  49.5% {
    stroke-dashoffset: 0.5013;
  }
  50% {
    stroke-dashoffset: 0.4791;
  }
  51% {
    stroke-dashoffset: 0.4438;
  }
  53.5% {
    stroke-dashoffset: 0.3699;
  }
  54.5% {
    stroke-dashoffset: 0.3366;
  }
  55.25% {
    stroke-dashoffset: 0.3066;
  }
  57% {
    stroke-dashoffset: 0.2241;
  }
  58% {
    stroke-dashoffset: 0.1875;
  }
  58.75% {
    stroke-dashoffset: 0.1661;
  }
  59.5% {
    stroke-dashoffset: 0.148;
  }
  60.5% {
    stroke-dashoffset: 0.1273;
  }
  61.75% {
    stroke-dashoffset: 0.1051;
  }
  65% {
    stroke-dashoffset: 0.0584;
  }
  70% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s3-g-safe {
  0% {
    stroke-dashoffset: 1;
  }
  3% {
    stroke-dashoffset: 1;
  }
  3.25% {
    stroke-dashoffset: 0.9631;
  }
  3.5% {
    stroke-dashoffset: 0.9473;
  }
  4.75% {
    stroke-dashoffset: 0.8819;
  }
  5.75% {
    stroke-dashoffset: 0.8155;
  }
  6.25% {
    stroke-dashoffset: 0.7875;
  }
  7.25% {
    stroke-dashoffset: 0.7391;
  }
  8% {
    stroke-dashoffset: 0.7076;
  }
  8.5% {
    stroke-dashoffset: 0.6914;
  }
  9% {
    stroke-dashoffset: 0.6807;
  }
  9.25% {
    stroke-dashoffset: 0.6377;
  }
  9.5% {
    stroke-dashoffset: 0.576;
  }
  9.75% {
    stroke-dashoffset: 0.5278;
  }
  10% {
    stroke-dashoffset: 0.488;
  }
  10.25% {
    stroke-dashoffset: 0.454;
  }
  10.75% {
    stroke-dashoffset: 0.397;
  }
  11.25% {
    stroke-dashoffset: 0.3493;
  }
  11.75% {
    stroke-dashoffset: 0.3073;
  }
  14% {
    stroke-dashoffset: 0.1391;
  }
  14.83% {
    stroke-dashoffset: 0.0681;
  }
  16% {
    stroke-dashoffset: 0.061;
  }
  17.75% {
    stroke-dashoffset: 0.045;
  }
  18% {
    stroke-dashoffset: 0.0394;
  }
  18.22% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s3-g-mild {
  0% {
    stroke-dashoffset: 1;
  }
  18.22% {
    stroke-dashoffset: 1;
  }
  18.5% {
    stroke-dashoffset: 0.9588;
  }
  19% {
    stroke-dashoffset: 0.8985;
  }
  19.25% {
    stroke-dashoffset: 0.873;
  }
  19.75% {
    stroke-dashoffset: 0.8281;
  }
  20.75% {
    stroke-dashoffset: 0.7527;
  }
  23.25% {
    stroke-dashoffset: 0.5844;
  }
  24% {
    stroke-dashoffset: 0.524;
  }
  24.56% {
    stroke-dashoffset: 0.4671;
  }
  32% {
    stroke-dashoffset: 0.4242;
  }
  32.25% {
    stroke-dashoffset: 0.3968;
  }
  32.5% {
    stroke-dashoffset: 0.3526;
  }
  32.75% {
    stroke-dashoffset: 0.314;
  }
  33% {
    stroke-dashoffset: 0.2795;
  }
  33.5% {
    stroke-dashoffset: 0.2193;
  }
  34% {
    stroke-dashoffset: 0.167;
  }
  34.5% {
    stroke-dashoffset: 0.1195;
  }
  35.87% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s3-g-moderate {
  0% {
    stroke-dashoffset: 1;
  }
  35.87% {
    stroke-dashoffset: 1;
  }
  36.75% {
    stroke-dashoffset: 0.9229;
  }
  37.25% {
    stroke-dashoffset: 0.8754;
  }
  37.75% {
    stroke-dashoffset: 0.8224;
  }
  38.01% {
    stroke-dashoffset: 0.792;
  }
  41% {
    stroke-dashoffset: 0.7844;
  }
  41.25% {
    stroke-dashoffset: 0.7658;
  }
  42% {
    stroke-dashoffset: 0.6985;
  }
  42.5% {
    stroke-dashoffset: 0.6599;
  }
  43.25% {
    stroke-dashoffset: 0.6071;
  }
  45% {
    stroke-dashoffset: 0.4906;
  }
  45.75% {
    stroke-dashoffset: 0.4366;
  }
  46.5% {
    stroke-dashoffset: 0.3736;
  }
  46.9% {
    stroke-dashoffset: 0.3337;
  }
  49% {
    stroke-dashoffset: 0.3284;
  }
  49.25% {
    stroke-dashoffset: 0.316;
  }
  49.5% {
    stroke-dashoffset: 0.2903;
  }
  50% {
    stroke-dashoffset: 0.2473;
  }
  50.75% {
    stroke-dashoffset: 0.1953;
  }
  51.5% {
    stroke-dashoffset: 0.1512;
  }
  53.5% {
    stroke-dashoffset: 0.044;
  }
  54.26% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes s3-g-high {
  0% {
    stroke-dashoffset: 1;
  }
  54.26% {
    stroke-dashoffset: 1;
  }
  55.09% {
    stroke-dashoffset: 0.9627;
  }
  56.25% {
    stroke-dashoffset: 0.9617;
  }
  56.5% {
    stroke-dashoffset: 0.9585;
  }
  57.25% {
    stroke-dashoffset: 0.9189;
  }
  58% {
    stroke-dashoffset: 0.8878;
  }
  59% {
    stroke-dashoffset: 0.8555;
  }
  60% {
    stroke-dashoffset: 0.8298;
  }
  62.5% {
    stroke-dashoffset: 0.7801;
  }
  65.53% {
    stroke-dashoffset: 0.7343;
  }
  100% {
    stroke-dashoffset: 0.7335;
  }
}

@keyframes s3-g-severe {
  0% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 1;
  }
}

@keyframes s3-bead {
  0% {
    transform: rotate(0deg);
  }
  3% {
    transform: rotate(0deg);
  }
  3.25% {
    transform: rotate(1.95deg);
  }
  4.75% {
    transform: rotate(6.26deg);
  }
  6.25% {
    transform: rotate(11.26deg);
  }
  8% {
    transform: rotate(15.5deg);
  }
  9% {
    transform: rotate(16.92deg);
  }
  9.25% {
    transform: rotate(19.2deg);
  }
  9.5% {
    transform: rotate(22.47deg);
  }
  9.75% {
    transform: rotate(25.03deg);
  }
  10.25% {
    transform: rotate(28.94deg);
  }
  11% {
    transform: rotate(33.27deg);
  }
  11.75% {
    transform: rotate(36.71deg);
  }
  14% {
    transform: rotate(45.63deg);
  }
  14.83% {
    transform: rotate(49.39deg);
  }
  18% {
    transform: rotate(50.91deg);
  }
  18.22% {
    transform: rotate(56deg);
  }
  18.75% {
    transform: rotate(59.88deg);
  }
  19.25% {
    transform: rotate(62.73deg);
  }
  19.75% {
    transform: rotate(65.11deg);
  }
  20.5% {
    transform: rotate(68.17deg);
  }
  23.5% {
    transform: rotate(79.03deg);
  }
  24% {
    transform: rotate(81.23deg);
  }
  24.56% {
    transform: rotate(84.24deg);
  }
  32% {
    transform: rotate(86.52deg);
  }
  32.25% {
    transform: rotate(87.97deg);
  }
  32.5% {
    transform: rotate(90.31deg);
  }
  33% {
    transform: rotate(94.19deg);
  }
  33.5% {
    transform: rotate(97.37deg);
  }
  34.5% {
    transform: rotate(102.67deg);
  }
  35.87% {
    transform: rotate(109deg);
  }
  36% {
    transform: rotate(112.58deg);
  }
  37.25% {
    transform: rotate(118.61deg);
  }
  38.01% {
    transform: rotate(123.03deg);
  }
  41% {
    transform: rotate(123.42deg);
  }
  42.5% {
    transform: rotate(130.03deg);
  }
  45.75% {
    transform: rotate(141.86deg);
  }
  46.5% {
    transform: rotate(145.2deg);
  }
  46.9% {
    transform: rotate(147.31deg);
  }
  49% {
    transform: rotate(147.59deg);
  }
  49.25% {
    transform: rotate(148.25deg);
  }
  50% {
    transform: rotate(151.89deg);
  }
  50.75% {
    transform: rotate(154.65deg);
  }
  54.25% {
    transform: rotate(164.97deg);
  }
  54.26% {
    transform: rotate(168deg);
  }
  55.09% {
    transform: rotate(169.98deg);
  }
  56.5% {
    transform: rotate(170.2deg);
  }
  57.25% {
    transform: rotate(172.3deg);
  }
  58% {
    transform: rotate(173.95deg);
  }
  59.75% {
    transform: rotate(176.71deg);
  }
  62.25% {
    transform: rotate(179.42deg);
  }
  65.53% {
    transform: rotate(182.08deg);
  }
  100% {
    transform: rotate(182.13deg);
  }
}

@keyframes s3-num {
  0% {
    --s3-n: 0;
  }
  3% {
    --s3-n: 0;
  }
  3.25% {
    --s3-n: 4;
  }
  4.5% {
    --s3-n: 10;
  }
  6.5% {
    --s3-n: 23;
  }
  8.5% {
    --s3-n: 31;
  }
  9% {
    --s3-n: 32;
  }
  9.25% {
    --s3-n: 36;
  }
  9.75% {
    --s3-n: 47;
  }
  10.25% {
    --s3-n: 55;
  }
  10.5% {
    --s3-n: 58;
  }
  11% {
    --s3-n: 63;
  }
  13% {
    --s3-n: 79;
  }
  13.25% {
    --s3-n: 80;
  }
  14.83% {
    --s3-n: 93;
  }
  16.5% {
    --s3-n: 94;
  }
  16.75% {
    --s3-n: 95;
  }
  17.75% {
    --s3-n: 95;
  }
  18% {
    --s3-n: 96;
  }
  18.5% {
    --s3-n: 104;
  }
  19.25% {
    --s3-n: 113;
  }
  20.75% {
    --s3-n: 125;
  }
  21% {
    --s3-n: 126;
  }
  21.5% {
    --s3-n: 130;
  }
  22.5% {
    --s3-n: 136;
  }
  23.25% {
    --s3-n: 142;
  }
  23.5% {
    --s3-n: 143;
  }
  24.5% {
    --s3-n: 153;
  }
  25% {
    --s3-n: 153;
  }
  25.25% {
    --s3-n: 154;
  }
  26.5% {
    --s3-n: 154;
  }
  26.75% {
    --s3-n: 155;
  }
  28.25% {
    --s3-n: 155;
  }
  28.5% {
    --s3-n: 156;
  }
  30% {
    --s3-n: 156;
  }
  30.25% {
    --s3-n: 157;
  }
  31.75% {
    --s3-n: 157;
  }
  32% {
    --s3-n: 158;
  }
  32.25% {
    --s3-n: 160;
  }
  32.75% {
    --s3-n: 169;
  }
  33.75% {
    --s3-n: 181;
  }
  35% {
    --s3-n: 193;
  }
  36.5% {
    --s3-n: 205;
  }
  36.75% {
    --s3-n: 208;
  }
  37.25% {
    --s3-n: 212;
  }
  38% {
    --s3-n: 221;
  }
  40.5% {
    --s3-n: 221;
  }
  41.25% {
    --s3-n: 223;
  }
  41.5% {
    --s3-n: 226;
  }
  43% {
    --s3-n: 238;
  }
  45.5% {
    --s3-n: 254;
  }
  46.25% {
    --s3-n: 260;
  }
  46.9% {
    --s3-n: 267;
  }
  49% {
    --s3-n: 267;
  }
  49.25% {
    --s3-n: 268;
  }
  49.5% {
    --s3-n: 271;
  }
  50.5% {
    --s3-n: 279;
  }
  52% {
    --s3-n: 288;
  }
  54% {
    --s3-n: 298;
  }
  55.09% {
    --s3-n: 306;
  }
  56.5% {
    --s3-n: 306;
  }
  57.5% {
    --s3-n: 314;
  }
  58% {
    --s3-n: 317;
  }
  58.5% {
    --s3-n: 319;
  }
  58.75% {
    --s3-n: 321;
  }
  60% {
    --s3-n: 326;
  }
  60.25% {
    --s3-n: 326;
  }
  61.25% {
    --s3-n: 330;
  }
  61.5% {
    --s3-n: 330;
  }
  62.75% {
    --s3-n: 334;
  }
  63.5% {
    --s3-n: 335;
  }
  64% {
    --s3-n: 337;
  }
  65.5% {
    --s3-n: 340;
  }
  100% {
    --s3-n: 340;
  }
}

@keyframes s3-warm {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 0;
  }
  6.25% {
    opacity: 0.063;
  }
  9% {
    opacity: 0.094;
  }
  10.25% {
    opacity: 0.161;
  }
  12% {
    opacity: 0.21;
  }
  14.83% {
    opacity: 0.274;
  }
  18% {
    opacity: 0.283;
  }
  19.5% {
    opacity: 0.338;
  }
  24.56% {
    opacity: 0.451;
  }
  32% {
    opacity: 0.463;
  }
  33.75% {
    opacity: 0.532;
  }
  38.01% {
    opacity: 0.649;
  }
  41% {
    opacity: 0.652;
  }
  46.9% {
    opacity: 0.784;
  }
  49% {
    opacity: 0.786;
  }
  55.09% {
    opacity: 0.899;
  }
  56.5% {
    opacity: 0.901;
  }
  60.25% {
    opacity: 0.96;
  }
  65.53% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-beadc {
  0% {
    stroke: #4f7c84;
  }
  17.92% {
    stroke: #4f7c84;
  }
  18.52% {
    stroke: #9c9430;
  }
  35.57% {
    stroke: #9c9430;
  }
  36.17% {
    stroke: #c58418;
  }
  53.96% {
    stroke: #c58418;
  }
  54.56% {
    stroke: #c5562a;
  }
  100% {
    stroke: #c5562a;
  }
}

@keyframes s3-chip-safe {
  0% {
    opacity: 1;
    transform: none;
  }
  17.82% {
    opacity: 1;
    transform: none;
  }
  18.22% {
    opacity: 0;
    transform: translateY(35%);
  }
  18.62% {
    opacity: 0;
    transform: translateY(35%);
  }
  35.47% {
    opacity: 0;
    transform: translateY(35%);
  }
  35.87% {
    opacity: 0;
    transform: translateY(35%);
  }
  36.27% {
    opacity: 0;
    transform: translateY(35%);
  }
  53.86% {
    opacity: 0;
    transform: translateY(35%);
  }
  54.26% {
    opacity: 0;
    transform: translateY(35%);
  }
  54.66% {
    opacity: 0;
    transform: translateY(35%);
  }
  100% {
    opacity: 0;
    transform: translateY(35%);
  }
}

@keyframes s3-on-safe {
  0% {
    opacity: 1;
  }
  17.82% {
    opacity: 1;
  }
  18.62% {
    opacity: 0;
  }
  35.47% {
    opacity: 0;
  }
  36.27% {
    opacity: 0;
  }
  53.86% {
    opacity: 0;
  }
  54.66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-chip-mild {
  0% {
    opacity: 0;
    transform: translateY(-35%);
  }
  17.82% {
    opacity: 0;
    transform: translateY(-35%);
  }
  18.22% {
    opacity: 0;
    transform: translateY(-35%);
  }
  18.62% {
    opacity: 1;
    transform: none;
  }
  35.47% {
    opacity: 1;
    transform: none;
  }
  35.87% {
    opacity: 0;
    transform: translateY(35%);
  }
  36.27% {
    opacity: 0;
    transform: translateY(35%);
  }
  53.86% {
    opacity: 0;
    transform: translateY(35%);
  }
  54.26% {
    opacity: 0;
    transform: translateY(35%);
  }
  54.66% {
    opacity: 0;
    transform: translateY(35%);
  }
  100% {
    opacity: 0;
    transform: translateY(35%);
  }
}

@keyframes s3-on-mild {
  0% {
    opacity: 0;
  }
  17.82% {
    opacity: 0;
  }
  18.62% {
    opacity: 1;
  }
  35.47% {
    opacity: 1;
  }
  36.27% {
    opacity: 0;
  }
  53.86% {
    opacity: 0;
  }
  54.66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-chip-moderate {
  0% {
    opacity: 0;
    transform: translateY(-35%);
  }
  17.82% {
    opacity: 0;
    transform: translateY(-35%);
  }
  18.22% {
    opacity: 0;
    transform: translateY(-35%);
  }
  18.62% {
    opacity: 0;
    transform: translateY(-35%);
  }
  35.47% {
    opacity: 0;
    transform: translateY(-35%);
  }
  35.87% {
    opacity: 0;
    transform: translateY(-35%);
  }
  36.27% {
    opacity: 1;
    transform: none;
  }
  53.86% {
    opacity: 1;
    transform: none;
  }
  54.26% {
    opacity: 0;
    transform: translateY(35%);
  }
  54.66% {
    opacity: 0;
    transform: translateY(35%);
  }
  100% {
    opacity: 0;
    transform: translateY(35%);
  }
}

@keyframes s3-on-moderate {
  0% {
    opacity: 0;
  }
  17.82% {
    opacity: 0;
  }
  18.62% {
    opacity: 0;
  }
  35.47% {
    opacity: 0;
  }
  36.27% {
    opacity: 1;
  }
  53.86% {
    opacity: 1;
  }
  54.66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-chip-high {
  0% {
    opacity: 0;
    transform: translateY(-35%);
  }
  17.82% {
    opacity: 0;
    transform: translateY(-35%);
  }
  18.22% {
    opacity: 0;
    transform: translateY(-35%);
  }
  18.62% {
    opacity: 0;
    transform: translateY(-35%);
  }
  35.47% {
    opacity: 0;
    transform: translateY(-35%);
  }
  35.87% {
    opacity: 0;
    transform: translateY(-35%);
  }
  36.27% {
    opacity: 0;
    transform: translateY(-35%);
  }
  53.86% {
    opacity: 0;
    transform: translateY(-35%);
  }
  54.26% {
    opacity: 0;
    transform: translateY(-35%);
  }
  54.66% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes s3-on-high {
  0% {
    opacity: 0;
  }
  17.82% {
    opacity: 0;
  }
  18.62% {
    opacity: 0;
  }
  35.47% {
    opacity: 0;
  }
  36.27% {
    opacity: 0;
  }
  53.86% {
    opacity: 0;
  }
  54.66% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-next {
  0% {
    opacity: 0;
  }
  55.16% {
    opacity: 0;
  }
  56.36% {
    opacity: 0.55;
  }
  100% {
    opacity: 0.55;
  }
}

@keyframes s3-rate-safe {
  0% {
    opacity: 1;
  }
  9.5% {
    opacity: 1;
  }
  9.75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-rate-mild {
  0% {
    opacity: 0;
  }
  9.5% {
    opacity: 0;
  }
  9.75% {
    opacity: 1;
  }
  13.75% {
    opacity: 1;
  }
  14% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-rate-moderate {
  0% {
    opacity: 0;
  }
  13.75% {
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  21.75% {
    opacity: 1;
  }
  22% {
    opacity: 0;
  }
  22.25% {
    opacity: 1;
  }
  22.5% {
    opacity: 1;
  }
  22.75% {
    opacity: 0;
  }
  26.75% {
    opacity: 0;
  }
  27% {
    opacity: 1;
  }
  33.5% {
    opacity: 1;
  }
  33.75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-rate-high {
  0% {
    opacity: 0;
  }
  21.75% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  22.25% {
    opacity: 0;
  }
  22.5% {
    opacity: 0;
  }
  22.75% {
    opacity: 1;
  }
  26.75% {
    opacity: 1;
  }
  27% {
    opacity: 0;
  }
  33.5% {
    opacity: 0;
  }
  33.75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-pic {
  0% {
    opacity: 1;
  }
  10.75% {
    opacity: 1;
  }
  11.75% {
    opacity: 0.69;
  }
  12% {
    opacity: 0.57;
  }
  14% {
    opacity: 0;
  }
  60.75% {
    opacity: 0;
  }
  62.5% {
    opacity: 0.54;
  }
  63.25% {
    opacity: 0.62;
  }
  64% {
    opacity: 0.62;
  }
  64.25% {
    opacity: 0.54;
  }
  66% {
    opacity: 0.57;
  }
  67.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-crete {
  0% {
    opacity: 0;
  }
  11% {
    opacity: 0;
  }
  12.5% {
    opacity: 0.46;
  }
  12.75% {
    opacity: 0.5;
  }
  14.5% {
    opacity: 0;
  }
  59.75% {
    opacity: 0;
  }
  63% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-tete {
  0% {
    opacity: 0;
  }
  7.5% {
    opacity: 0;
  }
  10.75% {
    opacity: 1;
  }
  18.22% {
    opacity: 1;
  }
  18.25% {
    opacity: 0.92;
  }
  21.25% {
    opacity: 0;
  }
  44.25% {
    opacity: 0;
  }
  46.75% {
    opacity: 0.77;
  }
  46.9% {
    opacity: 0.85;
  }
  47.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-col {
  0% {
    opacity: 1;
  }
  8.25% {
    opacity: 1;
  }
  10% {
    opacity: 0.46;
  }
  11.25% {
    opacity: 0.46;
  }
  11.5% {
    opacity: 0.38;
  }
  12% {
    opacity: 0.36;
  }
  13.25% {
    opacity: 0.36;
  }
  14.5% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  63.25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-wood {
  0% {
    opacity: 0;
  }
  46% {
    opacity: 0;
  }
  46.75% {
    opacity: 0.23;
  }
  47% {
    opacity: 0.36;
  }
  49.25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-wood-q {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-l-ostarre {
  0% {
    opacity: 0;
  }
  22.25% {
    opacity: 0;
  }
  24.5% {
    opacity: 0.69;
  }
  24.56% {
    opacity: 0.77;
  }
  25.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-ostarre-q {
  0% {
    opacity: 0;
  }
  22.25% {
    opacity: 0;
  }
  23.25% {
    opacity: 0.31;
  }
  23.5% {
    opacity: 0.29;
  }
  24.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-l-esclots {
  0% {
    opacity: 0;
  }
  18.5% {
    opacity: 0;
  }
  21% {
    opacity: 0.71;
  }
  21.25% {
    opacity: 0.85;
  }
  21.75% {
    opacity: 1;
  }
  24.56% {
    opacity: 1;
  }
  27.75% {
    opacity: 0;
  }
  59% {
    opacity: 0;
  }
  60.25% {
    opacity: 0.38;
  }
  61.75% {
    opacity: 0.38;
  }
  62.25% {
    opacity: 0.54;
  }
  63.5% {
    opacity: 0.54;
  }
  63.75% {
    opacity: 0.62;
  }
  64.5% {
    opacity: 0.62;
  }
  65% {
    opacity: 0.77;
  }
  67% {
    opacity: 0.79;
  }
  67.75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-esclots-q {
  0% {
    opacity: 0;
  }
  59% {
    opacity: 0;
  }
  60.25% {
    opacity: 0.38;
  }
  61.75% {
    opacity: 0.38;
  }
  62.25% {
    opacity: 0.54;
  }
  63.5% {
    opacity: 0.54;
  }
  63.75% {
    opacity: 0.62;
  }
  64.5% {
    opacity: 0.62;
  }
  65% {
    opacity: 0.77;
  }
  67% {
    opacity: 0.79;
  }
  67.75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-menil {
  0% {
    opacity: 0;
  }
  38.25% {
    opacity: 0;
  }
  41% {
    opacity: 0.79;
  }
  41.25% {
    opacity: 0.92;
  }
  41.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-menil-q {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-l-sorbe-q {
  0% {
    opacity: 1;
  }
  1.75% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  14.25% {
    opacity: 0;
  }
  14.75% {
    opacity: 0.15;
  }
  14.83% {
    opacity: 0.23;
  }
  15% {
    opacity: 0.29;
  }
  17.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-golfe {
  0% {
    opacity: 0;
  }
  48.25% {
    opacity: 0;
  }
  49.75% {
    opacity: 0.43;
  }
  51.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes s3-l-golfe-q {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes s3-shrink-d {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  to {
    transform: translate(741.19px, 286.22px) scale(0.7037);
  }
}

@keyframes s3-shrink-q {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  to {
    transform: translate(619.42px, -180.84px) scale(0.8762);
  }
}

@keyframes s3-shrink-p {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  to {
    transform: translate(-590.26px, 108.41px) scale(1.3881);
  }
}

@keyframes s3-shrink-t {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  to {
    transform: translate(213.69px, -194.78px) scale(1.1223);
  }
}

@keyframes s3-pull-p {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  to {
    transform: translate(calc(0.149066 * var(--vh)), calc(0.428947 * var(--vh))) scale(0.8578);
  }
}

@keyframes s3-pull-t {
  from {
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  to {
    transform: translate(calc(-0.10931 * var(--vh)), calc(0.555919 * var(--vh))) scale(1.1215);
  }
}
/* gen:end keyframes */