/* ==========================================================================
   Analog Artifact Web Works - styles
   Look: vintage cartoon + analog tech (old TV, color bars, dials, meters)
   Rules: text in rem, breakpoints in em, px only for borders/shadows/details.
   Never set html font-size in px. No color/background fades on buttons.
   ========================================================================== */

/* Contents, in page order (search for a title to jump to it). Each section keeps its phone
   and motion rules with it. When two rules set the same thing, the later one wins.
     Fonts and color tokens
     Page-wide styles
     Header
     Hero: headline, buttons and badges
     Hero: spiderweb and spider
     Hero: the TV room (TV, ghost, lamp, rug)
     Services
     Projects
     Under the hood
     Accessibility
     How I build
     Process
     About
     FAQ
     Fan Mail
     Contact
     Footer
     The Finish Line
     Motion settings: pause button and reduced motion */

/* ==========================================================================
   Fonts and color tokens
   ========================================================================== */

/* Self-hosted fonts (Latin subset from Google Fonts, SIL Open Font License) */
@font-face {
  font-family: 'New Rocker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/new-rocker-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/vt323-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pirata-one-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/alfa-slab-one-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/yellowtail-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-sans-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/dm-sans-normal-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Shrikhand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/shrikhand-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-mono-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/space-mono-normal-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --paper: #f4ebd9; --paper-dark: #e8dcc2; --ink: #221f1b; --ink-soft: #3a342e; --muted: #5a5048;
  --ghost: #fff8ec; --bar-gray: #d8d1c3; --bar-yellow: #e8c547; --bar-cyan: #58b6b1; --bar-green: #82a64f;
  --bar-magenta: #b65a93; --bar-red: #c9492f; --bar-blue: #34589a; --red-text: #a63a24; --blue-text: #14595a;
  --magenta-text: #a63a24; --yellow-on-ink: #f4cf5c; --cyan-on-ink: #c2efeb; --walnut: #7a4a2e;
  --walnut-light: #9c6644; --font-display: 'Shrikhand', 'Cooper Black', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --radius: 1rem;
  --shadow: 5px 5px 0 var(--ink); --wrap: 72rem; --teal: #6cc4bf; --teal-dark: #14595a; --teal-deep: #0e4546;
  --pink: #f27aa6; --pink-text: #a63a24; --magenta: #a63a24; --white-warm: #fff7f0; --oatmeal: #efe6d3;
  --mint-faded: #dcebe6; --gold: #ebbd4e;
  --bars: linear-gradient(90deg, #d8d1c3 0 14.2857%, #e8c547 0 28.5714%, #58b6b1 0 42.8571%, #82a64f 0 57.1428%, #b65a93 0 71.4285%, #c9492f 0 85.7142%, #34589a 0);
}
/* Base: warm newsprint paper and ink */ /* 6.6:1 on paper */ /* Color bars (decorative fills) */ /* Text-safe accents */ /* Palette roles: teal = primary, magenta = accent, yellow = small highlights only,
     color bars = TV illustration only. Old token names point at the palette. */ /* brick red accent; cream text on it 6.1:1 */ /* links: dark teal, 7.6:1 on warm white */ /* yellow on dark teal 5.3:1 */ /* light teal links on dark teal 6.5:1 */ /* Cabinet wood */ /* hero; ink text on it 8:1 */ /* dark sections; cream text on it 7.6:1 */ /* hero highlight stripe; ink text on it 6.3:1 */ /* one brick red for buttons, labels and accents */ /* (accent token) brick red; cream text on it 6.1:1 */ /* ink text on it 9.3:1 */
/* ---------- Color theme: bright teal + dark teal, pink and yellow accents ---------- */
/* Subtle retro section backgrounds: oatmeal and faded mint */
/* ---------- Harvest gold accent ----------
   Gold = fills, always with a black outline. Brick red = text accents (headings, "Why it matters",
   quote marks, list markers), because gold fails contrast as text on light backgrounds. */

/* ==========================================================================
   Page-wide styles
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  -webkit-text-size-adjust: 100%; overflow-wrap: break-word; background: var(--white-warm);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.75rem; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; }
h3, h4 { font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: var(--blue-text); text-underline-offset: 0.18em; }
a:hover, a:active { text-decoration-thickness: 2px; }
/* Interaction states, site-wide. Visited links keep their normal color on purpose (a one-page site with a few outside links).
   Taps: Safari's grey tap box is off; every control shows its own hover color while pressed instead. */
a, button, summary, input, select, textarea, label { -webkit-tap-highlight-color: transparent; }
:disabled { cursor: not-allowed; opacity: 0.6; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: pre; border: 0;   /* pre, not nowrap: keeps the leading space, so copied link text doesn't run together */
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; border-radius: 0.5rem;
}
.skip-link:focus { top: 1rem; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 0.5rem;
}
/* ---------- Buttons (instant color swaps, transform/shadow animate) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0.7rem 1.4rem;
  font: 700 1rem/1.2 var(--font-body);
  text-decoration: none; border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-ghost:hover { background: var(--bar-yellow); }
/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section h2 { font-size: clamp(2rem, 5vw, 3rem); }
.section-lede { max-width: 42rem; color: var(--muted); font-size: 1.1rem; }
.section-alt { border-block: 3px solid var(--ink); background: #fcf0c4; }
/* Scroll-in reveal (uses translate, not transform, so tilted or skewed elements keep their own transform).
   script.js adds .rv to a block only after you start scrolling, and only while the block is still just
   below the screen, so nothing is hidden when the page first loads or if the script doesn't run.
   Skipped with reduced motion and data saver. Classes are removed after the fade so hover effects work normally. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .rv { opacity: 0; translate: 0 1.25rem; transition: opacity .55s ease-out, translate .55s ease-out; transition-delay: var(--rv-delay, 0s); }
  .reveal-on .rv.rv-in { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 37.5em) {
  .reveal-on .rv { translate: 0 .75rem; transition-duration: .4s; }   /* phones: shorter and quicker */
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.eyebrow { color: var(--pink-text); }
/* ---------- Readable labels: bold tags ---------- */
/* Section labels: magenta tags. Text sits on the color, so contrast is 7:1 on every background. */
.eyebrow {
  display: inline-block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3;
  padding: 0.3rem 0.65rem; margin-bottom: 0.9rem; border-radius: 0.3rem;
  background: var(--magenta); color: var(--white-warm);          /* 7.0:1 */
}
.section-alt .eyebrow {
  display: inline-block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3;
  padding: 0.3rem 0.65rem; margin-bottom: 0.9rem; border-radius: 0.3rem;
  background: var(--magenta); color: var(--white-warm);          /* 7.0:1 */
}
/* Labels use the body font (bold caps); the monospace font stays only on numbers and the TV screen */
.eyebrow {
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.06em;
}
/* Softer yellows: a pale butter section background so cards stand out, a lighter site check box */
.btn-ghost:hover, .btn-ghost:active { background: #fbe39b; }
/* Under-the-hood cards: icon beside the label, brick red headings */
.hood-icon {
  flex: none; margin-top: 0; margin: 0; padding: 0.5rem; box-sizing: border-box; background: #fbe39b;
  border: 3px solid var(--ink); border-radius: 50%; overflow: visible; width: 4.25rem; height: 4.25rem;
}
/* Icons: same-size round badge, centered on the teal label */
/* section label tags larger */
.eyebrow { font-size: 1rem; padding: 0.4rem 0.8rem; }
.section-alt .eyebrow { font-size: 1rem; padding: 0.4rem 0.8rem; }
.eyebrow {
  background: var(--gold); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.section-alt .eyebrow {
  background: var(--gold); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
/* "Old-school craft." in tattoo blackletter, inked by hand: worn letterpress speckle and a gold offset shadow */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   Header
   ========================================================================== */

/* ---------- Header ---------- */
/* the cream shadow above the header fills the 1-2px sliver of page that can peek through above it while scrolling on
   high-density phone screens (the browser rounds the sticky header's position to a fraction of a pixel) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 0; box-shadow: 0 -0.5rem 0 var(--white-warm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem; }   /* 80px: room for the stacked business name */
.brand { min-width: 0; min-height: 2.75rem; display: flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }   /* 44px tall: the WCAG AAA tap size */
.brand-tv { width: 2.6rem; height: auto; flex: none; }
.brand-name { font-family: var(--font-display); font-size: 1.65rem; line-height: 0.95; }
.brand-l2 { display: block; }   /* "Analog" over "Artifact": stacking lets the name be bigger without crowding the menu or the phone buttons */
/* "WEB WORKS" on its own line under the name, smaller and spaced out, so a longer business name still fits the header;
   never under 0.6rem, even when the name shrinks on small phones */
.brand-sub { display: block; margin-top: 0.35em; white-space: nowrap; font: 800 max(0.5em, 0.6rem)/1 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase; }
.site-nav ul { display: flex; align-items: center; gap: 0.1rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-block; padding: 0.55rem 0.45rem; border-radius: 999px;   /* snug enough that the full menu, the logo and the Pause button share one row */
  color: var(--ink); font-size: 1.03rem; font-weight: 600; text-decoration: none;   /* a touch smaller than body text, so the full menu fits within the page width */
}
/* wide screens: no room for "Home" in the menu (the logo already links home), so it's hidden from view but still in
   the menu for keyboard and screen reader users; when it gets keyboard focus it shows as a tab just under the menu */
.nav-home { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 71.01em) {
  .nav-home:focus-within { width: auto; height: auto; overflow: visible; clip: auto; top: calc(100% + 0.9rem); }
  .nav-home:focus-within a { background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
}
.site-nav a:hover, .site-nav a[aria-current] { background: var(--paper-dark); }   /* the section you are reading shows in the menu, using the hover look */
.site-nav .nav-cta { background: var(--ink); color: var(--paper); margin-left: 0.4rem; }
.site-nav .nav-cta:hover { background: var(--red-text); }
/* "Under the Hood" shortens to "Under Hood" on narrower desktop windows, just before the Menu button takes over;
   screen readers still hear "the", and the phone menu always shows the full name */
@media (min-width: 71.01em) and (max-width: 73em) { .nav-the { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.nav-toggle {
  display: none; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.4rem 0.9rem;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px;
  font: 700 0.95rem var(--font-body); cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 1.1rem; height: 3px; background: var(--ink); border-radius: 2px; position: relative;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
/* the round pause/play button in the header, at the right end of the menu on wide screens and just left of the Menu
   button on phones. "PLAY/PAUSE" curves over the top of the circle and "ANIMATIONS" under it, so nobody has to guess
   whether it stops audio, video or one part of the page. The whole 4.5rem square is the tap target, and it's sized
   in rem so it grows with the browser's text size. The header is 4.5rem tall to fit it. The disc turns gold while paused (ink on gold 9.3:1). */
.motion-mini { display: block; flex: none; padding: 0; background: none; border: 0; color: var(--ink); cursor: pointer; }
.motion-mini svg { display: block; width: 4.5rem; height: 4.5rem; overflow: visible; fill: var(--ink); }
.motion-mini .mm-disc { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.motion-mini:hover .mm-disc, .motion-mini:active .mm-disc { fill: #fbe39b; }
.motion-mini.is-paused .mm-disc { fill: var(--gold); }
.motion-mini text { font: 800 10px var(--font-body); letter-spacing: 0.08em; }   /* the same spacing in both words, so the letters sit evenly around the ring in every browser */
.motion-mini .mm-top { font-size: 9px; }   /* PLAY/PAUSE sits on the tighter inner curve, which makes it look bigger than ANIMATIONS at the same size */
/* keyboard focus: a ring just outside the disc, inside the lettering, so it stays within the header */
.motion-mini .mm-focus { fill: none; stroke: var(--ink); stroke-width: 2.5; visibility: hidden; }
.motion-mini:focus-visible { outline: none; }
.motion-mini:focus-visible .mm-focus { visibility: visible; }
.site-nav { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .motion-mini { display: none; } }   /* nothing moves, so there's nothing to pause */
@media (max-width: 71em) {
  .nav-home { position: static; width: auto; height: auto; overflow: visible; clip: auto; }   /* in the dropdown menu, a plain "Home" link at the top */
  .nav-toggle { display: inline-flex; order: 1; }
  .header-inner { gap: 0.5rem; }
  .motion-mini { margin-left: auto; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 3px solid var(--ink);
    padding: 0.5rem 1rem 1rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .site-nav a { display: block; padding: 0.8rem 1rem; }
  .site-nav .nav-cta { margin: 0.4rem 0 0; text-align: center; }
  .site-nav li + li:not(:has(.nav-cta)) { border-top: 1px solid rgba(34, 31, 27, 0.14); }   /* thin dividers so each row reads as its own button */
  .site-nav ul { gap: 0; }
  .site-nav a:not(.nav-cta) { border-radius: 0.35rem; }   /* rows, not pills, between the dividers */
  .site-nav a { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }   /* iPhone: no lifted link preview or text selection on a slow tap; these links only jump down the page */
  .site-nav a:not(.nav-cta):hover, .site-nav a:not(.nav-cta):active, .site-nav a[aria-current]:not(.nav-cta) { background: var(--gold); }   /* yellow on hover or tap; ink text on it 9.3:1 (AAA) */
}
.site-header, .site-nav { background: var(--white-warm); }
/* Phones: hide the word "Menu" (still read by screen readers), and size the stacked name to the screen (about 26px
   on most phones), so the name, the Pause button and the Menu button always share one row */
@media (max-width: 30em) {
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-toggle { padding: 0.4rem 0.7rem; }
  .brand-name { font-size: clamp(0.95rem, 7vw, 1.6rem); }
}
/* most phones (wider than 21em at the browser's text size): a little more room between the round pause button's
   lettering and the menu button */
@media (min-width: 21em) and (max-width: 30em) {
  .nav-toggle { margin-left: 0.4rem; }
}
@media (max-width: 22em) { .brand-tv { width: 2.1rem; } .brand { gap: 0.45rem; } }   /* the narrowest phones: a smaller TV logo too */
.site-nav .nav-cta:hover, .site-nav .nav-cta:active { background: var(--gold); color: var(--ink); }
/* Color-bar stripe (same colors and order as the TV), under the header and atop dark sections */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.5rem;
  background: var(--bars); border-block: 2px solid var(--ink);
}
/* Phone menu open: the color-bar stripe drops to the bottom of the menu */
@media (max-width: 71em) {
  .site-nav.is-open { border-bottom: 0; }
  .site-nav.is-open::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.5rem;
    background: var(--bars); border-block: 2px solid var(--ink);
  }
  .site-header:has(.site-nav.is-open)::after { display: none; }
}
/* menu labels and the brand stay on one line; below 71em the Menu button takes over (the full menu, with "Under Hood", needs about 70.9em) */
.site-nav a, .brand-name { white-space: nowrap; }
/* Large text on small phones (narrower than 18.5em, e.g. 20px text on a 320px phone): the name wraps onto two lines
   and the round pause button is a little smaller, so the name never runs under the button. Below 15em (24px text on a
   375px phone) the TV logo steps aside too; the name still links home. */
@media (max-width: 18.5em) {
  .brand-name { white-space: normal; font-size: 0.95rem; }
  .brand-sub { white-space: normal; }   /* "WEB WORKS" may wrap here instead of running under the buttons */
  .motion-mini svg { width: 3.75rem; height: 3.75rem; }
}
@media (max-width: 15em) { .brand-tv { display: none; } }

/* ==========================================================================
   Hero: headline, buttons and badges
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
  background-size: 14px 14px; border-bottom: 3px solid var(--ink); background-color: var(--teal);
  background-image: radial-gradient(rgba(34, 31, 27, 0.1) 1.4px, transparent 1.6px);
  padding-top: calc(clamp(2.5rem, 6vw, 5rem) + 0.75rem); padding-bottom: calc(clamp(3rem, 7vw, 6rem) + 1.75rem);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); position: relative; }
.hero h1 { font-size: min(70px, 100cqi / 9.8); isolation: isolate; margin-bottom: 1.15em; }
.hero h1 .accent {
  color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; background: none;
  padding: 0; position: relative; top: 6px;   /* "New-school code." sits a little lower under "Old-school craft." */
}
.lede { font-size: 1.2rem; max-width: 34rem; color: var(--ink); font-weight: 600; isolation: isolate; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.5rem 0 1.75rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.hero-badges li {
  padding: 0.3rem 0.7rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--white-warm);
  font-size: 0.875rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.02em;
}
.hero-art { display: flex; justify-content: center; position: relative; }
@media (max-width: 52em) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
}
.hero .eyebrow { color: var(--ink); }
.hero .eyebrow {
  display: inline-block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3;
  padding: 0.3rem 0.65rem; margin-bottom: 0.9rem; border-radius: 0.3rem;
  background: var(--magenta); color: var(--white-warm);          /* 7.0:1 */
}
/* ---------- Readability touch-ups ---------- */
/* hero tag on two centered lines */
.eyebrow-stack { text-align: center; }
.eyebrow-stack > span { display: block; }
/* hero intro easier to read */
.hero .eyebrow { font-size: 1rem; padding: 0.4rem 0.8rem; }
.hero .eyebrow {
  background: var(--gold); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
/* Yellow on the teal hero would be unreadable, so the yellow text sits on an ink strip (about 11:1) */
.hero-tagline { display: inline-block; font: 700 clamp(0.78rem, 3.5vw, 1rem) var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow-on-ink); background: var(--ink); padding: 0.35em 0.75em; border-radius: 0.4rem; margin: 0.25rem 0 1.5rem; }
/* ---------- The TV room: braided oval rug under the TV, tall single-stem floor lamp right of the ghost ---------- */
/* side by side: the note and arrow sit left of the button, level with the badges on the other side */
@media (min-width: 52.01em) {
  .hero-grid { position: relative; }
  .motion-wrap { position: absolute; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 0.35rem; z-index: 2; }
}
/* stacked: button first, the note under it */
@media (max-width: 52em) { .motion-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .motion-wrap { display: none; } }
/* the point sits low, level with the button, so the button stays in line with the badges */
@media (min-width: 52.01em) { .motion-wrap { align-items: center; gap: 0.6rem; }
  .motion-wrap { align-items: flex-end; }   /* Escape dismisses it while hovered */
}
/* stacked (phones and narrow windows): the button sits right under the TV, where "below" points */
@media (max-width: 52em) { .motion-wrap { order: -1; align-items: center; margin: -0.25rem 0 0.5rem; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hero-rise 0.6s cubic-bezier(.2, .8, .3, 1) backwards; }
  .hero-copy > .eyebrow { animation-delay: 0.05s; }
  .hero-copy > h1 { animation-name: hero-rise-h1; animation-delay: 0.15s; }
  .hero-copy > .lede { animation-delay: 0.45s; }
  .hero-copy > .hero-tagline { animation-delay: 0.6s; }
  .hero-copy > .hero-actions { animation-delay: 0.75s; }
  .hero-copy > .hero-badges { animation-delay: 0.9s; }
  .motion-wrap { animation: hero-rise 0.6s cubic-bezier(.2, .8, .3, 1) 1.05s backwards; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hero-rise-h1 { from { transform: translateY(16px); } }
/* highlighter: the pink stroke is drawn under "New-school", then "code.", left to right, once on load */
.hero h1 .hl { background: linear-gradient(transparent 62%, var(--pink) 62%) no-repeat 0 0 / 100% 100%; padding: 0 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero h1 .hl-1 { padding-right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .hl { animation: hl-swipe 0.45s cubic-bezier(.5, 0, .3, 1) backwards; }
  .hero h1 .hl-1 { animation-delay: 0.75s; }
  .hero h1 .hl-2 { animation-delay: 1.15s; animation-duration: 0.3s; }
}
@keyframes hl-swipe { from { background-size: 0% 100%; } }
.hero h1 .old {
  font-family: 'Pirata One', 'Shrikhand', Georgia, serif; font-weight: 400; letter-spacing: 0.01em;
  color: var(--ink); text-shadow: 3px 3px 0 #ebbd4e; filter: url(#letterpress); font-size: 1.57em;
  line-height: 1;
}
/* the headline as two balanced lines: each phrase stays on one line and the size scales with the text column.
   The blackletter is width-matched to "New-school code." (its gold shadow included). */
@media (min-width: 52.01em) { .hero-grid { grid-template-columns: 1.4fr 1fr; gap: clamp(1rem, 2.5vw, 2.5rem); } }
.hero-copy { container-type: inline-size; position: relative; }
/* ---------- "That's good to know" as a sing-along: a bouncing ball with a fading tail hops word to word
   and each word lights up as the ball lands, with a longer hang before "know". Everything then holds on one line
   along the comet tail for about 3 seconds before leaving with the star's flash.
   Timed inside the 46.8s TV loop: comet streaks in 34.6s and lands 35.7s as the words begin, words to 38.2s, hold, leave 42.4s. Static: the line at rest. ---------- */
.gk { transform-box: fill-box; transform-origin: 50% 100%; }
/* ---------- Second tagline, under the black banner ---------- */
.hero-haunt { font: 400 clamp(1.426rem, 5.7vw, 1.86rem)/1.2 'New Rocker', 'Shrikhand', Georgia, serif; color: var(--ink); margin: -0.6rem 0 1.4rem; }   /* rockabilly tattoo lettering */
@media (prefers-reduced-motion: no-preference) { .hero-copy > .hero-haunt { animation-delay: 0.68s; } }
/* ---------- Phones and narrow windows: the hero and standalone pieces center; long paragraphs stay left ---------- */
@media (max-width: 52em) {
  .hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-actions, .hero-badges { justify-content: center; }
  .site-check > .btn { justify-self: center; align-self: center; } .motion-wrap { margin-top: 2.1rem; }
}
/* ---------- Hero shapes, two designs that take turns ----------
   A: a flat swoop fin behind the headline with a gold pennant holding the intro.
   B: a lounge-sign panel behind the headline with diamond fins.
   Flat cut shapes, no outlines, one thin loose line around each, gold and cream sparkles.
   Each design holds for one full 46.8s TV loop, then a slow 3s crossfade as the PSA ends and the bars glitch back.
   Reduced motion: design A only. Ink text on the shape teal #4eaea8 is 6.2:1, on gold 9.3:1. */
.hero-copy > :not(.hero-swoop) { position: relative; z-index: 1; }
.hero .eyebrow { z-index: 2; }
.hero-swoop { position: absolute; z-index: 0; left: -2.75rem; top: -2.5rem; width: calc(100% + 5rem); height: auto; pointer-events: none; overflow: visible; }
@media (max-width: 52em) { .hero-swoop { left: -1.5rem; top: -1.5rem; width: calc(100% + 3rem); } }
/* The panel normally hangs 0.8em past the headline's left edge. On narrower desktop windows the headline sits close
   to the screen edge, so the panel's left edge stops 10px past the screen edge (far enough to keep the pink
   highlight inside the panel) and the panel narrows from the left,
   keeping its right edge where it was. (Gutter = the space beside the page's .wrap column.) */
.h1-sign { --sign-left: max(-0.8em, calc(-10px - max(1rem, (100vw - var(--wrap)) / 2)));
  position: absolute; z-index: -1; left: var(--sign-left); top: -0.95em; width: calc(11.2em - var(--sign-left)); height: 4.4em; pointer-events: none; overflow: visible; }
.lede-pennant { position: absolute; z-index: -1; left: -1.9em; right: -3.4em; top: -0.85em; bottom: -0.85em; width: calc(100% + 5.3em); height: calc(100% + 1.7em); pointer-events: none; overflow: visible; }
.lede-pennant .body { filter: drop-shadow(4px 5px 0 rgba(34, 31, 27, 0.22)); }
.hero-swoop .body, .h1-sign .body { filter: drop-shadow(5px 6px 0 rgba(34, 31, 27, 0.22)); }
.echo { stroke-width: 1.75px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-swoop, .lede-pennant { animation: swap-a 93.6s ease-in-out infinite; }
  .h1-sign { animation: swap-b 93.6s ease-in-out infinite; }
  /* sparkles twinkle together on the ghost's 5.2s beat */
  .tw { transform-box: fill-box; transform-origin: center; animation: hero-twinkle 5.2s ease-in-out infinite; }
  .tw-pop { animation-name: hero-pop; }
}
@media (prefers-reduced-motion: reduce) { .h1-sign { display: none; } }
/* phones: the TV has scrolled away by the time people read the headline, so the crescent and the panel trade places
   three times as often (each shows 15.6s, a third of a TV loop) instead of once per loop */
@media (prefers-reduced-motion: no-preference) and (max-width: 52em) { .hero-swoop, .lede-pennant, .h1-sign { animation-duration: 31.2s; } }
@keyframes swap-a { 0%, 44.659% { opacity: 1; } 50%, 94.659% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swap-b { 0%, 44.659% { opacity: 0; } 50%, 94.659% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hero-twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(.72); } }
@keyframes hero-pop { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.6) rotate(45deg); } }
/* ---------- Black and white checkerboard band along the bottom of the hero ---------- */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.75rem; border-top: 3px solid #221f1b;
  background: repeating-conic-gradient(#221f1b 0 25%, #fff7f0 0 50%) 0 0 / 1.75rem 1.75rem; }
/* ---------- Little ghost beside "haunt you": placement only; its drift is set further down ---------- */
.haunt-you { position: relative; display: inline-block; }
.haunt-ghost {
  position: absolute; left: 80%; bottom: 0.15em; width: 0.95em; height: auto; overflow: visible;
  pointer-events: none; opacity: 0; --dive-x: 600px; --dive-y: -300px;
}
@media (max-width: 30em) { .haunt-ghost { left: 50%; } }   /* narrow phones: the line sits near the edge */

/* ---------- Phones: hero spacing and shapes that stay on screen ---------- */
@media (max-width: 52em) {
  .hero .eyebrow { margin-bottom: 1.8rem; }                 /* breathing room between the gold banner and the headline */
  .hero h1 { margin-bottom: 1.5em; }                        /* the intro clears the diamond fins */
  /* lounge panel: narrower and centered, so both ends, the white star and the last diamond stay on screen */
  .h1-sign { left: calc(50% - 5.25em - 14px); width: calc(10.5em + 28px); height: 3.7em; top: -0.5em; translate: 0 20px; }   /* starts below the banner, nudged 20px lower, wide and tall enough that the headline's letters stay inside it */
  .h1-sign .fin { transform-box: view-box; transform-origin: 0 -140px; transform: scaleY(.9); }   /* shorter fin tails */
  /* pennant: kept inside the screen with its notch and point showing; the text sits inside it */
  .lede { padding: 0 2.4rem; }
  .lede-pennant { left: -0.4rem; right: -0.4rem; width: calc(100% + 0.8rem); } .hero-haunt { margin-bottom: 0.4rem; }
  .hero-art { --tvw: min(80%, 21rem); justify-content: flex-start; padding-top: calc(var(--tvw) * 0.16); }
}
/* ---------- Little ghost drift: eases out of "haunt" from a standstill and floats mostly sideways (about 4:1), grazing the top of "you", then slows and fades; gone before the big ghost moves,
   so it reads as the same ghost far off, then back behind the TV. Load: 0.9s to 5.3s (big ghost slides out at 5.5s).
   On phones it replays once per TV cycle, 20.5s to 24.9s, and once when the line first scrolls into view. ---------- */
@media (prefers-reduced-motion: no-preference) { .haunt-ghost { animation: haunt-drift-loop 46.8s linear infinite, haunt-drift 4.4s linear 0.9s 1; } }
@media (max-width: 30em) and (prefers-reduced-motion: no-preference) { .haunt-ghost { animation-name: haunt-drift-loop-sm, haunt-drift-sm; } }
@keyframes haunt-drift {
  0.000% { opacity: 0.00; transform: translate(-2.40em, -0.15em) scale(0.60) rotate(0.0deg); }
  2.500% { opacity: 0.03; transform: translate(-2.39em, -0.15em) scale(0.60) rotate(0.5deg); }
  5.000% { opacity: 0.10; transform: translate(-2.35em, -0.16em) scale(0.62) rotate(0.9deg); }
  7.500% { opacity: 0.22; transform: translate(-2.30em, -0.18em) scale(0.64) rotate(1.4deg); }
  10.000% { opacity: 0.35; transform: translate(-2.23em, -0.20em) scale(0.66) rotate(1.8deg); }
  12.500% { opacity: 0.50; transform: translate(-2.14em, -0.24em) scale(0.69) rotate(2.1deg); }
  15.000% { opacity: 0.65; transform: translate(-2.01em, -0.29em) scale(0.73) rotate(2.4deg); }
  17.500% { opacity: 0.78; transform: translate(-1.88em, -0.35em) scale(0.76) rotate(2.7deg); }
  20.000% { opacity: 0.90; transform: translate(-1.73em, -0.42em) scale(0.80) rotate(2.9deg); }
  22.500% { opacity: 0.97; transform: translate(-1.55em, -0.50em) scale(0.84) rotate(3.0deg); }
  25.000% { opacity: 1.00; transform: translate(-1.37em, -0.59em) scale(0.87) rotate(3.0deg); }
  27.500% { opacity: 1.00; transform: translate(-1.16em, -0.69em) scale(0.91) rotate(3.0deg); }
  30.000% { opacity: 1.00; transform: translate(-0.93em, -0.78em) scale(0.94) rotate(2.9deg); }
  32.500% { opacity: 1.00; transform: translate(-0.70em, -0.87em) scale(0.96) rotate(2.7deg); }
  35.000% { opacity: 1.00; transform: translate(-0.46em, -0.94em) scale(0.98) rotate(2.4deg); }
  37.500% { opacity: 1.00; transform: translate(-0.21em, -0.99em) scale(1.00) rotate(2.1deg); }
  40.000% { opacity: 1.00; transform: translate(0.05em, -1.03em) scale(1.00) rotate(1.8deg); }
  42.500% { opacity: 1.00; transform: translate(0.32em, -1.05em) scale(1.00) rotate(1.4deg); }
  45.000% { opacity: 1.00; transform: translate(0.60em, -1.08em) scale(1.00) rotate(0.9deg); }
  47.500% { opacity: 1.00; transform: translate(0.87em, -1.10em) scale(1.00) rotate(0.5deg); }
  50.000% { opacity: 1.00; transform: translate(1.15em, -1.14em) scale(1.00) rotate(0.0deg); }
  52.500% { opacity: 1.00; transform: translate(1.43em, -1.18em) scale(1.00) rotate(-0.5deg); }
  55.000% { opacity: 1.00; transform: translate(1.70em, -1.23em) scale(1.00) rotate(-0.9deg); }
  57.500% { opacity: 1.00; transform: translate(1.98em, -1.26em) scale(1.00) rotate(-1.4deg); }
  60.000% { opacity: 1.00; transform: translate(2.25em, -1.30em) scale(1.00) rotate(-1.8deg); }
  62.500% { opacity: 1.00; transform: translate(2.51em, -1.33em) scale(1.00) rotate(-2.1deg); }
  65.000% { opacity: 1.00; transform: translate(2.76em, -1.35em) scale(1.00) rotate(-2.4deg); }
  67.500% { opacity: 1.00; transform: translate(3.00em, -1.39em) scale(1.00) rotate(-2.7deg); }
  70.000% { opacity: 1.00; transform: translate(3.23em, -1.46em) scale(1.00) rotate(-2.9deg); }
  72.500% { opacity: 1.00; transform: translate(3.46em, -1.52em) scale(1.00) rotate(-3.0deg); }
  75.000% { opacity: 1.00; transform: translate(3.67em, -1.59em) scale(1.00) rotate(-3.0deg); }
  77.500% { opacity: 1.00; transform: translate(3.85em, -1.64em) scale(1.00) rotate(-3.0deg); }
  80.000% { opacity: 0.98; transform: translate(4.03em, -1.69em) scale(1.00) rotate(-2.9deg); }
  82.500% { opacity: 0.89; transform: translate(4.18em, -1.74em) scale(1.00) rotate(-2.7deg); }
  85.000% { opacity: 0.76; transform: translate(4.31em, -1.78em) scale(1.00) rotate(-2.4deg); }
  87.500% { opacity: 0.60; transform: translate(4.44em, -1.81em) scale(1.00) rotate(-2.1deg); }
  90.000% { opacity: 0.43; transform: translate(4.53em, -1.85em) scale(1.00) rotate(-1.8deg); }
  92.500% { opacity: 0.27; transform: translate(4.60em, -1.87em) scale(1.00) rotate(-1.4deg); }
  95.000% { opacity: 0.13; transform: translate(4.65em, -1.89em) scale(1.00) rotate(-0.9deg); }
  97.500% { opacity: 0.04; transform: translate(4.69em, -1.90em) scale(1.00) rotate(-0.5deg); }
  100.000% { opacity: 0.00; transform: translate(4.70em, -1.90em) scale(1.00) rotate(-0.0deg); }
}
@keyframes haunt-drift-sm {
  0.000% { opacity: 0.00; transform: translate(-1.80em, -0.10em) scale(0.60) rotate(0.0deg); }
  2.500% { opacity: 0.03; transform: translate(-1.80em, -0.10em) scale(0.60) rotate(0.5deg); }
  5.000% { opacity: 0.10; transform: translate(-1.79em, -0.11em) scale(0.62) rotate(0.9deg); }
  7.500% { opacity: 0.22; transform: translate(-1.76em, -0.14em) scale(0.64) rotate(1.4deg); }
  10.000% { opacity: 0.35; transform: translate(-1.73em, -0.17em) scale(0.66) rotate(1.8deg); }
  12.500% { opacity: 0.50; transform: translate(-1.69em, -0.22em) scale(0.69) rotate(2.1deg); }
  15.000% { opacity: 0.65; transform: translate(-1.65em, -0.27em) scale(0.73) rotate(2.4deg); }
  17.500% { opacity: 0.78; transform: translate(-1.59em, -0.35em) scale(0.76) rotate(2.7deg); }
  20.000% { opacity: 0.90; transform: translate(-1.53em, -0.44em) scale(0.80) rotate(2.9deg); }
  22.500% { opacity: 0.97; transform: translate(-1.46em, -0.55em) scale(0.84) rotate(3.0deg); }
  25.000% { opacity: 1.00; transform: translate(-1.38em, -0.66em) scale(0.87) rotate(3.0deg); }
  27.500% { opacity: 1.00; transform: translate(-1.30em, -0.79em) scale(0.91) rotate(3.0deg); }
  30.000% { opacity: 1.00; transform: translate(-1.22em, -0.91em) scale(0.94) rotate(2.9deg); }
  32.500% { opacity: 1.00; transform: translate(-1.12em, -1.02em) scale(0.96) rotate(2.7deg); }
  35.000% { opacity: 1.00; transform: translate(-1.02em, -1.13em) scale(0.98) rotate(2.4deg); }
  37.500% { opacity: 1.00; transform: translate(-0.92em, -1.22em) scale(1.00) rotate(2.1deg); }
  40.000% { opacity: 1.00; transform: translate(-0.81em, -1.30em) scale(1.00) rotate(1.8deg); }
  42.500% { opacity: 1.00; transform: translate(-0.71em, -1.35em) scale(1.00) rotate(1.4deg); }
  45.000% { opacity: 1.00; transform: translate(-0.60em, -1.42em) scale(1.00) rotate(0.9deg); }
  47.500% { opacity: 1.00; transform: translate(-0.48em, -1.49em) scale(1.00) rotate(0.5deg); }
  50.000% { opacity: 1.00; transform: translate(-0.38em, -1.57em) scale(1.00) rotate(0.0deg); }
  52.500% { opacity: 1.00; transform: translate(-0.27em, -1.65em) scale(1.00) rotate(-0.5deg); }
  55.000% { opacity: 1.00; transform: translate(-0.15em, -1.74em) scale(1.00) rotate(-0.9deg); }
  57.500% { opacity: 1.00; transform: translate(-0.04em, -1.82em) scale(1.00) rotate(-1.4deg); }
  60.000% { opacity: 1.00; transform: translate(0.06em, -1.89em) scale(1.00) rotate(-1.8deg); }
  62.500% { opacity: 1.00; transform: translate(0.17em, -1.97em) scale(1.00) rotate(-2.1deg); }
  65.000% { opacity: 1.00; transform: translate(0.27em, -2.03em) scale(1.00) rotate(-2.4deg); }
  67.500% { opacity: 1.00; transform: translate(0.37em, -2.12em) scale(1.00) rotate(-2.7deg); }
  70.000% { opacity: 1.00; transform: translate(0.47em, -2.22em) scale(1.00) rotate(-2.9deg); }
  72.500% { opacity: 1.00; transform: translate(0.55em, -2.32em) scale(1.00) rotate(-3.0deg); }
  75.000% { opacity: 1.00; transform: translate(0.63em, -2.41em) scale(1.00) rotate(-3.0deg); }
  77.500% { opacity: 1.00; transform: translate(0.71em, -2.50em) scale(1.00) rotate(-3.0deg); }
  80.000% { opacity: 0.98; transform: translate(0.78em, -2.58em) scale(1.00) rotate(-2.9deg); }
  82.500% { opacity: 0.89; transform: translate(0.84em, -2.65em) scale(1.00) rotate(-2.7deg); }
  85.000% { opacity: 0.76; transform: translate(0.90em, -2.72em) scale(1.00) rotate(-2.4deg); }
  87.500% { opacity: 0.60; transform: translate(0.94em, -2.77em) scale(1.00) rotate(-2.1deg); }
  90.000% { opacity: 0.43; transform: translate(0.98em, -2.82em) scale(1.00) rotate(-1.8deg); }
  92.500% { opacity: 0.27; transform: translate(1.01em, -2.86em) scale(1.00) rotate(-1.4deg); }
  95.000% { opacity: 0.13; transform: translate(1.04em, -2.88em) scale(1.00) rotate(-0.9deg); }
  97.500% { opacity: 0.04; transform: translate(1.05em, -2.90em) scale(1.00) rotate(-0.5deg); }
  100.000% { opacity: 0.00; transform: translate(1.05em, -2.90em) scale(1.00) rotate(-0.0deg); }
}
@keyframes haunt-drift-loop {
  0% { opacity: 0; transform: translate(-2.40em, -0.15em) scale(.6); }
  43.804% { opacity: 0.00; transform: translate(-2.40em, -0.15em) scale(0.60) rotate(0.0deg); }
  44.162% { opacity: 0.03; transform: translate(-2.39em, -0.15em) scale(0.60) rotate(0.5deg); }
  44.520% { opacity: 0.10; transform: translate(-2.35em, -0.16em) scale(0.62) rotate(0.9deg); }
  44.878% { opacity: 0.22; transform: translate(-2.30em, -0.18em) scale(0.64) rotate(1.4deg); }
  45.236% { opacity: 0.35; transform: translate(-2.23em, -0.20em) scale(0.66) rotate(1.8deg); }
  45.594% { opacity: 0.50; transform: translate(-2.14em, -0.24em) scale(0.69) rotate(2.1deg); }
  45.952% { opacity: 0.65; transform: translate(-2.01em, -0.29em) scale(0.73) rotate(2.4deg); }
  46.310% { opacity: 0.78; transform: translate(-1.88em, -0.35em) scale(0.76) rotate(2.7deg); }
  46.668% { opacity: 0.90; transform: translate(-1.73em, -0.42em) scale(0.80) rotate(2.9deg); }
  47.026% { opacity: 0.97; transform: translate(-1.55em, -0.50em) scale(0.84) rotate(3.0deg); }
  47.383% { opacity: 1.00; transform: translate(-1.37em, -0.59em) scale(0.87) rotate(3.0deg); }
  47.741% { opacity: 1.00; transform: translate(-1.16em, -0.69em) scale(0.91) rotate(3.0deg); }
  48.099% { opacity: 1.00; transform: translate(-0.93em, -0.78em) scale(0.94) rotate(2.9deg); }
  48.457% { opacity: 1.00; transform: translate(-0.70em, -0.87em) scale(0.96) rotate(2.7deg); }
  48.815% { opacity: 1.00; transform: translate(-0.46em, -0.94em) scale(0.98) rotate(2.4deg); }
  49.173% { opacity: 1.00; transform: translate(-0.21em, -0.99em) scale(1.00) rotate(2.1deg); }
  49.531% { opacity: 1.00; transform: translate(0.05em, -1.03em) scale(1.00) rotate(1.8deg); }
  49.889% { opacity: 1.00; transform: translate(0.32em, -1.05em) scale(1.00) rotate(1.4deg); }
  50.247% { opacity: 1.00; transform: translate(0.60em, -1.08em) scale(1.00) rotate(0.9deg); }
  50.605% { opacity: 1.00; transform: translate(0.87em, -1.10em) scale(1.00) rotate(0.5deg); }
  50.963% { opacity: 1.00; transform: translate(1.15em, -1.14em) scale(1.00) rotate(0.0deg); }
  51.321% { opacity: 1.00; transform: translate(1.43em, -1.18em) scale(1.00) rotate(-0.5deg); }
  51.679% { opacity: 1.00; transform: translate(1.70em, -1.23em) scale(1.00) rotate(-0.9deg); }
  52.037% { opacity: 1.00; transform: translate(1.98em, -1.26em) scale(1.00) rotate(-1.4deg); }
  52.395% { opacity: 1.00; transform: translate(2.25em, -1.30em) scale(1.00) rotate(-1.8deg); }
  52.753% { opacity: 1.00; transform: translate(2.51em, -1.33em) scale(1.00) rotate(-2.1deg); }
  53.111% { opacity: 1.00; transform: translate(2.76em, -1.35em) scale(1.00) rotate(-2.4deg); }
  53.469% { opacity: 1.00; transform: translate(3.00em, -1.39em) scale(1.00) rotate(-2.7deg); }
  53.827% { opacity: 1.00; transform: translate(3.23em, -1.46em) scale(1.00) rotate(-2.9deg); }
  54.185% { opacity: 1.00; transform: translate(3.46em, -1.52em) scale(1.00) rotate(-3.0deg); }
  54.543% { opacity: 1.00; transform: translate(3.67em, -1.59em) scale(1.00) rotate(-3.0deg); }
  54.900% { opacity: 1.00; transform: translate(3.85em, -1.64em) scale(1.00) rotate(-3.0deg); }
  55.258% { opacity: 0.98; transform: translate(4.03em, -1.69em) scale(1.00) rotate(-2.9deg); }
  55.616% { opacity: 0.89; transform: translate(4.18em, -1.74em) scale(1.00) rotate(-2.7deg); }
  55.974% { opacity: 0.76; transform: translate(4.31em, -1.78em) scale(1.00) rotate(-2.4deg); }
  56.332% { opacity: 0.60; transform: translate(4.44em, -1.81em) scale(1.00) rotate(-2.1deg); }
  56.690% { opacity: 0.43; transform: translate(4.53em, -1.85em) scale(1.00) rotate(-1.8deg); }
  57.048% { opacity: 0.27; transform: translate(4.60em, -1.87em) scale(1.00) rotate(-1.4deg); }
  57.406% { opacity: 0.13; transform: translate(4.65em, -1.89em) scale(1.00) rotate(-0.9deg); }
  57.764% { opacity: 0.04; transform: translate(4.69em, -1.90em) scale(1.00) rotate(-0.5deg); }
  58.122% { opacity: 0.00; transform: translate(4.70em, -1.90em) scale(1.00) rotate(-0.0deg); }
  100% { opacity: 0; transform: translate(-2.40em, -0.15em) scale(.6); }
}
@keyframes haunt-drift-loop-sm {
  0% { opacity: 0; transform: translate(-1.80em, -0.10em) scale(.6); }
  43.804% { opacity: 0.00; transform: translate(-1.80em, -0.10em) scale(0.60) rotate(0.0deg); }
  44.162% { opacity: 0.03; transform: translate(-1.80em, -0.10em) scale(0.60) rotate(0.5deg); }
  44.520% { opacity: 0.10; transform: translate(-1.79em, -0.11em) scale(0.62) rotate(0.9deg); }
  44.878% { opacity: 0.22; transform: translate(-1.76em, -0.14em) scale(0.64) rotate(1.4deg); }
  45.236% { opacity: 0.35; transform: translate(-1.73em, -0.17em) scale(0.66) rotate(1.8deg); }
  45.594% { opacity: 0.50; transform: translate(-1.69em, -0.22em) scale(0.69) rotate(2.1deg); }
  45.952% { opacity: 0.65; transform: translate(-1.65em, -0.27em) scale(0.73) rotate(2.4deg); }
  46.310% { opacity: 0.78; transform: translate(-1.59em, -0.35em) scale(0.76) rotate(2.7deg); }
  46.668% { opacity: 0.90; transform: translate(-1.53em, -0.44em) scale(0.80) rotate(2.9deg); }
  47.026% { opacity: 0.97; transform: translate(-1.46em, -0.55em) scale(0.84) rotate(3.0deg); }
  47.383% { opacity: 1.00; transform: translate(-1.38em, -0.66em) scale(0.87) rotate(3.0deg); }
  47.741% { opacity: 1.00; transform: translate(-1.30em, -0.79em) scale(0.91) rotate(3.0deg); }
  48.099% { opacity: 1.00; transform: translate(-1.22em, -0.91em) scale(0.94) rotate(2.9deg); }
  48.457% { opacity: 1.00; transform: translate(-1.12em, -1.02em) scale(0.96) rotate(2.7deg); }
  48.815% { opacity: 1.00; transform: translate(-1.02em, -1.13em) scale(0.98) rotate(2.4deg); }
  49.173% { opacity: 1.00; transform: translate(-0.92em, -1.22em) scale(1.00) rotate(2.1deg); }
  49.531% { opacity: 1.00; transform: translate(-0.81em, -1.30em) scale(1.00) rotate(1.8deg); }
  49.889% { opacity: 1.00; transform: translate(-0.71em, -1.35em) scale(1.00) rotate(1.4deg); }
  50.247% { opacity: 1.00; transform: translate(-0.60em, -1.42em) scale(1.00) rotate(0.9deg); }
  50.605% { opacity: 1.00; transform: translate(-0.48em, -1.49em) scale(1.00) rotate(0.5deg); }
  50.963% { opacity: 1.00; transform: translate(-0.38em, -1.57em) scale(1.00) rotate(0.0deg); }
  51.321% { opacity: 1.00; transform: translate(-0.27em, -1.65em) scale(1.00) rotate(-0.5deg); }
  51.679% { opacity: 1.00; transform: translate(-0.15em, -1.74em) scale(1.00) rotate(-0.9deg); }
  52.037% { opacity: 1.00; transform: translate(-0.04em, -1.82em) scale(1.00) rotate(-1.4deg); }
  52.395% { opacity: 1.00; transform: translate(0.06em, -1.89em) scale(1.00) rotate(-1.8deg); }
  52.753% { opacity: 1.00; transform: translate(0.17em, -1.97em) scale(1.00) rotate(-2.1deg); }
  53.111% { opacity: 1.00; transform: translate(0.27em, -2.03em) scale(1.00) rotate(-2.4deg); }
  53.469% { opacity: 1.00; transform: translate(0.37em, -2.12em) scale(1.00) rotate(-2.7deg); }
  53.827% { opacity: 1.00; transform: translate(0.47em, -2.22em) scale(1.00) rotate(-2.9deg); }
  54.185% { opacity: 1.00; transform: translate(0.55em, -2.32em) scale(1.00) rotate(-3.0deg); }
  54.543% { opacity: 1.00; transform: translate(0.63em, -2.41em) scale(1.00) rotate(-3.0deg); }
  54.900% { opacity: 1.00; transform: translate(0.71em, -2.50em) scale(1.00) rotate(-3.0deg); }
  55.258% { opacity: 0.98; transform: translate(0.78em, -2.58em) scale(1.00) rotate(-2.9deg); }
  55.616% { opacity: 0.89; transform: translate(0.84em, -2.65em) scale(1.00) rotate(-2.7deg); }
  55.974% { opacity: 0.76; transform: translate(0.90em, -2.72em) scale(1.00) rotate(-2.4deg); }
  56.332% { opacity: 0.60; transform: translate(0.94em, -2.77em) scale(1.00) rotate(-2.1deg); }
  56.690% { opacity: 0.43; transform: translate(0.98em, -2.82em) scale(1.00) rotate(-1.8deg); }
  57.048% { opacity: 0.27; transform: translate(1.01em, -2.86em) scale(1.00) rotate(-1.4deg); }
  57.406% { opacity: 0.13; transform: translate(1.04em, -2.88em) scale(1.00) rotate(-0.9deg); }
  57.764% { opacity: 0.04; transform: translate(1.05em, -2.90em) scale(1.00) rotate(-0.5deg); }
  58.122% { opacity: 0.00; transform: translate(1.05em, -2.90em) scale(1.00) rotate(-0.0deg); }
  100% { opacity: 0; transform: translate(-1.80em, -0.10em) scale(.6); }
}
/* ---------- Phones: the haunt tagline sits below the TV, so its little ghost waits until the line scrolls into view ---------- */
@media (max-width: 52em) and (prefers-reduced-motion: no-preference) {
  .haunt-ghost { animation: haunt-drift-loop 46.8s linear infinite; }
  .haunt-seen .haunt-ghost { animation: haunt-drift-rep 12s linear 0.4s infinite; }   /* replays every 12s while the line is on screen */
}
@media (max-width: 30em) and (prefers-reduced-motion: no-preference) {
  .haunt-ghost { animation: haunt-drift-loop-sm 46.8s linear infinite; }
  .haunt-seen .haunt-ghost { animation: haunt-drift-sm-rep 12s linear 0.4s infinite; }
}
/* ---------- Wider screens: the little ghost rises out of "you" and glides on one gentle arc into the TV screen, with a quick tucked triple spin near the end.
   Once per 46.8s cycle (3.1s to 7.5s) he reaches the glass right as the first channel change happens, so it looks
   like he possesses the set: a flash and rings on the glass as it flips to "Please stand by", where he waves. After
   the next channel change the big ghost slides out from behind the set (13.6s) and pulls the lamp chain (see "The ghost story"). script.js measures the
   distance to the screen (--dive-x, --dive-y) so it lands on the glass at any width. On phones the "haunt you" line
   sits well below the TV, so that ghost keeps the drift above and a second small ghost (.tv-diver) does the dive. ---------- */
@media (min-width: 52.01em) and (prefers-reduced-motion: no-preference) {
  .haunt-ghost, .haunt-seen .haunt-ghost { animation: haunt-dive-loop 46.8s linear infinite; animation-timing-function: linear; }
  .tv-dive-blip { animation: tv-dive-blip 46.8s steps(1) infinite; }
}
@keyframes haunt-dive-loop {
  0%, 6.551% { opacity: 0; transform: translate(-0.40em, -0.20em) scale(.6); }
  6.551% { opacity: 0.000; transform: translate(calc(-0.403em + var(--dive-x) * 0.0000), calc(-0.202em + var(--dive-y) * 0.0000)) rotate(0.0deg) scale(0.600, 0.600); }
  6.682% { opacity: 0.004; transform: translate(calc(-0.401em + var(--dive-x) * 0.0048), calc(-0.194em + var(--dive-y) * 0.0048)) rotate(0.0deg) scale(0.601, 0.601); }
  6.817% { opacity: 0.015; transform: translate(calc(-0.399em + var(--dive-x) * 0.0095), calc(-0.185em + var(--dive-y) * 0.0095)) rotate(0.1deg) scale(0.604, 0.604); }
  6.948% { opacity: 0.033; transform: translate(calc(-0.397em + var(--dive-x) * 0.0145), calc(-0.174em + var(--dive-y) * 0.0145)) rotate(0.2deg) scale(0.608, 0.608); }
  7.083% { opacity: 0.057; transform: translate(calc(-0.395em + var(--dive-x) * 0.0198), calc(-0.161em + var(--dive-y) * 0.0198)) rotate(0.3deg) scale(0.614, 0.614); }
  7.215% { opacity: 0.087; transform: translate(calc(-0.393em + var(--dive-x) * 0.0253), calc(-0.144em + var(--dive-y) * 0.0253)) rotate(0.5deg) scale(0.621, 0.621); }
  7.349% { opacity: 0.122; transform: translate(calc(-0.391em + var(--dive-x) * 0.0308), calc(-0.123em + var(--dive-y) * 0.0308)) rotate(0.8deg) scale(0.630, 0.630); }
  7.481% { opacity: 0.160; transform: translate(calc(-0.388em + var(--dive-x) * 0.0368), calc(-0.098em + var(--dive-y) * 0.0368)) rotate(1.1deg) scale(0.640, 0.640); }
  7.616% { opacity: 0.203; transform: translate(calc(-0.386em + var(--dive-x) * 0.0430), calc(-0.069em + var(--dive-y) * 0.0430)) rotate(1.4deg) scale(0.651, 0.651); }
  7.747% { opacity: 0.248; transform: translate(calc(-0.383em + var(--dive-x) * 0.0491), calc(-0.037em + var(--dive-y) * 0.0491)) rotate(1.7deg) scale(0.663, 0.663); }
  7.879% { opacity: 0.295; transform: translate(calc(-0.381em + var(--dive-x) * 0.0558), calc(-0.004em + var(--dive-y) * 0.0558)) rotate(2.1deg) scale(0.676, 0.676); }
  8.013% { opacity: 0.344; transform: translate(calc(-0.378em + var(--dive-x) * 0.0624), calc(0.031em + var(--dive-y) * 0.0624)) rotate(2.4deg) scale(0.691, 0.691); }
  8.145% { opacity: 0.395; transform: translate(calc(-0.375em + var(--dive-x) * 0.0692), calc(0.065em + var(--dive-y) * 0.0692)) rotate(2.7deg) scale(0.706, 0.706); }
  8.280% { opacity: 0.445; transform: translate(calc(-0.373em + var(--dive-x) * 0.0760), calc(0.099em + var(--dive-y) * 0.0760)) rotate(3.1deg) scale(0.721, 0.721); }
  8.411% { opacity: 0.496; transform: translate(calc(-0.370em + var(--dive-x) * 0.0830), calc(0.128em + var(--dive-y) * 0.0830)) rotate(3.3deg) scale(0.738, 0.738); }
  8.544% { opacity: 0.545; transform: translate(calc(-0.367em + var(--dive-x) * 0.0902), calc(0.153em + var(--dive-y) * 0.0902)) rotate(3.6deg) scale(0.755, 0.755); }
  8.672% { opacity: 0.593; transform: translate(calc(-0.364em + var(--dive-x) * 0.0975), calc(0.170em + var(--dive-y) * 0.0975)) rotate(3.7deg) scale(0.772, 0.772); }
  8.800% { opacity: 0.639; transform: translate(calc(-0.361em + var(--dive-x) * 0.1049), calc(0.180em + var(--dive-y) * 0.1049)) rotate(3.8deg) scale(0.790, 0.790); }
  8.922% { opacity: 0.681; transform: translate(calc(-0.358em + var(--dive-x) * 0.1124), calc(0.180em + var(--dive-y) * 0.1124)) rotate(3.8deg) scale(0.809, 0.809); }
  9.042% { opacity: 0.721; transform: translate(calc(-0.355em + var(--dive-x) * 0.1201), calc(0.168em + var(--dive-y) * 0.1201)) rotate(3.8deg) scale(0.827, 0.827); }
  9.160% { opacity: 0.756; transform: translate(calc(-0.352em + var(--dive-x) * 0.1275), calc(0.146em + var(--dive-y) * 0.1275)) rotate(3.7deg) scale(0.845, 0.845); }
  9.272% { opacity: 0.787; transform: translate(calc(-0.349em + var(--dive-x) * 0.1353), calc(0.109em + var(--dive-y) * 0.1353)) rotate(3.5deg) scale(0.864, 0.864); }
  9.383% { opacity: 0.812; transform: translate(calc(-0.346em + var(--dive-x) * 0.1431), calc(0.059em + var(--dive-y) * 0.1431)) rotate(3.2deg) scale(0.882, 0.882); }
  9.488% { opacity: 0.832; transform: translate(calc(-0.342em + var(--dive-x) * 0.1509), calc(-0.004em + var(--dive-y) * 0.1509)) rotate(2.9deg) scale(0.901, 0.901); }
  9.593% { opacity: 0.844; transform: translate(calc(-0.339em + var(--dive-x) * 0.1588), calc(-0.075em + var(--dive-y) * 0.1588)) rotate(2.5deg) scale(0.919, 0.919); }
  9.693% { opacity: 0.850; transform: translate(calc(-0.336em + var(--dive-x) * 0.1667), calc(-0.153em + var(--dive-y) * 0.1667)) rotate(2.2deg) scale(0.936, 0.936); }
  9.794% { opacity: 0.850; transform: translate(calc(-0.333em + var(--dive-x) * 0.1749), calc(-0.238em + var(--dive-y) * 0.1749)) rotate(1.8deg) scale(0.954, 0.954); }
  9.891% { opacity: 0.850; transform: translate(calc(-0.329em + var(--dive-x) * 0.1829), calc(-0.329em + var(--dive-y) * 0.1829)) rotate(1.4deg) scale(0.970, 0.970); }
  9.989% { opacity: 0.850; transform: translate(calc(-0.326em + var(--dive-x) * 0.1910), calc(-0.436em + var(--dive-y) * 0.1910)) rotate(0.9deg) scale(0.987, 0.987); }
  10.088% { opacity: 0.850; transform: translate(calc(-0.323em + var(--dive-x) * 0.1993), calc(-0.563em + var(--dive-y) * 0.1993)) rotate(0.5deg) scale(1.002, 1.002); }
  10.186% { opacity: 0.850; transform: translate(calc(-0.320em + var(--dive-x) * 0.2075), calc(-0.702em + var(--dive-y) * 0.2075)) rotate(0.1deg) scale(1.017, 1.017); }
  10.285% { opacity: 0.850; transform: translate(calc(-0.316em + var(--dive-x) * 0.2158), calc(-0.843em + var(--dive-y) * 0.2158)) rotate(-0.2deg) scale(1.030, 1.030); }
  10.383% { opacity: 0.850; transform: translate(calc(-0.313em + var(--dive-x) * 0.2242), calc(-0.982em + var(--dive-y) * 0.2242)) rotate(-0.4deg) scale(1.043, 1.043); }
  10.483% { opacity: 0.850; transform: translate(calc(-0.309em + var(--dive-x) * 0.2327), calc(-1.113em + var(--dive-y) * 0.2327)) rotate(-0.5deg) scale(1.055, 1.055); }
  10.580% { opacity: 0.850; transform: translate(calc(-0.306em + var(--dive-x) * 0.2415), calc(-1.233em + var(--dive-y) * 0.2415)) rotate(-0.4deg) scale(1.065, 1.065); }
  10.680% { opacity: 0.850; transform: translate(calc(-0.302em + var(--dive-x) * 0.2500), calc(-1.337em + var(--dive-y) * 0.2500)) rotate(-0.2deg) scale(1.075, 1.075); }
  10.777% { opacity: 0.850; transform: translate(calc(-0.299em + var(--dive-x) * 0.2587), calc(-1.431em + var(--dive-y) * 0.2587)) rotate(-0.1deg) scale(1.083, 1.083); }
  10.874% { opacity: 0.850; transform: translate(calc(-0.295em + var(--dive-x) * 0.2678), calc(-1.518em + var(--dive-y) * 0.2678)) rotate(-0.0deg) scale(1.089, 1.089); }
  10.974% { opacity: 0.850; transform: translate(calc(-0.292em + var(--dive-x) * 0.2766), calc(-1.597em + var(--dive-y) * 0.2766)) rotate(0.0deg) scale(1.095, 1.095); }
  11.071% { opacity: 0.850; transform: translate(calc(-0.288em + var(--dive-x) * 0.2857), calc(-1.679em + var(--dive-y) * 0.2857)) rotate(0.0deg) scale(1.098, 1.098); }
  11.171% { opacity: 0.850; transform: translate(calc(-0.284em + var(--dive-x) * 0.2951), calc(-1.762em + var(--dive-y) * 0.2951)) rotate(0.0deg) scale(1.100, 1.100); }
  11.268% { opacity: 0.850; transform: translate(calc(-0.280em + var(--dive-x) * 0.3044), calc(-1.843em + var(--dive-y) * 0.3044)) rotate(0.0deg) scale(1.100, 1.100); }
  11.368% { opacity: 0.850; transform: translate(calc(-0.277em + var(--dive-x) * 0.3139), calc(-1.925em + var(--dive-y) * 0.3139)) rotate(0.0deg) scale(1.100, 1.100); }
  11.465% { opacity: 0.850; transform: translate(calc(-0.273em + var(--dive-x) * 0.3238), calc(-2.008em + var(--dive-y) * 0.3238)) rotate(0.0deg) scale(1.100, 1.100); }
  11.565% { opacity: 0.850; transform: translate(calc(-0.269em + var(--dive-x) * 0.3336), calc(-2.087em + var(--dive-y) * 0.3336)) rotate(0.0deg) scale(1.100, 1.100); }
  11.662% { opacity: 0.850; transform: translate(calc(-0.265em + var(--dive-x) * 0.3437), calc(-2.167em + var(--dive-y) * 0.3437)) rotate(0.1deg) scale(1.100, 1.100); }
  11.760% { opacity: 0.850; transform: translate(calc(-0.260em + var(--dive-x) * 0.3541), calc(-2.247em + var(--dive-y) * 0.3541)) rotate(0.7deg) scale(1.100, 1.100); }
  11.859% { opacity: 0.850; transform: translate(calc(-0.256em + var(--dive-x) * 0.3645), calc(-2.322em + var(--dive-y) * 0.3645)) rotate(2.5deg) scale(1.100, 1.100); }
  11.957% { opacity: 0.850; transform: translate(calc(-0.252em + var(--dive-x) * 0.3752), calc(-2.397em + var(--dive-y) * 0.3752)) rotate(6.4deg) scale(1.100, 1.100); }
  12.056% { opacity: 0.850; transform: translate(calc(-0.247em + var(--dive-x) * 0.3864), calc(-2.470em + var(--dive-y) * 0.3864)) rotate(13.1deg) scale(1.100, 1.100); }
  12.154% { opacity: 0.850; transform: translate(calc(-0.243em + var(--dive-x) * 0.3975), calc(-2.538em + var(--dive-y) * 0.3975)) rotate(23.4deg) scale(1.100, 1.100); }
  12.253% { opacity: 0.850; transform: translate(calc(-0.238em + var(--dive-x) * 0.4090), calc(-2.604em + var(--dive-y) * 0.4090)) rotate(38.0deg) scale(1.100, 1.100); }
  12.351% { opacity: 0.850; transform: translate(calc(-0.234em + var(--dive-x) * 0.4207), calc(-2.666em + var(--dive-y) * 0.4207)) rotate(57.5deg) scale(1.100, 1.100); }
  12.450% { opacity: 0.850; transform: translate(calc(-0.229em + var(--dive-x) * 0.4329), calc(-2.725em + var(--dive-y) * 0.4329)) rotate(82.5deg) scale(1.100, 1.100); }
  12.548% { opacity: 0.850; transform: translate(calc(-0.224em + var(--dive-x) * 0.4450), calc(-2.777em + var(--dive-y) * 0.4450)) rotate(113.5deg) scale(1.100, 1.100); }
  12.645% { opacity: 0.855; transform: translate(calc(-0.219em + var(--dive-x) * 0.4577), calc(-2.825em + var(--dive-y) * 0.4577)) rotate(150.6deg) scale(1.100, 1.100); }
  12.745% { opacity: 0.869; transform: translate(calc(-0.213em + var(--dive-x) * 0.4705), calc(-2.868em + var(--dive-y) * 0.4705)) rotate(194.3deg) scale(1.100, 1.100); }
  12.842% { opacity: 0.889; transform: translate(calc(-0.208em + var(--dive-x) * 0.4840), calc(-2.905em + var(--dive-y) * 0.4840)) rotate(244.4deg) scale(1.100, 1.100); }
  12.942% { opacity: 0.913; transform: translate(calc(-0.203em + var(--dive-x) * 0.4974), calc(-2.934em + var(--dive-y) * 0.4974)) rotate(300.8deg) scale(1.100, 1.100); }
  13.039% { opacity: 0.937; transform: translate(calc(-0.197em + var(--dive-x) * 0.5112), calc(-2.957em + var(--dive-y) * 0.5112)) rotate(363.4deg) scale(1.100, 1.100); }
  13.139% { opacity: 0.961; transform: translate(calc(-0.191em + var(--dive-x) * 0.5255), calc(-2.973em + var(--dive-y) * 0.5255)) rotate(431.5deg) scale(1.100, 1.100); }
  13.236% { opacity: 0.981; transform: translate(calc(-0.186em + var(--dive-x) * 0.5398), calc(-2.980em + var(--dive-y) * 0.5398)) rotate(504.5deg) scale(1.100, 1.100); }
  13.336% { opacity: 0.995; transform: translate(calc(-0.180em + var(--dive-x) * 0.5548), calc(-2.980em + var(--dive-y) * 0.5548)) rotate(581.4deg) scale(1.100, 1.100); }
  13.433% { opacity: 1.000; transform: translate(calc(-0.173em + var(--dive-x) * 0.5698), calc(-2.971em + var(--dive-y) * 0.5698)) rotate(661.3deg) scale(1.100, 1.100); }
  13.531% { opacity: 1.000; transform: translate(calc(-0.167em + var(--dive-x) * 0.5847), calc(-2.954em + var(--dive-y) * 0.5847)) rotate(742.6deg) scale(1.100, 1.100); }
  13.630% { opacity: 1.000; transform: translate(calc(-0.161em + var(--dive-x) * 0.6003), calc(-2.927em + var(--dive-y) * 0.6003)) rotate(823.7deg) scale(1.100, 1.100); }
  13.728% { opacity: 1.000; transform: translate(calc(-0.155em + var(--dive-x) * 0.6160), calc(-2.892em + var(--dive-y) * 0.6160)) rotate(902.8deg) scale(1.100, 1.100); }
  13.827% { opacity: 1.000; transform: translate(calc(-0.148em + var(--dive-x) * 0.6319), calc(-2.848em + var(--dive-y) * 0.6319)) rotate(977.7deg) scale(1.100, 1.100); }
  13.925% { opacity: 1.000; transform: translate(calc(-0.142em + var(--dive-x) * 0.6479), calc(-2.795em + var(--dive-y) * 0.6479)) rotate(1046.0deg) scale(1.100, 1.100); }
  14.024% { opacity: 1.000; transform: translate(calc(-0.135em + var(--dive-x) * 0.6642), calc(-2.734em + var(--dive-y) * 0.6642)) rotate(1104.9deg) scale(1.100, 1.100); }
  14.122% { opacity: 1.000; transform: translate(calc(-0.129em + var(--dive-x) * 0.6804), calc(-2.664em + var(--dive-y) * 0.6804)) rotate(1151.3deg) scale(1.100, 1.100); }
  14.221% { opacity: 1.000; transform: translate(calc(-0.122em + var(--dive-x) * 0.6966), calc(-2.587em + var(--dive-y) * 0.6966)) rotate(1181.9deg) scale(1.100, 1.100); }
  14.319% { opacity: 1.000; transform: translate(calc(-0.116em + var(--dive-x) * 0.7132), calc(-2.500em + var(--dive-y) * 0.7132)) rotate(1193.0deg) scale(1.100, 1.100); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.416% { opacity: 1.000; transform: translate(calc(-0.109em + var(--dive-x) * 0.7296), calc(-2.406em + var(--dive-y) * 0.7296)) rotate(1193.0deg) scale(1.100, 1.100); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.516% { opacity: 1.000; transform: translate(calc(-0.102em + var(--dive-x) * 0.7459), calc(-2.306em + var(--dive-y) * 0.7459)) rotate(1193.0deg) scale(1.100, 1.100); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.613% { opacity: 1.000; transform: translate(calc(-0.096em + var(--dive-x) * 0.7626), calc(-2.197em + var(--dive-y) * 0.7626)) rotate(1193.0deg) scale(1.100, 1.100); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.713% { opacity: 1.000; transform: translate(calc(-0.089em + var(--dive-x) * 0.7787), calc(-2.086em + var(--dive-y) * 0.7787)) rotate(1193.0deg) scale(1.099, 1.102); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.810% { opacity: 1.000; transform: translate(calc(-0.083em + var(--dive-x) * 0.7950), calc(-1.965em + var(--dive-y) * 0.7950)) rotate(1193.0deg) scale(1.089, 1.122); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.910% { opacity: 1.000; transform: translate(calc(-0.076em + var(--dive-x) * 0.8117), calc(-1.836em + var(--dive-y) * 0.8117)) rotate(1193.0deg) scale(1.072, 1.155); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  15.007% { opacity: 1.000; transform: translate(calc(-0.069em + var(--dive-x) * 0.8277), calc(-1.707em + var(--dive-y) * 0.8277)) rotate(1193.0deg) scale(1.054, 1.191); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  15.107% { opacity: 1.000; transform: translate(calc(-0.063em + var(--dive-x) * 0.8435), calc(-1.574em + var(--dive-y) * 0.8435)) rotate(1193.0deg) scale(1.040, 1.220); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  15.204% { opacity: 1.000; transform: translate(calc(-0.057em + var(--dive-x) * 0.8575), calc(-1.452em + var(--dive-y) * 0.8575)) rotate(1193.0deg) scale(1.034, 1.232); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  15.302% { opacity: 1.000; transform: translate(calc(-0.052em + var(--dive-x) * 0.8712), calc(-1.329em + var(--dive-y) * 0.8712)) rotate(1193.0deg) scale(1.023, 1.270); clip-path: polygon(50% -284.0%, 385.2% 128.6%, -285.2% 128.6%); }
  15.401% { opacity: 1.000; transform: translate(calc(-0.047em + var(--dive-x) * 0.8840), calc(-1.210em + var(--dive-y) * 0.8840)) rotate(1193.0deg) scale(0.998, 1.353); clip-path: polygon(50% -242.7%, 346.8% 125.1%, -246.8% 125.1%); }
  15.499% { opacity: 1.000; transform: translate(calc(-0.042em + var(--dive-x) * 0.8964), calc(-1.092em + var(--dive-y) * 0.8964)) rotate(1193.0deg) scale(0.962, 1.463); clip-path: polygon(50% -185.6%, 293.9% 120.2%, -193.9% 120.2%); }
  15.598% { opacity: 1.000; transform: translate(calc(-0.036em + var(--dive-x) * 0.9101), calc(-0.958em + var(--dive-y) * 0.9101)) rotate(1193.0deg) scale(0.917, 1.577); clip-path: polygon(50% -122.8%, 235.6% 114.8%, -135.6% 114.8%); }
  15.696% { opacity: 1.000; transform: translate(calc(-0.030em + var(--dive-x) * 0.9245), calc(-0.814em + var(--dive-y) * 0.9245)) rotate(1193.0deg) scale(0.863, 1.661); clip-path: polygon(50% -63.8%, 180.9% 109.8%, -80.9% 109.8%); }
  15.795% { opacity: 0.926; transform: translate(calc(-0.024em + var(--dive-x) * 0.9403), calc(-0.651em + var(--dive-y) * 0.9403)) rotate(1193.0deg) scale(0.800, 1.658); clip-path: polygon(50% -18.5%, 138.9% 105.9%, -38.9% 105.9%); }
  15.893% { opacity: 0.583; transform: translate(calc(-0.017em + var(--dive-x) * 0.9575), calc(-0.469em + var(--dive-y) * 0.9575)) rotate(1193.0deg) scale(0.730, 1.485); clip-path: polygon(50% 3.3%, 118.6% 104.1%, -18.6% 104.1%); }
  15.992% { opacity: 0.189; transform: translate(calc(-0.009em + var(--dive-x) * 0.9780), calc(-0.247em + var(--dive-y) * 0.9780)) rotate(1193.0deg) scale(0.653, 1.017); clip-path: polygon(50% 4.0%, 118.0% 104.0%, -18.0% 104.0%); }
  16.090% { opacity: 0.000; transform: translate(calc(0.000em + var(--dive-x) * 1.0000), calc(0.000em + var(--dive-y) * 1.0000)) rotate(1193.0deg) scale(0.569, 0.085); clip-path: polygon(50% 4.0%, 118.0% 104.0%, -18.0% 104.0%); }
  16.140%, 100% { opacity: 0; transform: translate(-0.40em, -0.20em) scale(.6); }
}
.tv-dive-blip { opacity: 0; }
@keyframes tv-dive-blip { 0%, 16.04% { opacity: 0; } 16.09% { opacity: 1; } 16.74%, 100% { opacity: 0; } }
@media (min-width: 52.01em) { .hero-copy > .hero-haunt { z-index: 6; } }   /* the little ghost flies in front of the TV, not behind it */

/* arms reach out ahead, Casper-style, once he's on his way */
.haunt-arms { opacity: 0; }
@media (min-width: 52.01em) and (prefers-reduced-motion: no-preference) {
  .haunt-arms { animation: haunt-arms-loop 46.8s linear infinite; }
  .tv-splash { animation: tv-splash-loop 46.8s linear infinite; }
  .tv-splash-2 { animation: tv-splash-loop2 46.8s linear infinite; }
}
@keyframes haunt-arms-loop { 0%, 14.496% { opacity: 0; } 14.850%, 16.090% { opacity: 1; } 16.140%, 100% { opacity: 0; } }
/* where he hits the glass: a bright flash and two rings rippling out, like the screen swallowed him */
.tv-splash, .tv-splash-2 { opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes tv-splash-loop { 0%, 15.91% { opacity: 0; transform: scale(.15); } 15.92% { opacity: 1; transform: scale(.15); } 17.84% { opacity: 0; transform: scale(3.6); } 100% { opacity: 0; } }
@keyframes tv-splash-loop2 { 0%, 16.23% { opacity: 0; transform: scale(.15); } 16.24% { opacity: 1; transform: scale(.15); } 18.16% { opacity: 0; transform: scale(3.6); } 100% { opacity: 0; } }

/* the cannonball: knees come up under the sheet, arms hug them, and three rolls end at the entry angle */
.haunt-tuck { opacity: 0; }
@media (min-width: 52.01em) and (prefers-reduced-motion: no-preference) {
  .haunt-tuck { animation: haunt-tuck-loop 46.8s linear infinite; }
  .haunt-body { animation: haunt-untuck-loop 46.8s linear infinite; }
}
@keyframes haunt-tuck-loop { 0%, 11.662% { opacity: 0; } 12.017%, 14.230% { opacity: 1; } 14.496%, 100% { opacity: 0; } }
@keyframes haunt-untuck-loop { 0%, 11.662% { opacity: 1; } 12.017%, 14.230% { opacity: 0; } 14.496%, 100% { opacity: 1; } }

/* for the plunge a bigger face, turned with his body */
.haunt-face-down { opacity: 0; }
@media (min-width: 52.01em) and (prefers-reduced-motion: no-preference) {
  .haunt-face { animation: haunt-face-loop 46.8s linear infinite; }
  .haunt-face-down { animation: haunt-facedown-loop 46.8s linear infinite; }
}

/* ---------- Phones: a second little ghost dives into the TV ----------
   On phones the "haunt you" line sits well below the TV, so that ghost keeps its drift and this one does the dive:
   he comes in from off the left edge, low (between the rug and the pause button), fades in, swings up on an S curve
   arcs over the top and is sucked into the middle of the screen, on the same beat as the dive on wider screens.
   His tuck and spin wait for that arc, so his parts have their own keyframes (tvd-*). script.js places him
   and measures the distance to the screen (--dive-x, --dive-y). Hidden on wider screens and with reduced motion. */
.tv-diver { display: none; }
@media (max-width: 52em) and (prefers-reduced-motion: no-preference) {
  .tv-diver { display: block; position: absolute; z-index: 5; left: -3rem; top: 50%; width: 1.9rem; height: auto;
    overflow: visible; pointer-events: none; opacity: 0; --dive-x: 200px; --dive-y: -250px;
    animation: tv-diver-loop 46.8s linear infinite; }
  .tv-diver .haunt-arms { animation: tvd-arms-loop 46.8s linear infinite; }
  .tv-diver .haunt-tuck { animation: tvd-tuck-loop 46.8s linear infinite; }
  .tv-diver .haunt-body { animation: tvd-untuck-loop 46.8s linear infinite; }
  .tv-diver .haunt-face { animation: tvd-face-loop 46.8s linear infinite; }
  .tv-diver .haunt-face-down { animation: tvd-facedown-loop 46.8s linear infinite; }
  .tv-dive-blip { animation: tv-dive-blip 46.8s steps(1) infinite; }
  .tv-splash { animation: tv-splash-loop 46.8s linear infinite; }
  .tv-splash-2 { animation: tv-splash-loop2 46.8s linear infinite; }
}
/* ---------- PHONE DIVE KEYFRAMES ---------- */
@keyframes tvd-tuck-loop { 0%, 12.548% { opacity: 0; } 12.902%, 14.762% { opacity: 1; } 14.939%, 100% { opacity: 0; } }
@keyframes tvd-untuck-loop { 0%, 12.548% { opacity: 1; } 12.902%, 14.762% { opacity: 0; } 14.939%, 100% { opacity: 1; } }
@keyframes tvd-arms-loop { 0%, 14.939% { opacity: 0; } 15.116%, 16.081% { opacity: 1; } 16.090%, 100% { opacity: 0; } }
@keyframes tvd-face-loop { 0%, 14.762% { opacity: 1; } 14.939%, 16.081% { opacity: 0; } 16.090%, 100% { opacity: 1; } }
@keyframes tvd-facedown-loop { 0%, 14.762% { opacity: 0; } 14.939%, 16.081% { opacity: 1; } 16.090%, 100% { opacity: 0; } }
@keyframes tv-diver-loop {
  0%, 6.551% { opacity: 0; transform: none; }
  6.551% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0000), calc(0.000em + var(--dive-y) * 0.0000)) rotate(0.0deg) scale(0.600, 0.600); }
  6.682% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0072), calc(0.000em + var(--dive-y) * 0.0029)) rotate(0.0deg) scale(0.601, 0.601); }
  6.817% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0147), calc(0.002em + var(--dive-y) * 0.0060)) rotate(0.1deg) scale(0.604, 0.604); }
  6.948% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0226), calc(0.007em + var(--dive-y) * 0.0093)) rotate(0.2deg) scale(0.608, 0.608); }
  7.083% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0311), calc(0.016em + var(--dive-y) * 0.0128)) rotate(0.3deg) scale(0.614, 0.614); }
  7.215% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0400), calc(0.031em + var(--dive-y) * 0.0165)) rotate(0.5deg) scale(0.621, 0.621); }
  7.349% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0491), calc(0.051em + var(--dive-y) * 0.0205)) rotate(0.8deg) scale(0.630, 0.630); }
  7.481% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0587), calc(0.076em + var(--dive-y) * 0.0250)) rotate(1.1deg) scale(0.640, 0.640); }
  7.616% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0683), calc(0.108em + var(--dive-y) * 0.0297)) rotate(1.4deg) scale(0.651, 0.651); }
  7.747% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0785), calc(0.145em + var(--dive-y) * 0.0351)) rotate(1.7deg) scale(0.663, 0.663); }
  7.879% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0887), calc(0.186em + var(--dive-y) * 0.0410)) rotate(2.1deg) scale(0.676, 0.676); }
  8.013% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 0.0992), calc(0.231em + var(--dive-y) * 0.0475)) rotate(2.4deg) scale(0.691, 0.691); }
  8.145% { opacity: 0.003; transform: translate(calc(var(--dive-x) * 0.1096), calc(0.279em + var(--dive-y) * 0.0545)) rotate(2.7deg) scale(0.706, 0.706); }
  8.280% { opacity: 0.011; transform: translate(calc(var(--dive-x) * 0.1201), calc(0.327em + var(--dive-y) * 0.0622)) rotate(3.1deg) scale(0.721, 0.721); }
  8.411% { opacity: 0.024; transform: translate(calc(var(--dive-x) * 0.1308), calc(0.376em + var(--dive-y) * 0.0706)) rotate(3.3deg) scale(0.738, 0.738); }
  8.544% { opacity: 0.040; transform: translate(calc(var(--dive-x) * 0.1414), calc(0.423em + var(--dive-y) * 0.0798)) rotate(3.6deg) scale(0.755, 0.755); }
  8.672% { opacity: 0.060; transform: translate(calc(var(--dive-x) * 0.1516), calc(0.466em + var(--dive-y) * 0.0895)) rotate(3.7deg) scale(0.772, 0.772); }
  8.800% { opacity: 0.083; transform: translate(calc(var(--dive-x) * 0.1617), calc(0.505em + var(--dive-y) * 0.0999)) rotate(3.8deg) scale(0.790, 0.790); }
  8.922% { opacity: 0.110; transform: translate(calc(var(--dive-x) * 0.1717), calc(0.537em + var(--dive-y) * 0.1112)) rotate(3.8deg) scale(0.809, 0.809); }
  9.042% { opacity: 0.139; transform: translate(calc(var(--dive-x) * 0.1814), calc(0.561em + var(--dive-y) * 0.1234)) rotate(3.8deg) scale(0.827, 0.827); }
  9.160% { opacity: 0.171; transform: translate(calc(var(--dive-x) * 0.1908), calc(0.576em + var(--dive-y) * 0.1364)) rotate(3.7deg) scale(0.845, 0.845); }
  9.272% { opacity: 0.205; transform: translate(calc(var(--dive-x) * 0.1995), calc(0.582em + var(--dive-y) * 0.1498)) rotate(3.5deg) scale(0.864, 0.864); }
  9.383% { opacity: 0.241; transform: translate(calc(var(--dive-x) * 0.2078), calc(0.577em + var(--dive-y) * 0.1641)) rotate(3.2deg) scale(0.882, 0.882); }
  9.488% { opacity: 0.279; transform: translate(calc(var(--dive-x) * 0.2157), calc(0.562em + var(--dive-y) * 0.1793)) rotate(2.9deg) scale(0.901, 0.901); }
  9.593% { opacity: 0.319; transform: translate(calc(var(--dive-x) * 0.2228), calc(0.543em + var(--dive-y) * 0.1948)) rotate(2.5deg) scale(0.919, 0.919); }
  9.693% { opacity: 0.359; transform: translate(calc(var(--dive-x) * 0.2294), calc(0.520em + var(--dive-y) * 0.2111)) rotate(2.2deg) scale(0.936, 0.936); }
  9.794% { opacity: 0.400; transform: translate(calc(var(--dive-x) * 0.2354), calc(0.493em + var(--dive-y) * 0.2283)) rotate(1.8deg) scale(0.954, 0.954); }
  9.891% { opacity: 0.442; transform: translate(calc(var(--dive-x) * 0.2406), calc(0.462em + var(--dive-y) * 0.2457)) rotate(1.4deg) scale(0.970, 0.970); }
  9.989% { opacity: 0.484; transform: translate(calc(var(--dive-x) * 0.2451), calc(0.418em + var(--dive-y) * 0.2630)) rotate(0.9deg) scale(0.987, 0.987); }
  10.088% { opacity: 0.526; transform: translate(calc(var(--dive-x) * 0.2491), calc(0.357em + var(--dive-y) * 0.2821)) rotate(0.5deg) scale(1.002, 1.002); }
  10.186% { opacity: 0.568; transform: translate(calc(var(--dive-x) * 0.2523), calc(0.286em + var(--dive-y) * 0.3011)) rotate(0.1deg) scale(1.017, 1.017); }
  10.285% { opacity: 0.609; transform: translate(calc(var(--dive-x) * 0.2548), calc(0.214em + var(--dive-y) * 0.3201)) rotate(-0.2deg) scale(1.030, 1.030); }
  10.383% { opacity: 0.649; transform: translate(calc(var(--dive-x) * 0.2567), calc(0.148em + var(--dive-y) * 0.3398)) rotate(-0.4deg) scale(1.043, 1.043); }
  10.483% { opacity: 0.688; transform: translate(calc(var(--dive-x) * 0.2579), calc(0.092em + var(--dive-y) * 0.3603)) rotate(-0.5deg) scale(1.055, 1.055); }
  10.580% { opacity: 0.726; transform: translate(calc(var(--dive-x) * 0.2584), calc(0.049em + var(--dive-y) * 0.3805)) rotate(-0.4deg) scale(1.065, 1.065); }
  10.680% { opacity: 0.762; transform: translate(calc(var(--dive-x) * 0.2582), calc(0.021em + var(--dive-y) * 0.4015)) rotate(-0.2deg) scale(1.075, 1.075); }
  10.777% { opacity: 0.796; transform: translate(calc(var(--dive-x) * 0.2576), calc(0.006em + var(--dive-y) * 0.4219)) rotate(-0.1deg) scale(1.083, 1.083); }
  10.874% { opacity: 0.827; transform: translate(calc(var(--dive-x) * 0.2566), calc(0.000em + var(--dive-y) * 0.4429)) rotate(-0.0deg) scale(1.089, 1.089); }
  10.974% { opacity: 0.856; transform: translate(calc(var(--dive-x) * 0.2552), calc(0.000em + var(--dive-y) * 0.4644)) rotate(0.0deg) scale(1.095, 1.095); }
  11.071% { opacity: 0.882; transform: translate(calc(var(--dive-x) * 0.2536), calc(0.000em + var(--dive-y) * 0.4864)) rotate(0.0deg) scale(1.098, 1.098); }
  11.171% { opacity: 0.904; transform: translate(calc(var(--dive-x) * 0.2517), calc(0.000em + var(--dive-y) * 0.5087)) rotate(0.0deg) scale(1.100, 1.100); }
  11.268% { opacity: 0.924; transform: translate(calc(var(--dive-x) * 0.2499), calc(0.000em + var(--dive-y) * 0.5300)) rotate(0.0deg) scale(1.100, 1.100); }
  11.368% { opacity: 0.939; transform: translate(calc(var(--dive-x) * 0.2478), calc(0.000em + var(--dive-y) * 0.5529)) rotate(0.0deg) scale(1.100, 1.100); }
  11.465% { opacity: 0.951; transform: translate(calc(var(--dive-x) * 0.2458), calc(0.000em + var(--dive-y) * 0.5759)) rotate(0.0deg) scale(1.100, 1.100); }
  11.565% { opacity: 0.958; transform: translate(calc(var(--dive-x) * 0.2440), calc(0.000em + var(--dive-y) * 0.5978)) rotate(0.0deg) scale(1.100, 1.100); }
  11.662% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2422), calc(0.000em + var(--dive-y) * 0.6211)) rotate(0.0deg) scale(1.100, 1.100); }
  11.760% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2407), calc(0.000em + var(--dive-y) * 0.6445)) rotate(0.0deg) scale(1.100, 1.100); }
  11.859% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2394), calc(0.000em + var(--dive-y) * 0.6677)) rotate(0.0deg) scale(1.100, 1.100); }
  11.957% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2386), calc(0.000em + var(--dive-y) * 0.6922)) rotate(0.0deg) scale(1.100, 1.100); }
  12.056% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2382), calc(0.000em + var(--dive-y) * 0.7166)) rotate(0.0deg) scale(1.100, 1.100); }
  12.154% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2384), calc(0.000em + var(--dive-y) * 0.7407)) rotate(0.0deg) scale(1.100, 1.100); }
  12.253% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2393), calc(0.000em + var(--dive-y) * 0.7645)) rotate(0.0deg) scale(1.100, 1.100); }
  12.351% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2410), calc(0.000em + var(--dive-y) * 0.7892)) rotate(0.0deg) scale(1.100, 1.100); }
  12.450% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2437), calc(0.000em + var(--dive-y) * 0.8134)) rotate(0.0deg) scale(1.100, 1.100); }
  12.548% { opacity: 0.960; transform: translate(calc(var(--dive-x) * 0.2477), calc(0.000em + var(--dive-y) * 0.8382)) rotate(0.0deg) scale(1.100, 1.100); }
  12.645% { opacity: 0.961; transform: translate(calc(var(--dive-x) * 0.2529), calc(0.000em + var(--dive-y) * 0.8623)) rotate(0.0deg) scale(1.100, 1.100); }
  12.745% { opacity: 0.965; transform: translate(calc(var(--dive-x) * 0.2597), calc(0.000em + var(--dive-y) * 0.8867)) rotate(0.0deg) scale(1.100, 1.100); }
  12.842% { opacity: 0.970; transform: translate(calc(var(--dive-x) * 0.2677), calc(0.000em + var(--dive-y) * 0.9103)) rotate(0.2deg) scale(1.100, 1.100); }
  12.942% { opacity: 0.977; transform: translate(calc(var(--dive-x) * 0.2774), calc(0.000em + var(--dive-y) * 0.9340)) rotate(1.6deg) scale(1.100, 1.100); }
  13.039% { opacity: 0.983; transform: translate(calc(var(--dive-x) * 0.2883), calc(0.000em + var(--dive-y) * 0.9568)) rotate(5.4deg) scale(1.100, 1.100); }
  13.139% { opacity: 0.990; transform: translate(calc(var(--dive-x) * 0.3010), calc(0.000em + var(--dive-y) * 0.9794)) rotate(12.6deg) scale(1.100, 1.100); }
  13.236% { opacity: 0.995; transform: translate(calc(var(--dive-x) * 0.3153), calc(0.000em + var(--dive-y) * 1.0017)) rotate(24.4deg) scale(1.100, 1.100); }
  13.336% { opacity: 0.999; transform: translate(calc(var(--dive-x) * 0.3302), calc(0.000em + var(--dive-y) * 1.0218)) rotate(41.9deg) scale(1.100, 1.100); }
  13.433% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.3473), calc(0.000em + var(--dive-y) * 1.0423)) rotate(65.8deg) scale(1.100, 1.100); }
  13.531% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.3655), calc(0.000em + var(--dive-y) * 1.0612)) rotate(96.7deg) scale(1.100, 1.100); }
  13.630% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.3845), calc(0.000em + var(--dive-y) * 1.0785)) rotate(135.1deg) scale(1.100, 1.100); }
  13.728% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.4058), calc(0.000em + var(--dive-y) * 1.0953)) rotate(181.0deg) scale(1.100, 1.100); }
  13.827% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.4270), calc(0.000em + var(--dive-y) * 1.1096)) rotate(234.3deg) scale(1.100, 1.100); }
  13.925% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.4504), calc(0.000em + var(--dive-y) * 1.1229)) rotate(294.3deg) scale(1.100, 1.100); }
  14.024% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.4742), calc(0.000em + var(--dive-y) * 1.1340)) rotate(360.1deg) scale(1.100, 1.100); }
  14.122% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.4999), calc(0.000em + var(--dive-y) * 1.1433)) rotate(430.4deg) scale(1.100, 1.100); }
  14.221% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.5258), calc(0.000em + var(--dive-y) * 1.1501)) rotate(503.3deg) scale(1.100, 1.100); }
  14.319% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.5518), calc(0.000em + var(--dive-y) * 1.1545)) rotate(576.6deg) scale(1.100, 1.100); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.416% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.5787), calc(0.000em + var(--dive-y) * 1.1569)) rotate(647.3deg) scale(1.100, 1.100); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.516% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.6054), calc(0.000em + var(--dive-y) * 1.1573)) rotate(712.4deg) scale(1.100, 1.100); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.613% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.6319), calc(0.000em + var(--dive-y) * 1.1557)) rotate(767.7deg) scale(1.100, 1.100); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.713% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.6589), calc(0.000em + var(--dive-y) * 1.1524)) rotate(808.9deg) scale(1.099, 1.102); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.810% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.6854), calc(0.000em + var(--dive-y) * 1.1476)) rotate(830.9deg) scale(1.089, 1.122); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  14.910% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.7114), calc(0.000em + var(--dive-y) * 1.1415)) rotate(833.0deg) scale(1.072, 1.155); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  15.007% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.7374), calc(0.000em + var(--dive-y) * 1.1341)) rotate(833.0deg) scale(1.054, 1.191); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  15.107% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.7626), calc(0.000em + var(--dive-y) * 1.1258)) rotate(833.0deg) scale(1.040, 1.220); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  15.204% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.7847), calc(0.000em + var(--dive-y) * 1.1176)) rotate(833.0deg) scale(1.034, 1.232); clip-path: polygon(50% -300.0%, 400.0% 130.0%, -300.0% 130.0%); }
  15.302% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.8058), calc(0.000em + var(--dive-y) * 1.1090)) rotate(833.0deg) scale(1.023, 1.270); clip-path: polygon(50% -284.0%, 385.2% 128.6%, -285.2% 128.6%); }
  15.401% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.8255), calc(0.000em + var(--dive-y) * 1.1005)) rotate(833.0deg) scale(0.998, 1.353); clip-path: polygon(50% -242.7%, 346.8% 125.1%, -246.8% 125.1%); }
  15.499% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.8454), calc(0.000em + var(--dive-y) * 1.0912)) rotate(833.0deg) scale(0.962, 1.463); clip-path: polygon(50% -185.6%, 293.9% 120.2%, -193.9% 120.2%); }
  15.598% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.8653), calc(0.000em + var(--dive-y) * 1.0813)) rotate(833.0deg) scale(0.917, 1.577); clip-path: polygon(50% -122.8%, 235.6% 114.8%, -135.6% 114.8%); }
  15.696% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.8872), calc(0.000em + var(--dive-y) * 1.0697)) rotate(833.0deg) scale(0.863, 1.661); clip-path: polygon(50% -63.8%, 180.9% 109.8%, -80.9% 109.8%); }
  15.795% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.9109), calc(0.000em + var(--dive-y) * 1.0563)) rotate(833.0deg) scale(0.800, 1.658); clip-path: polygon(50% -18.5%, 138.9% 105.9%, -38.9% 105.9%); }
  15.893% { opacity: 1.000; transform: translate(calc(var(--dive-x) * 0.9371), calc(0.000em + var(--dive-y) * 1.0406)) rotate(833.0deg) scale(0.730, 1.485); clip-path: polygon(50% 3.3%, 118.6% 104.1%, -18.6% 104.1%); }
  15.992% { opacity: 0.583; transform: translate(calc(var(--dive-x) * 0.9667), calc(0.000em + var(--dive-y) * 1.0217)) rotate(833.0deg) scale(0.653, 1.017); clip-path: polygon(50% 4.0%, 118.0% 104.0%, -18.0% 104.0%); }
  16.090% { opacity: 0.000; transform: translate(calc(var(--dive-x) * 1.0000), calc(0.000em + var(--dive-y) * 1.0000)) rotate(833.0deg) scale(0.569, 0.085); clip-path: polygon(50% 4.0%, 118.0% 104.0%, -18.0% 104.0%); }
  16.140%, 100% { opacity: 0; transform: none; }
}
@keyframes haunt-face-loop { 0%, 14.230% { opacity: 1; } 14.407%, 16.090% { opacity: 0; } 16.140%, 100% { opacity: 1; } }
@keyframes haunt-facedown-loop { 0%, 14.230% { opacity: 0; } 14.407%, 16.090% { opacity: 1; } 16.140%, 100% { opacity: 0; } }
@media (max-width: 52em) {
  /* one "room" that scales as a unit. The TV body (not the drawing's box, which has room for the ghost) is centered:
     its middle sits 42% across the drawing. The lamp stands just past the ghost so its arm only reaches a little. */
  .hero-art { --tvw: min(26.45rem, calc((50% + 1rem) / 0.66 * 1.15)); --m: min(calc(50% - var(--tvw) * 0.4224 - 13px), calc(100% + 4px - var(--tvw) * 1.0347));
    justify-content: flex-start; padding-top: calc(var(--tvw) * 0.2); }
}
@media (min-width: 52.01em) {
  /* wide screens keep the original desktop proportions (TV centered in its column, a taller lamp standing behind
     its right side), but everything scales from the TV width so the lamp never runs off the screen at in-between widths.
     --g is the space between the column and the screen edge. */
  .hero-art { --g: max(1rem, (100vw - var(--wrap)) / 2);
    --tvw: min(100%, 30rem, calc((50% + var(--g) - 0.5rem) / 0.586)); --m: calc((100% - var(--tvw)) / 2); justify-content: flex-start; }
}
/* narrower desktops: the intro pennant's point stops short of the TV */
@media (min-width: 52.01em) and (max-width: 68em) { .lede-pennant { right: -1.2em; width: calc(100% + 3.1em); } }
/* Hero: even out the gap between "New-school code." and the lede (owner's nudge: line down 3px, lede up 1px) */
.hero-copy > .lede { margin-top: -7px; }
.hero-copy > .hero-tagline { margin-top: calc(4px + 8px); }

/* ==========================================================================
   Hero: spiderweb and spider
   ========================================================================== */

.corner-web {
  overflow: visible; color: var(--ink); position: absolute; top: 0; right: 0; width: clamp(8rem, 22vw, 15rem);
  height: auto; fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.85; pointer-events: none; z-index: 0;
}
/* on the wall behind the lamp; it comes first in the page, so the lamp draws over it */
/* Spider: drops from the corner web on its thread, hangs and bobs, then climbs back up.
   With reduced motion it simply hangs still. */
.spider-thread { stroke: currentColor; stroke-width: 1.5; transform-box: view-box; transform-origin: 169px 157px; animation: thread-drop 11s ease-in-out infinite; }
.spider { transform-box: view-box; animation: spider-drop 11s ease-in-out infinite; }
.spider-body { animation: spider-wiggle 1.1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes thread-drop {
  0%, 8% { transform: scaleY(0.02); }
  20% { transform: scaleY(1.06); }
  24% { transform: scaleY(0.97); }
  28%, 70% { transform: scaleY(1); }
  86%, 100% { transform: scaleY(0.02); }
}
@keyframes spider-drop {
  0%, 8% { transform: translateY(-106px); }
  20% { transform: translateY(7px); }
  24% { transform: translateY(-3px); }
  28%, 70% { transform: translateY(0); }
  86%, 100% { transform: translateY(-106px); }
}
@keyframes spider-wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }   
/* ---------- Opening: the spider spins its web, then drops; the ghost slides out from behind the set ---------- */
@media (prefers-reduced-motion: no-preference) {
  .web-strand { stroke-dasharray: 1; stroke-dashoffset: 1; animation: web-spin 0.45s ease-out var(--d) forwards; }
  .web-ring { animation-duration: 0.6s; }
  .spider, .spider-thread { animation-delay: 2.3s; animation-fill-mode: backwards; }
}
@keyframes web-spin { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) { .spider-body { animation: spider-wiggle 1.1s ease-in-out infinite alternate, spider-appear 0.35s ease-out 2.05s backwards; } }
@keyframes spider-appear { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .web-strand { stroke-linecap: butt; }
  .spider, .spider-thread { animation-duration: 12.1333s; }   /* three drops per TV loop */
  .spider-body { animation-duration: 1.3s, 0.35s; }
}
/* ---------- The TV "room" (TV, ghost, floor lamp, rug) scales as one unit at every width, so nothing drifts or runs off
   screen between phone and desktop sizes. Phones: spiderweb top-left, TV body centered, lamp just past the ghost. ---------- */
@media (max-width: 52em) {
  /* web in the top-left corner */
  .corner-web { right: auto; left: 0; transform: scaleX(-1); }
}
/* desktop: a second, smaller web (no spider) in the top-left corner, so the web on the left on phones isn't a surprise */
.corner-web--small { display: none; }
@media (min-width: 52.01em) { .corner-web--small { display: block; right: auto; left: 0; width: clamp(4.5rem, 9vw, 7rem); transform: scaleX(-1); z-index: 0; opacity: 0.7; } }
/* phones: the small web (no spider) fills the empty top-right corner, opposite the spider's web */
@media (max-width: 52em) { .corner-web--small { display: block; left: auto; right: 0; width: clamp(3rem, 11vw, 3.75rem); transform: none; z-index: 0; opacity: 0.7; } }
@media (max-width: 52em) and (prefers-reduced-motion: no-preference) { .corner-web--small .web-strand { animation-delay: calc(var(--d) + 0.35s); } }   /* spun a beat after the big web */

/* ==========================================================================
   Hero: the TV room (TV, ghost, lamp, rug)
   ========================================================================== */

.tv {
  width: min(100%, 30rem); height: auto; overflow: visible;
  filter: drop-shadow(6px 6px 0 rgba(34, 31, 27, 0.18)); position: relative; z-index: 1;
  margin-top: calc(var(--tvw) * -0.04211);
}
.tv-standby { font: 700 11px var(--font-mono); fill: var(--paper); letter-spacing: 0.12em; }
/* the test card: the whole little ghost floats above the PLEASE STAND BY bar, bobbing and waving, under a faint flicker of static */
.tv-wave-arm { transform-box: fill-box; transform-origin: 20% 90%; }
.tv-ghost-bob { transform-box: fill-box; }
.tv-static line { stroke: #fff; stroke-width: 1.2; opacity: .18; }
@media (prefers-reduced-motion: no-preference) {
  .tv-wave-arm { animation: tv-wave 0.5s ease-in-out infinite alternate; }
  .tv-ghost-bob { animation: tv-ghost-bob 1.6s ease-in-out infinite alternate; }
  .tv-static { animation: tv-static 0.24s steps(2) infinite; }
}
@keyframes tv-wave { from { transform: rotate(-18deg); } to { transform: rotate(16deg); } }
@keyframes tv-ghost-bob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
@keyframes tv-static { from { transform: translateY(0); } to { transform: translateY(5px); } }
.tv-scan { animation: flicker 3.2s steps(1) infinite; }
.ghost, .knob { transform-box: view-box; }
.ghost { animation: peek 6s ease-in-out infinite; transform-origin: 323px 236px; animation-duration: 5.2s; animation-delay: 0.09s; }
.knob { transform-origin: 255px 128px; }
.uhf-knob { transform-box: view-box; transform-origin: 255px 180px; }
.tv:hover .knob { transform: rotate(40deg); transition: transform 0.4s ease; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 0.55; }
  48% { opacity: 1; }
  82% { opacity: 0.75; }
  83% { opacity: 1; }
}
@keyframes peek {
  0%, 100% { transform: translateX(0) rotate(0); }
  45%, 60% { transform: translateX(10px) rotate(6deg); }
}
@media (max-width: 52em) { .tv { width: min(100%, 22rem); } }
/* ---------- TV screen layers: static noise and picture tear for the glitch channel ----------
   The channel timing itself is in "TV channel loop" further down. Reduced motion: the global rule
   stops all animation, leaving the color bars showing. */
.tv-circle, .tv-glitch { opacity: 0; }
.tv-bars, .tv-circle, .tv-glitch { transform-box: view-box; transform-origin: 130px 173px; }
@media (prefers-reduced-motion: no-preference) {
  .tv-noise { animation: tv-noise 0.14s steps(1) infinite; }
  .tv-tear { animation: tv-tear 0.22s steps(1) infinite; }
}
@keyframes tv-noise { 0% { transform: translate(0, 0); } 33% { transform: translate(-7px, 3px); } 66% { transform: translate(5px, -4px); } }
@keyframes tv-tear { 0% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
/* Hero TV, slight 3D: ghost origin follows its shifted position */
/* Tagline: a title card on the hero TV (bars, stand by, tagline), a line above the hero buttons, and the footer */
.tv-title { opacity: 0; transform-box: view-box; transform-origin: 130px 173px; }
@media (prefers-reduced-motion: no-preference) { .tv-title { animation: tv-title 14s steps(1) infinite; } }
.tv-tag { font: 700 13px var(--font-mono); fill: var(--paper); letter-spacing: 0.06em; }
.tv-tag-sm { font-size: 11.5px; fill: #e8c547; }
/* the TV room: a braided rug under the set and a floor lamp beside the ghost. Their sizes and places are set
   with the TV's own width further down ("The TV room scales as one unit"), so they stay in step at every width. */
.room-rug {
  position: absolute; z-index: 0; bottom: -2.3rem; height: auto; translate: -2px -2px; filter: saturate(.85);
  transform-origin: 50% 50%; transition: transform 0.8s cubic-bezier(.2, .9, .3, 1.15), opacity 0.2s;
}   /* toned down so it doesn't compete with the TV */
.floor-lamp { position: absolute; z-index: 0; display: block; height: auto; overflow: visible; }   /* the spider dangles in front of the lamp shade */

/* ---------- Room intro: the ghost pulls the lamp chain, the lamp clicks on and the rug unrolls ----------
   Runs once per visit. No script, reduced motion or a repeat visit: the finished room shows right away. */
.ghost-arm { opacity: 0; transition: opacity 0.15s; }
.arm-ink, .arm-fill { fill: none; stroke-linecap: round; }
.arm-ink { stroke: var(--ink); stroke-width: 15; }
.arm-fill { stroke: var(--ghost); stroke-width: 7; }
.arm-hand { fill: var(--ghost); stroke: var(--ink); stroke-width: 4; }
.room-intro .room-rug { transform: scaleX(0); opacity: 0; }
.room-intro .lamp-body { opacity: 0; }
.room-intro .lamp-chain { opacity: 0; transform: translateY(-40px); }
.lamp-body { transition: opacity 0.35s ease-out; }
.lamp-chain { transition: transform 0.55s cubic-bezier(.3, 1.6, .5, 1), opacity 0.2s; }
.lamp-chain.is-tug { transform: translateY(7px); transition-duration: 0.18s; }
.room-glow .lamp-body { animation: lamp-on 0.7s ease-out; }
@keyframes lamp-on { 0% { filter: brightness(1.6) drop-shadow(0 0 0 #fbe39b); } 40% { filter: brightness(1.35) drop-shadow(0 0 14px #fbe39b); } 100% { filter: none; } }
.room-intro.chain-in .lamp-chain { opacity: 1; transform: none; }
.room-intro.chain-in .lamp-chain.is-tug { transform: translateY(7px); }
.ghost-arm path { transition: stroke-dashoffset 0.3s ease-out; }
/* the chain comes in one link at a time, top to bottom */
.room-intro .lamp-chain, .room-intro.chain-in .lamp-chain { opacity: 1; transform: none; }
.room-intro .lamp-chain circle, .room-intro .lamp-chain .chain-pull { opacity: 0; }
.room-intro.chain-in .lamp-chain circle, .room-intro.chain-in .lamp-chain .chain-pull { opacity: 1; transition: opacity 0.05s linear calc(var(--i) * 22ms); }
/* lights off: the chain leaves bottom link first */
.room-intro.chain-out .lamp-chain circle, .room-intro.chain-out .lamp-chain .chain-pull { opacity: 0; transition: opacity 0.05s linear calc((23 - var(--i)) * 22ms); }
.motion-toggle {
  display: inline-flex; align-items: center; gap: 0.4em; flex: none;
  font: 700 0.8125rem var(--font-body); letter-spacing: 0.02em; color: var(--ink);
  min-height: 2.75rem; padding: 0.3rem 0.8rem; background: var(--white-warm); border: 2px solid var(--ink); border-radius: 999px; cursor: pointer;   /* 44px tall: the WCAG AAA tap size */
}
.motion-toggle:hover, .motion-toggle:active { background: #fbe39b; }
.motion-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.mt-icon { width: 0.8em; height: 0.8em; }
.mt-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }   /* drawn pause bars and play triangle, centered on the label (text symbols sat off-center) */
@media (max-width: 52em) { .motion-wrap .motion-toggle { order: -1; } }
/* the button keeps one size: both labels share a grid cell and the hidden one still holds its space */
.mt-icon, .mt-label { display: inline-grid; }
.mt-icon > *, .mt-label > * { grid-area: 1 / 1; }
.motion-toggle .mt-b, .motion-toggle.is-paused .mt-a, .motion-mini .mt-b, .motion-mini.is-paused .mt-a { visibility: hidden; }
.motion-toggle.is-paused .mt-b, .motion-mini.is-paused .mt-b { visibility: visible; }
/* the trail stays level behind the star; only the star itself spins */

/* ---------- TV channel loop (46.8s, nine of the ghost's 5.2s peeks) ----------
   Bars, glitch, stand by, glitch, tagline, glitch, then the PSA a card at a time, a comet sign-off
   and back to bars. Each channel and PSA card is its own layer that steps on and off on cue,
   and the channel knob clicks round at every change. */
.tv-psa { opacity: 0; transform-box: view-box; transform-origin: 130px 173px; }
.psa-c2, .psa-c3, .psa-c4 { opacity: 0; }   /* without motion the PSA shows its first card */
@media (prefers-reduced-motion: no-preference) {
  .tv-bars { animation: tv-bars 46.8s steps(1) infinite; }
  .tv-circle { animation: tv-circle 46.8s steps(1) infinite; }
  .tv-glitch { animation: tv-glitch 46.8s steps(1) infinite; }
  .tv-title { animation: tv-title 46.8s steps(1) infinite; }
  .tv-psa { animation: tv-psa 46.8s steps(1) infinite; }
  .psa-c1 { animation: psa-c1 46.8s steps(1) infinite; }
  .psa-c2 { animation: psa-c2 46.8s steps(1) infinite; }
  .psa-c3 { animation: psa-c3 46.8s steps(1) infinite; }
  .psa-c4 { animation: psa-c4 46.8s steps(1) infinite; }
  .knob { animation: knob-click 46.8s ease-out infinite; }   /* clicks with a little overshoot, back to channel 2 for the bars */
  .uhf-knob { animation: uhf-twitch 46.8s ease-in-out infinite; }   /* twitches on its own as the small ghost goes in */
}
/* PSA lettering */
.tv-psa-head { font: 700 9px var(--font-mono); fill: #141210; letter-spacing: 0.02em; }
.tv-psa-line { font: 700 10.5px var(--font-mono); fill: var(--paper); letter-spacing: 0.03em; }
.tv-psa-gold { fill: #e8c547; }
.tv-psa-ring { font: 800 6px var(--font-body); fill: #e8c547; letter-spacing: 0.08em; }   /* the tiny lettering around the round button drawn on the TV */
/* card 3 is read along with, one thing at a time (about 2s each, a short pause between): "ABOVE" grows and turns gold, then the round
   button drawn under it grows, then "BELOW", then the pill under that.
   Each pulsing word is a copy of its whole line (the rest of the line invisible), so it lines up exactly at any text
   size; the plain word underneath is hidden while the copy pulses. The scale centers are the middle of each word. */
.psa-big { opacity: 0; transform-box: view-box; }
.psa-mini-in, .psa-pill { transform-box: view-box; transform-origin: 0 0; }   /* each sits in a group whose 0,0 is its center */
.psa-above-big { transform-origin: 177.5px 154.2px; }
.psa-below-big { transform-origin: 157.15px 208.7px; }
@media (prefers-reduced-motion: no-preference) {
  .psa-above-big { animation: psa-above 46.8s ease-in-out infinite; }
  .psa-below-big { animation: psa-below 46.8s ease-in-out infinite; }
  .psa-above { animation: psa-above-hide 46.8s linear infinite; }
  .psa-below { animation: psa-below-hide 46.8s linear infinite; }
  .psa-mini-in { animation: psa-mini 46.8s ease-in-out infinite; }
  .psa-pill { animation: psa-pill 46.8s ease-in-out infinite; }
}
@keyframes psa-above {   /* 27.47s to 29.47s of the loop, about 1.4s after card 3 comes on */
  0%, 58.697% { opacity: 0; transform: none; fill: var(--paper); }
  58.698% { opacity: 1; transform: none; fill: var(--paper); }
  59.338%, 62.329% { opacity: 1; transform: scale(1.25); fill: #e8c547; }
  62.969% { opacity: 1; transform: none; fill: var(--paper); }
  62.97%, 100% { opacity: 0; transform: none; fill: var(--paper); }
}
@keyframes psa-mini { 0%, 63.718% { transform: none; } 64.359%, 67.35% { transform: scale(1.2); } 67.991%, 100% { transform: none; } }   /* 29.82s to 31.82s */
@keyframes psa-below {   /* 32.27s to 34.27s */
  0%, 68.953% { opacity: 0; transform: none; fill: var(--paper); }
  68.954% { opacity: 1; transform: none; fill: var(--paper); }
  69.594%, 72.585% { opacity: 1; transform: scale(1.25); fill: #e8c547; }
  73.225% { opacity: 1; transform: none; fill: var(--paper); }
  73.226%, 100% { opacity: 0; transform: none; fill: var(--paper); }
}
@keyframes psa-pill { 0%, 73.974% { transform: none; } 74.615%, 77.607% { transform: scale(1.15); } 78.248%, 100% { transform: none; } }   /* 34.62s to 36.62s */
@keyframes psa-above-hide { 0%, 58.697% { fill-opacity: 1; } 58.698%, 62.969% { fill-opacity: 0; } 62.97%, 100% { fill-opacity: 1; } }
@keyframes psa-below-hide { 0%, 68.953% { fill-opacity: 1; } 68.954%, 73.225% { fill-opacity: 0; } 73.226%, 100% { fill-opacity: 1; } }
.tv-psa-good { font: italic 700 15px var(--font-body); fill: #f6a98e; clip-path: inset(0 100% 0 0);
  paint-order: stroke; stroke: #141210; stroke-width: 3px; }   /* a dark edge keeps the words crisp over the comet's tail */
@media (prefers-reduced-motion: no-preference) {
  .tv-psa-good { animation: none; clip-path: none; }   /* the comet sign-off below brings these words in */
}
@keyframes tv-bars {
  0% { opacity: 1; transform: none; }
  16.24% { opacity: 1; transform: translateX(5px) skewX(-8deg); }
  16.536% { opacity: 1; transform: translateX(-4px); }
  16.839% { opacity: 0; }
  93.159% { opacity: 1; transform: translateX(-6px) skewX(6deg); }
  93.463% { opacity: 1; transform: none; }
}
@keyframes tv-glitch {
  0% { opacity: 0; }
  16.092% { opacity: 1; } 17.586% { opacity: 0; }
  27.689% { opacity: 1; } 28.591% { opacity: 0; }
  35.65% { opacity: 1; } 37.143% { opacity: 0; }
  92.522% { opacity: 1; } 93.587% { opacity: 0; }
}
@keyframes tv-circle {
  0% { opacity: 0; }
  17.29% { opacity: 1; transform: translateX(6px) skewX(7deg); }
  17.586% { opacity: 1; transform: none; }
  27.844% { opacity: 1; transform: translateX(-5px) skewX(-6deg); }
  28.14% { opacity: 0; }
}
@keyframes tv-title {
  0% { opacity: 0; }
  28.288% { opacity: 1; transform: translateX(6px) skewX(7deg); }
  28.591% { opacity: 1; transform: none; }
  35.798% { opacity: 1; transform: translateX(-5px) skewX(-6deg); }
  36.093% { opacity: 0; }
}
@keyframes tv-psa {
  0% { opacity: 0; }
  36.996% { opacity: 1; transform: translateX(6px) skewX(7deg); }
  37.291% { opacity: 1; transform: none; }
  92.732% { opacity: 1; transform: translateX(-5px) skewX(-6deg); }
  93.035% { opacity: 0; }
}
/* the PSA starts at 37.3% (the tagline before it is about 3.4s); cards 1 and 2 about 4.3s each, card 3 (the two
   off switches) about 11.4s since there's the most to take in; the comet sign-off gets the last card to itself */
@keyframes psa-c1 { 0% { opacity: 1; } 46.5% { opacity: 0; } }
@keyframes psa-c2 { 0% { opacity: 0; } 46.5% { opacity: 1; } 55.7% { opacity: 0; } }
@keyframes psa-c3 { 0% { opacity: 0; } 55.7% { opacity: 1; } 80% { opacity: 0; } }
@keyframes psa-c4 { 0% { opacity: 0; } 80% { opacity: 1; } 93.035% { opacity: 0; } }
@keyframes uhf-twitch {   /* the fine-tuning knob jerks back and forth when the small ghost possesses the set (7.5s), then settles */
  0%, 16.0% { transform: rotate(0); }
  16.35% { transform: rotate(-24deg); }  16.7% { transform: rotate(16deg); }  17.05% { transform: rotate(-8deg); }
  17.4% { transform: rotate(3deg); }  17.7%, 100% { transform: rotate(0); }
}
@keyframes knob-click {   /* one VHF click per channel: 2, 3, 4, 5, then back round to 2 */
  0%, 16.022% { transform: rotate(0); }
  16.668% { transform: rotate(34.7deg); }  16.987%, 27.627% { transform: rotate(27.7deg); }
  28.272% { transform: rotate(62.4deg); }  28.591%, 35.58% { transform: rotate(55.4deg); }
  36.226% { transform: rotate(90.1deg); }  36.544%, 92.459% { transform: rotate(83.1deg); }
  93.268% { transform: rotate(-7deg); }  93.587%, 100% { transform: rotate(0); }
}
/* ---------- Comet sign-off, modeled on the classic TV spot ----------
   A striped comet streaks up a diagonal and stops; the words sit along the top of its tail.
   Then they part: the words slide up and away to the left while the star grows toward you,
   swings to the middle of the screen and blooms into a soft flash. Static (no motion): the resting comet. */
.cmt-star { transform: translate(192px, 210px); }
.cmt-starbody { transform-box: fill-box; transform-origin: center; }
.cmt-flash { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cmt-trail, .cmt-words { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .cmt-trail { animation: cmt-trail 46.8s linear infinite; }
  .cmt-words { animation: cmt-words 46.8s linear infinite; }
  .cmt-star { animation: cmt-star 46.8s linear infinite; }
  .cmt-starbody { animation: cmt-spin 46.8s linear infinite; }
  .cmt-flash { animation: cmt-flash 46.8s linear infinite; }
}
/* tail draws in behind the star as it streaks up the diagonal */
@keyframes cmt-trail {
  0%, 76.281% { clip-path: inset(0 100% 0 0); opacity: 1; }
  78.42% { clip-path: inset(0 0 0 0); opacity: 1; }
  88.462% { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
  90.383% { clip-path: inset(0 0 0 0); opacity: 0; transform: translate(-30px, -14px); }
  100% { opacity: 0; }
}
/* the words ride in on the tail, hold for reading, then slide up and off to the left */
@keyframes cmt-words {
  0%, 70.939% { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; }
  78.63% { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
  88.462% { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
  90.383% { clip-path: inset(0 0 0 0); opacity: 0; transform: translate(-70px, -48px); }
  100% { opacity: 0; }
}
/* star: up the diagonal, rests (twinkling), then grows toward you into the center and blooms */
@keyframes cmt-star {
  0%, 76.172% { opacity: 0; transform: translate(10px, 255px) scale(.6); }
  76.39% { opacity: 1; transform: translate(14px, 254px) scale(.65); }
  78.42% { opacity: 1; transform: translate(192px, 210px) scale(1); }
  82.052% { opacity: 1; transform: translate(192px, 210px) scale(1.12); }
  88.462% { opacity: 1; transform: translate(192px, 210px) scale(1); }
  89.745% { opacity: 1; transform: translate(170px, 192px) scale(2.2); }
  90.81% { opacity: 1; transform: translate(140px, 176px) scale(4.2); }
  91.456% { opacity: 0; transform: translate(132px, 173px) scale(6); }
  100% { opacity: 0; transform: translate(132px, 173px) scale(6); }
}
@keyframes cmt-spin { 0%, 84.42% { transform: rotate(0); } 88.462% { transform: rotate(40deg); } 91.456% { transform: rotate(150deg); } 100% { transform: rotate(150deg); } }
@keyframes cmt-flash {
  0%, 90.383% { opacity: 0; transform: scale(.4); }
  91.129% { opacity: 1; transform: scale(1); }
  92.522% { opacity: 0; transform: scale(1.05); }
  100% { opacity: 0; }
}
.tv-psa-btn { font-size: 8.6px; letter-spacing: 0.04em; }   /* baseline at 229 centers the caps (ink 6.1 tall) in the pill (217 to 235) */
/* each real button lights up while its drawing on the TV is highlighted, so the link is unmistakable */
@media (prefers-reduced-motion: no-preference) {
  .motion-toggle { animation: psa-cue 46.8s linear infinite; }
  .motion-mini:not(.is-paused) .mm-disc { animation: psa-cue-disc 46.8s linear infinite; }   /* the round header button lights up too */
}
@keyframes psa-cue {
  0%, 73.974% { box-shadow: 0 0 0 0 rgba(232, 197, 71, 0); background: var(--white-warm); }
  74.615% { box-shadow: 0 0 0 5px rgba(232, 197, 71, .9); background: #fbe39b; }
  76.111% { box-shadow: 0 0 0 2px rgba(232, 197, 71, .9); background: #fbe39b; }
  77.607% { box-shadow: 0 0 0 5px rgba(232, 197, 71, .9); background: #fbe39b; }
  78.248%, 100% { box-shadow: 0 0 0 0 rgba(232, 197, 71, 0); background: var(--white-warm); }
}
@keyframes psa-cue-disc {
  0%, 63.718% { fill: var(--paper); }
  64.359%, 67.35% { fill: #fbe39b; }
  67.991%, 100% { fill: var(--paper); }
}
/* the ghost peeks nine times per 46.8s TV loop, so its tugs on the lamp chain line up with the TV */
/* ---------- Hero entrance, once on load (all settled by about 2.6s, before the spider drops) ----------
   The text rises into place in a quick cascade, the set drops in with a little bounce, its antenna springs up,
   and the screen powers on like an old tube: a bright line, then the picture. The headline only moves (never
   fades), so it paints right away. */
.crt-on { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .tv { animation: tv-drop 0.8s cubic-bezier(.3, 1.35, .5, 1) 0.1s backwards; }
  .tv-antenna { transform-box: view-box; transform-origin: 156.5px 72px; animation: antenna-spring 0.9s ease-out 0.75s backwards; }
  .crt-on { animation: crt-off 0.55s linear 1.1s backwards; }
  .crt-beam { transform-box: fill-box; transform-origin: center; animation: crt-beam 0.55s ease-out 1.1s backwards; }
}
@keyframes tv-drop { from { opacity: 0; transform: translateY(-36px); } 60% { opacity: 1; } }
@keyframes antenna-spring { 0% { transform: scaleY(.15); } 45% { transform: scaleY(1.12) rotate(-4deg); } 70% { transform: scaleY(.96) rotate(3deg); } 100% { transform: none; } }
@keyframes crt-off { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crt-beam { 0% { transform: scale(0, .5); opacity: 1; } 35% { transform: scale(1, .5); opacity: 1; } 75% { transform: scale(1, 40); opacity: .9; } 100% { transform: scale(1, 40); opacity: 0; } }
.sing-ball .sb { fill: #e8c547; opacity: 0; transform-box: view-box; }
.sing-ball .sb0 { stroke: #141210; stroke-width: 1; paint-order: stroke; }
@media (prefers-reduced-motion: no-preference) {
  .cmt-words { animation-name: cmt-words-sing; }
  .cmt-trail { animation-name: cmt-trail-sing; }
  .cmt-star { animation-name: cmt-star-sing; }
  .gk1 { animation: gk1 46.8s linear infinite; }
  .gk2 { animation: gk2 46.8s linear infinite; }
  .gk3 { animation: gk3 46.8s linear infinite; }
  .gk4 { animation: gk4 46.8s linear infinite; }
  .sing-ball .sb { animation: sing-ball 46.8s linear infinite; }
  .sing-ball .sb1 { animation-name: sing-tail1; animation-delay: 0.05s; }
  .sing-ball .sb2 { animation-name: sing-tail2; animation-delay: 0.1s; }
  .sing-ball .sb3 { animation-name: sing-tail3; animation-delay: 0.15s; }
}
@keyframes cmt-trail-sing {
  0%, 80.049% { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; }
  82.304% { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
  90.593% { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
  91.993%, 100% { clip-path: inset(0 0 0 0); opacity: 0; transform: translate(-30px, -14px); }
}
@keyframes cmt-words-sing { 0%, 90.593% { opacity: 1; transform: none; } 91.993%, 100% { opacity: 0; transform: translate(-40px, -28px); } }
/* each word pops in as the ball lands on it */
@keyframes gk1 { 0%, 82.46% { opacity: 0; transform: translateY(1.5px) scale(.94); } 83.471%, 93.393% { opacity: 1; transform: none; } 93.4%, 100% { opacity: 0; } }
@keyframes gk2 { 0%, 83.549% { opacity: 0; transform: translateY(1.5px) scale(.94); } 84.56%, 93.393% { opacity: 1; transform: none; } 93.4%, 100% { opacity: 0; } }
@keyframes gk3 { 0%, 84.715% { opacity: 0; transform: translateY(1.5px) scale(.94); } 85.726%, 93.393% { opacity: 1; transform: none; } 93.4%, 100% { opacity: 0; } }
@keyframes gk4 { 0%, 86.504% { opacity: 0; transform: translateY(1.5px) scale(.94); } 87.593%, 93.393% { opacity: 1; transform: none; } 93.4%, 100% { opacity: 0; } }
/* the ball: lands on That's, good, to, then a long high hang before know, a little settle bounce, then fades */
@keyframes sing-ball {
  0%, 82.304% { opacity: 0; transform: translate(71.8px, 176.6px); }
  82.849% { opacity: 1; transform: translate(71.8px, 184.6px); animation-timing-function: ease-out; }
  83.393% { transform: translate(92.5px, 177.6px); animation-timing-function: ease-in; }
  83.938% { transform: translate(113.3px, 184.6px); animation-timing-function: ease-out; }
  84.521% { transform: translate(128.3px, 178.6px); animation-timing-function: ease-in; }
  85.104% { transform: translate(143.3px, 184.6px); animation-timing-function: ease-out; }
  85.999% { transform: translate(158.3px, 175.6px); animation-timing-function: ease-in; }
  86.893% { transform: translate(173.3px, 184.6px); animation-timing-function: ease-out; }
  87.36% { transform: translate(173.3px, 179.6px); animation-timing-function: ease-in; }
  87.826% { opacity: 1; transform: translate(173.3px, 184.6px); }
  88.838%, 100% { opacity: 0; transform: translate(173.3px, 184.6px); }
}
@keyframes sing-tail1 { 0%, 82.304% { opacity: 0; transform: translate(71.8px, 176.6px); } 82.849% { opacity: .55; transform: translate(71.8px, 184.6px); animation-timing-function: ease-out; } 83.393% { transform: translate(92.5px, 177.6px); animation-timing-function: ease-in; } 83.938% { transform: translate(113.3px, 184.6px); animation-timing-function: ease-out; } 84.521% { transform: translate(128.3px, 178.6px); animation-timing-function: ease-in; } 85.104% { transform: translate(143.3px, 184.6px); animation-timing-function: ease-out; } 85.999% { transform: translate(158.3px, 175.6px); animation-timing-function: ease-in; } 86.893% { opacity: .55; transform: translate(173.3px, 184.6px); } 87.438%, 100% { opacity: 0; transform: translate(173.3px, 184.6px); } }
@keyframes sing-tail2 { 0%, 82.304% { opacity: 0; transform: translate(71.8px, 176.6px); } 82.849% { opacity: .32; transform: translate(71.8px, 184.6px); animation-timing-function: ease-out; } 83.393% { transform: translate(92.5px, 177.6px); animation-timing-function: ease-in; } 83.938% { transform: translate(113.3px, 184.6px); animation-timing-function: ease-out; } 84.521% { transform: translate(128.3px, 178.6px); animation-timing-function: ease-in; } 85.104% { transform: translate(143.3px, 184.6px); animation-timing-function: ease-out; } 85.999% { transform: translate(158.3px, 175.6px); animation-timing-function: ease-in; } 86.893% { opacity: .32; transform: translate(173.3px, 184.6px); } 87.438%, 100% { opacity: 0; transform: translate(173.3px, 184.6px); } }
@keyframes sing-tail3 { 0%, 82.304% { opacity: 0; transform: translate(71.8px, 176.6px); } 82.849% { opacity: .16; transform: translate(71.8px, 184.6px); animation-timing-function: ease-out; } 83.393% { transform: translate(92.5px, 177.6px); animation-timing-function: ease-in; } 83.938% { transform: translate(113.3px, 184.6px); animation-timing-function: ease-out; } 84.521% { transform: translate(128.3px, 178.6px); animation-timing-function: ease-in; } 85.104% { transform: translate(143.3px, 184.6px); animation-timing-function: ease-out; } 85.999% { transform: translate(158.3px, 175.6px); animation-timing-function: ease-in; } 86.893% { opacity: .16; transform: translate(173.3px, 184.6px); } 87.438%, 100% { opacity: 0; transform: translate(173.3px, 184.6px); } }
/* the comet arrives once card 3 is done at 80% (its rest before the bloom is short, about 0.05s after "know"); its star flashes as "know" lands, then
   grows into the bloom. The comet is drawn 30 units higher than at first, so its last stops are 30 lower to end in the middle. */
@keyframes cmt-star-sing {
  0%, 80.049% { opacity: 0; transform: translate(10px, 255px) scale(.6); }
  80.282% { opacity: 1; transform: translate(14px, 254px) scale(.65); }
  82.304%, 86.738% { opacity: 1; transform: translate(192px, 210px) scale(1); }
  87.204% { opacity: 1; transform: translate(192px, 210px) scale(1.4); }
  88.371%, 88.462% { opacity: 1; transform: translate(192px, 210px) scale(1); }
  89.745% { opacity: 1; transform: translate(170px, 222px) scale(2.2); }
  90.81% { opacity: 1; transform: translate(140px, 206px) scale(4.2); }
  91.456%, 100% { opacity: 0; transform: translate(132px, 203px) scale(6); }
}
/* ---------- One shared beat: small loops follow the ghost's 5.2s peek (seven per TV loop) ---------- */
@media (prefers-reduced-motion: no-preference) { .tv-scan { animation-duration: 5.2s; } }
@media (max-width: 52em) {
  /* bigger pause button for thumbs */
  .motion-toggle { font-size: 0.95rem; padding: 0.55rem 1.1rem; }
}
/* ---------- The ghost story, one 46.8s cycle that replays exactly, in step with the TV ----------
   0s: color bars, room dark, the big ghost hidden behind the TV. 3.1s to 7.5s: the small ghost dives into the
   screen and possesses it, so the channel changes to "Please stand by", where he waves from inside the screen.
   13s: as the screen goes to static between channels, the big ghost slides out from behind the set (only one
   ghost is ever on screen); 18.0s: he pulls the lamp chain and the room lights up (script.js). He stays out through the
   tagline, the PSA and "That's good to know", turns the lamp off at 44s, slips back behind the TV, and it all
   starts again. ---------- */
@media (prefers-reduced-motion: no-preference) { .ghost-enter { animation: ghost-away 46.8s ease-in-out infinite; } }
@keyframes ghost-away {
  0%, 27.7% { transform: translateX(-78px); }     /* hidden until 13s, while he's waving inside the TV */
  30.05%, 96.154% { transform: none; }             /* slides out through the static as the channel changes, out by 14.1s, until 45s */
  98.718%, 100% { transform: translateX(-78px); }  /* back behind the TV by 46.2s */
}
/* the TV words ease in softly (about half a second each) instead of popping */
.gk1, .gk2, .gk3, .gk4 { animation-timing-function: ease-out; }
@media (max-width: 52em) {
  .tv { width: var(--tvw); margin-left: var(--m); }
  /* the rug is centered on the screen under the whole scene (an even 8px from each edge on phones), and the lamp is
     placed from the rug's own size so its base always stands on the rug's right side, whatever the width */
  .hero-art { --rugw: min(calc(100vw - 16px), calc(var(--tvw) * 1.3)); --rugb: calc(var(--tvw) * -0.06 - 10px); --lampw: calc(var(--tvw) * 0.31); }
  .floor-lamp { width: var(--lampw); aspect-ratio: 120 / 399; left: calc(50% + var(--rugw) * 0.37 - var(--lampw) / 2); bottom: calc(var(--rugb) + var(--rugw) * 0.1108 - var(--lampw) * 0.0917); }
  /* the lamp is smaller here (its base stays on the rug), so a shorter chain keeps the pull above the ghost's head */
  .lamp-chain circle:nth-child(n+17) { display: none; }
  .lamp-chain .chain-pull { transform: translateY(-45px); }
  .lamp-chain > g { transform: translate(20px, 7.68px); }   /* toward the shade's right side, just past the ghost's shoulder */
  .room-rug { left: calc(50% - var(--rugw) / 2); width: var(--rugw); bottom: var(--rugb); translate: 0 -2px; }
  /* bigger lettering on the TV screen so it can be read on a phone */
  .tv-standby { font-size: 13px; }
  .tv-tag { font-size: 14.5px; }
  .tv-psa-line { font-size: 11px; letter-spacing: 0.01em; }
  .tv-tag-sm { font-size: 12px; letter-spacing: 0.01em; }   /* stays inside the gold frame */
  .tv-psa-btn { font-size: 10px; letter-spacing: 0.01em; transform: translateY(0.5px); }   /* bigger caps sit higher; keeps the label centered in the pill */
  .tv-psa-head { font-size: 9px; }
}
@media (min-width: 35.01em) and (max-width: 52em) { .lamp-chain > g { transform: translate(13px, 7.68px); } }   /* wider phones and tablets: the rug stops growing, so less shift */
@media (min-width: 52.01em) {
  .tv { width: var(--tvw); margin-left: var(--m); }
  /* rug and lamp both scale with the TV, so the lamp's base stays on the rug's right side at every width */
  .room-rug { left: calc(var(--m) - var(--tvw) * 0.056); width: calc(var(--tvw) * 1.1); bottom: calc(var(--tvw) * -0.0786); }
  .floor-lamp { left: calc(var(--m) + var(--tvw) * 0.7344); width: calc(var(--tvw) * 0.338); bottom: calc(var(--tvw) * 0.0356); }
  .lamp-chain > g { transform: translate(4.8px, 9.68px); }   /* keeps the pull where it hung before the lamp moved onto the rug */
  .floor-lamp { aspect-ratio: 120 / 410; }   /* about two chain links shorter than drawn (120 x 420) */
  .lamp-chain circle:nth-child(n+22) { display: none; }
  .lamp-chain .chain-pull { transform: translateY(-10px); }
  .corner-web:not(.corner-web--small) { width: clamp(7rem, 15vw, 12rem); }   /* smaller, so it stays clear of the lamp shade */
}
/* TV: 16 units of headroom in the drawing so the antenna balls stay inside it while the antenna springs up
   (the drop shadow made Chrome clip anything outside the drawing mid-animation); pulled up the same amount so nothing moves */

/* ==========================================================================
   Services
   ========================================================================== */

/* Services: channel cards */
.channel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.5rem; list-style: none; padding: 0; margin: 2rem 0 0;
}
.channel {
  position: relative; background: var(--paper); padding: 3.475rem 1.5rem 1.5rem; border: 3px solid var(--ink);   /* top: the same space under the channel circle as between the heading and its text */
  border-radius: var(--radius); box-shadow: var(--shadow); background-color: var(--white-warm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.channel-num {
  position: absolute; top: -1.1rem; left: 1.25rem; display: grid; place-items: center; width: 3.6rem;
  height: 3.6rem; font: 700 0.85rem var(--font-mono); border: 3px solid var(--ink); border-radius: 50%;
  background: var(--teal) !important; color: var(--ink) !important; font-size: 0.9rem;
}
.channel h3 { font-size: 1.2rem; }
.channel p { margin: 0; color: var(--ink-soft); }
/* Free site check band */
.site-check {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: 3rem; padding: 1.75rem; border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow); background: #f6e6b8;
}
.site-check > div { flex: 1 1 26rem; }
.site-check h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; }
.site-check p { margin: 0; }
.fine-print { margin-top: 1rem; font-size: 0.95rem; color: var(--muted); font-style: italic; }
/* ---------- Marquee sign (free site check) and Puget Sound badge (footer) ---------- */

.site-check--sign { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 2rem; }
.site-check--sign > div { flex: initial; }
.marquee-sign { width: 100%; height: auto; overflow: visible; }
.bulb { fill: #ebbd4e; stroke: #fff3c4; stroke-width: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .bulb.b0 { animation: chase 1.2s steps(1) infinite; }
  .bulb.b1 { animation: chase 1.2s steps(1) infinite 0.6s; }
}
@media (max-width: 52em) { .site-check--sign { grid-template-columns: 1fr; justify-items: start; } .marquee-sign { max-width: 22rem; }
}
/* Marquee sign colors follow the reference: warm bulbs on an orange arrow */
/* Marquee bulbs: warm yellow, a single line down the arrow's column like the reference */
/* Marquee bulbs ring the teal arrow in harvest gold */
@keyframes chase { 0% { fill: #fff3c4; } 50% { fill: #c99a2e; } }
/* ---------- Channel dial (services) ---------- */
.services-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 3rem; }
.dial { position: relative; aspect-ratio: 1; width: 13.75rem; container-type: inline-size; }
.dial-face { position: absolute; height: auto; overflow: visible; inset: 0; width: 100%; }
.dial-knob { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--angle)); transition: transform 0.6s cubic-bezier(.3, 1.4, .5, 1); }
.dial-ch {
  position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  transform: rotate(var(--a)) translateY(-6.6rem) rotate(calc(var(--a) * -1));
  display: grid; place-items: center; padding: 0; cursor: pointer;
  font: 700 1rem var(--font-mono); color: var(--ink);
  background: var(--white-warm); border: 2.5px solid var(--ink); border-radius: 50%;
}
.dial-ch:hover { background: #fbe39b; }
.dial-ch[aria-checked="true"] { background: var(--gold); box-shadow: 2px 2px 0 var(--ink); }
/* Card picked with the keyboard on the dial: gold outline so keyboard users can see where they landed */
.channel.is-tuned { outline: 4px solid var(--gold); outline-offset: 3px; }
@media (max-width: 52em) {
  .services-head { grid-template-columns: 1fr; justify-items: center; }
  .services-head > div { justify-self: stretch; }
  .dial { width: 13.75rem; }
  .dial-ch { transform: rotate(var(--a)) translateY(-5.9rem) rotate(calc(var(--a) * -1)); }
}
/* Free site check box: a touch more muted so the sign and button pop */
/* Dial sizing: scales with its own width (container units), never wider than the screen */
.dial-ch { transform: rotate(var(--a)) translateY(-41.8cqi) rotate(calc(var(--a) * -1)); }
@media (max-width: 52em) { .dial { width: min(13.75rem, 100%); justify-self: center; margin-inline: auto; } }
/* ---------- Authentic VHF dial: printed 2-13 + U on a dark bezel, chrome knob with a bar handle ---------- */
.dial-print { pointer-events: none; }
.dial-ch {
  width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem;   /* 40px tap targets (well over the 24px WCAG minimum); the dial is 13.75rem so neighbors don't overlap */
  transform: rotate(var(--a)) translateY(-38cqi) rotate(calc(var(--a) * -1));
  background: #1c1a18; border: 0; color: #f4ebd9; font-size: 1.05rem; text-shadow: 0 1px 0 #000;   /* same as the bezel, so contrast checkers see the real backdrop */
}
.dial-ch:hover, .dial-ch:active { background: #3a3631; color: #fff; }
.dial-ch[aria-checked="true"] { background: #1c1a18; box-shadow: none; color: var(--gold); text-decoration: underline 2px; text-underline-offset: 3px; }
.dial-ch:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.dial-ch { font-size: 7.5cqi; }
.check-note { max-width: 46rem; margin: 0.9rem 0 0; font-size: 0.875rem; font-style: normal; color: var(--ink-soft); }   /* under the box, so the box holds just the offer */
/* Channel picked on the dial: its CH badge turns gold, matching the dial's selected number */
.channel.is-picked .channel-num { background: var(--gold) !important; }

/* ==========================================================================
   Projects
   ========================================================================== */

.sub-title { font-size: 1.5rem; margin-top: 3.5rem; }
/* Work */
.case-list { display: grid; gap: 2.5rem; margin-top: 2rem; }
.case {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; background: var(--paper);
  border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  background-color: var(--white-warm);
}
.case img { width: 100%; height: 100%; object-fit: cover; border-right: 3px solid var(--ink); }
.case-body { padding: clamp(1.25rem, 3vw, 2rem); }
.case-tags {
  font: 700 0.8rem var(--font-mono); text-transform: uppercase; font-size: 0.875rem; color: var(--ink-soft);
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.06em;
}
.case h3 { font-size: 1.5rem; }
.case:nth-child(even) img { order: 2; border-right: 0; border-left: 3px solid var(--ink); }
@media (max-width: 52em) {
  .case { grid-template-columns: 1fr; }
  .case img, .case:nth-child(even) img { order: 0; border: 0; border-bottom: 3px solid var(--ink); height: auto; }
}
.text-link { font-weight: 700; display: inline-flex; align-items: center; min-height: 2.75rem; }   /* links that stand on their own line: 44px tall, the WCAG AAA tap size */
.mini-case-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.5rem; list-style: none; padding: 0; margin: 1.5rem 0 0;
}
.mini-case {
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden;
  padding-bottom: 1.25rem; background-color: var(--white-warm);
}
.mini-case img { border-bottom: 3px solid var(--ink); margin-bottom: 1rem; }
.mini-case h4, .mini-case p, .mini-case a { margin-inline: 1.25rem; }
.mini-case h4 { font-size: 1.1rem; }
.mini-case p { color: var(--ink-soft); font-size: 0.975rem; }
.section-alt .section-lede, .section-alt .fine-print { color: var(--ink-soft); }
.case-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.case-head .case-tags { margin: 0; }
.rec-disc { fill: #14110e; }
.rec-grooves circle { fill: none; stroke: #2e2925; stroke-width: 0.9; }
.rec-hole { fill: var(--paper); }
/* ---------- Cinema: Cinerama-style letter tiles, filmstrip frames, ticket stubs ---------- */
/* Heading: each letter on its own tilted tile with a blue 3D edge, alternating lean like a 1960s theater sign */
.marquee-title { margin: 0.25rem 0 0.5rem; }
.tiles { display: flex; flex-wrap: wrap; font: 400 min(2.4rem, 8vw)/1 'Alfa Slab One', Rockwell, serif; font-size: min(2.6rem, 8.5vw); gap: 0.4em 0.7em; }
.tile-word { display: inline-flex; gap: 0; filter: drop-shadow(0.06em 0.08em 0.06em rgba(34, 31, 27, .35)); }
.tile {
  display: inline-grid; place-items: center; transform: skewY(-7deg); width: auto; box-sizing: border-box;
  line-height: 1; font: 700 1em/1 var(--font-body); letter-spacing: 0; background: var(--bar-red); color: #fff;
  border: 0.09em solid #fff; border-radius: 0.04em; box-shadow: none; font-size: 1.25em; min-width: 1.05em;
  height: 1.4em; padding: 0 0.1em; border-width: 0.07em;
}
.tile:nth-child(even) { transform: skewY(7deg); background: var(--bar-blue); color: #fff; border-color: #fff; box-shadow: none; }
/* Projects: screenshot framed as a strip of film with sprocket holes */
.case--film .filmstrip {
  position: relative; display: grid; align-items: center;
  padding: 1.6rem 0.9rem; background: var(--ink); border-right: 3px solid var(--ink);
}
.filmstrip::before, .filmstrip::after {
  content: ""; position: absolute; left: 0.5rem; right: 0.5rem; height: 0.6rem;
  background: repeating-linear-gradient(90deg, var(--paper) 0 0.75rem, transparent 0.75rem 1.5rem);
  border-radius: 2px;
}
.filmstrip::before { top: 0.5rem; }
.filmstrip::after { bottom: 0.5rem; }
.case--film img, .case--film:nth-child(even) img {
  order: 0; width: 100%; height: auto; border: 0; border-radius: 3px;
}
.case--film { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.case--film:nth-child(even) .filmstrip { order: 2; border-right: 0; border-left: 3px solid var(--ink); }
@media (max-width: 52em) {
  .case--film { grid-template-columns: minmax(0, 1fr); }
  .case--film .filmstrip, .case--film:nth-child(even) .filmstrip { order: 0; border: 0; border-bottom: 3px solid var(--ink); }
}
/* Ticket stub beside the tags: gold, notched ends, perforation line */
.ticket {
  flex: none; position: relative; display: grid; justify-items: center; gap: 0.1rem;
  padding: 0.35rem 1rem; background: var(--gold); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 4px;
  font: 700 0.7rem/1.1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  transform: rotate(-4deg);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 0.4rem, #000 0.42rem) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 0.4rem, #000 0.42rem) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 0.4rem, #000 0.42rem) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 0.4rem, #000 0.42rem) right / 51% 100% no-repeat;
}
.ticket-no { font-size: 0.85rem; border-top: 2px dashed var(--ink); padding-top: 0.1rem; }
.case--film:nth-child(even) .ticket { transform: rotate(3deg); }
.case--film .case-head { margin-bottom: 0.6rem; }
/* Agency builds as LP covers: square cover (screenshot on top, title block below, like a classic
   jazz LP), with a full-size record sliding out of the top of the sleeve */
.mini-case--lp .lp-sleeve {
  position: relative; overflow: hidden; padding: 3.75rem 1rem 1rem; margin-bottom: 1rem;
  background: var(--paper); border-bottom: 3px solid var(--ink); padding-top: calc(34% + 0.5rem);
}
.lp-cover {
  position: relative; z-index: 1; display: flex; flex-direction: column; aspect-ratio: 1;
  border: 3px solid var(--ink); border-radius: 3px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden;
}
.lp-1 .lp-cover { background: var(--teal); }
.lp-2 .lp-cover { background: var(--gold); }
.lp-3 .lp-cover { background: var(--red-text); }
.mini-case--lp .lp-cover img { display: block; width: 100%; height: auto; margin: 0; border: 0; border-bottom: 3px solid var(--ink); }
.mini-case .lp-title { margin: auto 0 0; padding: 0.75rem 1rem 0.9rem; font: 400 clamp(1.2rem, 2.2vw, 1.45rem)/1.15 var(--font-display); color: var(--ink); }
.lp-3 .lp-title { color: var(--white-warm); }
.peek-record { position: absolute; z-index: 0; left: calc(1rem + 3%); width: calc(94% - 2rem); height: auto; transition: transform 0.6s ease; top: 0.6rem; }
.mini-case--lp:hover .peek-record, .mini-case--lp:focus-within .peek-record { transform: translateY(-0.6rem) rotate(30deg); }
.lp-1 .peek-label { fill: var(--red-text); }
.lp-2 .peek-label { fill: var(--teal-dark); }
.lp-3 .peek-label { fill: var(--gold); }
.peek-label-ring { fill: none; stroke: rgba(255, 247, 240, .55); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .peek-record { transition: none; } }
/* Records pulled about halfway out so the center label shows; grooves, sheen and rim read as vinyl */
.rec-sheen { fill: #fff7f0; opacity: .13; }
.rec-rim { fill: none; stroke: #3a342e; stroke-width: 2; }
.peek-rpm { font: 700 10px var(--font-mono); fill: var(--white-warm); text-anchor: middle; }
.lp-3 .peek-rpm { fill: var(--ink); }
.peek-label-line { stroke: rgba(255, 247, 240, .6); stroke-width: 2; stroke-linecap: round; }
.lp-3 .peek-label-line { stroke: rgba(34, 31, 27, .55); }
/* Shorter peek: just past the edge of the center label */
/* Agency builds: a 1950s suitcase record player beside the heading; tonearm drops onto the record on hover */
.sub-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; margin-top: 3.5rem; }
.sub-head > div { flex: 1 1 28rem; min-width: 0; }
.sub-head .sub-title { margin-top: 0; }
.sub-head .section-lede { margin-bottom: 0; }
.turntable { width: min(18rem, 100%); height: auto; flex: none; }
.tt-lid { fill: var(--red-text); stroke: var(--ink); stroke-width: 3.5; }
.tt-lid-panel { fill: #efe6d3; stroke: var(--ink); stroke-width: 2; }
/* a chrome nameplate on the lid, the way portable record players were badged (generic words, no brand) */
.tt-plate { fill: #d6d1c7; stroke: var(--ink); stroke-width: 1.8; }
.tt-plate-shine { stroke: #fff; stroke-width: 1.4; opacity: .7; }
.tt-plate-name { font: 400 15px Yellowtail, cursive; fill: var(--red-text); text-anchor: middle; }
.tt-plate-sub { font: 700 6px var(--font-mono); letter-spacing: 0.22em; fill: var(--ink); text-anchor: middle; }
.tt-hinge { stroke: var(--ink); stroke-width: 3; }
.tt-deck { fill: #efe6d3; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.tt-platter { fill: #8f8676; stroke: var(--ink); stroke-width: 2; }
.tt-disc { fill: #14110e; }
.tt-grooves ellipse { fill: none; stroke: #3a342e; stroke-width: 1; }
.tt-label { fill: var(--gold); }
.tt-spindle { fill: var(--white-warm); }
.tt-arm-outline { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }   /* black edge around the silver arm */
.tt-arm-bar { fill: none; stroke: #cfc6b6; stroke-width: 4; stroke-linecap: round; }
.tt-head { fill: var(--ink); }
.tt-pivot { fill: var(--ink); }
.tt-pivot-cap { fill: var(--gold); }
.tt-arm { transform-box: view-box; transform: rotate(-14deg); transition: transform 1s cubic-bezier(.4, 1.2, .5, 1); }
#work .sub-head:hover .tt-arm, .mini-case-grid:hover ~ * .tt-arm, .turntable.is-playing .tt-arm { transform: none; }
.tt-case { fill: var(--teal-dark); stroke: var(--ink); stroke-width: 3.5; }
.tt-band { stroke: var(--white-warm); stroke-width: 2.5; opacity: .7; }
/* speaker: woven grille cloth in a gold trim frame; knobs: pointers and dial ticks, set to different positions */
.tt-grille-trim { fill: var(--gold); stroke: var(--ink); stroke-width: 2; }
.tt-grille-cloth { fill: url(#tt-weave); stroke: var(--ink); stroke-width: 1.5; }
.tt-knob { fill: var(--ink); stroke: var(--gold); stroke-width: 2.5; }
.tt-ticks path { stroke: var(--white-warm); stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.tt-pointer { stroke: var(--white-warm); stroke-width: 2.4; stroke-linecap: round; }
.tt-latch { fill: var(--gold); stroke: var(--ink); stroke-width: 1.5; }
.tt-foot { fill: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tt-arm { transition: none; transform: none; } }
@media (max-width: 40em) { .turntable { width: min(16rem, 82%); } }   /* on phones it sits alone under the heading, so it can fill more of the width */
/* Letter tiles size to their letter (wide W and M included) with room on every side */
/* Cinerama coloring: letters alternate red and blue, each tile's 3D edge in the opposite color */
/* Filled tiles: red and blue alternate, cream letters, each 3D edge in the opposite color */
/* True to the Cinerama signs: cream tiles, letters alternate red and blue, each tile framed and
   extruded in the opposite color (red letter = blue frame and side, blue letter = red frame and side) */
/* Like the classic Cinerama sign: solid red and blue panels alternate, bold white letters, a white
   edge on every panel, panels touching in one zigzag strip, soft shadow behind the whole sign */
@media (max-width: 52em) { .turntable { display: block; margin-inline: auto; } }   /* room for the corner screws */

/* ---------- Section order: Services, Projects, Under the hood, Accessibility, How I build, Process, About, FAQ, Fan Mail, Contact.
   Backgrounds alternate so no two neighbors match. ---------- */
#work { background: var(--oatmeal); }
/* agency build cards: one line about the project, then the scores in the same format on every card */
.mini-scores { font-size: 0.95rem; margin-top: 0.35rem; }
.mini-scores strong { color: var(--red-text); }
/* Agency builds: liner notes slide up out of the album sleeve */
.mini-case--lp { position: relative; transition: min-height .35s ease; display: flex; flex-direction: column; container-type: inline-size; }
/* the site link and the Liner notes button share one row pinned to the bottom of every album card, so they line up
   across the row of cards; on narrow cards they stack, centered */
.lp-actions { margin-top: auto; padding: 0.9rem 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.lp-actions .text-link, .lp-actions .liner-btn { margin: 0; }
@container (max-width: 20rem) { .lp-actions { flex-direction: column; justify-content: center; gap: 0.6rem; } }
.liner-btn { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.9rem 1.25rem 0; min-height: 2.75rem; padding: 0.45rem 0.9rem; cursor: pointer;
  font: 700 0.9rem/1 var(--font-body); color: var(--ink); background: var(--white-warm); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); }
.liner-btn::before { content: ""; width: 0.9rem; height: 0.7rem; border: 2px solid var(--red-text); border-radius: 2px;
  background: repeating-linear-gradient(0deg, var(--red-text) 0 1px, transparent 1px 3px); }
.liner-btn:hover, .liner-btn:active { background: #fbe39b; }
.liner-btn:focus-visible, .liner-close:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.liner { position: absolute; inset: 0.6rem 0.6rem 0; z-index: 3; overflow: auto; padding: 1.1rem 1.15rem 1.25rem;
  background: repeating-linear-gradient(180deg, transparent 0 1.55rem, rgba(166, 58, 36, .14) 1.55rem calc(1.55rem + 1px)), #fbf6ea;
  border: 2px solid var(--ink); border-bottom: 0; border-radius: 0.5rem 0.5rem 0 0; box-shadow: 0 -4px 0 rgba(34, 31, 27, .15);
  transform: translateY(102%) rotate(1.5deg); transition: transform .5s cubic-bezier(.25, 1.2, .45, 1); }
.liner.is-out { transform: none; }
.liner-title { margin: 0 0 0.6rem; font: 400 1.35rem/1.1 'Pirata One', var(--font-display); color: var(--red-text); }
.liner-title span { display: block; margin-top: 0.2rem; font: 700 1rem/1.3 var(--font-body); color: var(--ink); }
.liner-title:focus { outline: none; }
.liner-sub { margin: 0.75rem 0 0.2rem; font: 700 0.8rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); }
.liner p, .liner li { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.liner ul { margin: 0; padding-left: 1.1rem; }
.liner li::marker { color: var(--red-text); }
.liner-proj { margin-top: 0.85rem !important; }
.liner .liner-note { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted); }
.liner .text-link, .liner p, .liner h5, .liner h6, .liner ul { margin-inline: 0; }
.liner-close { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 0.9rem; padding: 0.45rem 0.9rem; cursor: pointer; font: 700 0.88rem/1 var(--font-body); color: var(--paper);
  background: var(--ink); border: 2px solid var(--ink); border-radius: 999px; }
.liner-close::after { content: " \2193"; }
@media (prefers-reduced-motion: reduce) { .liner { transition: none; } }

/* ==========================================================================
   Under the hood
   ========================================================================== */

/* What you don't see: under-the-hood cards */
.hood-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem; list-style: none; padding: 0; margin: 2rem 0 0;
}
.hood {
  display: flex; flex-direction: column; background: var(--paper); padding: 1.5rem; border: 3px solid var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow); background-color: var(--white-warm); padding-top: 0;
}
/* one column on phones, two on tablets, three on wide screens; with 9 cards only the two-column layout has an odd one out */
@media (min-width: 41.5em) { .hood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .hood-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 41.5em) and (max-width: 61.99em) { .hood:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.hood-label {
  align-self: flex-start; font: 700 0.75rem var(--font-mono); text-transform: uppercase; margin-bottom: 0.9rem;
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.06em; background: var(--teal-dark);
  color: var(--white-warm); font-size: 0.95rem; padding: 0.35rem 0.75rem; border-radius: 0.35rem;
}
.hood h3 { color: var(--red-text); font-size: 1.35rem; line-height: 1.25; }
.hood p:not(.hood-label) { color: var(--ink-soft); }
.hood-why { margin: auto 0 0; padding-top: 1rem; border-top: 2px dashed var(--ink); margin-top: 0; }
.hood-why strong { color: var(--red-text); }
/* Side-by-side comparison */
.compare-wrap { margin-top: 3rem; border-top: 3px dashed var(--ink); padding-top: 2.5rem; }
.compare {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper);
  border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  background-color: var(--white-warm);
}
.compare caption {
  text-align: left; font-family: var(--font-display); font-size: 1.6rem; padding-bottom: 0.75rem;
}
.compare th, .compare td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 2px solid var(--paper-dark); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th {
  font: 700 0.8rem var(--font-mono); text-transform: uppercase; color: var(--paper); font-size: 0.875rem;
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.06em; background: var(--ink);
}
.compare thead th:first-child { border-top-left-radius: 0.7rem; }
.compare thead th:last-child { border-top-right-radius: 0.7rem; background: var(--gold); color: var(--ink); }
.compare tbody th { font-weight: 700; }
.compare td:last-child { font-weight: 600; }
.compare td:nth-child(2) { color: var(--muted); }
@media (max-width: 40em) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare caption { display: block; }
  .compare tbody tr { padding: 0.75rem 1rem; border-bottom: 2px solid var(--paper-dark); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th, .compare td { padding: 0.2rem 0; border: 0; }
  .compare td::before { display: block; font: 700 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .compare td:nth-child(2)::before { content: "Platform defaults"; color: var(--muted); }
  .compare td:nth-child(3)::before { content: "Designed and built by me"; color: var(--red-text); margin-top: 0.4rem; }
}
.compare td::before {
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.06em;
}
#why, #about { background: var(--oatmeal); }
/* Card top: teal band with the label, round icon centered on the band's bottom edge */
.hood-band {
  margin: 0 -1.5rem; text-align: center; background: var(--teal-dark);
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0; padding: 0.6rem 1rem;
}
.hood-band .hood-label { display: inline-block; margin: 0; padding: 0; background: none; color: var(--white-warm); font-size: 1.05rem; }
.hood > .hood-icon { display: block; width: 4.25rem; height: 4.25rem; position: relative; margin: 1.1rem auto 1.1rem; }
.hood > h3 { text-align: center; }
/* Refinements: slim band with centered label, badge hangs from the band, no mid-card gaps */
/* Wide last card (two-column layout only): header on the left, text on the right */
@media (min-width: 52em) and (max-width: 61.99em) {
  .hood:last-child:nth-child(odd) {
    display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); column-gap: 2rem; align-items: start;
    padding-top: 0;
  }
  .hood:last-child:nth-child(odd) > .hood-band { grid-column: 1 / -1; }
  /* icon and heading share the left cell, stacked, so the heading stays with its icon */
  .hood:last-child:nth-child(odd) > .hood-icon { grid-column: 1; grid-row: 2 / span 2; align-self: start; }
  .hood:last-child:nth-child(odd) > h3 { grid-column: 1; grid-row: 2 / span 2; align-self: start; margin: 4.75rem 0 1rem; }
  .hood:last-child:nth-child(odd) > p { grid-column: 2; grid-row: 2; margin-top: 1.25rem; }
  .hood:last-child:nth-child(odd) > p.hood-why { grid-row: 3 / span 2; margin-top: 0; border-top: 2px dashed var(--ink); }
}
/* Icon evenly spaced between the teal band and the heading */
@media (min-width: 52em) and (max-width: 61.99em) { .hood:last-child:nth-child(odd) > h3 { margin-top: 6.45rem; } }
/* card labels larger */
/* comparison caption needs room on phones */
@media (max-width: 40em) { .compare caption { padding: 1rem 1rem 0.5rem; } }
/* source links inside cards and callout */
.hood a, .legal-box a { color: var(--teal-dark); font-weight: 600; }
/* Comparison: plain-language title and intro above the table */
.compare-title { margin: 0 0 0.6rem; text-align: center; font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 1rem; }
.compare-intro { max-width: 48rem; margin: 0 0 1.25rem; }
.compare caption.visually-hidden { padding: 0; }
/* "Under the hood" cards are problems to avoid: flag them as such */
.hood-flag { color: var(--yellow-on-ink); }
/* Bold lead-in line centered above the comparison table and the problem cards */
.compare-lead { margin: 1.5rem auto 1rem; max-width: 40rem; text-align: center; font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.25rem); line-height: 1.4; }
.hood-lead { margin-top: 2rem; }
#why { background: var(--mint-faded); }
/* ---------- Under the hood: a hot rod with its hood popped beside the heading (above it on phones) ---------- */
.why-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 1.5rem 2.5rem; align-items: center; }
.why-head .hotrod { display: block; width: 100%; height: auto; filter: drop-shadow(5px 6px 0 rgba(34, 31, 27, 0.18)); }
@media (max-width: 52em) {
  .why-head { grid-template-columns: minmax(0, 1fr); }
  .why-head .hotrod { order: -1; max-width: 26rem; margin-inline: auto; }
  .why-head .hood-swap { order: -1; width: 100%; max-width: 26rem; margin-inline: auto; }
}
/* Under the hood: the hood starts shut, then swings open soon after the car is on screen.
   The open-hood picture is revealed by a soft-edged wedge pivoting at the hood hinge (script.js), then the rest crossfades. */
.hood-swap { position: relative; }
.hood-swap .hood-open { position: absolute; inset: 0; }
/* one shadow for the whole car, so the two stacked pictures don't double it up */
.why-head .hood-swap { filter: drop-shadow(5px 6px 0 rgba(34, 31, 27, 0.18)); }
.why-head .hood-swap .hotrod { filter: none; }
/* once the hood is up (or when there is no animation) only the open picture shows */
.hood-swap:not(.is-armed) .hood-shut, .hood-swap.is-done .hood-shut { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hood-swap.is-armed:not(.is-open) .hood-open { visibility: hidden; }   /* hidden until the swing starts */
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Legal callout in "What you don't see" */
.legal-box {
  margin-top: 3rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--white-warm);
  border: 3px solid var(--ink); border-top: 0.6rem solid var(--red-text); border-radius: var(--radius);
  box-shadow: var(--shadow); border-top-color: var(--gold);
}
.legal-box h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.25; }
.legal-list { margin: 1rem 0 1.25rem; padding-left: 1.25rem; display: grid; gap: 0.6rem; }
.legal-list li::marker { color: var(--red-text); }
.legal-note { margin: 0; font-size: 0.95rem; color: var(--ink-soft); font-style: italic; }
/* Legal callout: scales-of-justice badge beside the heading, same badge style as the hood cards */
.legal-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.legal-head h3 { margin: 0; }
.legal-box .legal-icon { flex: none; width: 5rem; height: 5rem; padding: 0.85rem 0.6rem 0.95rem; }
@media (max-width: 30em) { .legal-box .legal-icon { width: 3.75rem; height: 3.75rem; padding: 0.4rem; } }
/* a brick-red marker underline under "It's a legal issue.", hand-drawn with a slight curve and a second lighter stroke;
   it wipes in left to right, like a marker being dragged, once the heading is on screen */
.legal-box h3 .marker { position: relative; display: inline-block; white-space: nowrap; }
.marker-wipe { position: absolute; left: -0.1em; bottom: -0.32em; width: calc(100% + 0.25em); height: 0.45em; pointer-events: none; }
.marker-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.marker-svg path { fill: none; stroke: #a63a24; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.marker-svg .marker-2 { stroke-width: 2.6; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .marker-wipe { clip-path: inset(-40% 100% -40% -2%); }
  .marker-wipe.is-drawn { animation: marker-draw 0.6s cubic-bezier(.4, 0, .2, 1) forwards; }
}
@keyframes marker-draw { to { clip-path: inset(-40% -2% -40% -2%); } }
/* phones: when "It's a legal issue." wraps, the same hand-drawn marker runs under each line (wipes in on scroll) */
@media (max-width: 30em) { .legal-box h3 .marker { white-space: normal; display: inline; text-decoration: underline 3px #a63a24; text-underline-offset: 0.2em; text-decoration-skip-ink: none; } .marker-wipe { display: none; }
  .legal-box h3 .marker { text-decoration: none; padding-bottom: 0.28em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C42 5 96 4.2 150 5.4 170 5.9 186 6.8 197 8.6' fill='none' stroke='%23a63a24' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M18 11.6C70 8.4 130 8.1 182 10.2' fill='none' stroke='%23a63a24' stroke-width='2.6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 0.42em; }
}
@media (max-width: 30em) and (prefers-reduced-motion: no-preference) {
  .legal-box h3 .marker { background-size: 0% 0.42em; transition: background-size 0.6s cubic-bezier(.4, 0, .2, 1); }
  .legal-box h3 .marker.is-drawn { background-size: 100% 0.42em; }
}
#accessibility .legal-box { margin-top: 0.5rem; }

/* ==========================================================================
   How I build
   ========================================================================== */

.section-dark { color: var(--paper); background: var(--ink); position: relative; overflow: hidden; }
.section-dark .eyebrow { color: var(--yellow-on-ink); }
.section-dark a { color: #c2efeb; }
/* How I build: meters */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 1.5rem; }
.how-sub { margin-top: 2rem; font-size: 1.2rem; color: var(--yellow-on-ink); }
.check-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; }
.check-list li::before { content: "✦"; position: absolute; left: 0; color: var(--yellow-on-ink); }
.meters {
  margin: 0; border: 3px solid var(--paper); border-radius: var(--radius); background: #2c2823;
  position: relative; background-color: #2c2823;
  background-image: repeating-linear-gradient(90deg, rgba(255, 247, 240, .025) 0 1px, transparent 1px 3px),
                    linear-gradient(180deg, rgba(255, 247, 240, .06), transparent 40%, rgba(0, 0, 0, .18));
  box-shadow: inset 2px 2px 0 rgba(255, 247, 240, .12), inset -3px -3px 0 rgba(0, 0, 0, .45), 6px 6px 0 #000;
  padding: 2.2rem 2rem;
}
.meter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.meter { text-align: center; }
.meter svg { width: 100%; max-width: 10rem; margin-inline: auto; }
.meter p { margin: 0.25rem 0 0; font-size: 0.95rem; }
.meter-score { display: block; font: 700 1.6rem var(--font-mono); color: var(--yellow-on-ink); }
.meters figcaption { font-size: 0.875rem; color: #cfc6b6; }
.pull-quote {
  margin: 3rem auto 0; max-width: 44rem; text-align: center; color: var(--yellow-on-ink);
  font-family: var(--font-body); font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.45;
  letter-spacing: 0;
}
@media (max-width: 52em) { .how-grid { grid-template-columns: minmax(0, 1fr); } }
.pull-quote, .how-sub { color: #f4cf5c; }
.section-dark .check-list li::before { color: #f4c94f; }
.section-dark .eyebrow {
  display: inline-block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3;
  padding: 0.3rem 0.65rem; margin-bottom: 0.9rem; border-radius: 0.3rem;
  background: var(--magenta); color: var(--white-warm);          /* 7.0:1 */
}
/* Display font is for short headings only; sentences use the body font */
/* Palette consolidation */
.section-dark :focus-visible { outline-color: var(--yellow-on-ink); }
.section-dark .contact-form :focus-visible { outline-color: var(--ink); }   /* the form is a light card, so its outline goes back to ink (15:1) */
.section-dark .eyebrow { font-size: 1rem; padding: 0.4rem 0.8rem; }
.section-dark .eyebrow {
  background: var(--gold); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.section-dark .eyebrow { box-shadow: 3px 3px 0 #000; }
.section-dark::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.5rem;
  background: var(--bars); border-bottom: 2px solid #000;
}
.score-line { margin: 1.25rem 0 0.5rem; text-align: center; line-height: 1.7; }
.score-line strong { color: var(--yellow-on-ink); }
/* ==========================================================================
   Analog set: VU meters, record sleeves, FM tuning band
   ========================================================================== */

/* VU meters: amber backlit face, needle pivots below the face */
.meter svg.vu { max-width: 11.5rem; }
.vu-bezel { fill: #14110e; }
.vu-face { fill: #efcf7e; }
.vu-glow { fill: #fff3c4; opacity: .55; }
.vu-arc { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.vu-band { fill: none; stroke: var(--red-text); stroke-width: 5; }
.vu-ticks { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.vu-nums { font: 700 7.5px var(--font-mono); fill: var(--ink); text-anchor: middle; }
.vu-word { font: 700 8px var(--font-mono); letter-spacing: 2px; fill: var(--ink-soft); text-anchor: middle; }
.vu-needle {
  fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; transform-box: view-box;
  transform-origin: 70px 104px; transform: rotate(-44deg); transition: none;
}
.meters.is-on .vu-needle { transform: rotate(var(--a)); }
.vu-plate { fill: #2c2823; }
.vu-screw { fill: #8f8676; stroke: #14110e; stroke-width: 1; }
@media (prefers-reduced-motion: reduce) { .vu-needle { transform: rotate(var(--a)) !important; } }
/* VU needles: swing up, overshoot, wobble back and forth like a real meter, then settle.
   Plays each time the meters come back into view. */
@media (prefers-reduced-motion: no-preference) {
  .meters.is-on .vu-needle { animation: vu-settle 2.6s ease-out both; }
  .meters.is-on .meter:nth-child(2) .vu-needle { animation-delay: .12s; }
  .meters.is-on .meter:nth-child(3) .vu-needle { animation-delay: .24s; }
  .meters.is-on .meter:nth-child(4) .vu-needle { animation-delay: .36s; }
}
@keyframes vu-settle {
  0%   { transform: rotate(-44deg); }
  22%  { transform: rotate(calc(var(--a) + 6deg)); }
  36%  { transform: rotate(calc(var(--a) - 14deg)); }
  50%  { transform: rotate(calc(var(--a) + 3deg)); }
  62%  { transform: rotate(calc(var(--a) - 7deg)); }
  74%  { transform: rotate(calc(var(--a) + 1deg)); }
  86%  { transform: rotate(calc(var(--a) - 2.5deg)); }
  100% { transform: rotate(var(--a)); }
}
/* ---------- Night sky: faint crescent moon and twinkle stars in the dark sections ---------- */
.section-dark > .wrap { position: relative; z-index: 1; }
.night-sky { position: absolute; width: min(24rem, 60%); height: auto; pointer-events: none; }
.night-sky--right { top: 1.25rem; right: 0; }
.night-sky--left { bottom: 1rem; left: 0; }
.sky-moon { fill: var(--gold); opacity: .55; }
.sky-star { fill: #fbe39b; opacity: .45; }
.sky-dot { fill: var(--paper); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .sky-star { animation: sky-twinkle 4.5s ease-in-out infinite; transform-box: fill-box; }
  .sky-star.tw1 { animation-delay: 1.5s; }
  .sky-star.tw2 { animation-delay: 3s; }
}
@keyframes sky-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: .12; } }
@media (max-width: 37.5em) { .night-sky { width: 70%; } .night-sky--left { display: none; } #how .night-sky--right { width: 50%; top: 0.75rem; }
}
/* ---------- "The test pattern" meter panel: a brushed metal plate held on by four slotted screws,
   each turned a little differently, like it was put on by hand ---------- */
.panel-screw { position: absolute; width: 1.15rem; height: 1.15rem; pointer-events: none; }
.panel-screw.tl { top: 0.55rem; left: 0.55rem; }
.panel-screw.tr { top: 0.55rem; right: 0.55rem; }
.panel-screw.bl { bottom: 0.55rem; left: 0.55rem; }
.panel-screw.br { bottom: 0.55rem; right: 0.55rem; }
.ps-head { fill: url(#ps-steel); stroke: #14110e; stroke-width: 1.6; }
.ps-shine { fill: none; stroke: rgba(255, 247, 240, .45); stroke-width: 1.2; stroke-dasharray: 9 60; transform: rotate(200deg); }
.ps-slot path { stroke: #14110e; stroke-width: 2.6; stroke-linecap: round; }

/* ==========================================================================
   Process
   ========================================================================== */

/* Process: tuner band */
.tuner {
  clip-path: inset(-10px 0 -10px -10px);   /* trims the dotted lines at the right edge but leaves room for the tuned ring on the other sides */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1.25rem; list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: none;
}
.tuner li { position: relative; padding-top: 3.25rem; }
.tuner li::before {
  content: ""; position: absolute; left: 0; right: -1.25rem; top: 1.3rem; height: 3px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 10px);
}
.tuner li:last-child::before { right: 0; }
.tuner-freq {
  position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  font: 700 0.9rem var(--font-mono); border: 3px solid var(--ink); border-radius: 50%; background: var(--gold);
  color: var(--ink);
}
.tuner h3 { font-size: 1.1rem; }
.tuner p { color: var(--ink-soft); font-size: 0.975rem; margin: 0; }
#process { background: var(--mint-faded); overflow-x: clip; }   /* the tuner's dotted lines run past its right edge (trimmed by its clip-path); this keeps them from making the page wider than the screen */
/* FM tuning band: slim backlit receiver strip, pointer moves to the step you're reading */
.tuning-band {
  position: relative; overflow: hidden; margin-top: 1.75rem; padding: 0.35rem 1rem 0.45rem;
  background: #221f1b; border: 3px solid var(--ink); border-radius: 0.6rem;
  box-shadow: 4px 4px 0 var(--ink), inset 0 0 1.25rem rgba(235, 189, 78, .28);
  font: 700 0.75rem/1.2 var(--font-mono); color: var(--yellow-on-ink);
}
.tb-scale { display: flex; justify-content: space-between; gap: 0.25rem; }
.tb-ticks {
  height: 0.55rem; margin-top: 0.2rem;
  background:
    repeating-linear-gradient(90deg, var(--yellow-on-ink) 0 2px, transparent 2px 2.5rem) 0 0 / 100% 100%,
    repeating-linear-gradient(90deg, var(--yellow-on-ink) 0 1px, transparent 1px 0.5rem) 0 100% / 100% 50% no-repeat;
  opacity: .7;
}
.tb-pointer {
  position: absolute; top: 0.2rem; bottom: 0.2rem; left: var(--tb, 1rem); width: 3px; margin-left: -1px;
  background: var(--bar-red); box-shadow: 0 0 6px 1px rgba(201, 73, 47, .8); border-radius: 2px;
  transition: left 0.9s cubic-bezier(.4, 1.3, .5, 1);
}
@media (min-width: 60em) { .tuner { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tuner li.is-tuned .tuner-freq { box-shadow: 0 0 0 3px var(--white-warm), 0 0 0 6px var(--ink); }
@media (max-width: 30em) { .tb-scale span:first-child, .tb-scale span:last-child { display: none; } }
.tuning-band + .tuner { margin-top: 1.25rem; }
/* Section heads with an illustration beside the heading; the 1950s tube radio's needle drifts while you hover the process section */
.kw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.kw-head h2 { margin-bottom: 0; }
.radio50 { width: min(15rem, 100%); height: auto; flex: none; }
.r-body { fill: var(--teal); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.r-trim { fill: none; stroke: var(--white-warm); stroke-width: 3; opacity: .6; }
/* speaker: gold bars, outlined and highlighted, over woven grille cloth */
.r-grille { fill: url(#r-weave); stroke: var(--ink); stroke-width: 3; }
.r-slat-outline path { stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.r-slats path { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.r-slat-shine path { stroke: #fff7f0; stroke-width: 1.1; stroke-linecap: round; opacity: .8; }
.r-dial-ring { fill: var(--gold); stroke: var(--ink); stroke-width: 3; }
.r-dial { fill: #fbf3e0; stroke: var(--ink); stroke-width: 2; }
.r-ticks { stroke: var(--ink); stroke-width: 1.2; }
.r-nums { font: 700 6px var(--font-mono); fill: var(--ink); text-anchor: middle; }
.r-needle path { stroke: var(--bar-red); stroke-width: 2; stroke-linecap: round; }
.r-needle { transform-box: view-box; transform: rotate(-40deg); transition: transform 1.2s cubic-bezier(.4, 1.3, .5, 1); }
.r-hub { fill: var(--ink); }
.r-knob { fill: var(--ink); stroke: var(--gold); stroke-width: 2.5; }
/* knobs: pointers and dial ticks, set to different positions */
.r-ticks-knob path { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.r-pointer { stroke: var(--white-warm); stroke-width: 2.4; stroke-linecap: round; }
.r-foot { fill: var(--ink); }
#process:hover .r-needle, #process:focus-within .r-needle { transform: rotate(55deg); }
@media (prefers-reduced-motion: reduce) { .r-needle { transition: none; } }
@media (max-width: 40em) { .radio50 { width: min(11rem, 60%); } }

/* ==========================================================================
   About
   ========================================================================== */

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* side by side: the photo column rides along while the longer story scrolls past, then stops at the end */
@media (min-width: 52.01em) and (min-height: 54em) { .about-grid { align-items: start; } .about-photo { position: sticky; top: calc(80px + 2rem); } }   /* only on screens tall enough to show the whole column (up to about 850px) */
.about-photo img {
  border: 3px solid var(--ink); border-radius: 50% 50% var(--radius) var(--radius);
  box-shadow: var(--shadow); filter: sepia(0.15) contrast(1.05);
}
/* center the portrait on phones */
@media (max-width: 52em) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 20rem; } .about-photo { margin-inline: auto; }
}
/* About: the four diagnostic steps shared by car repair and web work, as icon badges */
.diag-steps { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 0.75rem; counter-reset: diag; }
.diag-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.5rem; text-align: center; font: 700 0.8rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.diag-steps .diag-icon { width: 4.25rem; height: 4.25rem; padding: 0.5rem; margin: 0; }
.diag-steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 2.05rem; left: calc(50% + 2.6rem); right: calc(-50% + 2.6rem);
  border-top: 3px dotted var(--ink);
}
@media (max-width: 36em) {
  .diag-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diag-steps li::after { display: none; }
}
/* Wrench (step icon in About) */
.wr-steel { fill: #c9c4bb; stroke: var(--ink); stroke-width: 5; }
.wr-shine { stroke: #f4f2ee; stroke-width: 4; stroke-linecap: round; opacity: .8; }
.diag-icon .wr-steel { stroke-width: 9; }
.diag-icon .wr-shine { stroke-width: 7; }
/* About: one-color shop badge under the photo (ink silhouettes with cream cut lines, brick spark) */
.shop-badge { display: block; height: auto; margin: 2rem auto 0; width: min(25rem, 92%); margin-top: 2.25rem; }
@media (max-width: 52em) { .shop-badge { width: min(10rem, 55%); margin-top: 1.5rem; } }
/* About: the "wrenches to websites" seal under the photo */
@media (max-width: 52em) { .shop-badge { width: min(12rem, 60%); } }
/* the seal is round art, not a photo: no frame */
.about-photo img.shop-badge { border: 0; border-radius: 50%; box-shadow: none; filter: drop-shadow(4px 5px 0 rgba(34, 31, 27, 0.22)); }
/* About: a hot rod engine wired to a computer, the "wrenches to websites" idea, under the four steps and as wide as the text */
.about-engine { display: block; width: 100%; height: auto; margin: 1.25rem 0 1.5rem; filter: drop-shadow(4px 5px 0 rgba(34, 31, 27, 0.15)); }
/* the seal grows to match the wider About column, with the engine beside it */
@media (max-width: 52em) { .shop-badge { width: min(20rem, 85%); } }
/* ---------- About: the seal is a sticker slapped on the photo's corner, and the engine sits under the photo ---------- */
#about .photo-wrap { position: relative; }
#about .about-photo img.seal-sticker { position: absolute; right: -1.75rem; bottom: calc(-2rem - 5px); width: calc(36% - 1px); margin: 0;
  border: 0; border-radius: 50%; box-shadow: none; transform: rotate(6deg); filter: drop-shadow(4px 5px 0 rgba(34, 31, 27, 0.25)); }
#about .about-photo img.about-engine { margin: 3rem 0 0; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(4px 5px 0 rgba(34, 31, 27, 0.15)); }
#about { padding-bottom: 4.5rem; overflow-x: clip; }   /* the seal sticker hangs off the photo; on the narrowest phones it would otherwise make the page 1px wider than the screen */
@media (max-width: 52em) {
  #about .about-photo img.seal-sticker { right: -0.75rem; bottom: calc(-1.25rem - 2px); width: calc(36% + 2px); }
  #about .about-photo img.about-engine { margin-top: 2.75rem; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

/* Questions to ask */
.ask-box {
  margin-top: 3rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--paper); border: 3px dashed var(--ink);
  border-radius: var(--radius); background-color: var(--white-warm);
}
.ask-box h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.75rem); }
.ask-list { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: 0.6rem; }
.ask-list li { position: relative; padding-left: 2rem; }
.ask-list li::before {
  content: "?"; position: absolute; left: 0; top: 0.1rem; display: grid; place-items: center; width: 1.4rem;
  height: 1.4rem; font: 700 0.85rem/1 var(--font-mono); border: 2px solid var(--ink); border-radius: 50%;
  background: #fbe39b;
}
.ask-box > p:last-child { margin: 0; font-weight: 600; }
/* ---------- FAQ: native expand and collapse (keyboard and screen reader friendly), each question with a TV channel knob
   that clicks round when it opens ---------- */
.faq-wrap { max-width: 52rem; }
.faq-list { display: grid; gap: 0.9rem; margin-top: 1.5rem; }
.faq { background: var(--white-warm); border: 3px solid var(--ink); border-radius: 0.9rem; box-shadow: 5px 5px 0 var(--ink); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem;
  cursor: pointer; font-weight: 700; font-size: 1.15rem; list-style: none; border-radius: 0.7rem;
  position: relative; padding-right: 8rem;
}
/* room for the CLOSE/OPEN plate plus a gap */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; border-radius: 50%; border: 3px solid var(--ink);
  transition: transform 0.35s cubic-bezier(.3, 1.4, .5, 1); position: absolute;
  right: calc(0.9rem + 2.875rem - 0.85rem); top: calc(50% - 0.29rem); width: 1.7rem; height: 1.7rem; margin: 0;
  background: linear-gradient(var(--red-text), var(--red-text)) 50% 2px / 3px 45% no-repeat, radial-gradient(circle at 35% 30%, #f6d77a, #ebbd4e 55%, #c99a2e);
  box-shadow: 0 2px 0 var(--ink); transform: rotate(-57deg);
}
.faq[open] summary::after { transform: rotate(57deg); }
/* a small "Worth the read" tag after the AI question, the one answer most worth opening; it sits in the line of text,
   so the row keeps the same size and spacing as the others */
.faq-tag { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.5rem; vertical-align: 0.15em; white-space: nowrap;
  font: 800 0.68rem/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 999px; }
.faq summary:hover, .faq summary:active { background: #fbe39b; }
.faq summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.faq-a { padding: 0 1.25rem 1.1rem; border-top: 2px dashed var(--ink); margin: 0 1.25rem; padding-inline: 0; padding-top: 0.9rem; }
.faq-a p, .faq-a li { color: var(--ink-soft); }
.faq-a ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.faq-a li::marker { color: var(--red-text); }
.faq-a p + p, .faq-a ul + p { margin-top: 0.75rem; }
/* parts of a long answer (the AI answer: the turn from cars to websites and two short headings): bigger, in the
   headline font, with a short gold bar above, so the answer reads in chunks instead of one long run of paragraphs.
   The last line of that answer sits on its own with a gold bar beside it as the takeaway. */
.faq-a .faq-turn { margin: 1.75rem 0 0; font: 400 1.3rem/1.2 var(--font-display); color: var(--ink); }
.faq-a .faq-turn::before { content: ""; display: block; width: 3rem; height: 4px; margin-bottom: 0.7rem; background: var(--gold); border-radius: 2px; }
.faq-a .faq-turn + p { margin-top: 0.75rem; }
.faq-a .faq-close { margin-top: 1.5rem; padding: 0.2rem 0 0.2rem 0.9rem; border-left: 4px solid var(--gold); color: var(--ink); font-size: 1.05rem; }
.faq-more { margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
#faq .ask-box { margin-top: 2rem; }
/* an open FAQ question keeps rounded corners on top only, so its highlight joins the answer below */
.faq[open] summary { border-radius: 0.7rem 0.7rem 0 0; }
/* ---------- FAQ: a rotary phone beside the heading ---------- */
.faq-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18.9rem); gap: 1rem 2rem; align-items: center; }   /* phone beside the heading, big enough to read the words on its dial */
.faq-phone { display: block; width: 100%; height: auto; transform: rotate(2deg); filter: drop-shadow(5px 6px 0 rgba(34, 31, 27, 0.18)); }
@media (max-width: 40em) { .faq-head { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } .faq-phone { width: min(17rem, 84%); margin: 0 auto; }
}
/* FAQ dial with printed CLOSE / OPEN labels; the knob's pointer turns between them */   
.faq summary::before { content: ""; position: absolute; right: 0.9rem; top: 50%; width: 5.75rem; height: 2.875rem; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2092%2046%22%3E%3Cpath%20d%3D%22M31%2024A17%2017%200%200%201%2061%2024%22%20fill%3D%22none%22%20stroke%3D%22%23221f1b%22%20stroke-width%3D%221.4%22%20stroke-dasharray%3D%221.5%202.5%22/%3E%3Cpath%20d%3D%22M29.5%2021.5l-3.5-3.5M62.5%2021.5l3.5-3.5%22%20stroke%3D%22%23221f1b%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22/%3E%3Ctext%20x%3D%2219%22%20y%3D%2213%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2211%22%20fill%3D%22%23a63a24%22%3ECLOSE%3C/text%3E%3Ctext%20x%3D%2274%22%20y%3D%2213%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2211%22%20fill%3D%22%236b645c%22%3EOPEN%3C/text%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
.faq[open] summary::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2092%2046%22%3E%3Cpath%20d%3D%22M31%2024A17%2017%200%200%201%2061%2024%22%20fill%3D%22none%22%20stroke%3D%22%23221f1b%22%20stroke-width%3D%221.4%22%20stroke-dasharray%3D%221.5%202.5%22/%3E%3Cpath%20d%3D%22M29.5%2021.5l-3.5-3.5M62.5%2021.5l3.5-3.5%22%20stroke%3D%22%23221f1b%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22/%3E%3Ctext%20x%3D%2219%22%20y%3D%2213%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2211%22%20fill%3D%22%236b645c%22%3ECLOSE%3C/text%3E%3Ctext%20x%3D%2274%22%20y%3D%2213%22%20text-anchor%3D%22middle%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2211%22%20fill%3D%22%23a63a24%22%3EOPEN%3C/text%3E%3C/svg%3E"); }
/* Large text on the narrowest screens (below 17em, e.g. 20px text on a 320px phone): the CLOSE/OPEN plate moves under
   the question, so the question gets the full width instead of running off the screen */
@media (max-width: 17em) {
  .faq summary { padding-right: 1.25rem; padding-bottom: 3.9rem; }
  .faq summary::before { top: auto; bottom: 0.6rem; transform: none; }
  .faq summary::after { top: auto; bottom: 0.63rem; }
}

/* ==========================================================================
   Fan Mail
   ========================================================================== */

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1.5rem; margin-top: 2rem; }
.quote {
  margin: 0; padding: 2rem 1.75rem 1.5rem; position: relative; background: var(--paper);
  border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  background-color: var(--white-warm);
}
.quote::before {
  content: "\201C"; position: absolute; top: -1.6rem; left: 1rem;
  font: 400 4.5rem/1 var(--font-display); color: var(--red-text);
}
.quote p { font-size: 1.1rem; }
.quote footer { color: var(--muted); font-size: 0.95rem; }
.quote footer strong { color: var(--ink); }
/* ---------- Fan Mail: postcards with an airmail border, stamp and Seattle postmark ---------- */
.quote--postcard {
  padding: 0.55rem; border-radius: 0; background-color: transparent;
  background: repeating-linear-gradient(-45deg, var(--red-text) 0 1rem, #f6ecd6 1rem 1.5rem, var(--bar-blue) 1.5rem 2.5rem, #f6ecd6 2.5rem 3rem);
  transform: rotate(-2deg) translateY(0.4rem);
}
.quote--postcard::before { content: none; }
.pc-in {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; height: 100%; padding: 1.3rem;
  background:
    repeating-linear-gradient(0deg, rgba(90, 80, 72, .06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90, 80, 72, .06) 0 1px, transparent 1px 3px), #f6ecd6;
}
.pc-msg { border-right: 2px solid #b8ab92; padding-right: 1.25rem; }
.pc-msg p { font-size: 1.05rem; margin: 0 0 0.5rem; }
.pc-sign { font: 400 1.8rem/1.1 Yellowtail, cursive; color: #2e3f6b; }
.pc-addr { position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding-top: 6rem; }
.pc-stamp { position: absolute; top: 0; right: 0; width: 4.2rem; transform: rotate(3deg); }
.pc-mark { position: absolute; top: 1.2rem; opacity: .8; width: 9rem; right: 2.4rem; }
.pc-addr footer { color: var(--ink-soft); font-size: 0.95rem; }
.pc-line { display: block; height: 1.2rem; border-bottom: 2px solid #b8ab92; }
@media (max-width: 36em) {
  .pc-in { grid-template-columns: minmax(0, 1fr); }
  .pc-msg { border-right: 0; border-bottom: 2px solid #b8ab92; padding: 0 0 1rem; }
}
/* Roadside mailbox beside the heading; its red flag swings up once the section comes into view */
.mailbox { height: auto; flex: none; overflow: visible; width: min(13.5rem, 100%); }
.mb-post { fill: var(--walnut); stroke: var(--ink); stroke-width: 3; }
.mb-grain { stroke: #5a3520; stroke-width: 2; }
.mb-arm { fill: var(--walnut-light); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.mb-body { fill: #cfc6b6; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.mb-shine { stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .6; }
.mb-rib { fill: none; stroke: #8f8676; stroke-width: 2; }
.mb-door { fill: #b8b0a2; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.mb-flag-arm, .mb-flag-plate { fill: var(--bar-red); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.mb-pivot { fill: var(--ink); }
.mb-flag { transform-box: view-box; transform: rotate(90deg); }
.mailbox.is-up .mb-flag { transform: none; }
@media (prefers-reduced-motion: no-preference) { .mailbox.is-up .mb-flag { animation: mb-flag-up 0.9s cubic-bezier(.3, 1.6, .5, 1) both; } }
@keyframes mb-flag-up { from { transform: rotate(90deg); } to { transform: none; } }
/* the door starts closed over the mail and drops open (hinged along the bottom of the opening), then the flag goes up */
.mb-door-closed { fill: #d9d5cd; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; display: none; }
.mb-handle { fill: var(--ink); display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mailbox.is-armed .mb-door-closed, .mailbox.is-armed .mb-handle { display: inline; transform-box: view-box; transform-origin: 70px 112px; }
  .mailbox.is-armed :is(.mb-door, .mb-door-edge) { transform-box: view-box; transform-origin: 70px 112px; transform: scaleY(0); }
  .mailbox.is-armed .mb-mail { opacity: 0; }
  .mailbox.is-armed.is-up :is(.mb-door-closed, .mb-handle) { animation: mb-close-out 0.35s ease-in both; }
  .mailbox.is-armed.is-up :is(.mb-door, .mb-door-edge) { animation: mb-open-in 0.45s cubic-bezier(.3, 1.5, .5, 1) 0.35s both; }
  .mailbox.is-armed.is-up .mb-mail { animation: mb-mail-in 0.4s ease-out 0.6s both; }
  .mailbox.is-armed.is-up .mb-flag { animation-delay: 0.9s; }
}
@keyframes mb-close-out { from { transform: none; } to { transform: scaleY(0); } }
@keyframes mb-open-in { from { transform: scaleY(0); } to { transform: none; } }
@keyframes mb-mail-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 40em) { .mailbox { width: min(8.5rem, 50%); } }
.pc-msg .pc-sign { font: 400 1.9rem/1.1 Yellowtail, cursive; color: #2e3f6b; margin: 0.2rem 0 0; }
@media (max-width: 40em) { .mailbox { width: min(9.5rem, 50%); } }
/* 3D roadside mailbox, door dropped open on the left with a postcard sliding out */
.mb-inside { stroke: var(--ink); stroke-width: 4; fill: #3a3632; }
.mb-door-edge { stroke: var(--ink); stroke-width: 4; }
/* Postcards look tossed down: each tilted and offset a little differently */
.quote--postcard:nth-child(2) { transform: rotate(1.6deg) translate(0.3rem, -0.5rem); }
@media (max-width: 40em) {
  .quote--postcard { transform: rotate(-1.2deg); }
  .quote--postcard:nth-child(2) { transform: rotate(1deg) translateX(0.2rem); }
}
/* Mailbox after the classic three-quarter view: blue body, front open with the door flat out to the left */
.mailbox .mb-body { stroke: var(--ink); stroke-width: 3.5; fill: #b9b4ab; }
.mb-shade { fill: #8a857c; }
.mailbox .mb-shine { stroke-width: 5; stroke: #f4f2ee; opacity: .8; }
.mailbox .mb-rib { fill: none; stroke-width: 3; stroke: #8a857c; }
.mb-rim { stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; fill: #d3cfc7; }
.mb-backwall { fill: #4f4a44; }
.mailbox .mb-door { stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; fill: #d9d5cd; }
.mailbox .mb-door-edge { stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; fill: #8a857c; }
.mailbox .mb-post { fill: var(--walnut); stroke: var(--ink); stroke-width: 3; }
.mailbox .mb-pivot { fill: var(--bar-red); stroke: var(--ink); stroke-width: 2.5; }
.mailbox .mb-flag-arm { fill: #e8e3da; stroke: var(--ink); stroke-width: 2; }
.mb-bottom { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
/* 1950s finish: galvanized steel body, wooden post, name hand-painted on the side */
.mailbox .mb-grain { stroke: #5a3520; stroke-width: 2; }
.mailbox .mb-arm { fill: var(--walnut-light); stroke: var(--ink); stroke-width: 3; }
.mb-paint { font: 400 17px Yellowtail, cursive; fill: var(--ink); text-anchor: middle; font-size: 14px; }
/* Mail sticking out of the open mailbox, over the rim and onto the door */
.mb-big-env { fill: #fffaf2; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.mb-big-flap { fill: none; stroke: #a39a8c; stroke-width: 2; stroke-linejoin: round; }
.mb-big-air { fill: #fffaf2; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: none; }
.mb-big-air-in { fill: none; stroke: var(--red-text); stroke-width: 3; stroke-dasharray: 6 4; }
.mb-big-stamp { fill: var(--teal); stroke: var(--ink); stroke-width: 1.5; }
/* Mailbox sits a bit lower so its top lines up closer to the "Kind words" label */
@media (min-width: 40.01em) { .mailbox { width: min(12rem, 100%); position: relative; top: 1.5rem; } }
/* Fan Mail: a short note is written larger, so it fills its card the way a short postcard message would */
.quote--short .pc-msg p:first-child { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; }
.quote--short .pc-msg .pc-sign { font-size: 2.2rem; margin-top: 0.6rem; }
.pc-mark text { font-size: 7.5px; }
.pc-city { margin: 0; padding-bottom: 0.2rem; border-bottom: 2px solid #b8ab92; font-size: 0.95rem; color: var(--ink-soft); }
#kind-words { background: var(--oatmeal); }
/* Fan Mail on phones: read like a real letter, not a tall stacked postcard.
   Stamp and postmark sit in the top-right corner with the message wrapping around them; the sender goes underneath. */
@media (max-width: 36em) {
  .quote--postcard { padding: 0.4rem; background-size: auto; }
  .pc-in { display: block; position: relative; padding: 1.1rem 1.1rem 1rem; }
  .pc-msg { border: 0; padding: 0; }
  .pc-msg::before { content: ""; float: right; width: 5.6rem; height: 6.4rem; }   /* room for the stamp and postmark */
  .pc-msg p { font-size: 1rem; line-height: 1.55; }
  .quote--short .pc-msg p:first-child { font-size: 1.1rem; }
  .pc-msg .pc-sign, .quote--short .pc-msg .pc-sign { font-size: 1.8rem; margin: 0.15rem 0 0; }
  .pc-addr { position: static; display: block; padding: 0.6rem 0 0; margin-top: 0.5rem; border-top: 2px solid #b8ab92; }
  .pc-stamp { top: 0.9rem; right: 0.9rem; width: 3.6rem; }
  .pc-mark { top: 3.3rem; right: 0.5rem; width: 5rem; }   /* cancels the stamp, like real mail */
  .pc-addr footer { font-size: 0.9rem; }
  .pc-city { border: 0; padding: 0; font-size: 0.85rem; }
  .pc-line { display: none; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-form {
  background: var(--paper); color: var(--ink); padding: clamp(1.25rem, 3vw, 2rem);
  border: 3px solid var(--paper); border-radius: var(--radius);
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 2.875rem; padding: 0.65rem 0.8rem;
  font: inherit; color: var(--ink); background: #fffaf1;
  border: 2px solid var(--ink); border-radius: 0.6rem;
}
.field textarea { resize: vertical; }
/* Message under the Send it button after the form is sent: gold note for "Thanks", red outline for "Sorry" */
.form-status { margin: 1rem 0 0; padding: 0.75rem 1rem; border: 2px solid var(--ink); border-radius: 0.6rem; background: #fcf0c4; font-weight: 600; }
.form-status--error { background: #fffaf1; border-color: var(--red-text); color: var(--red-text); }
.form-status a { color: inherit; }
/* Google's "I'm not a robot" box is a fixed 304 x 78px frame that can't be resized, so on narrow phones it is shrunk with
   scale(), and the negative margins give back the space the shrink frees up (scale alone keeps the full 304px). */
.captcha { margin: 0.25rem 0 1.1rem; min-height: 78px; }
.captcha-error { margin: 0 0 1rem; }
@media (max-width: 24em) {
  .captcha { min-height: 66px; }
  .captcha .g-recaptcha { transform: scale(0.85); transform-origin: 0 0; margin-right: -45.6px; margin-bottom: -11.7px; }   /* 304 x 0.15, 78 x 0.15 */
}
@media (max-width: 21.5em) {   /* 320px phones: the form is only about 248px wide inside */
  .captcha { min-height: 63px; }
  .captcha .g-recaptcha { transform: scale(0.8); margin-right: -60.8px; margin-bottom: -15.6px; }   /* 304 x 0.2, 78 x 0.2 */
}
@media (max-width: 52em) { .contact-grid { grid-template-columns: 1fr; } }
/* Contact: the moon and stars sit up in the open space under the typewriter, clear of the snowmobile scene along the
   bottom. One column (tablets and phones): smaller, low in the sky above the snow, just below the form. */
.night-sky--contact { bottom: calc(clamp(6.25rem, 15vw - 1.65rem, 10.75rem) + 6px); }   /* rises with the typewriter as the screen widens, always just below it */
@media (max-width: 52em) { .night-sky--contact { display: block; width: min(18rem, 55%); bottom: calc(1.75rem + 6px); opacity: .8; } }
/* Contact: a 1950s portable typewriter under the email line */
.typewriter50 { display: block; width: min(19rem, 82%); height: auto; margin-top: 1.5rem; position: relative; z-index: 1; }
@media (max-width: 52em) { .typewriter50 { width: min(16.2rem, 77%); margin-top: 1.25rem; } }   /* a little bigger than the FAQ phone (was 15rem until 10/27) */
@media (min-width: 52.01em) {
  .contact-grid { align-items: stretch; }
  .contact-copy { display: flex; flex-direction: column; }
  .contact-copy .eyebrow { align-self: flex-start; }
  .typewriter50 { margin: auto; padding-bottom: 8.5rem; }   /* lines its middle up with the "Current website" field */
}
@media (max-width: 52em) {
  .typewriter50 { display: block; margin-inline: auto; }
  .contact-form [type="submit"] { display: flex; width: fit-content; margin-inline: auto; }
  .captcha { display: flex; justify-content: center; }   /* the "I'm not a robot" box lines up with the centered Send it button */
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer */
.site-footer { color: var(--paper); border-top: 3px solid var(--paper); padding: 2.5rem 0; text-align: center; background: var(--ink); }
.footer-brand { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.15; margin-bottom: 0.4rem; }   /* "Analog Artifact" over "Web Works"; still well under the "Analog soul" logo below */
.footer-small { font-size: 0.875rem; color: #cfc6b6; margin: 0; }
.pnw-badge { display: block; width: 12rem; height: auto; margin: 0 auto 1rem; }
/* Ferry crosses the Sound; holds still mid-water for reduced motion */
.ferry { transform-box: view-box; transform: translateX(100px); }
@media (prefers-reduced-motion: no-preference) { .ferry { animation: ferry-cross 22s linear infinite; } }
/* One 22s weather cycle per ferry crossing (right to left):
   sun out -> sun sinks and fades, clouds roll in, sky dims -> rain -> rain stops, clouds leave, sun returns.
   Reduced motion: ferry mid-Sound, sun out, no storm. */
.ferry, .sun, .sun-rays, .cloud, .rain, .sky-dim { transform-box: view-box; }
.sun-rays { transform-origin: 52px 50px; }
.rain { opacity: 0; }
.sky-dim { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ferry { animation: ferry-cross 22s linear infinite; }
  .sun { animation: sun-cycle 22s ease-in-out infinite; }
  .sun-rays { animation: sun-spin 18s linear infinite; }
  .cloud-a { animation: cloud-a-move 22s ease-in-out infinite; }
  .cloud-a .cloud-fill { animation: cloud-a-color 22s ease-in-out infinite; }
  .cloud-b { animation: cloud-b-move 22s ease-in-out infinite; }
  .rain-wrap { animation: rain-cycle 22s linear infinite; }
  .rain { opacity: 1; animation: rain-fall 0.7s linear infinite; }
  .sky-dim { animation: sky-cycle 22s ease-in-out infinite; }
}
@keyframes ferry-cross { from { transform: translateX(250px); } to { transform: translateX(-90px); } }
@keyframes sun-spin { to { transform: rotate(360deg); } }
@keyframes sun-cycle {
  0%, 30% { opacity: 1; transform: none; }
  50%, 84% { opacity: 0; transform: translateY(26px); }
  96%, 100% { opacity: 1; transform: none; }
}
@keyframes rain-cycle { 0%, 48% { opacity: 0; } 55%, 82% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes sky-cycle { 0%, 28% { opacity: 0; } 52%, 82% { opacity: .35; } 96%, 100% { opacity: 0; } }
@keyframes rain-fall { from { transform: translateY(-8px); } to { transform: translateY(8px); } }
/* Cloud A: white fair-weather cloud that darkens into a rain cloud, then lightens again */
.cloud-a .cloud-fill { fill: #fff7f0; }
.cloud-b { opacity: 0; }
.rain-wrap { opacity: 0; }
@keyframes cloud-a-move { 0% { transform: translateX(20px); opacity: 0; } 5% { opacity: 1; } 55% { transform: translateX(-6px); } 92% { opacity: 1; } 100% { transform: translateX(-30px); opacity: 0; } }
@keyframes cloud-a-color { 0%, 28% { fill: #fff7f0; } 50%, 84% { fill: #8f9a9d; } 96%, 100% { fill: #fff7f0; } }
@keyframes cloud-b-move { 0%, 26% { opacity: 0; transform: translateX(60px); } 48% { opacity: 1; transform: translateX(-6px); } 84% { opacity: 1; transform: translateX(-24px); } 97%, 100% { opacity: 0; transform: translateX(-90px); } }
.site-footer--pnw { position: relative; border-top: 0; padding-top: 3.25rem; }
.site-footer--pnw::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.5rem;
  background: var(--bars); border-bottom: 2px solid #000;
}
/* ---------- Footer tagline as a stacked logo: blackletter "Analog soul" over script "digital solutions",
   with a gold sparkle rule between. Real text, so it reads as one phrase. ---------- */
.footer-logo { display: grid; justify-items: center; gap: 0.15em; margin: 0.4rem 0 1.1rem; font-size: clamp(1.3rem, 6vw, 2.2rem); line-height: 1; }
.fl-old { font-family: 'Pirata One', Georgia, serif; font-size: 1.25em; color: var(--paper);
  -webkit-text-stroke: 4px #000; paint-order: stroke fill;   /* 4px stroke under the fill = a 2px black outline */
  text-shadow: 2px 2px 0 #000, 4px 4px 0 #ebbd4e; }   /* black line, then the gold shadow */
.fl-new {
  font-family: 'VT323', 'Space Mono', monospace; font-size: 0.86em; letter-spacing: 0.03em;
  text-transform: uppercase; color: #e8c547; position: relative;
}
/* a terminal cursor that blinks on the ghost's beat (four blinks per 5.2s peek); still with reduced motion or Pause */
.fl-new::after { content: "_" / ""; position: absolute; left: 100%; margin-left: 0.05em; }   /* hangs off the end, so the words center on their own */
@media (prefers-reduced-motion: no-preference) { .fl-new::after { animation: fl-cursor 1.3s steps(1) infinite; } }
@keyframes fl-cursor { 50% { opacity: 0; } }
.fl-rule { display: flex; align-items: center; gap: 0.4em; width: 9em; color: #ebbd4e; font-size: 0.5em; position: relative; top: 0.4em; }
.fl-rule::before, .fl-rule::after { content: ""; flex: 1; height: 2px; background: #ebbd4e; }
/* footer order: name, what I do, the tagline logo, where */
.footer-role { margin: 0 0 0.6rem; font-size: 1.1875rem; }
/* phones: the badge, name and tagline logo a little bigger; the page links and the copyright line stay as they are */
@media (max-width: 40em) {
  .pnw-badge { width: 13.5rem; }
  .footer-brand { font-size: 1.85rem; }
  .footer-logo { font-size: clamp(1.45rem, 6.8vw, 2.2rem); }
}
/* footer logo: the divider sits midway between "Analog soul" (allowing for its gold shadow) and "DIGITAL SOLUTIONS" */

/* ==========================================================================
   The Finish Line
   ========================================================================== */

/* ---------- The Finish Line ---------- */
.finish { background: var(--ink); color: var(--paper); text-align: center; overflow: hidden; position: relative; }
.finish::before { content: ""; display: block; height: 24px;
  background: repeating-conic-gradient(var(--paper) 0 25%, var(--ink) 0 50%) 0 0 / 24px 24px; }
.finish-head { padding: 2.25rem 1rem 0; }
/* phones: the crest, title and lines a little bigger */
@media (max-width: 40em) {
  .finish-flag { width: 4rem; }
  .finish-title { font-size: clamp(2.15rem, 6.6vw, 3.25rem); }
  .finish-sub, .finish-slogan { font-size: 1.09rem; }
}
.finish-flag { display: block; width: clamp(3.6rem, 7vw, 4.8rem); height: auto; margin: 0 auto 0.35rem; }   /* crossed checkered flags over the title, like a crest */
.finish-title { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.25rem); color: var(--yellow-on-ink); margin: 0;
  text-shadow: 3px 3px 0 var(--red-text); font-weight: 400; }
.finish-sub { margin: 0.4rem 0 0; font-size: 1.0625rem; color: var(--paper); }
.strip { margin: 0.25rem 0 1.5rem; }
.race { display: block; width: 100%; height: auto; overflow: hidden; }
.race .glow { opacity: 0; transition: opacity .12s; pointer-events: none; }
.race .glow.on { opacity: 1; }
.race .rim { fill: #0f0d0c; stroke: #5d5650; stroke-width: 1.2; }
.race .rim.on.amber { fill: #ffb23a; stroke: #ffd27a; }
.race .rim.on.green { fill: #6fe36a; stroke: #b8f5b4; }
.race .rim.on.stage { fill: #fff4c8; stroke: #fff; }
/* flags rise out of the pole tops and wave once the car crosses */
.race .flag { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .5s cubic-bezier(.3,1.5,.5,1); }
.finish.is-done .race .flag { opacity: 1; transform: none; }
.race .cloth { transform-box: fill-box; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .finish.is-done:not(.is-parked) .race .cloth { animation: wave .7s ease-in-out infinite alternate; }
  .finish.is-done .race .flag-b .cloth { animation-delay: -.35s; }
}
@keyframes wave { from { transform: skewY(-7deg) scaleX(.94); } to { transform: skewY(6deg) scaleX(1.04); } }
.finish-sub + .finish-sub { margin-top: 0.15rem; color: var(--yellow-on-ink); }   /* even gaps: pennant to banner matches banner to the haunt line */
.finish-slogan { display: flex; justify-content: center; align-items: center; gap: 0.5em; margin: 0.7rem 0 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.02em; color: var(--paper); text-wrap: balance; }
.fs-star { flex: none; color: var(--yellow-on-ink); }   /* desktop: a star at each end of the line */
@media (max-width: 30em) {   /* phones: the line breaks evenly after "run," with a star above and below */
  .finish-slogan { flex-direction: column; gap: 0.15em; }
  .fs-text { max-width: 12.5em; }
}
/* Finish Line paint shop: after the first race, cycle the rat rod's paint jobs and send the chosen one down the strip.
   It sits in the race's bottom-left corner, under the road; script.js lowers the section just enough that it never touches the road. */
.paint-shop { position: absolute; left: max(1rem, 2.5vw); bottom: 1rem; z-index: 2; font-size: 1.62rem;   /* everything inside scales with this */
  width: min(22.5em, calc(100% - 2rem));   /* room for a bigger car, so the paint job shows */
  display: grid; visibility: hidden; grid-template-columns: minmax(0, 13.5em) 1fr; grid-template-areas: "title title" "pick name" "pick race";
  column-gap: 0.75em; align-items: center; padding: 0.55em 0.75em 0.65em; text-align: left;
  background: #2b2723; border: 2px solid var(--paper); border-radius: 0.8em; box-shadow: 4px 4px 0 rgba(0, 0, 0, .45); }
.paint-shop.is-ready { visibility: visible; animation: shop-in .45s ease-out; }   /* its space is saved from the start (hidden until the first race is over), so the page never jumps when it appears */
@keyframes shop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.paint-shop-title { grid-area: title; margin: 0 0 0.15em; font: 700 0.75em/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow-on-ink); }
.paint-pick { grid-area: pick; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.3em; }
.paint-thumb { display: block; width: 100%; height: auto; transform: scaleX(-1); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.paint-prev, .paint-next { padding: 0; cursor: pointer; border-radius: 50%;
  font: 700 0.75em/1 var(--font-body); width: 2.5em; height: 2.5em; min-width: 2.75rem; min-height: 2.75rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 2px 0 #000; }   /* never under 44px (WCAG AAA tap size), even on phones where the card is smaller */
.paint-prev:hover, .paint-next:hover, .paint-prev:active, .paint-next:active { background: #fbe39b; }
.paint-name { grid-area: name; margin: 0; align-self: end; font: 700 0.95em/1.3 var(--font-body); color: var(--paper); }
.paint-label { display: flex; align-items: flex-end; min-height: 2.6em; }   /* always room for two lines, so the card never changes size */
.paint-count { display: block; font: 400 0.79em/1.3 var(--font-mono); color: #cfc6b4; }
.paint-race { grid-area: race; justify-self: start; align-self: start; margin-top: 0.4em; min-height: 2.75rem; padding: 0.55em 1.15em; cursor: pointer;
  font: 700 0.9375em/1 var(--font-body); color: var(--ink); background: var(--yellow-on-ink); border: 2px solid var(--paper); border-radius: 999px; }
.paint-race:hover, .paint-race:active { background: #fbe39b; }
/* phones: the car gets its own full-width row (arrows on either side) so the paint job is easy to see, with the paint's
   name and the Race button underneath; centered since it sits on its own under the strip */
@media (max-width: 40em) { .paint-shop { font-size: 1.05rem; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "pick pick" "name race"; left: 50%; translate: -50% 0; } }
.paint-prev:focus-visible, .paint-next:focus-visible, .paint-race:focus-visible { outline: 3px solid var(--yellow-on-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .paint-shop.is-ready { animation: none; } }

/* ==========================================================================
   Motion settings: pause button and reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* Pause / play every animation on the page (WCAG 2.2.2). The choice is remembered in this browser. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
/* one-time entrances always play, even if the visitor saved "paused" (otherwise things would stay hidden) */
.motion-paused .hero-copy > :not(.hero-swoop), .motion-paused .motion-wrap, .motion-paused .tv, .motion-paused .tv-antenna,
.motion-paused .crt-on, .motion-paused .crt-beam, .motion-paused .web-strand { animation-play-state: running !important; }   /* entrance animations finish even when paused; the swoop is left out so it pauses with the panel and pennant it swaps with */
.motion-paused .spider-body { animation-play-state: paused, running !important; }
.motion-paused .hero h1 .hl { animation-play-state: running !important; }
.motion-paused .ghost-enter { transform: none !important; }
.motion-paused .finish.is-live *, .motion-paused .finish.is-live *::before, .motion-paused .finish.is-live *::after { animation-play-state: running !important; }   /* a race started with Race it! */   /* paused: the big ghost stays out where you can see him */

/* ---------- SEO myth callout (Under the hood), deadline board (Accessibility), price table (FAQ) ---------- */
.seo-callout {
  margin: 2rem 0 3rem; padding: 1.25rem 1.5rem; background: var(--white-warm); color: var(--ink);
  border: 3px solid var(--ink); border-left-width: 10px; border-left-color: var(--gold);
  border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink); text-align: left; display: grid;
  grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
}
.seo-callout h3 { margin: 0 0 0.5rem; }
.seo-callout p { margin: 0.5rem 0 0; }
.hl-gold { background: linear-gradient(transparent 45%, var(--gold) 45%); color: inherit; font-weight: 800; padding: 0 0.1em; }
.deadline-board { margin: 0 0 1.25rem; padding: 1rem 1.25rem; background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.deadline-title { margin: 0 0 0.5rem; font: 700 0.85rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow-on-ink); }
/* "Deadlines are coming" grows once, slowly and gently, about a second after the board comes into view, and again each
   time it scrolls back into view (script.js adds .is-on, and removes it once the board is fully off screen). It grows
   from its left edge and stays inside the board. Pauses with the pause button. */
.deadline-title { width: fit-content; transform-origin: 0 50%; --dl-pulse: 1.12; }   /* only as wide as the words */
@media (max-width: 22.5em) { .deadline-title { --dl-pulse: 1.05; } }   /* the narrowest phones: the title nearly fills the board, so a smaller pulse keeps it inside */
@media (prefers-reduced-motion: no-preference) {
  .deadline-board.is-on .deadline-title { animation: deadline-pulse 1.8s ease-in-out 1s both; }
}
@keyframes deadline-pulse { 0% { transform: none; } 45%, 55% { transform: scale(var(--dl-pulse)); } 100% { transform: none; } }
.deadline-board dl { margin: 0; display: grid; gap: 0.6rem; }
.deadline-board dl > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; align-items: baseline; }
.deadline-board dt { font-weight: 800; color: var(--yellow-on-ink); }
.deadline-board dd { margin: 0; }
.deadline-note { margin: 0.75rem 0 0; font-style: italic; }
@media (max-width: 30em) { .deadline-board dl > div { grid-template-columns: 1fr; gap: 0.1rem; } }
.price-table, .choice-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 0.75rem; font-size: 0.95rem; }
.price-table caption, .choice-table caption { text-align: left; font-weight: 700; margin-bottom: 0.4rem; }
.price-table th, .price-table td, .choice-table th, .choice-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(34, 31, 27, 0.18); text-align: left; vertical-align: top; }
.price-table thead th, .choice-table thead th { border-bottom: 2px solid var(--ink); }
.price-table td:last-child { font-weight: 800; white-space: nowrap; }
.faq-fine { font-size: 0.9rem; color: var(--muted); }
@media (max-width: 30em) { .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price-table tr { display: grid; padding: 0.5rem 0; border-bottom: 1px solid rgba(34, 31, 27, 0.18); }
  .price-table th, .price-table td, .choice-table th, .choice-table td { border: 0; padding: 0.1rem 0; }
  .price-table td:nth-child(2)::before { content: "Typical: "; font-weight: 700; }
  .price-table td:last-child::before { content: "With me: "; } }

/* ---------- Search landing pages: standalone pages for one topic, not in the menu; each links back into the main page ---------- */
.landing-wrap { max-width: 46rem; text-align: left; }
.landing-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: 0.3rem 0 1rem; }
.landing-lede { font-size: 1.15rem; }
.landing-hero h2 { margin: 2rem 0 0.6rem; }
.landing-list { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.landing-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 2rem 0 1rem; }
.landing-fine { font-size: 0.9rem; color: var(--muted); }
.landing-footer { padding: 1.5rem 0; text-align: center; }

.lede-2 { display: block; }   /* second sentence on its own line */
.nowrap { white-space: nowrap; }   /* keeps "Custom-built" from breaking at the hyphen */
@media (max-width: 22em) { .faq summary .nowrap, .faq-tag { white-space: normal; } }   /* large text on small phones: an FAQ question may break at the hyphen, and the "Worth the read" tag onto two lines, rather than run off the screen */
.empower { background: linear-gradient(transparent 55%, var(--gold) 55%); padding: 0 0.1em; }
/* "Same platform" block: its own centered sub-section */
.compare-intro, .compare-lead { max-width: 46rem; margin-inline: auto; text-align: center; }

.footer-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.1rem; margin: 0 0 0.9rem; font-size: 0.9rem; }
.footer-more a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--cyan-on-ink); }   /* 44px tall tap targets; the extra height replaces the row gap */
.seo-body h3 { margin-top: 0.4rem; }
.seo-close { font-weight: 700; }
@media (max-width: 30em) { .seo-callout { grid-template-columns: 1fr; } }

.myth-stamp { width: 10.5rem; height: auto; margin-top: 0.3rem; }   /* a worn rubber stamp: "MYTH" over "BUSTED" */
@media (max-width: 30em) { .myth-stamp { width: 9.5rem; } }

.choice-table tbody th { width: 24%; }
@media (max-width: 30em) { .choice-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .choice-table tr { display: grid; padding: 0.5rem 0; border-bottom: 1px solid rgba(34, 31, 27, 0.18); }
  .choice-table th, .choice-table td { border: 0; padding: 0.15rem 0; width: auto; }
  .choice-table tbody th { width: auto; }
  .choice-table td:nth-of-type(1)::before { content: "Good for: "; font-weight: 700; }
  .choice-table td:nth-of-type(2)::before { content: "Keep in mind: "; font-weight: 700; } }

/* phones: the haunt ghost replays on its own 12s beat (4.4s drift, then a pause) */
@keyframes haunt-drift-rep {
  0.000% { opacity: 0.00; transform: translate(-2.40em, -0.15em) scale(0.60) rotate(0.0deg); }
  0.917% { opacity: 0.03; transform: translate(-2.39em, -0.15em) scale(0.60) rotate(0.5deg); }
  1.833% { opacity: 0.10; transform: translate(-2.35em, -0.16em) scale(0.62) rotate(0.9deg); }
  2.750% { opacity: 0.22; transform: translate(-2.30em, -0.18em) scale(0.64) rotate(1.4deg); }
  3.667% { opacity: 0.35; transform: translate(-2.23em, -0.20em) scale(0.66) rotate(1.8deg); }
  4.583% { opacity: 0.50; transform: translate(-2.14em, -0.24em) scale(0.69) rotate(2.1deg); }
  5.500% { opacity: 0.65; transform: translate(-2.01em, -0.29em) scale(0.73) rotate(2.4deg); }
  6.417% { opacity: 0.78; transform: translate(-1.88em, -0.35em) scale(0.76) rotate(2.7deg); }
  7.333% { opacity: 0.90; transform: translate(-1.73em, -0.42em) scale(0.80) rotate(2.9deg); }
  8.250% { opacity: 0.97; transform: translate(-1.55em, -0.50em) scale(0.84) rotate(3.0deg); }
  9.167% { opacity: 1.00; transform: translate(-1.37em, -0.59em) scale(0.87) rotate(3.0deg); }
  10.083% { opacity: 1.00; transform: translate(-1.16em, -0.69em) scale(0.91) rotate(3.0deg); }
  11.000% { opacity: 1.00; transform: translate(-0.93em, -0.78em) scale(0.94) rotate(2.9deg); }
  11.917% { opacity: 1.00; transform: translate(-0.70em, -0.87em) scale(0.96) rotate(2.7deg); }
  12.833% { opacity: 1.00; transform: translate(-0.46em, -0.94em) scale(0.98) rotate(2.4deg); }
  13.750% { opacity: 1.00; transform: translate(-0.21em, -0.99em) scale(1.00) rotate(2.1deg); }
  14.667% { opacity: 1.00; transform: translate(0.05em, -1.03em) scale(1.00) rotate(1.8deg); }
  15.583% { opacity: 1.00; transform: translate(0.32em, -1.05em) scale(1.00) rotate(1.4deg); }
  16.500% { opacity: 1.00; transform: translate(0.60em, -1.08em) scale(1.00) rotate(0.9deg); }
  17.417% { opacity: 1.00; transform: translate(0.87em, -1.10em) scale(1.00) rotate(0.5deg); }
  18.333% { opacity: 1.00; transform: translate(1.15em, -1.14em) scale(1.00) rotate(0.0deg); }
  19.250% { opacity: 1.00; transform: translate(1.43em, -1.18em) scale(1.00) rotate(-0.5deg); }
  20.167% { opacity: 1.00; transform: translate(1.70em, -1.23em) scale(1.00) rotate(-0.9deg); }
  21.083% { opacity: 1.00; transform: translate(1.98em, -1.26em) scale(1.00) rotate(-1.4deg); }
  22.000% { opacity: 1.00; transform: translate(2.25em, -1.30em) scale(1.00) rotate(-1.8deg); }
  22.917% { opacity: 1.00; transform: translate(2.51em, -1.33em) scale(1.00) rotate(-2.1deg); }
  23.833% { opacity: 1.00; transform: translate(2.76em, -1.35em) scale(1.00) rotate(-2.4deg); }
  24.750% { opacity: 1.00; transform: translate(3.00em, -1.39em) scale(1.00) rotate(-2.7deg); }
  25.667% { opacity: 1.00; transform: translate(3.23em, -1.46em) scale(1.00) rotate(-2.9deg); }
  26.583% { opacity: 1.00; transform: translate(3.46em, -1.52em) scale(1.00) rotate(-3.0deg); }
  27.500% { opacity: 1.00; transform: translate(3.67em, -1.59em) scale(1.00) rotate(-3.0deg); }
  28.417% { opacity: 1.00; transform: translate(3.85em, -1.64em) scale(1.00) rotate(-3.0deg); }
  29.333% { opacity: 0.98; transform: translate(4.03em, -1.69em) scale(1.00) rotate(-2.9deg); }
  30.250% { opacity: 0.89; transform: translate(4.18em, -1.74em) scale(1.00) rotate(-2.7deg); }
  31.167% { opacity: 0.76; transform: translate(4.31em, -1.78em) scale(1.00) rotate(-2.4deg); }
  32.083% { opacity: 0.60; transform: translate(4.44em, -1.81em) scale(1.00) rotate(-2.1deg); }
  33.000% { opacity: 0.43; transform: translate(4.53em, -1.85em) scale(1.00) rotate(-1.8deg); }
  33.917% { opacity: 0.27; transform: translate(4.60em, -1.87em) scale(1.00) rotate(-1.4deg); }
  34.833% { opacity: 0.13; transform: translate(4.65em, -1.89em) scale(1.00) rotate(-0.9deg); }
  35.750% { opacity: 0.04; transform: translate(4.69em, -1.90em) scale(1.00) rotate(-0.5deg); }
  36.667% { opacity: 0.00; transform: translate(4.70em, -1.90em) scale(1.00) rotate(-0.0deg); }
  36.8%, 100% { opacity: 0.00; transform: translate(-2.40em, -0.15em) scale(0.60) rotate(0.0deg); }
}
@keyframes haunt-drift-sm-rep {
  0.000% { opacity: 0.00; transform: translate(-1.80em, -0.10em) scale(0.60) rotate(0.0deg); }
  0.917% { opacity: 0.03; transform: translate(-1.80em, -0.10em) scale(0.60) rotate(0.5deg); }
  1.833% { opacity: 0.10; transform: translate(-1.79em, -0.11em) scale(0.62) rotate(0.9deg); }
  2.750% { opacity: 0.22; transform: translate(-1.76em, -0.14em) scale(0.64) rotate(1.4deg); }
  3.667% { opacity: 0.35; transform: translate(-1.73em, -0.17em) scale(0.66) rotate(1.8deg); }
  4.583% { opacity: 0.50; transform: translate(-1.69em, -0.22em) scale(0.69) rotate(2.1deg); }
  5.500% { opacity: 0.65; transform: translate(-1.65em, -0.27em) scale(0.73) rotate(2.4deg); }
  6.417% { opacity: 0.78; transform: translate(-1.59em, -0.35em) scale(0.76) rotate(2.7deg); }
  7.333% { opacity: 0.90; transform: translate(-1.53em, -0.44em) scale(0.80) rotate(2.9deg); }
  8.250% { opacity: 0.97; transform: translate(-1.46em, -0.55em) scale(0.84) rotate(3.0deg); }
  9.167% { opacity: 1.00; transform: translate(-1.38em, -0.66em) scale(0.87) rotate(3.0deg); }
  10.083% { opacity: 1.00; transform: translate(-1.30em, -0.79em) scale(0.91) rotate(3.0deg); }
  11.000% { opacity: 1.00; transform: translate(-1.22em, -0.91em) scale(0.94) rotate(2.9deg); }
  11.917% { opacity: 1.00; transform: translate(-1.12em, -1.02em) scale(0.96) rotate(2.7deg); }
  12.833% { opacity: 1.00; transform: translate(-1.02em, -1.13em) scale(0.98) rotate(2.4deg); }
  13.750% { opacity: 1.00; transform: translate(-0.92em, -1.22em) scale(1.00) rotate(2.1deg); }
  14.667% { opacity: 1.00; transform: translate(-0.81em, -1.30em) scale(1.00) rotate(1.8deg); }
  15.583% { opacity: 1.00; transform: translate(-0.71em, -1.35em) scale(1.00) rotate(1.4deg); }
  16.500% { opacity: 1.00; transform: translate(-0.60em, -1.42em) scale(1.00) rotate(0.9deg); }
  17.417% { opacity: 1.00; transform: translate(-0.48em, -1.49em) scale(1.00) rotate(0.5deg); }
  18.333% { opacity: 1.00; transform: translate(-0.38em, -1.57em) scale(1.00) rotate(0.0deg); }
  19.250% { opacity: 1.00; transform: translate(-0.27em, -1.65em) scale(1.00) rotate(-0.5deg); }
  20.167% { opacity: 1.00; transform: translate(-0.15em, -1.74em) scale(1.00) rotate(-0.9deg); }
  21.083% { opacity: 1.00; transform: translate(-0.04em, -1.82em) scale(1.00) rotate(-1.4deg); }
  22.000% { opacity: 1.00; transform: translate(0.06em, -1.89em) scale(1.00) rotate(-1.8deg); }
  22.917% { opacity: 1.00; transform: translate(0.17em, -1.97em) scale(1.00) rotate(-2.1deg); }
  23.833% { opacity: 1.00; transform: translate(0.27em, -2.03em) scale(1.00) rotate(-2.4deg); }
  24.750% { opacity: 1.00; transform: translate(0.37em, -2.12em) scale(1.00) rotate(-2.7deg); }
  25.667% { opacity: 1.00; transform: translate(0.47em, -2.22em) scale(1.00) rotate(-2.9deg); }
  26.583% { opacity: 1.00; transform: translate(0.55em, -2.32em) scale(1.00) rotate(-3.0deg); }
  27.500% { opacity: 1.00; transform: translate(0.63em, -2.41em) scale(1.00) rotate(-3.0deg); }
  28.417% { opacity: 1.00; transform: translate(0.71em, -2.50em) scale(1.00) rotate(-3.0deg); }
  29.333% { opacity: 0.98; transform: translate(0.78em, -2.58em) scale(1.00) rotate(-2.9deg); }
  30.250% { opacity: 0.89; transform: translate(0.84em, -2.65em) scale(1.00) rotate(-2.7deg); }
  31.167% { opacity: 0.76; transform: translate(0.90em, -2.72em) scale(1.00) rotate(-2.4deg); }
  32.083% { opacity: 0.60; transform: translate(0.94em, -2.77em) scale(1.00) rotate(-2.1deg); }
  33.000% { opacity: 0.43; transform: translate(0.98em, -2.82em) scale(1.00) rotate(-1.8deg); }
  33.917% { opacity: 0.27; transform: translate(1.01em, -2.86em) scale(1.00) rotate(-1.4deg); }
  34.833% { opacity: 0.13; transform: translate(1.04em, -2.88em) scale(1.00) rotate(-0.9deg); }
  35.750% { opacity: 0.04; transform: translate(1.05em, -2.90em) scale(1.00) rotate(-0.5deg); }
  36.667% { opacity: 0.00; transform: translate(1.05em, -2.90em) scale(1.00) rotate(-0.0deg); }
  36.8%, 100% { opacity: 0.00; transform: translate(-1.80em, -0.10em) scale(0.60) rotate(0.0deg); }
}
@media (max-width: 52em) { .hero-haunt { translate: 0 2px; } }

/* "Same platform, two very different websites": a light panel and a dark panel split by a gold slash; no letter crosses the cut */
.split-title { display: grid; grid-template-columns: auto 1fr; max-width: 56rem; margin: 0 auto 1.75rem; padding: 0; overflow: hidden;
  border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink); background: var(--white-warm);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.15; }
.split-a { padding: 1.6rem 2.6rem 1.6rem 1.75rem; color: var(--ink); align-self: center; }
.split-b { position: relative; padding: 1.6rem 1.75rem 1.6rem 3rem; color: var(--white-warm); background: var(--ink); clip-path: polygon(1.8rem 0, 100% 0, 100% 100%, 0 100%); margin-left: -1.8rem; display: flex; align-items: center; justify-content: center; }
.split-b::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2.6rem; background: var(--gold); clip-path: polygon(1.8rem 0, 2.6rem 0, 0.8rem 100%, 0 100%); }
@media (max-width: 40em) {
  .split-title { grid-template-columns: 1fr; text-align: center; }
  .split-a { padding: 1.1rem 1.25rem; }
  .split-b { margin: 0; padding: 1.35rem 1.25rem 1.1rem; clip-path: none; border-top: 0.45rem solid var(--gold); }   /* phones: a straight gold divider */
  .split-b::before { display: none; }
}

.read-more { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 0.1rem; font-weight: 700; white-space: nowrap; }

/* About: the line that ties the shop to the web work, set apart */
.pull-line { margin: 1.5rem 0; padding: 0.9rem 1.2rem; border-left: 8px solid var(--gold); background: var(--white-warm); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.0625rem; line-height: 1.6; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.pull-line strong { font-weight: 800; }

/* ---------- "Send it": a snowmobile run along the bottom of the Contact section ----------
   15s run (16.5s on phones), played from the start each time it comes fully into view, then again 6s after each
   run ends while it stays on screen (script.js): rides in from the left at one steady speed ("Don't be silly, send it!"), jumps the gap nose up ("Woo!"),
   comes up short on the landing mound, gets thrown clear and lands in the snow ("Well that hurt.") while the sled
   bounces, spins around and tips onto its side. He gets up, walks back to it, rolls it upright, turns it around,
   hops on and rides off ("Still runs!").
   The movement keyframes at the bottom of this file are generated by a script, so change the story there, not by hand.
   Pauses with the pause button; reduced motion shows the last moment. */
.send-scene { position: relative; z-index: 5;   /* in front of the form above it, so a high jump or a bubble can overlap it */
  margin-top: 2rem; margin-bottom: calc(-1 * clamp(3.5rem, 8vw, 6rem)); }
.sled-svg { display: block; width: 100%; height: auto; max-height: 230px; overflow: visible; }   /* the whole scene always fits; the viewBox is set wider than the action so everything is drawn smaller */
.sled-svg text { font: 700 24px var(--font-body); fill: #221f1b; }
.sled-svg .send-it-word { font: 400 32px var(--font-display); fill: #a63a24; transform-box: view-box; transform-origin: 0 0; }   /* "send it!" punches out of the bubble; it sits in a group whose 0,0 is the middle of the word, so it grows from its center the same way in every browser (Safari scaled it from the corner, out of the bubble) */
.sled, .rider, .b1, .b2, .b4 { transform-box: view-box; transform-origin: 0 0; }
.arm-up, .arm-ride, .bubble, .snow-puff, .dazed { opacity: 0; }   /* .b4 rides off with him; still picture: sitting in the snow, so his arm rests at his side (.arm-rest) instead of reaching for the handlebar */
.sled { transform: translate(1100px, 200px) skewX(-28deg) scale(-1, .58); }   /* on its side, facing back */
.rider { transform: translate(1240px, 166px) rotate(360deg) translate(20px, 60px); }
.dazed, .b3 { opacity: 1; }   /* still picture: the last moment */
@media (prefers-reduced-motion: no-preference) {
  .send-scene .dazed, .send-scene .b3 { opacity: 0; }
  .send-scene.is-on .rider { animation: rider-run 15s linear 1 forwards; }
  .send-scene.is-on .sled { animation: sled-run 15s linear 1 forwards; }
  .send-scene.is-on .arm-up { animation: arm-up 15s steps(1) 1 forwards; }
  .send-scene.is-on .arm-ride { animation: arm-ride 15s steps(1) 1 forwards; }
  .send-scene.is-on .arm-rest { animation: arm-rest 15s steps(1) 1 forwards; }
  .send-scene.is-on .b1 { animation: b1 15s linear 1 forwards, bubble1-run 15s linear 1 forwards; }
  .send-scene.is-on .send-it-word { animation: send-pulse 15s ease-in-out 1 forwards; }   /* said louder once, just before the jump */
  .send-scene.is-on .b2 { animation: b2 15s linear 1 forwards, bubble2-run 15s linear 1 forwards; }
  .send-scene.is-on .b3 { animation: b3 15s ease-out 1 forwards; }
  .send-scene.is-on .b4 { animation: b4 15s linear 1 forwards, bubble4-run 15s linear 1 forwards; }
  .send-scene.is-on .snow-puff { animation: puff 15s ease-out 1 forwards; }
  .send-scene.is-on .dazed { animation: dazed 15s linear 1 forwards; }
  .send-scene.is-on .legs-sit { animation: legs-sit 15s steps(1) 1 forwards; }
  .send-scene.is-on .legs-walk { animation: legs-walk 15s steps(1) 1 forwards; }
  .send-scene.is-on .leg-a { animation: leg-a 15s linear 1 forwards; }
  .send-scene.is-on .leg-b { animation: leg-b 15s linear 1 forwards; }
}
.snow-puff, .dazed { transform-box: fill-box; transform-origin: center; }
/* before the run starts (motion allowed), show its opening frame instead of the crash: no rider or sled yet, and on
   phones the camera already at the start, so nothing jumps when it begins */
@media (prefers-reduced-motion: no-preference) {
  .send-scene:not(.is-on) :is(.rider, .sled) { visibility: hidden; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 40em) {
  .send-scene:not(.is-on) .sled-cam { transform: translateX(360px); }
  .send-scene:not(.is-on) .sled-trees { transform: translateX(180px); }
}
/* the two dizzy stars circle his head in a flat oval, a little bigger as they pass in front and smaller behind,
   opposite each other; still picture: one on each side */
.dz { transform-box: fill-box; transform-origin: center; }
.dz1 { transform: translate(-22px, 2px); }
.dz2 { transform: translate(22px, -2px); }
@media (prefers-reduced-motion: no-preference) {
  .send-scene.is-on .dz { animation: dz-orbit 1.6s linear infinite; }   /* keeps circling (the rest of the scene plays once); they only show while he's dazed */
  .send-scene.is-on .dz2 { animation-delay: -0.8s; }
}
@keyframes dz-orbit {
  0.00% { transform: translate(25.0px, 0.0px) scale(1.00); }
  6.25% { transform: translate(23.1px, 2.3px) scale(1.07); }
  12.50% { transform: translate(17.7px, 4.2px) scale(1.13); }
  18.75% { transform: translate(9.6px, 5.5px) scale(1.17); }
  25.00% { transform: translate(0.0px, 6.0px) scale(1.18); }
  31.25% { transform: translate(-9.6px, 5.5px) scale(1.17); }
  37.50% { transform: translate(-17.7px, 4.2px) scale(1.13); }
  43.75% { transform: translate(-23.1px, 2.3px) scale(1.07); }
  50.00% { transform: translate(-25.0px, 0.0px) scale(1.00); }
  56.25% { transform: translate(-23.1px, -2.3px) scale(0.93); }
  62.50% { transform: translate(-17.7px, -4.2px) scale(0.87); }
  68.75% { transform: translate(-9.6px, -5.5px) scale(0.83); }
  75.00% { transform: translate(-0.0px, -6.0px) scale(0.82); }
  81.25% { transform: translate(9.6px, -5.5px) scale(0.83); }
  87.50% { transform: translate(17.7px, -4.2px) scale(0.87); }
  93.75% { transform: translate(23.1px, -2.3px) scale(0.93); }
  100.00% { transform: translate(25.0px, -0.0px) scale(1.00); }
}
.legs-walk { opacity: 0; }   /* standing legs, only for the walk back to the sled */
.leg-a, .leg-b { transform-box: fill-box; transform-origin: 50% 0; }   /* each leg swings from the hip */
/* Phones: script.js zooms in (a 640-unit-wide view), and the camera pans along with him: in from the left, holding on
   the crash, then out to the right. The still picture (reduced motion) is framed on the crash. */
.sled-cam { transform-box: view-box; }
@media (max-width: 40em) { .sled-cam { transform: translateX(-830px); } .sled-trees { transform: translateX(-415px); } }   /* the trees, farther back, are offset half as much */
/* phones: the camera pan, and the whole run about 10% slower (16.5s) since he and the bubbles are harder to read on
   a small screen; the keyframes are percentages, so everything stays in step */
@media (max-width: 40em) and (prefers-reduced-motion: no-preference) {
  .send-scene.is-on .sled-cam { animation: sled-cam 15s linear 1 forwards; }
  .send-scene.is-on .sled-trees { animation: sled-trees 15s linear 1 forwards; }
  .send-scene.is-on :is(.rider, .sled, .arm-up, .arm-ride, .arm-rest, .b1, .send-it-word, .b2, .b3, .b4, .snow-puff, .dazed,
    .legs-sit, .legs-walk, .leg-a, .leg-b, .sled-cam, .sled-trees) { animation-duration: 16.5s; }
}
/* a solid cream outline around the rider and sled (the cream-edge filter in the scene's drawing, about 1.5px on screen on desktop, a little over 1px on phones),
   so their dark parts stand out against the night sky */
.sled, .rider { filter: url(#cream-edge); }
/* SLED-KEYFRAMES (generated: positions every quarter percent of the loop) */
@keyframes arm-up { 0%, 26.5% { opacity: 0; } 27.0%, 35.5% { opacity: 1; } 36.0%, 70.5% { opacity: 0; } 71.0%, 92.0% { opacity: 1; } 92.5%, 100% { opacity: 0; } }
@keyframes arm-ride { 0%, 47.5% { opacity: 1; } 47.6%, 62.5% { opacity: 0; } 62.6%, 100% { opacity: 1; } }
@keyframes arm-rest { 0%, 47.5% { opacity: 0; } 47.6%, 62.5% { opacity: 1; } 62.6%, 100% { opacity: 0; } }
@keyframes b1 { 0%, 3% { opacity: 0; } 5%, 26.5% { opacity: 1; } 28.0%, 100% { opacity: 0; } }
@keyframes send-pulse { 0%, 18.5% { transform: none; } 19.5%, 25.5% { transform: scale(1.3); } 26.5%, 100% { transform: none; } }
@keyframes b2 { 0%, 27.5% { opacity: 0; } 28.5%, 35.5% { opacity: 1; } 36.5%, 100% { opacity: 0; } }
@keyframes b3 { 0%, 48.5% { opacity: 0; } 50.0%, 56.5% { opacity: 1; } 57.7%, 100% { opacity: 0; } }
@keyframes b4 { 0%, 69.5% { opacity: 0; } 71.0%, 90.0% { opacity: 1; } 92.0%, 100% { opacity: 0; } }
@keyframes puff { 0%, 35.4% { opacity: 0; transform: none; } 35.5% { opacity: 1; transform: scale(.6); } 41.5%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes dazed { 0%, 47.5% { opacity: 0; } 49.5%, 56.5% { opacity: 1; } 57.7%, 100% { opacity: 0; } }
@keyframes legs-sit { 0%, 57.3% { opacity: 1; } 57.4%, 68.9% { opacity: 0; } 69.0%, 100% { opacity: 1; } }
@keyframes legs-walk { 0%, 57.3% { opacity: 0; } 57.4%, 68.9% { opacity: 1; } 69.0%, 100% { opacity: 0; } }
@keyframes sled-run {
  0.00% { transform: translate(-900.0px, 200.0px) rotate(0.0deg); }
  0.25% { transform: translate(-887.0px, 200.8px) rotate(0.3deg); }
  0.50% { transform: translate(-874.0px, 199.1px) rotate(-0.3deg); }
  0.75% { transform: translate(-861.0px, 200.1px) rotate(0.0deg); }
  1.00% { transform: translate(-848.0px, 200.8px) rotate(0.3deg); }
  1.25% { transform: translate(-835.0px, 199.0px) rotate(-0.3deg); }
  1.50% { transform: translate(-822.0px, 200.3px) rotate(0.1deg); }
  1.75% { transform: translate(-809.0px, 200.7px) rotate(0.2deg); }
  2.00% { transform: translate(-796.0px, 199.0px) rotate(-0.3deg); }
  2.25% { transform: translate(-783.0px, 200.4px) rotate(0.1deg); }
  2.50% { transform: translate(-770.0px, 200.5px) rotate(0.2deg); }
  2.75% { transform: translate(-757.0px, 199.0px) rotate(-0.3deg); }
  3.00% { transform: translate(-744.0px, 200.5px) rotate(0.2deg); }
  3.25% { transform: translate(-731.0px, 200.4px) rotate(0.1deg); }
  3.50% { transform: translate(-718.0px, 199.0px) rotate(-0.3deg); }
  3.75% { transform: translate(-705.0px, 200.7px) rotate(0.2deg); }
  4.00% { transform: translate(-693.0px, 200.3px) rotate(0.1deg); }
  4.25% { transform: translate(-680.0px, 199.0px) rotate(-0.3deg); }
  4.50% { transform: translate(-667.0px, 200.8px) rotate(0.3deg); }
  4.75% { transform: translate(-654.0px, 200.1px) rotate(0.0deg); }
  5.00% { transform: translate(-641.0px, 199.1px) rotate(-0.3deg); }
  5.25% { transform: translate(-628.0px, 200.8px) rotate(0.3deg); }
  5.50% { transform: translate(-615.0px, 200.0px) rotate(0.0deg); }
  5.75% { transform: translate(-602.0px, 199.2px) rotate(-0.3deg); }
  6.00% { transform: translate(-589.0px, 200.9px) rotate(0.3deg); }
  6.25% { transform: translate(-576.0px, 199.9px) rotate(-0.0deg); }
  6.50% { transform: translate(-563.0px, 199.2px) rotate(-0.3deg); }
  6.75% { transform: translate(-550.0px, 201.0px) rotate(0.3deg); }
  7.00% { transform: translate(-537.0px, 199.7px) rotate(-0.1deg); }
  7.25% { transform: translate(-524.0px, 199.3px) rotate(-0.2deg); }
  7.50% { transform: translate(-511.0px, 201.0px) rotate(0.3deg); }
  7.75% { transform: translate(-498.0px, 199.6px) rotate(-0.1deg); }
  8.00% { transform: translate(-486.0px, 199.5px) rotate(-0.2deg); }
  8.25% { transform: translate(-473.0px, 201.0px) rotate(0.3deg); }
  8.50% { transform: translate(-460.0px, 199.5px) rotate(-0.2deg); }
  8.75% { transform: translate(-447.0px, 199.6px) rotate(-0.1deg); }
  9.00% { transform: translate(-434.0px, 201.0px) rotate(0.3deg); }
  9.25% { transform: translate(-421.0px, 199.3px) rotate(-0.2deg); }
  9.50% { transform: translate(-408.0px, 199.7px) rotate(-0.1deg); }
  9.75% { transform: translate(-395.0px, 201.0px) rotate(0.3deg); }
  10.00% { transform: translate(-382.0px, 199.2px) rotate(-0.3deg); }
  10.25% { transform: translate(-369.0px, 199.9px) rotate(-0.0deg); }
  10.50% { transform: translate(-356.0px, 200.9px) rotate(0.3deg); }
  10.75% { transform: translate(-343.0px, 199.2px) rotate(-0.3deg); }
  11.00% { transform: translate(-330.0px, 200.0px) rotate(-0.0deg); }
  11.25% { transform: translate(-317.0px, 200.8px) rotate(0.3deg); }
  11.50% { transform: translate(-304.0px, 199.1px) rotate(-0.3deg); }
  11.75% { transform: translate(-291.0px, 200.1px) rotate(0.0deg); }
  12.00% { transform: translate(-279.0px, 200.8px) rotate(0.3deg); }
  12.25% { transform: translate(-266.0px, 199.0px) rotate(-0.3deg); }
  12.50% { transform: translate(-253.0px, 200.3px) rotate(0.1deg); }
  12.75% { transform: translate(-240.0px, 200.7px) rotate(0.2deg); }
  13.00% { transform: translate(-227.0px, 199.0px) rotate(-0.3deg); }
  13.25% { transform: translate(-214.0px, 200.4px) rotate(0.1deg); }
  13.50% { transform: translate(-201.0px, 200.5px) rotate(0.2deg); }
  13.75% { transform: translate(-188.0px, 199.0px) rotate(-0.3deg); }
  14.00% { transform: translate(-175.0px, 200.5px) rotate(0.2deg); }
  14.25% { transform: translate(-162.0px, 200.4px) rotate(0.1deg); }
  14.50% { transform: translate(-149.0px, 199.0px) rotate(-0.3deg); }
  14.75% { transform: translate(-136.0px, 200.7px) rotate(0.2deg); }
  15.00% { transform: translate(-123.0px, 200.3px) rotate(0.1deg); }
  15.25% { transform: translate(-110.0px, 199.0px) rotate(-0.3deg); }
  15.50% { transform: translate(-97.0px, 200.8px) rotate(0.3deg); }
  15.75% { transform: translate(-84.0px, 200.1px) rotate(0.0deg); }
  16.00% { transform: translate(-72.0px, 199.1px) rotate(-0.3deg); }
  16.25% { transform: translate(-59.0px, 200.8px) rotate(0.3deg); }
  16.50% { transform: translate(-46.0px, 200.0px) rotate(0.0deg); }
  16.75% { transform: translate(-33.0px, 199.2px) rotate(-0.3deg); }
  17.00% { transform: translate(-20.0px, 200.9px) rotate(0.3deg); }
  17.25% { transform: translate(-7.0px, 199.9px) rotate(-0.0deg); }
  17.50% { transform: translate(6.0px, 199.2px) rotate(-0.3deg); }
  17.75% { transform: translate(19.0px, 201.0px) rotate(0.3deg); }
  18.00% { transform: translate(32.0px, 199.7px) rotate(-0.1deg); }
  18.25% { transform: translate(45.0px, 199.3px) rotate(-0.2deg); }
  18.50% { transform: translate(58.0px, 201.0px) rotate(0.3deg); }
  18.75% { transform: translate(71.0px, 199.6px) rotate(-0.1deg); }
  19.00% { transform: translate(84.0px, 199.5px) rotate(-0.2deg); }
  19.25% { transform: translate(97.0px, 201.0px) rotate(0.3deg); }
  19.50% { transform: translate(110.0px, 199.5px) rotate(-0.2deg); }
  19.75% { transform: translate(123.0px, 199.6px) rotate(-0.1deg); }
  20.00% { transform: translate(135.0px, 201.0px) rotate(0.3deg); }
  20.25% { transform: translate(148.0px, 199.3px) rotate(-0.2deg); }
  20.50% { transform: translate(161.0px, 199.7px) rotate(-0.1deg); }
  20.75% { transform: translate(174.0px, 201.0px) rotate(0.3deg); }
  21.00% { transform: translate(187.0px, 199.2px) rotate(-0.3deg); }
  21.25% { transform: translate(200.0px, 199.9px) rotate(-0.0deg); }
  21.50% { transform: translate(213.0px, 200.9px) rotate(0.3deg); }
  21.75% { transform: translate(226.0px, 199.2px) rotate(-0.3deg); }
  22.00% { transform: translate(239.0px, 200.0px) rotate(-0.0deg); }
  22.25% { transform: translate(252.0px, 200.8px) rotate(0.3deg); }
  22.50% { transform: translate(265.0px, 199.1px) rotate(-0.3deg); }
  22.75% { transform: translate(278.0px, 200.1px) rotate(0.0deg); }
  23.00% { transform: translate(291.0px, 200.8px) rotate(0.1deg); }
  23.25% { transform: translate(304.0px, 198.7px) rotate(-3.1deg); }
  23.50% { transform: translate(317.0px, 199.0px) rotate(-5.2deg); }
  23.75% { transform: translate(329.0px, 198.0px) rotate(-7.5deg); }
  24.00% { transform: translate(342.0px, 194.3px) rotate(-10.5deg); }
  24.25% { transform: translate(355.0px, 193.1px) rotate(-12.5deg); }
  24.50% { transform: translate(367.0px, 190.3px) rotate(-14.7deg); }
  24.75% { transform: translate(380.0px, 185.0px) rotate(-17.6deg); }
  25.00% { transform: translate(392.0px, 182.5px) rotate(-19.3deg); }
  25.25% { transform: translate(404.0px, 177.9px) rotate(-21.4deg); }
  25.50% { transform: translate(416.0px, 171.5px) rotate(-23.9deg); }
  25.75% { transform: translate(428.0px, 167.7px) rotate(-25.3deg); }
  26.00% { transform: translate(440.0px, 161.4px) rotate(-27.3deg); }
  26.25% { transform: translate(451.0px, 154.2px) rotate(-29.5deg); }
  26.50% { transform: translate(462.0px, 148.4px) rotate(-30.5deg); }
  26.75% { transform: translate(472.0px, 140.8px) rotate(-30.5deg); }
  27.00% { transform: translate(483.0px, 132.9px) rotate(-30.4deg); }
  27.25% { transform: translate(493.0px, 126.0px) rotate(-30.2deg); }
  27.50% { transform: translate(504.0px, 118.9px) rotate(-30.0deg); }
  27.75% { transform: translate(515.0px, 112.3px) rotate(-29.7deg); }
  28.00% { transform: translate(527.0px, 105.6px) rotate(-29.4deg); }
  28.25% { transform: translate(538.0px, 99.9px) rotate(-29.0deg); }
  28.50% { transform: translate(550.0px, 94.2px) rotate(-28.6deg); }
  28.75% { transform: translate(562.0px, 89.0px) rotate(-28.1deg); }
  29.00% { transform: translate(574.0px, 84.4px) rotate(-27.6deg); }
  29.25% { transform: translate(586.0px, 80.4px) rotate(-27.0deg); }
  29.50% { transform: translate(598.0px, 76.8px) rotate(-26.4deg); }
  29.75% { transform: translate(611.0px, 73.6px) rotate(-25.8deg); }
  30.00% { transform: translate(624.0px, 71.0px) rotate(-25.0deg); }
  30.25% { transform: translate(636.0px, 69.2px) rotate(-24.4deg); }
  30.50% { transform: translate(649.0px, 67.9px) rotate(-23.6deg); }
  30.75% { transform: translate(662.0px, 67.1px) rotate(-22.9deg); }
  31.00% { transform: translate(675.0px, 67.0px) rotate(-22.1deg); }
  31.25% { transform: translate(688.0px, 67.6px) rotate(-21.4deg); }
  31.50% { transform: translate(701.0px, 68.7px) rotate(-20.6deg); }
  31.75% { transform: translate(714.0px, 70.5px) rotate(-19.9deg); }
  32.00% { transform: translate(727.0px, 73.0px) rotate(-19.2deg); }
  32.25% { transform: translate(739.0px, 75.8px) rotate(-18.5deg); }
  32.50% { transform: translate(752.0px, 79.4px) rotate(-17.9deg); }
  32.75% { transform: translate(764.0px, 83.4px) rotate(-17.3deg); }
  33.00% { transform: translate(776.0px, 87.8px) rotate(-16.7deg); }
  33.25% { transform: translate(788.0px, 92.9px) rotate(-16.2deg); }
  33.50% { transform: translate(800.0px, 98.4px) rotate(-15.7deg); }
  33.75% { transform: translate(811.0px, 104.0px) rotate(-15.4deg); }
  34.00% { transform: translate(823.0px, 110.6px) rotate(-15.0deg); }
  34.25% { transform: translate(834.0px, 117.1px) rotate(-14.7deg); }
  34.50% { transform: translate(845.0px, 124.0px) rotate(-14.4deg); }
  34.75% { transform: translate(855.0px, 130.8px) rotate(-14.2deg); }
  35.00% { transform: translate(866.0px, 138.6px) rotate(-14.1deg); }
  35.25% { transform: translate(876.0px, 146.1px) rotate(-14.0deg); }
  35.50% { transform: translate(886.0px, 154.0px) rotate(-14.0deg) skewX(0.0deg) scale(1.000, 1.000); }
  35.75% { transform: translate(896.7px, 139.2px) rotate(-9.5deg) skewX(0.0deg) scale(1.000, 1.000); }
  36.00% { transform: translate(907.4px, 126.2px) rotate(-5.0deg) skewX(0.0deg) scale(1.000, 1.000); }
  36.25% { transform: translate(918.1px, 115.0px) rotate(-0.4deg) skewX(0.0deg) scale(1.000, 1.000); }
  36.50% { transform: translate(928.8px, 105.6px) rotate(3.9deg) skewX(0.0deg) scale(1.000, 1.000); }
  36.75% { transform: translate(939.5px, 98.0px) rotate(8.0deg) skewX(0.0deg) scale(1.000, 1.000); }
  37.00% { transform: translate(950.2px, 92.2px) rotate(11.7deg) skewX(0.0deg) scale(0.998, 1.000); }
  37.25% { transform: translate(960.9px, 88.2px) rotate(14.9deg) skewX(0.0deg) scale(0.973, 1.000); }
  37.50% { transform: translate(971.6px, 86.0px) rotate(17.6deg) skewX(0.0deg) scale(0.882, 1.000); }
  37.75% { transform: translate(982.3px, 85.6px) rotate(19.6deg) skewX(0.0deg) scale(0.686, 1.000); }
  38.00% { transform: translate(993.0px, 87.0px) rotate(21.0deg) skewX(0.0deg) scale(0.379, 1.000); }
  38.25% { transform: translate(1003.7px, 90.2px) rotate(21.7deg) skewX(0.0deg) scale(-0.000, 1.000); }
  38.50% { transform: translate(1014.4px, 95.2px) rotate(21.7deg) skewX(0.0deg) scale(-0.379, 1.000); }
  38.75% { transform: translate(1025.1px, 102.0px) rotate(21.0deg) skewX(-1.2deg) scale(-0.686, 0.982); }
  39.00% { transform: translate(1035.8px, 110.6px) rotate(19.6deg) skewX(-4.4deg) scale(-0.882, 0.934); }
  39.25% { transform: translate(1046.5px, 121.0px) rotate(17.6deg) skewX(-8.9deg) scale(-0.973, 0.867); }
  39.50% { transform: translate(1057.2px, 133.2px) rotate(15.0deg) skewX(-14.0deg) scale(-0.998, 0.790); }
  39.75% { transform: translate(1067.9px, 147.2px) rotate(11.9deg) skewX(-19.1deg) scale(-1.000, 0.713); }
  40.00% { transform: translate(1078.6px, 163.0px) rotate(8.3deg) skewX(-23.6deg) scale(-1.000, 0.646); }
  40.25% { transform: translate(1089.3px, 180.6px) rotate(4.3deg) skewX(-26.8deg) scale(-1.000, 0.598); }
  40.50% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  40.75% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  41.00% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  41.25% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  41.50% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  41.75% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  42.00% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  42.25% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  42.50% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  42.75% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  43.00% { transform: translate(1100.0px, 199.6px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  43.25% { transform: translate(1100.0px, 199.9px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  43.50% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  43.75% { transform: translate(1100.0px, 199.6px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  44.00% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  44.25% { transform: translate(1100.0px, 200.4px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  44.50% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  44.75% { transform: translate(1100.0px, 200.1px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  45.00% { transform: translate(1100.0px, 200.4px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  45.25% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  45.50% { transform: translate(1100.0px, 200.1px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  45.75% { transform: translate(1100.0px, 200.3px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  46.00% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  46.25% { transform: translate(1100.0px, 200.2px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  46.50% { transform: translate(1100.0px, 200.3px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  46.75% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  47.00% { transform: translate(1100.0px, 200.3px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  47.25% { transform: translate(1100.0px, 200.2px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  47.50% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  47.75% { transform: translate(1100.0px, 200.3px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  48.00% { transform: translate(1100.0px, 200.1px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  48.25% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  48.50% { transform: translate(1100.0px, 200.4px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  48.75% { transform: translate(1100.0px, 200.1px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  49.00% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  49.25% { transform: translate(1100.0px, 200.4px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  49.50% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  49.75% { transform: translate(1100.0px, 199.6px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  50.00% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  50.25% { transform: translate(1100.0px, 199.9px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  50.50% { transform: translate(1100.0px, 199.6px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  50.75% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  51.00% { transform: translate(1100.0px, 199.9px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  51.25% { transform: translate(1100.0px, 199.7px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  51.50% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  51.75% { transform: translate(1100.0px, 199.8px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  52.00% { transform: translate(1100.0px, 199.7px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  52.25% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  52.50% { transform: translate(1100.0px, 199.7px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  52.75% { transform: translate(1100.0px, 199.8px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  53.00% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  53.25% { transform: translate(1100.0px, 199.7px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  53.50% { transform: translate(1100.0px, 199.9px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  53.75% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  54.00% { transform: translate(1100.0px, 199.6px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  54.25% { transform: translate(1100.0px, 199.9px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  54.50% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  54.75% { transform: translate(1100.0px, 199.6px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  55.00% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  55.25% { transform: translate(1100.0px, 200.4px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  55.50% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  55.75% { transform: translate(1100.0px, 200.1px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  56.00% { transform: translate(1100.0px, 200.4px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  56.25% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  56.50% { transform: translate(1100.0px, 200.1px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  56.75% { transform: translate(1100.0px, 200.3px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  57.00% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  57.25% { transform: translate(1100.0px, 200.2px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  57.50% { transform: translate(1100.0px, 200.3px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  57.75% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  58.00% { transform: translate(1100.0px, 200.3px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  58.25% { transform: translate(1100.0px, 200.2px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  58.50% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  58.75% { transform: translate(1100.0px, 200.3px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  59.00% { transform: translate(1100.0px, 200.1px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  59.25% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  59.50% { transform: translate(1100.0px, 200.4px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  59.75% { transform: translate(1100.0px, 200.1px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  60.00% { transform: translate(1100.0px, 199.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  60.25% { transform: translate(1100.0px, 200.4px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  60.50% { transform: translate(1100.0px, 200.0px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  60.75% { transform: translate(1100.0px, 199.6px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  61.00% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  61.25% { transform: translate(1100.0px, 199.9px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  61.50% { transform: translate(1100.0px, 199.6px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  61.75% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  62.00% { transform: translate(1100.0px, 199.9px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  62.25% { transform: translate(1100.0px, 199.7px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  62.50% { transform: translate(1100.0px, 200.5px) rotate(0.0deg) skewX(-28.0deg) scale(-1.000, 0.580); }
  62.75% { transform: translate(1099.4px, 195.8px) rotate(0.0deg) skewX(-27.0deg) scale(-1.000, 0.594); }
  63.00% { transform: translate(1098.9px, 192.1px) rotate(0.0deg) skewX(-24.5deg) scale(-1.000, 0.633); }
  63.25% { transform: translate(1098.3px, 188.9px) rotate(0.0deg) skewX(-20.7deg) scale(-1.000, 0.689); }
  63.50% { transform: translate(1097.8px, 186.2px) rotate(0.0deg) skewX(-16.3deg) scale(-1.000, 0.755); }
  63.75% { transform: translate(1097.2px, 184.0px) rotate(0.0deg) skewX(-11.7deg) scale(-1.000, 0.825); }
  64.00% { transform: translate(1096.7px, 182.2px) rotate(0.0deg) skewX(-7.3deg) scale(-1.000, 0.891); }
  64.25% { transform: translate(1096.1px, 181.0px) rotate(0.0deg) skewX(-3.5deg) scale(-1.000, 0.947); }
  64.50% { transform: translate(1095.6px, 180.2px) rotate(0.0deg) skewX(-1.0deg) scale(-1.000, 0.986); }
  64.75% { transform: translate(1095.0px, 180.0px) rotate(0.0deg) skewX(0.0deg) scale(-0.997, 1.000); }
  65.00% { transform: translate(1094.4px, 180.2px) rotate(0.0deg) skewX(0.0deg) scale(-0.955, 1.000); }
  65.25% { transform: translate(1093.9px, 181.0px) rotate(0.0deg) skewX(0.0deg) scale(-0.796, 1.000); }
  65.50% { transform: translate(1093.3px, 182.2px) rotate(0.0deg) skewX(0.0deg) scale(-0.473, 1.000); }
  65.75% { transform: translate(1092.8px, 184.0px) rotate(0.0deg) skewX(0.0deg) scale(-0.024, 1.000); }
  66.00% { transform: translate(1092.2px, 186.2px) rotate(0.0deg) skewX(0.0deg) scale(0.432, 1.000); }
  66.25% { transform: translate(1091.7px, 188.9px) rotate(0.0deg) skewX(0.0deg) scale(0.771, 1.000); }
  66.50% { transform: translate(1091.1px, 192.1px) rotate(0.0deg) skewX(0.0deg) scale(0.945, 1.000); }
  66.75% { transform: translate(1090.6px, 195.8px) rotate(0.0deg) skewX(0.0deg) scale(0.996, 1.000); }
  67.00% { transform: translate(1090.0px, 200.0px) rotate(0.0deg) skewX(0.0deg) scale(1.000, 1.000); }
  67.25% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  67.50% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  67.75% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  68.00% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  68.25% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  68.50% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  68.75% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  69.00% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  69.25% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  69.50% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  69.75% { transform: translate(1090.0px, 200.4px) rotate(0.1deg); }
  70.00% { transform: translate(1090.0px, 200.2px) rotate(0.1deg); }
  70.25% { transform: translate(1090.0px, 199.4px) rotate(-0.2deg); }
  70.50% { transform: translate(1090.0px, 200.5px) rotate(0.2deg); }
  70.75% { transform: translate(1090.0px, 200.1px) rotate(0.0deg); }
  71.00% { transform: translate(1090.0px, 199.5px) rotate(-0.2deg); }
  71.25% { transform: translate(1090.0px, 200.5px) rotate(0.2deg); }
  71.50% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  71.75% { transform: translate(1090.0px, 199.5px) rotate(-0.2deg); }
  72.00% { transform: translate(1090.0px, 200.5px) rotate(0.2deg); }
  72.25% { transform: translate(1090.0px, 199.9px) rotate(-0.0deg); }
  72.50% { transform: translate(1090.0px, 199.5px) rotate(-0.2deg); }
  72.75% { transform: translate(1090.0px, 200.6px) rotate(0.2deg); }
  73.00% { transform: translate(1090.0px, 199.8px) rotate(-0.1deg); }
  73.25% { transform: translate(1090.0px, 199.6px) rotate(-0.1deg); }
  73.50% { transform: translate(1090.0px, 200.6px) rotate(0.2deg); }
  73.75% { transform: translate(1090.0px, 199.8px) rotate(-0.1deg); }
  74.00% { transform: translate(1090.0px, 199.7px) rotate(-0.1deg); }
  74.25% { transform: translate(1090.0px, 200.6px) rotate(0.2deg); }
  74.50% { transform: translate(1090.0px, 199.7px) rotate(-0.1deg); }
  74.75% { transform: translate(1090.0px, 199.8px) rotate(-0.1deg); }
  75.00% { transform: translate(1090.0px, 200.6px) rotate(0.2deg); }
  75.25% { transform: translate(1090.0px, 199.6px) rotate(-0.1deg); }
  75.50% { transform: translate(1090.0px, 199.8px) rotate(-0.1deg); }
  75.75% { transform: translate(1090.0px, 200.6px) rotate(0.2deg); }
  76.00% { transform: translate(1090.0px, 199.5px) rotate(-0.2deg); }
  76.25% { transform: translate(1090.0px, 199.9px) rotate(-0.0deg); }
  76.50% { transform: translate(1090.0px, 200.5px) rotate(0.2deg); }
  76.75% { transform: translate(1090.0px, 199.5px) rotate(-0.2deg); }
  77.00% { transform: translate(1090.0px, 200.0px) rotate(0.0deg); }
  77.25% { transform: translate(1090.0px, 200.5px) rotate(0.2deg); }
  77.50% { transform: translate(1090.0px, 199.5px) rotate(-0.2deg); }
  77.75% { transform: translate(1090.0px, 200.1px) rotate(0.0deg); }
  78.00% { transform: translate(1090.0px, 200.5px) rotate(0.2deg); }
  78.25% { transform: translate(1090.0px, 199.4px) rotate(-0.2deg); }
  78.50% { transform: translate(1090.0px, 200.2px) rotate(0.1deg); }
  78.75% { transform: translate(1104.2px, 200.7px) rotate(0.2deg); }
  79.00% { transform: translate(1119.0px, 199.0px) rotate(-0.3deg); }
  79.25% { transform: translate(1134.3px, 200.4px) rotate(0.1deg); }
  79.50% { transform: translate(1150.1px, 200.5px) rotate(0.2deg); }
  79.75% { transform: translate(1166.4px, 199.0px) rotate(-0.3deg); }
  80.00% { transform: translate(1183.2px, 200.5px) rotate(0.2deg); }
  80.25% { transform: translate(1200.6px, 200.4px) rotate(0.1deg); }
  80.50% { transform: translate(1218.4px, 199.0px) rotate(-0.3deg); }
  80.75% { transform: translate(1236.8px, 200.7px) rotate(0.2deg); }
  81.00% { transform: translate(1255.7px, 200.3px) rotate(0.1deg); }
  81.25% { transform: translate(1275.1px, 199.0px) rotate(-0.3deg); }
  81.50% { transform: translate(1295.1px, 200.8px) rotate(0.3deg); }
  81.75% { transform: translate(1315.5px, 200.1px) rotate(0.0deg); }
  82.00% { transform: translate(1336.5px, 199.1px) rotate(-0.3deg); }
  82.25% { transform: translate(1358.0px, 200.8px) rotate(0.3deg); }
  82.50% { transform: translate(1380.0px, 200.0px) rotate(0.0deg); }
  82.75% { transform: translate(1402.5px, 199.2px) rotate(-0.3deg); }
  83.00% { transform: translate(1425.6px, 200.9px) rotate(0.3deg); }
  83.25% { transform: translate(1449.1px, 199.9px) rotate(-0.0deg); }
  83.50% { transform: translate(1473.2px, 199.2px) rotate(-0.3deg); }
  83.75% { transform: translate(1497.8px, 201.0px) rotate(0.3deg); }
  84.00% { transform: translate(1522.9px, 199.7px) rotate(-0.1deg); }
  84.25% { transform: translate(1548.5px, 199.3px) rotate(-0.2deg); }
  84.50% { transform: translate(1574.7px, 201.0px) rotate(0.3deg); }
  84.75% { transform: translate(1601.4px, 199.6px) rotate(-0.1deg); }
  85.00% { transform: translate(1628.5px, 199.5px) rotate(-0.2deg); }
  85.25% { transform: translate(1656.2px, 201.0px) rotate(0.3deg); }
  85.50% { transform: translate(1684.5px, 199.5px) rotate(-0.2deg); }
  85.75% { transform: translate(1713.2px, 199.6px) rotate(-0.1deg); }
  86.00% { transform: translate(1742.5px, 201.0px) rotate(0.3deg); }
  86.25% { transform: translate(1772.2px, 199.3px) rotate(-0.2deg); }
  86.50% { transform: translate(1802.5px, 199.7px) rotate(-0.1deg); }
  86.75% { transform: translate(1833.3px, 201.0px) rotate(0.3deg); }
  87.00% { transform: translate(1864.7px, 199.2px) rotate(-0.3deg); }
  87.25% { transform: translate(1896.5px, 199.9px) rotate(-0.0deg); }
  87.50% { transform: translate(1928.9px, 200.9px) rotate(0.3deg); }
  87.75% { transform: translate(1961.8px, 199.2px) rotate(-0.3deg); }
  88.00% { transform: translate(1995.2px, 200.0px) rotate(-0.0deg); }
  88.25% { transform: translate(2029.1px, 200.8px) rotate(0.3deg); }
  88.50% { transform: translate(2063.5px, 199.1px) rotate(-0.3deg); }
  88.75% { transform: translate(2098.5px, 200.1px) rotate(0.0deg); }
  89.00% { transform: translate(2134.0px, 200.8px) rotate(0.3deg); }
  89.25% { transform: translate(2169.9px, 199.0px) rotate(-0.3deg); }
  89.50% { transform: translate(2206.4px, 200.3px) rotate(0.1deg); }
  89.75% { transform: translate(2243.5px, 200.7px) rotate(0.2deg); }
  90.00% { transform: translate(2281.0px, 199.0px) rotate(-0.3deg); }
  90.25% { transform: translate(2319.1px, 200.4px) rotate(0.1deg); }
  90.50% { transform: translate(2357.7px, 200.5px) rotate(0.2deg); }
  90.75% { transform: translate(2396.8px, 199.0px) rotate(-0.3deg); }
  91.00% { transform: translate(2436.4px, 200.5px) rotate(0.2deg); }
  91.25% { transform: translate(2476.5px, 200.4px) rotate(0.1deg); }
  91.50% { transform: translate(2517.1px, 199.0px) rotate(-0.3deg); }
  91.75% { transform: translate(2558.3px, 200.7px) rotate(0.2deg); }
  92.00% { transform: translate(2600.0px, 200.3px) rotate(0.1deg); }
  92.25% { transform: translate(2641.9px, 200.0px) rotate(0.0deg); }
  92.50% { transform: translate(2683.9px, 200.0px) rotate(0.0deg); }
  92.75% { transform: translate(2725.8px, 200.0px) rotate(0.0deg); }
  93.00% { transform: translate(2767.8px, 200.0px) rotate(0.0deg); }
  93.25% { transform: translate(2809.7px, 200.0px) rotate(0.0deg); }
  93.50% { transform: translate(2851.7px, 200.0px) rotate(0.0deg); }
  93.75% { transform: translate(2893.6px, 200.0px) rotate(0.0deg); }
  94.00% { transform: translate(2935.6px, 200.0px) rotate(0.0deg); }
  94.25% { transform: translate(2977.5px, 200.0px) rotate(0.0deg); }
  94.50% { transform: translate(3019.4px, 200.0px) rotate(0.0deg); }
  94.75% { transform: translate(3061.4px, 200.0px) rotate(0.0deg); }
  95.00% { transform: translate(3103.3px, 200.0px) rotate(0.0deg); }
  95.25% { transform: translate(3145.3px, 200.0px) rotate(0.0deg); }
  95.50% { transform: translate(3187.2px, 200.0px) rotate(0.0deg); }
  95.75% { transform: translate(3229.2px, 200.0px) rotate(0.0deg); }
  96.00% { transform: translate(3271.1px, 200.0px) rotate(0.0deg); }
  96.25% { transform: translate(3313.1px, 200.0px) rotate(0.0deg); }
  96.50% { transform: translate(3355.0px, 200.0px) rotate(0.0deg); }
  96.75% { transform: translate(3396.9px, 200.0px) rotate(0.0deg); }
  97.00% { transform: translate(3438.9px, 200.0px) rotate(0.0deg); }
  97.25% { transform: translate(3480.8px, 200.0px) rotate(0.0deg); }
  97.50% { transform: translate(3522.8px, 200.0px) rotate(0.0deg); }
  97.75% { transform: translate(3564.7px, 200.0px) rotate(0.0deg); }
  98.00% { transform: translate(3606.7px, 200.0px) rotate(0.0deg); }
  98.25% { transform: translate(3648.6px, 200.0px) rotate(0.0deg); }
  98.50% { transform: translate(3690.6px, 200.0px) rotate(0.0deg); }
  98.75% { transform: translate(3732.5px, 200.0px) rotate(0.0deg); }
  99.00% { transform: translate(3774.4px, 200.0px) rotate(0.0deg); }
  99.25% { transform: translate(3816.4px, 200.0px) rotate(0.0deg); }
  99.50% { transform: translate(3858.3px, 200.0px) rotate(0.0deg); }
  99.75% { transform: translate(3900.3px, 200.0px) rotate(0.0deg); }
  100.00% { transform: translate(3942.2px, 200.0px) rotate(0.0deg); }
}
@keyframes rider-run {
  0.00% { transform: translate(-920.0px, 140.0px) rotate(0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  0.25% { transform: translate(-906.7px, 140.7px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  0.50% { transform: translate(-894.3px, 139.2px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  0.75% { transform: translate(-880.9px, 140.1px) rotate(0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  1.00% { transform: translate(-867.7px, 140.7px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  1.25% { transform: translate(-855.4px, 139.2px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  1.50% { transform: translate(-841.9px, 140.2px) rotate(0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  1.75% { transform: translate(-828.8px, 140.6px) rotate(0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  2.00% { transform: translate(-816.4px, 139.1px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  2.25% { transform: translate(-802.8px, 140.4px) rotate(0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  2.50% { transform: translate(-789.8px, 140.5px) rotate(0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  2.75% { transform: translate(-777.4px, 139.1px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  3.00% { transform: translate(-763.8px, 140.5px) rotate(0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  3.25% { transform: translate(-750.8px, 140.4px) rotate(0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  3.50% { transform: translate(-738.4px, 139.1px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  3.75% { transform: translate(-724.8px, 140.6px) rotate(0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  4.00% { transform: translate(-712.9px, 140.2px) rotate(0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  4.25% { transform: translate(-700.4px, 139.2px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  4.50% { transform: translate(-686.7px, 140.7px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  4.75% { transform: translate(-673.9px, 140.1px) rotate(0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  5.00% { transform: translate(-661.3px, 139.2px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  5.25% { transform: translate(-647.7px, 140.7px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  5.50% { transform: translate(-635.0px, 140.0px) rotate(0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  5.75% { transform: translate(-622.3px, 139.3px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  6.00% { transform: translate(-608.7px, 140.8px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  6.25% { transform: translate(-596.1px, 139.9px) rotate(-0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  6.50% { transform: translate(-583.3px, 139.3px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  6.75% { transform: translate(-569.6px, 140.8px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  7.00% { transform: translate(-557.1px, 139.8px) rotate(-0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  7.25% { transform: translate(-544.2px, 139.4px) rotate(-0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  7.50% { transform: translate(-530.6px, 140.9px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  7.75% { transform: translate(-518.2px, 139.6px) rotate(-0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  8.00% { transform: translate(-506.2px, 139.5px) rotate(-0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  8.25% { transform: translate(-492.6px, 140.9px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  8.50% { transform: translate(-480.2px, 139.5px) rotate(-0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  8.75% { transform: translate(-467.2px, 139.6px) rotate(-0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  9.00% { transform: translate(-453.6px, 140.9px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  9.25% { transform: translate(-441.2px, 139.4px) rotate(-0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  9.50% { transform: translate(-428.1px, 139.8px) rotate(-0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  9.75% { transform: translate(-414.6px, 140.8px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  10.00% { transform: translate(-402.3px, 139.3px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  10.25% { transform: translate(-389.1px, 139.9px) rotate(-0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  10.50% { transform: translate(-375.7px, 140.8px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  10.75% { transform: translate(-363.3px, 139.3px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  11.00% { transform: translate(-350.0px, 140.0px) rotate(-0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  11.25% { transform: translate(-336.7px, 140.7px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  11.50% { transform: translate(-324.3px, 139.2px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  11.75% { transform: translate(-310.9px, 140.1px) rotate(0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  12.00% { transform: translate(-298.7px, 140.7px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  12.25% { transform: translate(-286.4px, 139.2px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  12.50% { transform: translate(-272.9px, 140.2px) rotate(0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  12.75% { transform: translate(-259.8px, 140.6px) rotate(0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  13.00% { transform: translate(-247.4px, 139.1px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  13.25% { transform: translate(-233.8px, 140.4px) rotate(0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  13.50% { transform: translate(-220.8px, 140.5px) rotate(0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  13.75% { transform: translate(-208.4px, 139.1px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  14.00% { transform: translate(-194.8px, 140.5px) rotate(0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  14.25% { transform: translate(-181.8px, 140.4px) rotate(0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  14.50% { transform: translate(-169.4px, 139.1px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  14.75% { transform: translate(-155.8px, 140.6px) rotate(0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  15.00% { transform: translate(-142.9px, 140.2px) rotate(0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  15.25% { transform: translate(-130.4px, 139.2px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  15.50% { transform: translate(-116.7px, 140.7px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  15.75% { transform: translate(-103.9px, 140.1px) rotate(0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  16.00% { transform: translate(-92.3px, 139.2px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  16.25% { transform: translate(-78.7px, 140.7px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  16.50% { transform: translate(-66.0px, 140.0px) rotate(0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  16.75% { transform: translate(-53.3px, 139.3px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  17.00% { transform: translate(-39.7px, 140.8px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  17.25% { transform: translate(-27.1px, 139.9px) rotate(-0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  17.50% { transform: translate(-14.3px, 139.3px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  17.75% { transform: translate(-0.6px, 140.8px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  18.00% { transform: translate(11.9px, 139.8px) rotate(-0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  18.25% { transform: translate(24.8px, 139.4px) rotate(-0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  18.50% { transform: translate(38.4px, 140.9px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  18.75% { transform: translate(50.8px, 139.6px) rotate(-0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  19.00% { transform: translate(63.8px, 139.5px) rotate(-0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  19.25% { transform: translate(77.4px, 140.9px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  19.50% { transform: translate(89.8px, 139.5px) rotate(-0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  19.75% { transform: translate(102.8px, 139.6px) rotate(-0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  20.00% { transform: translate(115.4px, 140.9px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  20.25% { transform: translate(127.8px, 139.4px) rotate(-0.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  20.50% { transform: translate(140.9px, 139.8px) rotate(-0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  20.75% { transform: translate(154.4px, 140.8px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  21.00% { transform: translate(166.7px, 139.3px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  21.25% { transform: translate(179.9px, 139.9px) rotate(-0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  21.50% { transform: translate(193.3px, 140.8px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  21.75% { transform: translate(205.7px, 139.3px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  22.00% { transform: translate(219.0px, 140.0px) rotate(-0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  22.25% { transform: translate(232.3px, 140.7px) rotate(0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  22.50% { transform: translate(244.7px, 139.2px) rotate(-0.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  22.75% { transform: translate(258.1px, 140.1px) rotate(0.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  23.00% { transform: translate(271.1px, 140.7px) rotate(0.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  23.25% { transform: translate(280.8px, 139.9px) rotate(-3.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  23.50% { transform: translate(291.6px, 141.1px) rotate(-5.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  23.75% { transform: translate(301.4px, 141.1px) rotate(-7.5deg) scale(1.000, 1.000) translate(20px, 60px); }
  24.00% { transform: translate(311.4px, 139.0px) rotate(-10.5deg) scale(1.000, 1.000) translate(20px, 60px); }
  24.25% { transform: translate(322.5px, 138.9px) rotate(-12.5deg) scale(1.000, 1.000) translate(20px, 60px); }
  24.50% { transform: translate(332.4px, 137.3px) rotate(-14.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  24.75% { transform: translate(342.8px, 133.9px) rotate(-17.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  25.00% { transform: translate(353.3px, 132.5px) rotate(-19.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  25.25% { transform: translate(363.5px, 129.4px) rotate(-21.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  25.50% { transform: translate(373.4px, 124.8px) rotate(-23.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  25.75% { transform: translate(384.3px, 122.0px) rotate(-25.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  26.00% { transform: translate(394.7px, 117.2px) rotate(-27.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  26.25% { transform: translate(404.1px, 111.8px) rotate(-29.5deg) scale(1.000, 1.000) translate(20px, 60px); }
  26.50% { transform: translate(414.3px, 106.9px) rotate(-30.5deg) scale(1.000, 1.000) translate(20px, 60px); }
  26.75% { transform: translate(424.3px, 99.2px) rotate(-30.5deg) scale(1.000, 1.000) translate(20px, 60px); }
  27.00% { transform: translate(435.4px, 91.2px) rotate(-30.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  27.25% { transform: translate(445.5px, 84.2px) rotate(-30.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  27.50% { transform: translate(456.7px, 77.0px) rotate(-30.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  27.75% { transform: translate(467.9px, 70.1px) rotate(-29.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  28.00% { transform: translate(480.1px, 63.1px) rotate(-29.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  28.25% { transform: translate(491.4px, 57.1px) rotate(-29.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  28.50% { transform: translate(503.7px, 51.1px) rotate(-28.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  28.75% { transform: translate(516.1px, 45.5px) rotate(-28.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  29.00% { transform: translate(528.5px, 40.5px) rotate(-27.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  29.25% { transform: translate(540.9px, 36.0px) rotate(-27.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  29.50% { transform: translate(553.4px, 32.0px) rotate(-26.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  29.75% { transform: translate(566.9px, 28.3px) rotate(-25.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  30.00% { transform: translate(580.5px, 25.1px) rotate(-25.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  30.25% { transform: translate(593.0px, 22.8px) rotate(-24.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  30.50% { transform: translate(606.6px, 20.9px) rotate(-23.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  30.75% { transform: translate(620.2px, 19.6px) rotate(-22.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  31.00% { transform: translate(633.9px, 19.0px) rotate(-22.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  31.25% { transform: translate(647.5px, 19.0px) rotate(-21.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  31.50% { transform: translate(661.1px, 19.6px) rotate(-20.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  31.75% { transform: translate(674.8px, 20.9px) rotate(-19.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  32.00% { transform: translate(688.4px, 22.9px) rotate(-19.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  32.25% { transform: translate(701.0px, 25.3px) rotate(-18.5deg) scale(1.000, 1.000) translate(20px, 60px); }
  32.50% { transform: translate(714.6px, 28.5px) rotate(-17.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  32.75% { transform: translate(727.1px, 32.0px) rotate(-17.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  33.00% { transform: translate(739.6px, 36.1px) rotate(-16.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  33.25% { transform: translate(752.0px, 40.8px) rotate(-16.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  33.50% { transform: translate(764.5px, 46.1px) rotate(-15.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  33.75% { transform: translate(775.8px, 51.4px) rotate(-15.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  34.00% { transform: translate(788.2px, 57.8px) rotate(-15.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  34.25% { transform: translate(799.4px, 64.1px) rotate(-14.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  34.50% { transform: translate(810.7px, 70.9px) rotate(-14.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  34.75% { transform: translate(820.8px, 77.5px) rotate(-14.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  35.00% { transform: translate(832.0px, 85.3px) rotate(-14.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  35.25% { transform: translate(842.1px, 92.7px) rotate(-14.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  35.50% { transform: translate(852.1px, 100.6px) rotate(-14.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  35.75% { transform: translate(866.4px, 87.0px) rotate(-9.5deg) scale(1.028, 0.877) translate(20px, 60px); }
  36.00% { transform: translate(881.7px, 74.6px) rotate(-5.0deg) scale(1.050, 0.784) translate(20px, 60px); }
  36.25% { transform: translate(897.6px, 62.9px) rotate(-0.4deg) scale(1.060, 0.741) translate(20px, 60px); }
  36.50% { transform: translate(913.4px, 51.6px) rotate(3.9deg) scale(1.055, 0.760) translate(20px, 60px); }
  36.75% { transform: translate(928.7px, 40.7px) rotate(8.0deg) scale(1.038, 0.835) translate(20px, 60px); }
  37.00% { transform: translate(943.1px, 30.9px) rotate(11.7deg) scale(1.012, 0.949) translate(20px, 60px); }
  37.25% { transform: translate(957.0px, 25.1px) rotate(14.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  37.50% { transform: translate(970.6px, 22.8px) rotate(17.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  37.75% { transform: translate(996.6px, 14.9px) rotate(29.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  38.00% { transform: translate(1020.9px, 8.8px) rotate(40.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  38.25% { transform: translate(1043.5px, 4.5px) rotate(51.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  38.50% { transform: translate(1064.4px, 1.9px) rotate(63.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  38.75% { transform: translate(1083.7px, 1.2px) rotate(74.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  39.00% { transform: translate(1101.3px, 2.3px) rotate(86.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  39.25% { transform: translate(1117.2px, 5.2px) rotate(97.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  39.50% { transform: translate(1131.4px, 9.9px) rotate(108.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  39.75% { transform: translate(1144.0px, 16.4px) rotate(120.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  40.00% { transform: translate(1154.9px, 24.6px) rotate(131.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  40.25% { transform: translate(1164.1px, 34.7px) rotate(143.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  40.50% { transform: translate(1171.6px, 46.6px) rotate(154.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  40.75% { transform: translate(1177.5px, 60.2px) rotate(165.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  41.00% { transform: translate(1181.7px, 75.7px) rotate(177.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  41.25% { transform: translate(1184.2px, 92.9px) rotate(188.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  41.50% { transform: translate(1185.0px, 112.0px) rotate(200.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  41.75% { transform: translate(1187.3px, 110.8px) rotate(200.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  42.00% { transform: translate(1189.6px, 110.1px) rotate(203.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  42.25% { transform: translate(1191.9px, 110.1px) rotate(206.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  42.50% { transform: translate(1194.2px, 110.9px) rotate(211.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  42.75% { transform: translate(1196.5px, 112.5px) rotate(217.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  43.00% { transform: translate(1198.8px, 115.0px) rotate(225.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  43.25% { transform: translate(1201.0px, 118.2px) rotate(232.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  43.50% { transform: translate(1203.3px, 121.9px) rotate(241.5deg) scale(1.000, 1.000) translate(20px, 60px); }
  43.75% { transform: translate(1205.6px, 126.1px) rotate(250.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  44.00% { transform: translate(1207.9px, 130.4px) rotate(260.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  44.25% { transform: translate(1210.2px, 134.8px) rotate(270.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  44.50% { transform: translate(1212.5px, 139.0px) rotate(280.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  44.75% { transform: translate(1214.8px, 139.6px) rotate(290.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  45.00% { transform: translate(1217.1px, 140.6px) rotate(299.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  45.25% { transform: translate(1219.4px, 142.0px) rotate(309.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  45.50% { transform: translate(1221.7px, 144.0px) rotate(318.5deg) scale(1.000, 1.000) translate(20px, 60px); }
  45.75% { transform: translate(1224.0px, 146.3px) rotate(327.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  46.00% { transform: translate(1226.2px, 149.0px) rotate(335.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  46.25% { transform: translate(1228.5px, 151.9px) rotate(342.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  46.50% { transform: translate(1230.8px, 155.0px) rotate(348.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  46.75% { transform: translate(1233.1px, 158.0px) rotate(353.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  47.00% { transform: translate(1235.4px, 160.9px) rotate(356.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  47.25% { transform: translate(1237.7px, 163.6px) rotate(359.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  47.50% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  47.75% { transform: translate(1240.0px, 164.4px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  48.00% { transform: translate(1240.0px, 163.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  48.25% { transform: translate(1240.0px, 161.8px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  48.50% { transform: translate(1240.0px, 160.8px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  48.75% { transform: translate(1240.0px, 160.2px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  49.00% { transform: translate(1240.0px, 160.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  49.25% { transform: translate(1240.0px, 160.2px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  49.50% { transform: translate(1240.0px, 160.8px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  49.75% { transform: translate(1240.0px, 161.8px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  50.00% { transform: translate(1240.0px, 163.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  50.25% { transform: translate(1240.0px, 164.4px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  50.50% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  50.75% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  51.00% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  51.25% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  51.50% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  51.75% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  52.00% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  52.25% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  52.50% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  52.75% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  53.00% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  53.25% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  53.50% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  53.75% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  54.00% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  54.25% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  54.50% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  54.75% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  55.00% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  55.25% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  55.50% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  55.75% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  56.00% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  56.25% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  56.50% { transform: translate(1240.0px, 166.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  56.75% { transform: translate(1240.0px, 163.9px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  57.00% { transform: translate(1240.0px, 158.7px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  57.25% { transform: translate(1240.0px, 152.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  57.50% { transform: translate(1240.0px, 145.3px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  57.75% { transform: translate(1240.0px, 140.1px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  58.00% { transform: translate(1240.0px, 138.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  58.25% { transform: translate(1239.5px, 136.6px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  58.50% { transform: translate(1237.9px, 135.7px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  58.75% { transform: translate(1235.6px, 135.6px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  59.00% { transform: translate(1232.4px, 136.3px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  59.25% { transform: translate(1228.7px, 137.7px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  59.50% { transform: translate(1224.4px, 136.8px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  59.75% { transform: translate(1219.8px, 135.8px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  60.00% { transform: translate(1215.0px, 135.5px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  60.25% { transform: translate(1210.0px, 136.1px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  60.50% { transform: translate(1205.0px, 137.4px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  60.75% { transform: translate(1200.2px, 137.1px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  61.00% { transform: translate(1195.6px, 135.9px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  61.25% { transform: translate(1191.3px, 135.5px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  61.50% { transform: translate(1187.6px, 135.9px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  61.75% { transform: translate(1184.4px, 137.1px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  62.00% { transform: translate(1182.1px, 137.4px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  62.25% { transform: translate(1180.5px, 136.1px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  62.50% { transform: translate(1180.0px, 135.5px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  62.75% { transform: translate(1180.0px, 138.0px) rotate(356.9deg) scale(-1.000, 1.000) translate(20px, 60px); }
  63.00% { transform: translate(1180.0px, 138.0px) rotate(353.9deg) scale(-1.000, 1.000) translate(20px, 60px); }
  63.25% { transform: translate(1180.0px, 138.0px) rotate(351.2deg) scale(-1.000, 1.000) translate(20px, 60px); }
  63.50% { transform: translate(1180.0px, 138.0px) rotate(349.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  63.75% { transform: translate(1180.0px, 138.0px) rotate(347.3deg) scale(-1.000, 1.000) translate(20px, 60px); }
  64.00% { transform: translate(1180.0px, 138.0px) rotate(346.3deg) scale(-1.000, 1.000) translate(20px, 60px); }
  64.25% { transform: translate(1180.0px, 138.0px) rotate(346.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  64.50% { transform: translate(1180.0px, 138.0px) rotate(346.4deg) scale(-1.000, 1.000) translate(20px, 60px); }
  64.75% { transform: translate(1180.0px, 138.0px) rotate(347.5deg) scale(-1.000, 1.000) translate(20px, 60px); }
  65.00% { transform: translate(1180.0px, 138.0px) rotate(349.3deg) scale(-1.000, 1.000) translate(20px, 60px); }
  65.25% { transform: translate(1180.0px, 138.0px) rotate(351.6deg) scale(-1.000, 1.000) translate(20px, 60px); }
  65.50% { transform: translate(1180.0px, 138.0px) rotate(354.3deg) scale(-1.000, 1.000) translate(20px, 60px); }
  65.75% { transform: translate(1180.0px, 138.0px) rotate(357.3deg) scale(-1.000, 1.000) translate(20px, 60px); }
  66.00% { transform: translate(1180.0px, 138.0px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  66.25% { transform: translate(1180.0px, 138.0px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  66.50% { transform: translate(1180.0px, 138.0px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  66.75% { transform: translate(1180.0px, 138.0px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  67.00% { transform: translate(1180.0px, 138.0px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  67.25% { transform: translate(1169.0px, 123.8px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  67.50% { transform: translate(1158.0px, 112.8px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  67.75% { transform: translate(1147.0px, 105.0px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  68.00% { transform: translate(1136.0px, 100.4px) rotate(360.0deg) scale(-1.000, 1.000) translate(20px, 60px); }
  68.25% { transform: translate(1125.0px, 99.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  68.50% { transform: translate(1114.0px, 100.8px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  68.75% { transform: translate(1103.0px, 105.8px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  69.00% { transform: translate(1092.0px, 114.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  69.25% { transform: translate(1081.0px, 125.4px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  69.50% { transform: translate(1070.0px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  69.75% { transform: translate(1070.1px, 140.3px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  70.00% { transform: translate(1070.1px, 140.1px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  70.25% { transform: translate(1069.8px, 139.5px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  70.50% { transform: translate(1070.2px, 140.4px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  70.75% { transform: translate(1070.0px, 140.1px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  71.00% { transform: translate(1069.8px, 139.5px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  71.25% { transform: translate(1070.2px, 140.4px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  71.50% { transform: translate(1070.0px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  71.75% { transform: translate(1069.8px, 139.6px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  72.00% { transform: translate(1070.2px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  72.25% { transform: translate(1070.0px, 139.9px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  72.50% { transform: translate(1069.8px, 139.6px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  72.75% { transform: translate(1070.2px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  73.00% { transform: translate(1069.9px, 139.9px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  73.25% { transform: translate(1069.9px, 139.7px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  73.50% { transform: translate(1070.2px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  73.75% { transform: translate(1069.9px, 139.8px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  74.00% { transform: translate(1069.9px, 139.7px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  74.25% { transform: translate(1070.2px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  74.50% { transform: translate(1069.9px, 139.7px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  74.75% { transform: translate(1069.9px, 139.8px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  75.00% { transform: translate(1070.2px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  75.25% { transform: translate(1069.9px, 139.7px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  75.50% { transform: translate(1069.9px, 139.9px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  75.75% { transform: translate(1070.2px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  76.00% { transform: translate(1069.8px, 139.6px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  76.25% { transform: translate(1070.0px, 139.9px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  76.50% { transform: translate(1070.2px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  76.75% { transform: translate(1069.8px, 139.6px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  77.00% { transform: translate(1070.0px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  77.25% { transform: translate(1070.2px, 140.4px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  77.50% { transform: translate(1069.8px, 139.5px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  77.75% { transform: translate(1070.0px, 140.1px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  78.00% { transform: translate(1070.2px, 140.4px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  78.25% { transform: translate(1069.8px, 139.5px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  78.50% { transform: translate(1070.1px, 140.1px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  78.75% { transform: translate(1084.5px, 140.6px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  79.00% { transform: translate(1098.6px, 139.1px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  79.25% { transform: translate(1114.4px, 140.4px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  79.50% { transform: translate(1130.3px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  79.75% { transform: translate(1146.0px, 139.1px) rotate(359.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  80.00% { transform: translate(1163.4px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  80.25% { transform: translate(1180.7px, 140.4px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  80.50% { transform: translate(1198.1px, 139.1px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  80.75% { transform: translate(1217.0px, 140.6px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  81.00% { transform: translate(1235.8px, 140.2px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  81.25% { transform: translate(1254.8px, 139.2px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  81.50% { transform: translate(1275.3px, 140.7px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  81.75% { transform: translate(1295.6px, 140.1px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  82.00% { transform: translate(1316.2px, 139.2px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  82.25% { transform: translate(1338.3px, 140.7px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  82.50% { transform: translate(1360.0px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  82.75% { transform: translate(1382.2px, 139.3px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  83.00% { transform: translate(1405.9px, 140.8px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  83.25% { transform: translate(1429.1px, 139.9px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  83.50% { transform: translate(1452.9px, 139.3px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  83.75% { transform: translate(1478.1px, 140.8px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  84.00% { transform: translate(1502.8px, 139.8px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  84.25% { transform: translate(1528.3px, 139.4px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  84.50% { transform: translate(1555.1px, 140.9px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  84.75% { transform: translate(1581.2px, 139.6px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  85.00% { transform: translate(1608.3px, 139.5px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  85.25% { transform: translate(1636.6px, 140.9px) rotate(360.4deg) scale(1.000, 1.000) translate(20px, 60px); }
  85.50% { transform: translate(1664.3px, 139.5px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  85.75% { transform: translate(1693.1px, 139.6px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  86.00% { transform: translate(1722.8px, 140.9px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  86.25% { transform: translate(1752.0px, 139.4px) rotate(359.8deg) scale(1.000, 1.000) translate(20px, 60px); }
  86.50% { transform: translate(1782.4px, 139.8px) rotate(359.9deg) scale(1.000, 1.000) translate(20px, 60px); }
  86.75% { transform: translate(1813.7px, 140.8px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  87.00% { transform: translate(1844.4px, 139.3px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  87.25% { transform: translate(1876.5px, 139.9px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  87.50% { transform: translate(1909.2px, 140.8px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  87.75% { transform: translate(1941.5px, 139.3px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  88.00% { transform: translate(1975.2px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  88.25% { transform: translate(2009.4px, 140.7px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  88.50% { transform: translate(2043.2px, 139.2px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  88.75% { transform: translate(2078.5px, 140.1px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  89.00% { transform: translate(2114.2px, 140.7px) rotate(360.3deg) scale(1.000, 1.000) translate(20px, 60px); }
  89.25% { transform: translate(2149.6px, 139.2px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  89.50% { transform: translate(2186.6px, 140.2px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  89.75% { transform: translate(2223.7px, 140.6px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  90.00% { transform: translate(2260.7px, 139.1px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  90.25% { transform: translate(2299.2px, 140.4px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  90.50% { transform: translate(2337.9px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  90.75% { transform: translate(2376.4px, 139.1px) rotate(359.6deg) scale(1.000, 1.000) translate(20px, 60px); }
  91.00% { transform: translate(2416.6px, 140.5px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  91.25% { transform: translate(2456.6px, 140.4px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  91.50% { transform: translate(2496.8px, 139.1px) rotate(359.7deg) scale(1.000, 1.000) translate(20px, 60px); }
  91.75% { transform: translate(2538.6px, 140.6px) rotate(360.2deg) scale(1.000, 1.000) translate(20px, 60px); }
  92.00% { transform: translate(2580.1px, 140.2px) rotate(360.1deg) scale(1.000, 1.000) translate(20px, 60px); }
  92.25% { transform: translate(2621.9px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  92.50% { transform: translate(2663.9px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  92.75% { transform: translate(2705.8px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  93.00% { transform: translate(2747.8px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  93.25% { transform: translate(2789.7px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  93.50% { transform: translate(2831.7px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  93.75% { transform: translate(2873.6px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  94.00% { transform: translate(2915.6px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  94.25% { transform: translate(2957.5px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  94.50% { transform: translate(2999.4px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  94.75% { transform: translate(3041.4px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  95.00% { transform: translate(3083.3px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  95.25% { transform: translate(3125.3px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  95.50% { transform: translate(3167.2px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  95.75% { transform: translate(3209.2px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  96.00% { transform: translate(3251.1px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  96.25% { transform: translate(3293.1px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  96.50% { transform: translate(3335.0px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  96.75% { transform: translate(3376.9px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  97.00% { transform: translate(3418.9px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  97.25% { transform: translate(3460.8px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  97.50% { transform: translate(3502.8px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  97.75% { transform: translate(3544.7px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  98.00% { transform: translate(3586.7px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  98.25% { transform: translate(3628.6px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  98.50% { transform: translate(3670.6px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  98.75% { transform: translate(3712.5px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  99.00% { transform: translate(3754.4px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  99.25% { transform: translate(3796.4px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  99.50% { transform: translate(3838.3px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  99.75% { transform: translate(3880.3px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
  100.00% { transform: translate(3922.2px, 140.0px) rotate(360.0deg) scale(1.000, 1.000) translate(20px, 60px); }
}
@keyframes bubble1-run {
  0.00% { transform: translate(-1310.0px, 0.0px); }
  0.25% { transform: translate(-1297.0px, 0.0px); }
  0.50% { transform: translate(-1284.0px, 0.0px); }
  0.75% { transform: translate(-1271.0px, 0.0px); }
  1.00% { transform: translate(-1258.0px, 0.0px); }
  1.25% { transform: translate(-1245.0px, 0.0px); }
  1.50% { transform: translate(-1232.0px, 0.0px); }
  1.75% { transform: translate(-1219.0px, 0.0px); }
  2.00% { transform: translate(-1206.0px, 0.0px); }
  2.25% { transform: translate(-1193.0px, 0.0px); }
  2.50% { transform: translate(-1180.0px, 0.0px); }
  2.75% { transform: translate(-1167.0px, 0.0px); }
  3.00% { transform: translate(-1154.0px, 0.0px); }
  3.25% { transform: translate(-1141.0px, 0.0px); }
  3.50% { transform: translate(-1128.0px, 0.0px); }
  3.75% { transform: translate(-1115.0px, 0.0px); }
  4.00% { transform: translate(-1103.0px, 0.0px); }
  4.25% { transform: translate(-1090.0px, 0.0px); }
  4.50% { transform: translate(-1077.0px, 0.0px); }
  4.75% { transform: translate(-1064.0px, 0.0px); }
  5.00% { transform: translate(-1051.0px, 0.0px); }
  5.25% { transform: translate(-1038.0px, 0.0px); }
  5.50% { transform: translate(-1025.0px, 0.0px); }
  5.75% { transform: translate(-1012.0px, 0.0px); }
  6.00% { transform: translate(-999.0px, 0.0px); }
  6.25% { transform: translate(-986.0px, 0.0px); }
  6.50% { transform: translate(-973.0px, 0.0px); }
  6.75% { transform: translate(-960.0px, 0.0px); }
  7.00% { transform: translate(-947.0px, 0.0px); }
  7.25% { transform: translate(-934.0px, 0.0px); }
  7.50% { transform: translate(-921.0px, 0.0px); }
  7.75% { transform: translate(-908.0px, 0.0px); }
  8.00% { transform: translate(-896.0px, 0.0px); }
  8.25% { transform: translate(-883.0px, 0.0px); }
  8.50% { transform: translate(-870.0px, 0.0px); }
  8.75% { transform: translate(-857.0px, 0.0px); }
  9.00% { transform: translate(-844.0px, 0.0px); }
  9.25% { transform: translate(-831.0px, 0.0px); }
  9.50% { transform: translate(-818.0px, 0.0px); }
  9.75% { transform: translate(-805.0px, 0.0px); }
  10.00% { transform: translate(-792.0px, 0.0px); }
  10.25% { transform: translate(-779.0px, 0.0px); }
  10.50% { transform: translate(-766.0px, 0.0px); }
  10.75% { transform: translate(-753.0px, 0.0px); }
  11.00% { transform: translate(-740.0px, 0.0px); }
  11.25% { transform: translate(-727.0px, 0.0px); }
  11.50% { transform: translate(-714.0px, 0.0px); }
  11.75% { transform: translate(-701.0px, 0.0px); }
  12.00% { transform: translate(-689.0px, 0.0px); }
  12.25% { transform: translate(-676.0px, 0.0px); }
  12.50% { transform: translate(-663.0px, 0.0px); }
  12.75% { transform: translate(-650.0px, 0.0px); }
  13.00% { transform: translate(-637.0px, 0.0px); }
  13.25% { transform: translate(-624.0px, 0.0px); }
  13.50% { transform: translate(-611.0px, 0.0px); }
  13.75% { transform: translate(-598.0px, 0.0px); }
  14.00% { transform: translate(-585.0px, 0.0px); }
  14.25% { transform: translate(-572.0px, 0.0px); }
  14.50% { transform: translate(-559.0px, 0.0px); }
  14.75% { transform: translate(-546.0px, 0.0px); }
  15.00% { transform: translate(-533.0px, 0.0px); }
  15.25% { transform: translate(-520.0px, 0.0px); }
  15.50% { transform: translate(-507.0px, 0.0px); }
  15.75% { transform: translate(-494.0px, 0.0px); }
  16.00% { transform: translate(-482.0px, 0.0px); }
  16.25% { transform: translate(-469.0px, 0.0px); }
  16.50% { transform: translate(-456.0px, 0.0px); }
  16.75% { transform: translate(-443.0px, 0.0px); }
  17.00% { transform: translate(-430.0px, 0.0px); }
  17.25% { transform: translate(-417.0px, 0.0px); }
  17.50% { transform: translate(-404.0px, 0.0px); }
  17.75% { transform: translate(-391.0px, 0.0px); }
  18.00% { transform: translate(-378.0px, 0.0px); }
  18.25% { transform: translate(-365.0px, 0.0px); }
  18.50% { transform: translate(-352.0px, 0.0px); }
  18.75% { transform: translate(-339.0px, 0.0px); }
  19.00% { transform: translate(-326.0px, 0.0px); }
  19.25% { transform: translate(-313.0px, 0.0px); }
  19.50% { transform: translate(-300.0px, 0.0px); }
  19.75% { transform: translate(-287.0px, 0.0px); }
  20.00% { transform: translate(-275.0px, 0.0px); }
  20.25% { transform: translate(-262.0px, 0.0px); }
  20.50% { transform: translate(-249.0px, 0.0px); }
  20.75% { transform: translate(-236.0px, 0.0px); }
  21.00% { transform: translate(-223.0px, 0.0px); }
  21.25% { transform: translate(-210.0px, 0.0px); }
  21.50% { transform: translate(-197.0px, 0.0px); }
  21.75% { transform: translate(-184.0px, 0.0px); }
  22.00% { transform: translate(-171.0px, 0.0px); }
  22.25% { transform: translate(-158.0px, 0.0px); }
  22.50% { transform: translate(-145.0px, 0.0px); }
  22.75% { transform: translate(-132.0px, 0.0px); }
  23.00% { transform: translate(-119.0px, 0.0px); }
  23.25% { transform: translate(-109.3px, -0.8px); }
  23.50% { transform: translate(-98.5px, 0.4px); }
  23.75% { transform: translate(-88.7px, 0.4px); }
  24.00% { transform: translate(-78.7px, -1.7px); }
  24.25% { transform: translate(-67.6px, -1.8px); }
  24.50% { transform: translate(-57.7px, -3.4px); }
  24.75% { transform: translate(-47.3px, -6.8px); }
  25.00% { transform: translate(-36.8px, -8.2px); }
  25.25% { transform: translate(-26.6px, -11.3px); }
  25.50% { transform: translate(-16.7px, -15.9px); }
  25.75% { transform: translate(-5.8px, -18.7px); }
  26.00% { transform: translate(4.6px, -23.5px); }
  26.25% { transform: translate(14.0px, -28.9px); }
  26.50% { transform: translate(24.2px, -33.8px); }
  26.75% { transform: translate(34.2px, -41.5px); }
  27.00% { transform: translate(45.3px, -49.5px); }
  27.25% { transform: translate(55.4px, -56.5px); }
  27.50% { transform: translate(66.6px, -63.7px); }
  27.75% { transform: translate(77.8px, -70.6px); }
  28.00% { transform: translate(90.0px, -77.6px); }
  28.25% { transform: translate(101.3px, -83.6px); }
  28.50% { transform: translate(113.6px, -89.6px); }
  28.75% { transform: translate(126.0px, -95.2px); }
  29.00% { transform: translate(50.0px, 0.0px); }
  29.25% { transform: translate(50.0px, 0.0px); }
  29.50% { transform: translate(50.0px, 0.0px); }
  29.75% { transform: translate(50.0px, 0.0px); }
  30.00% { transform: translate(50.0px, 0.0px); }
  30.25% { transform: translate(50.0px, 0.0px); }
  30.50% { transform: translate(50.0px, 0.0px); }
  30.75% { transform: translate(50.0px, 0.0px); }
  31.00% { transform: translate(50.0px, 0.0px); }
  31.25% { transform: translate(50.0px, 0.0px); }
  31.50% { transform: translate(50.0px, 0.0px); }
  31.75% { transform: translate(50.0px, 0.0px); }
  32.00% { transform: translate(50.0px, 0.0px); }
  32.25% { transform: translate(50.0px, 0.0px); }
  32.50% { transform: translate(50.0px, 0.0px); }
  32.75% { transform: translate(50.0px, 0.0px); }
  33.00% { transform: translate(50.0px, 0.0px); }
  33.25% { transform: translate(50.0px, 0.0px); }
  33.50% { transform: translate(50.0px, 0.0px); }
  33.75% { transform: translate(50.0px, 0.0px); }
  34.00% { transform: translate(50.0px, 0.0px); }
  34.25% { transform: translate(50.0px, 0.0px); }
  34.50% { transform: translate(50.0px, 0.0px); }
  34.75% { transform: translate(50.0px, 0.0px); }
  35.00% { transform: translate(50.0px, 0.0px); }
  35.25% { transform: translate(50.0px, 0.0px); }
  35.50% { transform: translate(50.0px, 0.0px); }
  35.75% { transform: translate(50.0px, 0.0px); }
  36.00% { transform: translate(50.0px, 0.0px); }
  36.25% { transform: translate(50.0px, 0.0px); }
  36.50% { transform: translate(50.0px, 0.0px); }
  36.75% { transform: translate(50.0px, 0.0px); }
  37.00% { transform: translate(50.0px, 0.0px); }
  37.25% { transform: translate(50.0px, 0.0px); }
  37.50% { transform: translate(50.0px, 0.0px); }
  37.75% { transform: translate(50.0px, 0.0px); }
  38.00% { transform: translate(50.0px, 0.0px); }
  38.25% { transform: translate(50.0px, 0.0px); }
  38.50% { transform: translate(50.0px, 0.0px); }
  38.75% { transform: translate(50.0px, 0.0px); }
  39.00% { transform: translate(50.0px, 0.0px); }
  39.25% { transform: translate(50.0px, 0.0px); }
  39.50% { transform: translate(50.0px, 0.0px); }
  39.75% { transform: translate(50.0px, 0.0px); }
  40.00% { transform: translate(50.0px, 0.0px); }
  40.25% { transform: translate(50.0px, 0.0px); }
  40.50% { transform: translate(50.0px, 0.0px); }
  40.75% { transform: translate(50.0px, 0.0px); }
  41.00% { transform: translate(50.0px, 0.0px); }
  41.25% { transform: translate(50.0px, 0.0px); }
  41.50% { transform: translate(50.0px, 0.0px); }
  41.75% { transform: translate(50.0px, 0.0px); }
  42.00% { transform: translate(50.0px, 0.0px); }
  42.25% { transform: translate(50.0px, 0.0px); }
  42.50% { transform: translate(50.0px, 0.0px); }
  42.75% { transform: translate(50.0px, 0.0px); }
  43.00% { transform: translate(50.0px, 0.0px); }
  43.25% { transform: translate(50.0px, 0.0px); }
  43.50% { transform: translate(50.0px, 0.0px); }
  43.75% { transform: translate(50.0px, 0.0px); }
  44.00% { transform: translate(50.0px, 0.0px); }
  44.25% { transform: translate(50.0px, 0.0px); }
  44.50% { transform: translate(50.0px, 0.0px); }
  44.75% { transform: translate(50.0px, 0.0px); }
  45.00% { transform: translate(50.0px, 0.0px); }
  45.25% { transform: translate(50.0px, 0.0px); }
  45.50% { transform: translate(50.0px, 0.0px); }
  45.75% { transform: translate(50.0px, 0.0px); }
  46.00% { transform: translate(50.0px, 0.0px); }
  46.25% { transform: translate(50.0px, 0.0px); }
  46.50% { transform: translate(50.0px, 0.0px); }
  46.75% { transform: translate(50.0px, 0.0px); }
  47.00% { transform: translate(50.0px, 0.0px); }
  47.25% { transform: translate(50.0px, 0.0px); }
  47.50% { transform: translate(50.0px, 0.0px); }
  47.75% { transform: translate(50.0px, 0.0px); }
  48.00% { transform: translate(50.0px, 0.0px); }
  48.25% { transform: translate(50.0px, 0.0px); }
  48.50% { transform: translate(50.0px, 0.0px); }
  48.75% { transform: translate(50.0px, 0.0px); }
  49.00% { transform: translate(50.0px, 0.0px); }
  49.25% { transform: translate(50.0px, 0.0px); }
  49.50% { transform: translate(50.0px, 0.0px); }
  49.75% { transform: translate(50.0px, 0.0px); }
  50.00% { transform: translate(50.0px, 0.0px); }
  50.25% { transform: translate(50.0px, 0.0px); }
  50.50% { transform: translate(50.0px, 0.0px); }
  50.75% { transform: translate(50.0px, 0.0px); }
  51.00% { transform: translate(50.0px, 0.0px); }
  51.25% { transform: translate(50.0px, 0.0px); }
  51.50% { transform: translate(50.0px, 0.0px); }
  51.75% { transform: translate(50.0px, 0.0px); }
  52.00% { transform: translate(50.0px, 0.0px); }
  52.25% { transform: translate(50.0px, 0.0px); }
  52.50% { transform: translate(50.0px, 0.0px); }
  52.75% { transform: translate(50.0px, 0.0px); }
  53.00% { transform: translate(50.0px, 0.0px); }
  53.25% { transform: translate(50.0px, 0.0px); }
  53.50% { transform: translate(50.0px, 0.0px); }
  53.75% { transform: translate(50.0px, 0.0px); }
  54.00% { transform: translate(50.0px, 0.0px); }
  54.25% { transform: translate(50.0px, 0.0px); }
  54.50% { transform: translate(50.0px, 0.0px); }
  54.75% { transform: translate(50.0px, 0.0px); }
  55.00% { transform: translate(50.0px, 0.0px); }
  55.25% { transform: translate(50.0px, 0.0px); }
  55.50% { transform: translate(50.0px, 0.0px); }
  55.75% { transform: translate(50.0px, 0.0px); }
  56.00% { transform: translate(50.0px, 0.0px); }
  56.25% { transform: translate(50.0px, 0.0px); }
  56.50% { transform: translate(50.0px, 0.0px); }
  56.75% { transform: translate(50.0px, 0.0px); }
  57.00% { transform: translate(50.0px, 0.0px); }
  57.25% { transform: translate(50.0px, 0.0px); }
  57.50% { transform: translate(50.0px, 0.0px); }
  57.75% { transform: translate(50.0px, 0.0px); }
  58.00% { transform: translate(50.0px, 0.0px); }
  58.25% { transform: translate(50.0px, 0.0px); }
  58.50% { transform: translate(50.0px, 0.0px); }
  58.75% { transform: translate(50.0px, 0.0px); }
  59.00% { transform: translate(50.0px, 0.0px); }
  59.25% { transform: translate(50.0px, 0.0px); }
  59.50% { transform: translate(50.0px, 0.0px); }
  59.75% { transform: translate(50.0px, 0.0px); }
  60.00% { transform: translate(50.0px, 0.0px); }
  60.25% { transform: translate(50.0px, 0.0px); }
  60.50% { transform: translate(50.0px, 0.0px); }
  60.75% { transform: translate(50.0px, 0.0px); }
  61.00% { transform: translate(50.0px, 0.0px); }
  61.25% { transform: translate(50.0px, 0.0px); }
  61.50% { transform: translate(50.0px, 0.0px); }
  61.75% { transform: translate(50.0px, 0.0px); }
  62.00% { transform: translate(50.0px, 0.0px); }
  62.25% { transform: translate(50.0px, 0.0px); }
  62.50% { transform: translate(50.0px, 0.0px); }
  62.75% { transform: translate(50.0px, 0.0px); }
  63.00% { transform: translate(50.0px, 0.0px); }
  63.25% { transform: translate(50.0px, 0.0px); }
  63.50% { transform: translate(50.0px, 0.0px); }
  63.75% { transform: translate(50.0px, 0.0px); }
  64.00% { transform: translate(50.0px, 0.0px); }
  64.25% { transform: translate(50.0px, 0.0px); }
  64.50% { transform: translate(50.0px, 0.0px); }
  64.75% { transform: translate(50.0px, 0.0px); }
  65.00% { transform: translate(50.0px, 0.0px); }
  65.25% { transform: translate(50.0px, 0.0px); }
  65.50% { transform: translate(50.0px, 0.0px); }
  65.75% { transform: translate(50.0px, 0.0px); }
  66.00% { transform: translate(50.0px, 0.0px); }
  66.25% { transform: translate(50.0px, 0.0px); }
  66.50% { transform: translate(50.0px, 0.0px); }
  66.75% { transform: translate(50.0px, 0.0px); }
  67.00% { transform: translate(50.0px, 0.0px); }
  67.25% { transform: translate(50.0px, 0.0px); }
  67.50% { transform: translate(50.0px, 0.0px); }
  67.75% { transform: translate(50.0px, 0.0px); }
  68.00% { transform: translate(50.0px, 0.0px); }
  68.25% { transform: translate(50.0px, 0.0px); }
  68.50% { transform: translate(50.0px, 0.0px); }
  68.75% { transform: translate(50.0px, 0.0px); }
  69.00% { transform: translate(50.0px, 0.0px); }
  69.25% { transform: translate(50.0px, 0.0px); }
  69.50% { transform: translate(50.0px, 0.0px); }
  69.75% { transform: translate(50.0px, 0.0px); }
  70.00% { transform: translate(50.0px, 0.0px); }
  70.25% { transform: translate(50.0px, 0.0px); }
  70.50% { transform: translate(50.0px, 0.0px); }
  70.75% { transform: translate(50.0px, 0.0px); }
  71.00% { transform: translate(50.0px, 0.0px); }
  71.25% { transform: translate(50.0px, 0.0px); }
  71.50% { transform: translate(50.0px, 0.0px); }
  71.75% { transform: translate(50.0px, 0.0px); }
  72.00% { transform: translate(50.0px, 0.0px); }
  72.25% { transform: translate(50.0px, 0.0px); }
  72.50% { transform: translate(50.0px, 0.0px); }
  72.75% { transform: translate(50.0px, 0.0px); }
  73.00% { transform: translate(50.0px, 0.0px); }
  73.25% { transform: translate(50.0px, 0.0px); }
  73.50% { transform: translate(50.0px, 0.0px); }
  73.75% { transform: translate(50.0px, 0.0px); }
  74.00% { transform: translate(50.0px, 0.0px); }
  74.25% { transform: translate(50.0px, 0.0px); }
  74.50% { transform: translate(50.0px, 0.0px); }
  74.75% { transform: translate(50.0px, 0.0px); }
  75.00% { transform: translate(50.0px, 0.0px); }
  75.25% { transform: translate(50.0px, 0.0px); }
  75.50% { transform: translate(50.0px, 0.0px); }
  75.75% { transform: translate(50.0px, 0.0px); }
  76.00% { transform: translate(50.0px, 0.0px); }
  76.25% { transform: translate(50.0px, 0.0px); }
  76.50% { transform: translate(50.0px, 0.0px); }
  76.75% { transform: translate(50.0px, 0.0px); }
  77.00% { transform: translate(50.0px, 0.0px); }
  77.25% { transform: translate(50.0px, 0.0px); }
  77.50% { transform: translate(50.0px, 0.0px); }
  77.75% { transform: translate(50.0px, 0.0px); }
  78.00% { transform: translate(50.0px, 0.0px); }
  78.25% { transform: translate(50.0px, 0.0px); }
  78.50% { transform: translate(50.0px, 0.0px); }
  78.75% { transform: translate(50.0px, 0.0px); }
  79.00% { transform: translate(50.0px, 0.0px); }
  79.25% { transform: translate(50.0px, 0.0px); }
  79.50% { transform: translate(50.0px, 0.0px); }
  79.75% { transform: translate(50.0px, 0.0px); }
  80.00% { transform: translate(50.0px, 0.0px); }
  80.25% { transform: translate(50.0px, 0.0px); }
  80.50% { transform: translate(50.0px, 0.0px); }
  80.75% { transform: translate(50.0px, 0.0px); }
  81.00% { transform: translate(50.0px, 0.0px); }
  81.25% { transform: translate(50.0px, 0.0px); }
  81.50% { transform: translate(50.0px, 0.0px); }
  81.75% { transform: translate(50.0px, 0.0px); }
  82.00% { transform: translate(50.0px, 0.0px); }
  82.25% { transform: translate(50.0px, 0.0px); }
  82.50% { transform: translate(50.0px, 0.0px); }
  82.75% { transform: translate(50.0px, 0.0px); }
  83.00% { transform: translate(50.0px, 0.0px); }
  83.25% { transform: translate(50.0px, 0.0px); }
  83.50% { transform: translate(50.0px, 0.0px); }
  83.75% { transform: translate(50.0px, 0.0px); }
  84.00% { transform: translate(50.0px, 0.0px); }
  84.25% { transform: translate(50.0px, 0.0px); }
  84.50% { transform: translate(50.0px, 0.0px); }
  84.75% { transform: translate(50.0px, 0.0px); }
  85.00% { transform: translate(50.0px, 0.0px); }
  85.25% { transform: translate(50.0px, 0.0px); }
  85.50% { transform: translate(50.0px, 0.0px); }
  85.75% { transform: translate(50.0px, 0.0px); }
  86.00% { transform: translate(50.0px, 0.0px); }
  86.25% { transform: translate(50.0px, 0.0px); }
  86.50% { transform: translate(50.0px, 0.0px); }
  86.75% { transform: translate(50.0px, 0.0px); }
  87.00% { transform: translate(50.0px, 0.0px); }
  87.25% { transform: translate(50.0px, 0.0px); }
  87.50% { transform: translate(50.0px, 0.0px); }
  87.75% { transform: translate(50.0px, 0.0px); }
  88.00% { transform: translate(50.0px, 0.0px); }
  88.25% { transform: translate(50.0px, 0.0px); }
  88.50% { transform: translate(50.0px, 0.0px); }
  88.75% { transform: translate(50.0px, 0.0px); }
  89.00% { transform: translate(50.0px, 0.0px); }
  89.25% { transform: translate(50.0px, 0.0px); }
  89.50% { transform: translate(50.0px, 0.0px); }
  89.75% { transform: translate(50.0px, 0.0px); }
  90.00% { transform: translate(50.0px, 0.0px); }
  90.25% { transform: translate(50.0px, 0.0px); }
  90.50% { transform: translate(50.0px, 0.0px); }
  90.75% { transform: translate(50.0px, 0.0px); }
  91.00% { transform: translate(50.0px, 0.0px); }
  91.25% { transform: translate(50.0px, 0.0px); }
  91.50% { transform: translate(50.0px, 0.0px); }
  91.75% { transform: translate(50.0px, 0.0px); }
  92.00% { transform: translate(50.0px, 0.0px); }
  92.25% { transform: translate(50.0px, 0.0px); }
  92.50% { transform: translate(50.0px, 0.0px); }
  92.75% { transform: translate(50.0px, 0.0px); }
  93.00% { transform: translate(50.0px, 0.0px); }
  93.25% { transform: translate(50.0px, 0.0px); }
  93.50% { transform: translate(50.0px, 0.0px); }
  93.75% { transform: translate(50.0px, 0.0px); }
  94.00% { transform: translate(50.0px, 0.0px); }
  94.25% { transform: translate(50.0px, 0.0px); }
  94.50% { transform: translate(50.0px, 0.0px); }
  94.75% { transform: translate(50.0px, 0.0px); }
  95.00% { transform: translate(50.0px, 0.0px); }
  95.25% { transform: translate(50.0px, 0.0px); }
  95.50% { transform: translate(50.0px, 0.0px); }
  95.75% { transform: translate(50.0px, 0.0px); }
  96.00% { transform: translate(50.0px, 0.0px); }
  96.25% { transform: translate(50.0px, 0.0px); }
  96.50% { transform: translate(50.0px, 0.0px); }
  96.75% { transform: translate(50.0px, 0.0px); }
  97.00% { transform: translate(50.0px, 0.0px); }
  97.25% { transform: translate(50.0px, 0.0px); }
  97.50% { transform: translate(50.0px, 0.0px); }
  97.75% { transform: translate(50.0px, 0.0px); }
  98.00% { transform: translate(50.0px, 0.0px); }
  98.25% { transform: translate(50.0px, 0.0px); }
  98.50% { transform: translate(50.0px, 0.0px); }
  98.75% { transform: translate(50.0px, 0.0px); }
  99.00% { transform: translate(50.0px, 0.0px); }
  99.25% { transform: translate(50.0px, 0.0px); }
  99.50% { transform: translate(50.0px, 0.0px); }
  99.75% { transform: translate(50.0px, 0.0px); }
  100.00% { transform: translate(50.0px, 0.0px); }
}
@keyframes bubble2-run {
  0.00% { transform: translate(508.0px, 72.0px); }
  0.25% { transform: translate(508.0px, 72.0px); }
  0.50% { transform: translate(508.0px, 72.0px); }
  0.75% { transform: translate(508.0px, 72.0px); }
  1.00% { transform: translate(508.0px, 72.0px); }
  1.25% { transform: translate(508.0px, 72.0px); }
  1.50% { transform: translate(508.0px, 72.0px); }
  1.75% { transform: translate(508.0px, 72.0px); }
  2.00% { transform: translate(508.0px, 72.0px); }
  2.25% { transform: translate(508.0px, 72.0px); }
  2.50% { transform: translate(508.0px, 72.0px); }
  2.75% { transform: translate(508.0px, 72.0px); }
  3.00% { transform: translate(508.0px, 72.0px); }
  3.25% { transform: translate(508.0px, 72.0px); }
  3.50% { transform: translate(508.0px, 72.0px); }
  3.75% { transform: translate(508.0px, 72.0px); }
  4.00% { transform: translate(508.0px, 72.0px); }
  4.25% { transform: translate(508.0px, 72.0px); }
  4.50% { transform: translate(508.0px, 72.0px); }
  4.75% { transform: translate(508.0px, 72.0px); }
  5.00% { transform: translate(508.0px, 72.0px); }
  5.25% { transform: translate(508.0px, 72.0px); }
  5.50% { transform: translate(508.0px, 72.0px); }
  5.75% { transform: translate(508.0px, 72.0px); }
  6.00% { transform: translate(508.0px, 72.0px); }
  6.25% { transform: translate(508.0px, 72.0px); }
  6.50% { transform: translate(508.0px, 72.0px); }
  6.75% { transform: translate(508.0px, 72.0px); }
  7.00% { transform: translate(508.0px, 72.0px); }
  7.25% { transform: translate(508.0px, 72.0px); }
  7.50% { transform: translate(508.0px, 72.0px); }
  7.75% { transform: translate(508.0px, 72.0px); }
  8.00% { transform: translate(508.0px, 72.0px); }
  8.25% { transform: translate(508.0px, 72.0px); }
  8.50% { transform: translate(508.0px, 72.0px); }
  8.75% { transform: translate(508.0px, 72.0px); }
  9.00% { transform: translate(508.0px, 72.0px); }
  9.25% { transform: translate(508.0px, 72.0px); }
  9.50% { transform: translate(508.0px, 72.0px); }
  9.75% { transform: translate(508.0px, 72.0px); }
  10.00% { transform: translate(508.0px, 72.0px); }
  10.25% { transform: translate(508.0px, 72.0px); }
  10.50% { transform: translate(508.0px, 72.0px); }
  10.75% { transform: translate(508.0px, 72.0px); }
  11.00% { transform: translate(508.0px, 72.0px); }
  11.25% { transform: translate(508.0px, 72.0px); }
  11.50% { transform: translate(508.0px, 72.0px); }
  11.75% { transform: translate(508.0px, 72.0px); }
  12.00% { transform: translate(508.0px, 72.0px); }
  12.25% { transform: translate(508.0px, 72.0px); }
  12.50% { transform: translate(508.0px, 72.0px); }
  12.75% { transform: translate(508.0px, 72.0px); }
  13.00% { transform: translate(508.0px, 72.0px); }
  13.25% { transform: translate(508.0px, 72.0px); }
  13.50% { transform: translate(508.0px, 72.0px); }
  13.75% { transform: translate(508.0px, 72.0px); }
  14.00% { transform: translate(508.0px, 72.0px); }
  14.25% { transform: translate(508.0px, 72.0px); }
  14.50% { transform: translate(508.0px, 72.0px); }
  14.75% { transform: translate(508.0px, 72.0px); }
  15.00% { transform: translate(508.0px, 72.0px); }
  15.25% { transform: translate(508.0px, 72.0px); }
  15.50% { transform: translate(508.0px, 72.0px); }
  15.75% { transform: translate(508.0px, 72.0px); }
  16.00% { transform: translate(508.0px, 72.0px); }
  16.25% { transform: translate(508.0px, 72.0px); }
  16.50% { transform: translate(508.0px, 72.0px); }
  16.75% { transform: translate(508.0px, 72.0px); }
  17.00% { transform: translate(508.0px, 72.0px); }
  17.25% { transform: translate(508.0px, 72.0px); }
  17.50% { transform: translate(508.0px, 72.0px); }
  17.75% { transform: translate(508.0px, 72.0px); }
  18.00% { transform: translate(508.0px, 72.0px); }
  18.25% { transform: translate(508.0px, 72.0px); }
  18.50% { transform: translate(508.0px, 72.0px); }
  18.75% { transform: translate(508.0px, 72.0px); }
  19.00% { transform: translate(508.0px, 72.0px); }
  19.25% { transform: translate(508.0px, 72.0px); }
  19.50% { transform: translate(508.0px, 72.0px); }
  19.75% { transform: translate(508.0px, 72.0px); }
  20.00% { transform: translate(508.0px, 72.0px); }
  20.25% { transform: translate(508.0px, 72.0px); }
  20.50% { transform: translate(508.0px, 72.0px); }
  20.75% { transform: translate(508.0px, 72.0px); }
  21.00% { transform: translate(508.0px, 72.0px); }
  21.25% { transform: translate(508.0px, 72.0px); }
  21.50% { transform: translate(508.0px, 72.0px); }
  21.75% { transform: translate(508.0px, 72.0px); }
  22.00% { transform: translate(508.0px, 72.0px); }
  22.25% { transform: translate(508.0px, 72.0px); }
  22.50% { transform: translate(508.0px, 72.0px); }
  22.75% { transform: translate(508.0px, 72.0px); }
  23.00% { transform: translate(508.0px, 72.0px); }
  23.25% { transform: translate(508.0px, 72.0px); }
  23.50% { transform: translate(508.0px, 72.0px); }
  23.75% { transform: translate(508.0px, 72.0px); }
  24.00% { transform: translate(508.0px, 72.0px); }
  24.25% { transform: translate(508.0px, 72.0px); }
  24.50% { transform: translate(508.0px, 72.0px); }
  24.75% { transform: translate(508.0px, 72.0px); }
  25.00% { transform: translate(508.0px, 72.0px); }
  25.25% { transform: translate(508.0px, 72.0px); }
  25.50% { transform: translate(508.0px, 72.0px); }
  25.75% { transform: translate(508.0px, 72.0px); }
  26.00% { transform: translate(508.0px, 72.0px); }
  26.25% { transform: translate(508.0px, 72.0px); }
  26.50% { transform: translate(510.0px, 70.4px); }
  26.75% { transform: translate(520.0px, 62.8px); }
  27.00% { transform: translate(531.0px, 54.9px); }
  27.25% { transform: translate(541.0px, 48.0px); }
  27.50% { transform: translate(552.0px, 40.9px); }
  27.75% { transform: translate(563.0px, 34.3px); }
  28.00% { transform: translate(575.0px, 27.6px); }
  28.25% { transform: translate(586.0px, 21.9px); }
  28.50% { transform: translate(598.0px, 16.2px); }
  28.75% { transform: translate(610.0px, 11.0px); }
  29.00% { transform: translate(622.0px, 6.4px); }
  29.25% { transform: translate(634.0px, 2.4px); }
  29.50% { transform: translate(646.0px, -1.2px); }
  29.75% { transform: translate(659.0px, -4.4px); }
  30.00% { transform: translate(672.0px, -7.0px); }
  30.25% { transform: translate(684.0px, -8.8px); }
  30.50% { transform: translate(697.0px, -10.1px); }
  30.75% { transform: translate(710.0px, -10.9px); }
  31.00% { transform: translate(723.0px, -11.0px); }
  31.25% { transform: translate(736.0px, -10.4px); }
  31.50% { transform: translate(749.0px, -9.3px); }
  31.75% { transform: translate(762.0px, -7.5px); }
  32.00% { transform: translate(775.0px, -5.0px); }
  32.25% { transform: translate(787.0px, -2.2px); }
  32.50% { transform: translate(800.0px, 1.4px); }
  32.75% { transform: translate(812.0px, 5.4px); }
  33.00% { transform: translate(824.0px, 9.8px); }
  33.25% { transform: translate(836.0px, 14.9px); }
  33.50% { transform: translate(848.0px, 20.4px); }
  33.75% { transform: translate(859.0px, 26.0px); }
  34.00% { transform: translate(871.0px, 32.6px); }
  34.25% { transform: translate(882.0px, 39.1px); }
  34.50% { transform: translate(893.0px, 46.0px); }
  34.75% { transform: translate(903.0px, 52.8px); }
  35.00% { transform: translate(914.0px, 60.6px); }
  35.25% { transform: translate(924.0px, 68.1px); }
  35.50% { transform: translate(934.0px, 76.0px); }
  35.75% { transform: translate(934.0px, 76.0px); }
  36.00% { transform: translate(934.0px, 76.0px); }
  36.25% { transform: translate(934.0px, 76.0px); }
  36.50% { transform: translate(934.0px, 76.0px); }
  36.75% { transform: translate(934.0px, 76.0px); }
  37.00% { transform: translate(934.0px, 76.0px); }
  37.25% { transform: translate(934.0px, 76.0px); }
  37.50% { transform: translate(934.0px, 76.0px); }
  37.75% { transform: translate(934.0px, 76.0px); }
  38.00% { transform: translate(934.0px, 76.0px); }
  38.25% { transform: translate(934.0px, 76.0px); }
  38.50% { transform: translate(934.0px, 76.0px); }
  38.75% { transform: translate(934.0px, 76.0px); }
  39.00% { transform: translate(934.0px, 76.0px); }
  39.25% { transform: translate(934.0px, 76.0px); }
  39.50% { transform: translate(934.0px, 76.0px); }
  39.75% { transform: translate(934.0px, 76.0px); }
  40.00% { transform: translate(934.0px, 76.0px); }
  40.25% { transform: translate(934.0px, 76.0px); }
  40.50% { transform: translate(934.0px, 76.0px); }
  40.75% { transform: translate(934.0px, 76.0px); }
  41.00% { transform: translate(934.0px, 76.0px); }
  41.25% { transform: translate(934.0px, 76.0px); }
  41.50% { transform: translate(934.0px, 76.0px); }
  41.75% { transform: translate(934.0px, 76.0px); }
  42.00% { transform: translate(934.0px, 76.0px); }
  42.25% { transform: translate(934.0px, 76.0px); }
  42.50% { transform: translate(934.0px, 76.0px); }
  42.75% { transform: translate(934.0px, 76.0px); }
  43.00% { transform: translate(934.0px, 76.0px); }
  43.25% { transform: translate(934.0px, 76.0px); }
  43.50% { transform: translate(934.0px, 76.0px); }
  43.75% { transform: translate(934.0px, 76.0px); }
  44.00% { transform: translate(934.0px, 76.0px); }
  44.25% { transform: translate(934.0px, 76.0px); }
  44.50% { transform: translate(934.0px, 76.0px); }
  44.75% { transform: translate(934.0px, 76.0px); }
  45.00% { transform: translate(934.0px, 76.0px); }
  45.25% { transform: translate(934.0px, 76.0px); }
  45.50% { transform: translate(934.0px, 76.0px); }
  45.75% { transform: translate(934.0px, 76.0px); }
  46.00% { transform: translate(934.0px, 76.0px); }
  46.25% { transform: translate(934.0px, 76.0px); }
  46.50% { transform: translate(934.0px, 76.0px); }
  46.75% { transform: translate(934.0px, 76.0px); }
  47.00% { transform: translate(934.0px, 76.0px); }
  47.25% { transform: translate(934.0px, 76.0px); }
  47.50% { transform: translate(934.0px, 76.0px); }
  47.75% { transform: translate(934.0px, 76.0px); }
  48.00% { transform: translate(934.0px, 76.0px); }
  48.25% { transform: translate(934.0px, 76.0px); }
  48.50% { transform: translate(934.0px, 76.0px); }
  48.75% { transform: translate(934.0px, 76.0px); }
  49.00% { transform: translate(934.0px, 76.0px); }
  49.25% { transform: translate(934.0px, 76.0px); }
  49.50% { transform: translate(934.0px, 76.0px); }
  49.75% { transform: translate(934.0px, 76.0px); }
  50.00% { transform: translate(934.0px, 76.0px); }
  50.25% { transform: translate(934.0px, 76.0px); }
  50.50% { transform: translate(934.0px, 76.0px); }
  50.75% { transform: translate(934.0px, 76.0px); }
  51.00% { transform: translate(934.0px, 76.0px); }
  51.25% { transform: translate(934.0px, 76.0px); }
  51.50% { transform: translate(934.0px, 76.0px); }
  51.75% { transform: translate(934.0px, 76.0px); }
  52.00% { transform: translate(934.0px, 76.0px); }
  52.25% { transform: translate(934.0px, 76.0px); }
  52.50% { transform: translate(934.0px, 76.0px); }
  52.75% { transform: translate(934.0px, 76.0px); }
  53.00% { transform: translate(934.0px, 76.0px); }
  53.25% { transform: translate(934.0px, 76.0px); }
  53.50% { transform: translate(934.0px, 76.0px); }
  53.75% { transform: translate(934.0px, 76.0px); }
  54.00% { transform: translate(934.0px, 76.0px); }
  54.25% { transform: translate(934.0px, 76.0px); }
  54.50% { transform: translate(934.0px, 76.0px); }
  54.75% { transform: translate(934.0px, 76.0px); }
  55.00% { transform: translate(934.0px, 76.0px); }
  55.25% { transform: translate(934.0px, 76.0px); }
  55.50% { transform: translate(934.0px, 76.0px); }
  55.75% { transform: translate(934.0px, 76.0px); }
  56.00% { transform: translate(934.0px, 76.0px); }
  56.25% { transform: translate(934.0px, 76.0px); }
  56.50% { transform: translate(934.0px, 76.0px); }
  56.75% { transform: translate(934.0px, 76.0px); }
  57.00% { transform: translate(934.0px, 76.0px); }
  57.25% { transform: translate(934.0px, 76.0px); }
  57.50% { transform: translate(934.0px, 76.0px); }
  57.75% { transform: translate(934.0px, 76.0px); }
  58.00% { transform: translate(934.0px, 76.0px); }
  58.25% { transform: translate(934.0px, 76.0px); }
  58.50% { transform: translate(934.0px, 76.0px); }
  58.75% { transform: translate(934.0px, 76.0px); }
  59.00% { transform: translate(934.0px, 76.0px); }
  59.25% { transform: translate(934.0px, 76.0px); }
  59.50% { transform: translate(934.0px, 76.0px); }
  59.75% { transform: translate(934.0px, 76.0px); }
  60.00% { transform: translate(934.0px, 76.0px); }
  60.25% { transform: translate(934.0px, 76.0px); }
  60.50% { transform: translate(934.0px, 76.0px); }
  60.75% { transform: translate(934.0px, 76.0px); }
  61.00% { transform: translate(934.0px, 76.0px); }
  61.25% { transform: translate(934.0px, 76.0px); }
  61.50% { transform: translate(934.0px, 76.0px); }
  61.75% { transform: translate(934.0px, 76.0px); }
  62.00% { transform: translate(934.0px, 76.0px); }
  62.25% { transform: translate(934.0px, 76.0px); }
  62.50% { transform: translate(934.0px, 76.0px); }
  62.75% { transform: translate(934.0px, 76.0px); }
  63.00% { transform: translate(934.0px, 76.0px); }
  63.25% { transform: translate(934.0px, 76.0px); }
  63.50% { transform: translate(934.0px, 76.0px); }
  63.75% { transform: translate(934.0px, 76.0px); }
  64.00% { transform: translate(934.0px, 76.0px); }
  64.25% { transform: translate(934.0px, 76.0px); }
  64.50% { transform: translate(934.0px, 76.0px); }
  64.75% { transform: translate(934.0px, 76.0px); }
  65.00% { transform: translate(934.0px, 76.0px); }
  65.25% { transform: translate(934.0px, 76.0px); }
  65.50% { transform: translate(934.0px, 76.0px); }
  65.75% { transform: translate(934.0px, 76.0px); }
  66.00% { transform: translate(934.0px, 76.0px); }
  66.25% { transform: translate(934.0px, 76.0px); }
  66.50% { transform: translate(934.0px, 76.0px); }
  66.75% { transform: translate(934.0px, 76.0px); }
  67.00% { transform: translate(934.0px, 76.0px); }
  67.25% { transform: translate(934.0px, 76.0px); }
  67.50% { transform: translate(934.0px, 76.0px); }
  67.75% { transform: translate(934.0px, 76.0px); }
  68.00% { transform: translate(934.0px, 76.0px); }
  68.25% { transform: translate(934.0px, 76.0px); }
  68.50% { transform: translate(934.0px, 76.0px); }
  68.75% { transform: translate(934.0px, 76.0px); }
  69.00% { transform: translate(934.0px, 76.0px); }
  69.25% { transform: translate(934.0px, 76.0px); }
  69.50% { transform: translate(934.0px, 76.0px); }
  69.75% { transform: translate(934.0px, 76.0px); }
  70.00% { transform: translate(934.0px, 76.0px); }
  70.25% { transform: translate(934.0px, 76.0px); }
  70.50% { transform: translate(934.0px, 76.0px); }
  70.75% { transform: translate(934.0px, 76.0px); }
  71.00% { transform: translate(934.0px, 76.0px); }
  71.25% { transform: translate(934.0px, 76.0px); }
  71.50% { transform: translate(934.0px, 76.0px); }
  71.75% { transform: translate(934.0px, 76.0px); }
  72.00% { transform: translate(934.0px, 76.0px); }
  72.25% { transform: translate(934.0px, 76.0px); }
  72.50% { transform: translate(934.0px, 76.0px); }
  72.75% { transform: translate(934.0px, 76.0px); }
  73.00% { transform: translate(934.0px, 76.0px); }
  73.25% { transform: translate(934.0px, 76.0px); }
  73.50% { transform: translate(934.0px, 76.0px); }
  73.75% { transform: translate(934.0px, 76.0px); }
  74.00% { transform: translate(934.0px, 76.0px); }
  74.25% { transform: translate(934.0px, 76.0px); }
  74.50% { transform: translate(934.0px, 76.0px); }
  74.75% { transform: translate(934.0px, 76.0px); }
  75.00% { transform: translate(934.0px, 76.0px); }
  75.25% { transform: translate(934.0px, 76.0px); }
  75.50% { transform: translate(934.0px, 76.0px); }
  75.75% { transform: translate(934.0px, 76.0px); }
  76.00% { transform: translate(934.0px, 76.0px); }
  76.25% { transform: translate(934.0px, 76.0px); }
  76.50% { transform: translate(934.0px, 76.0px); }
  76.75% { transform: translate(934.0px, 76.0px); }
  77.00% { transform: translate(934.0px, 76.0px); }
  77.25% { transform: translate(934.0px, 76.0px); }
  77.50% { transform: translate(934.0px, 76.0px); }
  77.75% { transform: translate(934.0px, 76.0px); }
  78.00% { transform: translate(934.0px, 76.0px); }
  78.25% { transform: translate(934.0px, 76.0px); }
  78.50% { transform: translate(934.0px, 76.0px); }
  78.75% { transform: translate(934.0px, 76.0px); }
  79.00% { transform: translate(934.0px, 76.0px); }
  79.25% { transform: translate(934.0px, 76.0px); }
  79.50% { transform: translate(934.0px, 76.0px); }
  79.75% { transform: translate(934.0px, 76.0px); }
  80.00% { transform: translate(934.0px, 76.0px); }
  80.25% { transform: translate(934.0px, 76.0px); }
  80.50% { transform: translate(934.0px, 76.0px); }
  80.75% { transform: translate(934.0px, 76.0px); }
  81.00% { transform: translate(934.0px, 76.0px); }
  81.25% { transform: translate(934.0px, 76.0px); }
  81.50% { transform: translate(934.0px, 76.0px); }
  81.75% { transform: translate(934.0px, 76.0px); }
  82.00% { transform: translate(934.0px, 76.0px); }
  82.25% { transform: translate(934.0px, 76.0px); }
  82.50% { transform: translate(934.0px, 76.0px); }
  82.75% { transform: translate(934.0px, 76.0px); }
  83.00% { transform: translate(934.0px, 76.0px); }
  83.25% { transform: translate(934.0px, 76.0px); }
  83.50% { transform: translate(934.0px, 76.0px); }
  83.75% { transform: translate(934.0px, 76.0px); }
  84.00% { transform: translate(934.0px, 76.0px); }
  84.25% { transform: translate(934.0px, 76.0px); }
  84.50% { transform: translate(934.0px, 76.0px); }
  84.75% { transform: translate(934.0px, 76.0px); }
  85.00% { transform: translate(934.0px, 76.0px); }
  85.25% { transform: translate(934.0px, 76.0px); }
  85.50% { transform: translate(934.0px, 76.0px); }
  85.75% { transform: translate(934.0px, 76.0px); }
  86.00% { transform: translate(934.0px, 76.0px); }
  86.25% { transform: translate(934.0px, 76.0px); }
  86.50% { transform: translate(934.0px, 76.0px); }
  86.75% { transform: translate(934.0px, 76.0px); }
  87.00% { transform: translate(934.0px, 76.0px); }
  87.25% { transform: translate(934.0px, 76.0px); }
  87.50% { transform: translate(934.0px, 76.0px); }
  87.75% { transform: translate(934.0px, 76.0px); }
  88.00% { transform: translate(934.0px, 76.0px); }
  88.25% { transform: translate(934.0px, 76.0px); }
  88.50% { transform: translate(934.0px, 76.0px); }
  88.75% { transform: translate(934.0px, 76.0px); }
  89.00% { transform: translate(934.0px, 76.0px); }
  89.25% { transform: translate(934.0px, 76.0px); }
  89.50% { transform: translate(934.0px, 76.0px); }
  89.75% { transform: translate(934.0px, 76.0px); }
  90.00% { transform: translate(934.0px, 76.0px); }
  90.25% { transform: translate(934.0px, 76.0px); }
  90.50% { transform: translate(934.0px, 76.0px); }
  90.75% { transform: translate(934.0px, 76.0px); }
  91.00% { transform: translate(934.0px, 76.0px); }
  91.25% { transform: translate(934.0px, 76.0px); }
  91.50% { transform: translate(934.0px, 76.0px); }
  91.75% { transform: translate(934.0px, 76.0px); }
  92.00% { transform: translate(934.0px, 76.0px); }
  92.25% { transform: translate(934.0px, 76.0px); }
  92.50% { transform: translate(934.0px, 76.0px); }
  92.75% { transform: translate(934.0px, 76.0px); }
  93.00% { transform: translate(934.0px, 76.0px); }
  93.25% { transform: translate(934.0px, 76.0px); }
  93.50% { transform: translate(934.0px, 76.0px); }
  93.75% { transform: translate(934.0px, 76.0px); }
  94.00% { transform: translate(934.0px, 76.0px); }
  94.25% { transform: translate(934.0px, 76.0px); }
  94.50% { transform: translate(934.0px, 76.0px); }
  94.75% { transform: translate(934.0px, 76.0px); }
  95.00% { transform: translate(934.0px, 76.0px); }
  95.25% { transform: translate(934.0px, 76.0px); }
  95.50% { transform: translate(934.0px, 76.0px); }
  95.75% { transform: translate(934.0px, 76.0px); }
  96.00% { transform: translate(934.0px, 76.0px); }
  96.25% { transform: translate(934.0px, 76.0px); }
  96.50% { transform: translate(934.0px, 76.0px); }
  96.75% { transform: translate(934.0px, 76.0px); }
  97.00% { transform: translate(934.0px, 76.0px); }
  97.25% { transform: translate(934.0px, 76.0px); }
  97.50% { transform: translate(934.0px, 76.0px); }
  97.75% { transform: translate(934.0px, 76.0px); }
  98.00% { transform: translate(934.0px, 76.0px); }
  98.25% { transform: translate(934.0px, 76.0px); }
  98.50% { transform: translate(934.0px, 76.0px); }
  98.75% { transform: translate(934.0px, 76.0px); }
  99.00% { transform: translate(934.0px, 76.0px); }
  99.25% { transform: translate(934.0px, 76.0px); }
  99.50% { transform: translate(934.0px, 76.0px); }
  99.75% { transform: translate(934.0px, 76.0px); }
  100.00% { transform: translate(934.0px, 76.0px); }
}
@keyframes bubble4-run {
  0.00% { transform: translate(1138.0px, 122.0px); }
  0.25% { transform: translate(1138.0px, 122.0px); }
  0.50% { transform: translate(1138.0px, 122.0px); }
  0.75% { transform: translate(1138.0px, 122.0px); }
  1.00% { transform: translate(1138.0px, 122.0px); }
  1.25% { transform: translate(1138.0px, 122.0px); }
  1.50% { transform: translate(1138.0px, 122.0px); }
  1.75% { transform: translate(1138.0px, 122.0px); }
  2.00% { transform: translate(1138.0px, 122.0px); }
  2.25% { transform: translate(1138.0px, 122.0px); }
  2.50% { transform: translate(1138.0px, 122.0px); }
  2.75% { transform: translate(1138.0px, 122.0px); }
  3.00% { transform: translate(1138.0px, 122.0px); }
  3.25% { transform: translate(1138.0px, 122.0px); }
  3.50% { transform: translate(1138.0px, 122.0px); }
  3.75% { transform: translate(1138.0px, 122.0px); }
  4.00% { transform: translate(1138.0px, 122.0px); }
  4.25% { transform: translate(1138.0px, 122.0px); }
  4.50% { transform: translate(1138.0px, 122.0px); }
  4.75% { transform: translate(1138.0px, 122.0px); }
  5.00% { transform: translate(1138.0px, 122.0px); }
  5.25% { transform: translate(1138.0px, 122.0px); }
  5.50% { transform: translate(1138.0px, 122.0px); }
  5.75% { transform: translate(1138.0px, 122.0px); }
  6.00% { transform: translate(1138.0px, 122.0px); }
  6.25% { transform: translate(1138.0px, 122.0px); }
  6.50% { transform: translate(1138.0px, 122.0px); }
  6.75% { transform: translate(1138.0px, 122.0px); }
  7.00% { transform: translate(1138.0px, 122.0px); }
  7.25% { transform: translate(1138.0px, 122.0px); }
  7.50% { transform: translate(1138.0px, 122.0px); }
  7.75% { transform: translate(1138.0px, 122.0px); }
  8.00% { transform: translate(1138.0px, 122.0px); }
  8.25% { transform: translate(1138.0px, 122.0px); }
  8.50% { transform: translate(1138.0px, 122.0px); }
  8.75% { transform: translate(1138.0px, 122.0px); }
  9.00% { transform: translate(1138.0px, 122.0px); }
  9.25% { transform: translate(1138.0px, 122.0px); }
  9.50% { transform: translate(1138.0px, 122.0px); }
  9.75% { transform: translate(1138.0px, 122.0px); }
  10.00% { transform: translate(1138.0px, 122.0px); }
  10.25% { transform: translate(1138.0px, 122.0px); }
  10.50% { transform: translate(1138.0px, 122.0px); }
  10.75% { transform: translate(1138.0px, 122.0px); }
  11.00% { transform: translate(1138.0px, 122.0px); }
  11.25% { transform: translate(1138.0px, 122.0px); }
  11.50% { transform: translate(1138.0px, 122.0px); }
  11.75% { transform: translate(1138.0px, 122.0px); }
  12.00% { transform: translate(1138.0px, 122.0px); }
  12.25% { transform: translate(1138.0px, 122.0px); }
  12.50% { transform: translate(1138.0px, 122.0px); }
  12.75% { transform: translate(1138.0px, 122.0px); }
  13.00% { transform: translate(1138.0px, 122.0px); }
  13.25% { transform: translate(1138.0px, 122.0px); }
  13.50% { transform: translate(1138.0px, 122.0px); }
  13.75% { transform: translate(1138.0px, 122.0px); }
  14.00% { transform: translate(1138.0px, 122.0px); }
  14.25% { transform: translate(1138.0px, 122.0px); }
  14.50% { transform: translate(1138.0px, 122.0px); }
  14.75% { transform: translate(1138.0px, 122.0px); }
  15.00% { transform: translate(1138.0px, 122.0px); }
  15.25% { transform: translate(1138.0px, 122.0px); }
  15.50% { transform: translate(1138.0px, 122.0px); }
  15.75% { transform: translate(1138.0px, 122.0px); }
  16.00% { transform: translate(1138.0px, 122.0px); }
  16.25% { transform: translate(1138.0px, 122.0px); }
  16.50% { transform: translate(1138.0px, 122.0px); }
  16.75% { transform: translate(1138.0px, 122.0px); }
  17.00% { transform: translate(1138.0px, 122.0px); }
  17.25% { transform: translate(1138.0px, 122.0px); }
  17.50% { transform: translate(1138.0px, 122.0px); }
  17.75% { transform: translate(1138.0px, 122.0px); }
  18.00% { transform: translate(1138.0px, 122.0px); }
  18.25% { transform: translate(1138.0px, 122.0px); }
  18.50% { transform: translate(1138.0px, 122.0px); }
  18.75% { transform: translate(1138.0px, 122.0px); }
  19.00% { transform: translate(1138.0px, 122.0px); }
  19.25% { transform: translate(1138.0px, 122.0px); }
  19.50% { transform: translate(1138.0px, 122.0px); }
  19.75% { transform: translate(1138.0px, 122.0px); }
  20.00% { transform: translate(1138.0px, 122.0px); }
  20.25% { transform: translate(1138.0px, 122.0px); }
  20.50% { transform: translate(1138.0px, 122.0px); }
  20.75% { transform: translate(1138.0px, 122.0px); }
  21.00% { transform: translate(1138.0px, 122.0px); }
  21.25% { transform: translate(1138.0px, 122.0px); }
  21.50% { transform: translate(1138.0px, 122.0px); }
  21.75% { transform: translate(1138.0px, 122.0px); }
  22.00% { transform: translate(1138.0px, 122.0px); }
  22.25% { transform: translate(1138.0px, 122.0px); }
  22.50% { transform: translate(1138.0px, 122.0px); }
  22.75% { transform: translate(1138.0px, 122.0px); }
  23.00% { transform: translate(1138.0px, 122.0px); }
  23.25% { transform: translate(1138.0px, 122.0px); }
  23.50% { transform: translate(1138.0px, 122.0px); }
  23.75% { transform: translate(1138.0px, 122.0px); }
  24.00% { transform: translate(1138.0px, 122.0px); }
  24.25% { transform: translate(1138.0px, 122.0px); }
  24.50% { transform: translate(1138.0px, 122.0px); }
  24.75% { transform: translate(1138.0px, 122.0px); }
  25.00% { transform: translate(1138.0px, 122.0px); }
  25.25% { transform: translate(1138.0px, 122.0px); }
  25.50% { transform: translate(1138.0px, 122.0px); }
  25.75% { transform: translate(1138.0px, 122.0px); }
  26.00% { transform: translate(1138.0px, 122.0px); }
  26.25% { transform: translate(1138.0px, 122.0px); }
  26.50% { transform: translate(1138.0px, 122.0px); }
  26.75% { transform: translate(1138.0px, 122.0px); }
  27.00% { transform: translate(1138.0px, 122.0px); }
  27.25% { transform: translate(1138.0px, 122.0px); }
  27.50% { transform: translate(1138.0px, 122.0px); }
  27.75% { transform: translate(1138.0px, 122.0px); }
  28.00% { transform: translate(1138.0px, 122.0px); }
  28.25% { transform: translate(1138.0px, 122.0px); }
  28.50% { transform: translate(1138.0px, 122.0px); }
  28.75% { transform: translate(1138.0px, 122.0px); }
  29.00% { transform: translate(1138.0px, 122.0px); }
  29.25% { transform: translate(1138.0px, 122.0px); }
  29.50% { transform: translate(1138.0px, 122.0px); }
  29.75% { transform: translate(1138.0px, 122.0px); }
  30.00% { transform: translate(1138.0px, 122.0px); }
  30.25% { transform: translate(1138.0px, 122.0px); }
  30.50% { transform: translate(1138.0px, 122.0px); }
  30.75% { transform: translate(1138.0px, 122.0px); }
  31.00% { transform: translate(1138.0px, 122.0px); }
  31.25% { transform: translate(1138.0px, 122.0px); }
  31.50% { transform: translate(1138.0px, 122.0px); }
  31.75% { transform: translate(1138.0px, 122.0px); }
  32.00% { transform: translate(1138.0px, 122.0px); }
  32.25% { transform: translate(1138.0px, 122.0px); }
  32.50% { transform: translate(1138.0px, 122.0px); }
  32.75% { transform: translate(1138.0px, 122.0px); }
  33.00% { transform: translate(1138.0px, 122.0px); }
  33.25% { transform: translate(1138.0px, 122.0px); }
  33.50% { transform: translate(1138.0px, 122.0px); }
  33.75% { transform: translate(1138.0px, 122.0px); }
  34.00% { transform: translate(1138.0px, 122.0px); }
  34.25% { transform: translate(1138.0px, 122.0px); }
  34.50% { transform: translate(1138.0px, 122.0px); }
  34.75% { transform: translate(1138.0px, 122.0px); }
  35.00% { transform: translate(1138.0px, 122.0px); }
  35.25% { transform: translate(1138.0px, 122.0px); }
  35.50% { transform: translate(1138.0px, 122.0px); }
  35.75% { transform: translate(1138.0px, 122.0px); }
  36.00% { transform: translate(1138.0px, 122.0px); }
  36.25% { transform: translate(1138.0px, 122.0px); }
  36.50% { transform: translate(1138.0px, 122.0px); }
  36.75% { transform: translate(1138.0px, 122.0px); }
  37.00% { transform: translate(1138.0px, 122.0px); }
  37.25% { transform: translate(1138.0px, 122.0px); }
  37.50% { transform: translate(1138.0px, 122.0px); }
  37.75% { transform: translate(1138.0px, 122.0px); }
  38.00% { transform: translate(1138.0px, 122.0px); }
  38.25% { transform: translate(1138.0px, 122.0px); }
  38.50% { transform: translate(1138.0px, 122.0px); }
  38.75% { transform: translate(1138.0px, 122.0px); }
  39.00% { transform: translate(1138.0px, 122.0px); }
  39.25% { transform: translate(1138.0px, 122.0px); }
  39.50% { transform: translate(1138.0px, 122.0px); }
  39.75% { transform: translate(1138.0px, 122.0px); }
  40.00% { transform: translate(1138.0px, 122.0px); }
  40.25% { transform: translate(1138.0px, 122.0px); }
  40.50% { transform: translate(1138.0px, 122.0px); }
  40.75% { transform: translate(1138.0px, 122.0px); }
  41.00% { transform: translate(1138.0px, 122.0px); }
  41.25% { transform: translate(1138.0px, 122.0px); }
  41.50% { transform: translate(1138.0px, 122.0px); }
  41.75% { transform: translate(1138.0px, 122.0px); }
  42.00% { transform: translate(1138.0px, 122.0px); }
  42.25% { transform: translate(1138.0px, 122.0px); }
  42.50% { transform: translate(1138.0px, 122.0px); }
  42.75% { transform: translate(1138.0px, 122.0px); }
  43.00% { transform: translate(1138.0px, 122.0px); }
  43.25% { transform: translate(1138.0px, 122.0px); }
  43.50% { transform: translate(1138.0px, 122.0px); }
  43.75% { transform: translate(1138.0px, 122.0px); }
  44.00% { transform: translate(1138.0px, 122.0px); }
  44.25% { transform: translate(1138.0px, 122.0px); }
  44.50% { transform: translate(1138.0px, 122.0px); }
  44.75% { transform: translate(1138.0px, 122.0px); }
  45.00% { transform: translate(1138.0px, 122.0px); }
  45.25% { transform: translate(1138.0px, 122.0px); }
  45.50% { transform: translate(1138.0px, 122.0px); }
  45.75% { transform: translate(1138.0px, 122.0px); }
  46.00% { transform: translate(1138.0px, 122.0px); }
  46.25% { transform: translate(1138.0px, 122.0px); }
  46.50% { transform: translate(1138.0px, 122.0px); }
  46.75% { transform: translate(1138.0px, 122.0px); }
  47.00% { transform: translate(1138.0px, 122.0px); }
  47.25% { transform: translate(1138.0px, 122.0px); }
  47.50% { transform: translate(1138.0px, 122.0px); }
  47.75% { transform: translate(1138.0px, 122.0px); }
  48.00% { transform: translate(1138.0px, 122.0px); }
  48.25% { transform: translate(1138.0px, 122.0px); }
  48.50% { transform: translate(1138.0px, 122.0px); }
  48.75% { transform: translate(1138.0px, 122.0px); }
  49.00% { transform: translate(1138.0px, 122.0px); }
  49.25% { transform: translate(1138.0px, 122.0px); }
  49.50% { transform: translate(1138.0px, 122.0px); }
  49.75% { transform: translate(1138.0px, 122.0px); }
  50.00% { transform: translate(1138.0px, 122.0px); }
  50.25% { transform: translate(1138.0px, 122.0px); }
  50.50% { transform: translate(1138.0px, 122.0px); }
  50.75% { transform: translate(1138.0px, 122.0px); }
  51.00% { transform: translate(1138.0px, 122.0px); }
  51.25% { transform: translate(1138.0px, 122.0px); }
  51.50% { transform: translate(1138.0px, 122.0px); }
  51.75% { transform: translate(1138.0px, 122.0px); }
  52.00% { transform: translate(1138.0px, 122.0px); }
  52.25% { transform: translate(1138.0px, 122.0px); }
  52.50% { transform: translate(1138.0px, 122.0px); }
  52.75% { transform: translate(1138.0px, 122.0px); }
  53.00% { transform: translate(1138.0px, 122.0px); }
  53.25% { transform: translate(1138.0px, 122.0px); }
  53.50% { transform: translate(1138.0px, 122.0px); }
  53.75% { transform: translate(1138.0px, 122.0px); }
  54.00% { transform: translate(1138.0px, 122.0px); }
  54.25% { transform: translate(1138.0px, 122.0px); }
  54.50% { transform: translate(1138.0px, 122.0px); }
  54.75% { transform: translate(1138.0px, 122.0px); }
  55.00% { transform: translate(1138.0px, 122.0px); }
  55.25% { transform: translate(1138.0px, 122.0px); }
  55.50% { transform: translate(1138.0px, 122.0px); }
  55.75% { transform: translate(1138.0px, 122.0px); }
  56.00% { transform: translate(1138.0px, 122.0px); }
  56.25% { transform: translate(1138.0px, 122.0px); }
  56.50% { transform: translate(1138.0px, 122.0px); }
  56.75% { transform: translate(1138.0px, 122.0px); }
  57.00% { transform: translate(1138.0px, 122.0px); }
  57.25% { transform: translate(1138.0px, 122.0px); }
  57.50% { transform: translate(1138.0px, 122.0px); }
  57.75% { transform: translate(1138.0px, 122.0px); }
  58.00% { transform: translate(1138.0px, 122.0px); }
  58.25% { transform: translate(1138.0px, 122.0px); }
  58.50% { transform: translate(1138.0px, 122.0px); }
  58.75% { transform: translate(1138.0px, 122.0px); }
  59.00% { transform: translate(1138.0px, 122.0px); }
  59.25% { transform: translate(1138.0px, 122.0px); }
  59.50% { transform: translate(1138.0px, 122.0px); }
  59.75% { transform: translate(1138.0px, 122.0px); }
  60.00% { transform: translate(1138.0px, 122.0px); }
  60.25% { transform: translate(1138.0px, 122.0px); }
  60.50% { transform: translate(1138.0px, 122.0px); }
  60.75% { transform: translate(1138.0px, 122.0px); }
  61.00% { transform: translate(1138.0px, 122.0px); }
  61.25% { transform: translate(1138.0px, 122.0px); }
  61.50% { transform: translate(1138.0px, 122.0px); }
  61.75% { transform: translate(1138.0px, 122.0px); }
  62.00% { transform: translate(1138.0px, 122.0px); }
  62.25% { transform: translate(1138.0px, 122.0px); }
  62.50% { transform: translate(1138.0px, 122.0px); }
  62.75% { transform: translate(1138.0px, 122.0px); }
  63.00% { transform: translate(1138.0px, 122.0px); }
  63.25% { transform: translate(1138.0px, 122.0px); }
  63.50% { transform: translate(1138.0px, 122.0px); }
  63.75% { transform: translate(1138.0px, 122.0px); }
  64.00% { transform: translate(1138.0px, 122.0px); }
  64.25% { transform: translate(1138.0px, 122.0px); }
  64.50% { transform: translate(1138.0px, 122.0px); }
  64.75% { transform: translate(1138.0px, 122.0px); }
  65.00% { transform: translate(1138.0px, 122.0px); }
  65.25% { transform: translate(1138.0px, 122.0px); }
  65.50% { transform: translate(1138.0px, 122.0px); }
  65.75% { transform: translate(1138.0px, 122.0px); }
  66.00% { transform: translate(1138.0px, 122.0px); }
  66.25% { transform: translate(1138.0px, 122.0px); }
  66.50% { transform: translate(1138.0px, 122.0px); }
  66.75% { transform: translate(1138.0px, 122.0px); }
  67.00% { transform: translate(1138.0px, 122.0px); }
  67.25% { transform: translate(1138.0px, 122.0px); }
  67.50% { transform: translate(1138.0px, 122.0px); }
  67.75% { transform: translate(1138.0px, 122.0px); }
  68.00% { transform: translate(1138.0px, 122.0px); }
  68.25% { transform: translate(1138.0px, 122.0px); }
  68.50% { transform: translate(1138.0px, 122.0px); }
  68.75% { transform: translate(1138.0px, 122.0px); }
  69.00% { transform: translate(1138.0px, 122.0px); }
  69.25% { transform: translate(1138.0px, 122.0px); }
  69.50% { transform: translate(1138.0px, 122.0px); }
  69.75% { transform: translate(1138.0px, 122.4px); }
  70.00% { transform: translate(1138.0px, 122.2px); }
  70.25% { transform: translate(1138.0px, 121.4px); }
  70.50% { transform: translate(1138.0px, 122.5px); }
  70.75% { transform: translate(1138.0px, 122.1px); }
  71.00% { transform: translate(1138.0px, 121.5px); }
  71.25% { transform: translate(1138.0px, 122.5px); }
  71.50% { transform: translate(1138.0px, 122.0px); }
  71.75% { transform: translate(1138.0px, 121.5px); }
  72.00% { transform: translate(1138.0px, 122.5px); }
  72.25% { transform: translate(1138.0px, 121.9px); }
  72.50% { transform: translate(1138.0px, 121.5px); }
  72.75% { transform: translate(1138.0px, 122.6px); }
  73.00% { transform: translate(1138.0px, 121.8px); }
  73.25% { transform: translate(1138.0px, 121.6px); }
  73.50% { transform: translate(1138.0px, 122.6px); }
  73.75% { transform: translate(1138.0px, 121.8px); }
  74.00% { transform: translate(1138.0px, 121.7px); }
  74.25% { transform: translate(1138.0px, 122.6px); }
  74.50% { transform: translate(1138.0px, 121.7px); }
  74.75% { transform: translate(1138.0px, 121.8px); }
  75.00% { transform: translate(1138.0px, 122.6px); }
  75.25% { transform: translate(1138.0px, 121.6px); }
  75.50% { transform: translate(1138.0px, 121.8px); }
  75.75% { transform: translate(1138.0px, 122.6px); }
  76.00% { transform: translate(1138.0px, 121.5px); }
  76.25% { transform: translate(1138.0px, 121.9px); }
  76.50% { transform: translate(1138.0px, 122.5px); }
  76.75% { transform: translate(1138.0px, 121.5px); }
  77.00% { transform: translate(1138.0px, 122.0px); }
  77.25% { transform: translate(1138.0px, 122.5px); }
  77.50% { transform: translate(1138.0px, 121.5px); }
  77.75% { transform: translate(1138.0px, 122.1px); }
  78.00% { transform: translate(1138.0px, 122.5px); }
  78.25% { transform: translate(1138.0px, 121.4px); }
  78.50% { transform: translate(1138.0px, 122.2px); }
  78.75% { transform: translate(1152.2px, 122.7px); }
  79.00% { transform: translate(1167.0px, 121.0px); }
  79.25% { transform: translate(1182.3px, 122.4px); }
  79.50% { transform: translate(1198.1px, 122.5px); }
  79.75% { transform: translate(1214.4px, 121.0px); }
  80.00% { transform: translate(1231.2px, 122.5px); }
  80.25% { transform: translate(1248.6px, 122.4px); }
  80.50% { transform: translate(1266.4px, 121.0px); }
  80.75% { transform: translate(1284.8px, 122.7px); }
  81.00% { transform: translate(1303.7px, 122.3px); }
  81.25% { transform: translate(1323.1px, 121.0px); }
  81.50% { transform: translate(1343.1px, 122.8px); }
  81.75% { transform: translate(1363.5px, 122.1px); }
  82.00% { transform: translate(1384.5px, 121.1px); }
  82.25% { transform: translate(1406.0px, 122.8px); }
  82.50% { transform: translate(1428.0px, 122.0px); }
  82.75% { transform: translate(1450.5px, 121.2px); }
  83.00% { transform: translate(1473.6px, 122.9px); }
  83.25% { transform: translate(1497.1px, 121.9px); }
  83.50% { transform: translate(1521.2px, 121.2px); }
  83.75% { transform: translate(1545.8px, 123.0px); }
  84.00% { transform: translate(1570.9px, 121.7px); }
  84.25% { transform: translate(1596.5px, 121.3px); }
  84.50% { transform: translate(1622.7px, 123.0px); }
  84.75% { transform: translate(1649.4px, 121.6px); }
  85.00% { transform: translate(1676.5px, 121.5px); }
  85.25% { transform: translate(1704.2px, 123.0px); }
  85.50% { transform: translate(1732.5px, 121.5px); }
  85.75% { transform: translate(1761.2px, 121.6px); }
  86.00% { transform: translate(1790.5px, 123.0px); }
  86.25% { transform: translate(1820.2px, 121.3px); }
  86.50% { transform: translate(1850.5px, 121.7px); }
  86.75% { transform: translate(1881.3px, 123.0px); }
  87.00% { transform: translate(1912.7px, 121.2px); }
  87.25% { transform: translate(1944.5px, 121.9px); }
  87.50% { transform: translate(1976.9px, 122.9px); }
  87.75% { transform: translate(2009.8px, 121.2px); }
  88.00% { transform: translate(2043.2px, 122.0px); }
  88.25% { transform: translate(2077.1px, 122.8px); }
  88.50% { transform: translate(2111.5px, 121.1px); }
  88.75% { transform: translate(2146.5px, 122.1px); }
  89.00% { transform: translate(2182.0px, 122.8px); }
  89.25% { transform: translate(2217.9px, 121.0px); }
  89.50% { transform: translate(2254.4px, 122.3px); }
  89.75% { transform: translate(2291.5px, 122.7px); }
  90.00% { transform: translate(2329.0px, 121.0px); }
  90.25% { transform: translate(2367.1px, 122.4px); }
  90.50% { transform: translate(2405.7px, 122.5px); }
  90.75% { transform: translate(2444.8px, 121.0px); }
  91.00% { transform: translate(2484.4px, 122.5px); }
  91.25% { transform: translate(2524.5px, 122.4px); }
  91.50% { transform: translate(2565.1px, 121.0px); }
  91.75% { transform: translate(2606.3px, 122.7px); }
  92.00% { transform: translate(2648.0px, 122.3px); }
  92.25% { transform: translate(2648.0px, 122.3px); }
  92.50% { transform: translate(2648.0px, 122.3px); }
  92.75% { transform: translate(2648.0px, 122.3px); }
  93.00% { transform: translate(2648.0px, 122.3px); }
  93.25% { transform: translate(2648.0px, 122.3px); }
  93.50% { transform: translate(2648.0px, 122.3px); }
  93.75% { transform: translate(2648.0px, 122.3px); }
  94.00% { transform: translate(2648.0px, 122.3px); }
  94.25% { transform: translate(2648.0px, 122.3px); }
  94.50% { transform: translate(2648.0px, 122.3px); }
  94.75% { transform: translate(2648.0px, 122.3px); }
  95.00% { transform: translate(2648.0px, 122.3px); }
  95.25% { transform: translate(2648.0px, 122.3px); }
  95.50% { transform: translate(2648.0px, 122.3px); }
  95.75% { transform: translate(2648.0px, 122.3px); }
  96.00% { transform: translate(2648.0px, 122.3px); }
  96.25% { transform: translate(2648.0px, 122.3px); }
  96.50% { transform: translate(2648.0px, 122.3px); }
  96.75% { transform: translate(2648.0px, 122.3px); }
  97.00% { transform: translate(2648.0px, 122.3px); }
  97.25% { transform: translate(2648.0px, 122.3px); }
  97.50% { transform: translate(2648.0px, 122.3px); }
  97.75% { transform: translate(2648.0px, 122.3px); }
  98.00% { transform: translate(2648.0px, 122.3px); }
  98.25% { transform: translate(2648.0px, 122.3px); }
  98.50% { transform: translate(2648.0px, 122.3px); }
  98.75% { transform: translate(2648.0px, 122.3px); }
  99.00% { transform: translate(2648.0px, 122.3px); }
  99.25% { transform: translate(2648.0px, 122.3px); }
  99.50% { transform: translate(2648.0px, 122.3px); }
  99.75% { transform: translate(2648.0px, 122.3px); }
  100.00% { transform: translate(2648.0px, 122.3px); }
}
@keyframes sled-cam {
  0.00% { transform: translateX(360.0px); }
  0.25% { transform: translateX(360.0px); }
  0.50% { transform: translateX(360.0px); }
  0.75% { transform: translateX(360.0px); }
  1.00% { transform: translateX(360.0px); }
  1.25% { transform: translateX(360.0px); }
  1.50% { transform: translateX(360.0px); }
  1.75% { transform: translateX(360.0px); }
  2.00% { transform: translateX(360.0px); }
  2.25% { transform: translateX(360.0px); }
  2.50% { transform: translateX(360.0px); }
  2.75% { transform: translateX(360.0px); }
  3.00% { transform: translateX(360.0px); }
  3.25% { transform: translateX(360.0px); }
  3.50% { transform: translateX(360.0px); }
  3.75% { transform: translateX(360.0px); }
  4.00% { transform: translateX(360.0px); }
  4.25% { transform: translateX(360.0px); }
  4.50% { transform: translateX(360.0px); }
  4.75% { transform: translateX(360.0px); }
  5.00% { transform: translateX(360.0px); }
  5.25% { transform: translateX(360.0px); }
  5.50% { transform: translateX(360.0px); }
  5.75% { transform: translateX(360.0px); }
  6.00% { transform: translateX(360.0px); }
  6.25% { transform: translateX(360.0px); }
  6.50% { transform: translateX(360.0px); }
  6.75% { transform: translateX(360.0px); }
  7.00% { transform: translateX(360.0px); }
  7.25% { transform: translateX(360.0px); }
  7.50% { transform: translateX(360.0px); }
  7.75% { transform: translateX(360.0px); }
  8.00% { transform: translateX(360.0px); }
  8.25% { transform: translateX(360.0px); }
  8.50% { transform: translateX(360.0px); }
  8.75% { transform: translateX(360.0px); }
  9.00% { transform: translateX(360.0px); }
  9.25% { transform: translateX(360.0px); }
  9.50% { transform: translateX(360.0px); }
  9.75% { transform: translateX(360.0px); }
  10.00% { transform: translateX(360.0px); }
  10.25% { transform: translateX(360.0px); }
  10.50% { transform: translateX(360.0px); }
  10.75% { transform: translateX(360.0px); }
  11.00% { transform: translateX(360.0px); }
  11.25% { transform: translateX(360.0px); }
  11.50% { transform: translateX(360.0px); }
  11.75% { transform: translateX(360.0px); }
  12.00% { transform: translateX(360.0px); }
  12.25% { transform: translateX(360.0px); }
  12.50% { transform: translateX(360.0px); }
  12.75% { transform: translateX(360.0px); }
  13.00% { transform: translateX(360.0px); }
  13.25% { transform: translateX(360.0px); }
  13.50% { transform: translateX(360.0px); }
  13.75% { transform: translateX(360.0px); }
  14.00% { transform: translateX(360.0px); }
  14.25% { transform: translateX(360.0px); }
  14.50% { transform: translateX(359.9px); }
  14.75% { transform: translateX(358.7px); }
  15.00% { transform: translateX(356.3px); }
  15.25% { transform: translateX(353.1px); }
  15.50% { transform: translateX(348.9px); }
  15.75% { transform: translateX(344.0px); }
  16.00% { transform: translateX(338.4px); }
  16.25% { transform: translateX(332.2px); }
  16.50% { transform: translateX(325.3px); }
  16.75% { transform: translateX(317.9px); }
  17.00% { transform: translateX(310.0px); }
  17.25% { transform: translateX(301.6px); }
  17.50% { transform: translateX(292.8px); }
  17.75% { transform: translateX(283.7px); }
  18.00% { transform: translateX(274.2px); }
  18.25% { transform: translateX(264.3px); }
  18.50% { transform: translateX(254.2px); }
  18.75% { transform: translateX(243.9px); }
  19.00% { transform: translateX(233.2px); }
  19.25% { transform: translateX(222.4px); }
  19.50% { transform: translateX(211.4px); }
  19.75% { transform: translateX(200.2px); }
  20.00% { transform: translateX(188.9px); }
  20.25% { transform: translateX(177.5px); }
  20.50% { transform: translateX(165.9px); }
  20.75% { transform: translateX(154.3px); }
  21.00% { transform: translateX(142.4px); }
  21.25% { transform: translateX(130.5px); }
  21.50% { transform: translateX(118.5px); }
  21.75% { transform: translateX(106.4px); }
  22.00% { transform: translateX(94.2px); }
  22.25% { transform: translateX(82.0px); }
  22.50% { transform: translateX(69.6px); }
  22.75% { transform: translateX(57.2px); }
  23.00% { transform: translateX(44.8px); }
  23.25% { transform: translateX(32.3px); }
  23.50% { transform: translateX(19.8px); }
  23.75% { transform: translateX(7.3px); }
  24.00% { transform: translateX(-5.3px); }
  24.25% { transform: translateX(-17.8px); }
  24.50% { transform: translateX(-30.4px); }
  24.75% { transform: translateX(-42.9px); }
  25.00% { transform: translateX(-55.4px); }
  25.25% { transform: translateX(-67.9px); }
  25.50% { transform: translateX(-80.3px); }
  25.75% { transform: translateX(-92.7px); }
  26.00% { transform: translateX(-105.1px); }
  26.25% { transform: translateX(-117.3px); }
  26.50% { transform: translateX(-129.4px); }
  26.75% { transform: translateX(-141.4px); }
  27.00% { transform: translateX(-153.2px); }
  27.25% { transform: translateX(-164.9px); }
  27.50% { transform: translateX(-176.5px); }
  27.75% { transform: translateX(-188.1px); }
  28.00% { transform: translateX(-199.7px); }
  28.25% { transform: translateX(-211.2px); }
  28.50% { transform: translateX(-222.8px); }
  28.75% { transform: translateX(-234.4px); }
  29.00% { transform: translateX(-246.1px); }
  29.25% { transform: translateX(-257.8px); }
  29.50% { transform: translateX(-269.5px); }
  29.75% { transform: translateX(-281.3px); }
  30.00% { transform: translateX(-293.3px); }
  30.25% { transform: translateX(-305.2px); }
  30.50% { transform: translateX(-317.3px); }
  30.75% { transform: translateX(-329.4px); }
  31.00% { transform: translateX(-341.6px); }
  31.25% { transform: translateX(-353.9px); }
  31.50% { transform: translateX(-366.2px); }
  31.75% { transform: translateX(-378.6px); }
  32.00% { transform: translateX(-391.1px); }
  32.25% { transform: translateX(-403.5px); }
  32.50% { transform: translateX(-416.0px); }
  32.75% { transform: translateX(-428.4px); }
  33.00% { transform: translateX(-440.8px); }
  33.25% { transform: translateX(-453.1px); }
  33.50% { transform: translateX(-465.4px); }
  33.75% { transform: translateX(-477.6px); }
  34.00% { transform: translateX(-489.8px); }
  34.25% { transform: translateX(-501.9px); }
  34.50% { transform: translateX(-513.9px); }
  34.75% { transform: translateX(-525.7px); }
  35.00% { transform: translateX(-537.4px); }
  35.25% { transform: translateX(-549.0px); }
  35.50% { transform: translateX(-574.3px); }
  35.75% { transform: translateX(-597.3px); }
  36.00% { transform: translateX(-618.2px); }
  36.25% { transform: translateX(-637.3px); }
  36.50% { transform: translateX(-654.6px); }
  36.75% { transform: translateX(-670.4px); }
  37.00% { transform: translateX(-684.8px); }
  37.25% { transform: translateX(-697.8px); }
  37.50% { transform: translateX(-709.7px); }
  37.75% { transform: translateX(-720.6px); }
  38.00% { transform: translateX(-730.4px); }
  38.25% { transform: translateX(-739.4px); }
  38.50% { transform: translateX(-747.5px); }
  38.75% { transform: translateX(-755.0px); }
  39.00% { transform: translateX(-761.7px); }
  39.25% { transform: translateX(-767.9px); }
  39.50% { transform: translateX(-773.4px); }
  39.75% { transform: translateX(-778.5px); }
  40.00% { transform: translateX(-783.2px); }
  40.25% { transform: translateX(-787.4px); }
  40.50% { transform: translateX(-791.2px); }
  40.75% { transform: translateX(-794.7px); }
  41.00% { transform: translateX(-797.9px); }
  41.25% { transform: translateX(-800.8px); }
  41.50% { transform: translateX(-803.4px); }
  41.75% { transform: translateX(-805.8px); }
  42.00% { transform: translateX(-808.0px); }
  42.25% { transform: translateX(-810.0px); }
  42.50% { transform: translateX(-811.8px); }
  42.75% { transform: translateX(-813.4px); }
  43.00% { transform: translateX(-814.9px); }
  43.25% { transform: translateX(-816.3px); }
  43.50% { transform: translateX(-817.5px); }
  43.75% { transform: translateX(-818.6px); }
  44.00% { transform: translateX(-819.6px); }
  44.25% { transform: translateX(-820.6px); }
  44.50% { transform: translateX(-821.4px); }
  44.75% { transform: translateX(-822.2px); }
  45.00% { transform: translateX(-822.9px); }
  45.25% { transform: translateX(-823.5px); }
  45.50% { transform: translateX(-824.1px); }
  45.75% { transform: translateX(-824.6px); }
  46.00% { transform: translateX(-825.1px); }
  46.25% { transform: translateX(-825.6px); }
  46.50% { transform: translateX(-826.0px); }
  46.75% { transform: translateX(-826.3px); }
  47.00% { transform: translateX(-826.7px); }
  47.25% { transform: translateX(-827.0px); }
  47.50% { transform: translateX(-827.2px); }
  47.75% { transform: translateX(-827.5px); }
  48.00% { transform: translateX(-827.7px); }
  48.25% { transform: translateX(-827.9px); }
  48.50% { transform: translateX(-828.1px); }
  48.75% { transform: translateX(-828.3px); }
  49.00% { transform: translateX(-828.4px); }
  49.25% { transform: translateX(-828.6px); }
  49.50% { transform: translateX(-828.7px); }
  49.75% { transform: translateX(-828.8px); }
  50.00% { transform: translateX(-828.9px); }
  50.25% { transform: translateX(-829.0px); }
  50.50% { transform: translateX(-829.1px); }
  50.75% { transform: translateX(-829.2px); }
  51.00% { transform: translateX(-829.3px); }
  51.25% { transform: translateX(-829.3px); }
  51.50% { transform: translateX(-829.4px); }
  51.75% { transform: translateX(-829.4px); }
  52.00% { transform: translateX(-829.5px); }
  52.25% { transform: translateX(-829.5px); }
  52.50% { transform: translateX(-829.6px); }
  52.75% { transform: translateX(-829.6px); }
  53.00% { transform: translateX(-829.7px); }
  53.25% { transform: translateX(-829.7px); }
  53.50% { transform: translateX(-829.7px); }
  53.75% { transform: translateX(-829.7px); }
  54.00% { transform: translateX(-829.8px); }
  54.25% { transform: translateX(-829.8px); }
  54.50% { transform: translateX(-829.8px); }
  54.75% { transform: translateX(-829.8px); }
  55.00% { transform: translateX(-829.8px); }
  55.25% { transform: translateX(-829.9px); }
  55.50% { transform: translateX(-829.9px); }
  55.75% { transform: translateX(-829.9px); }
  56.00% { transform: translateX(-829.9px); }
  56.25% { transform: translateX(-829.9px); }
  56.50% { transform: translateX(-829.9px); }
  56.75% { transform: translateX(-829.9px); }
  57.00% { transform: translateX(-829.9px); }
  57.25% { transform: translateX(-829.9px); }
  57.50% { transform: translateX(-829.9px); }
  57.75% { transform: translateX(-829.9px); }
  58.00% { transform: translateX(-829.9px); }
  58.25% { transform: translateX(-830.0px); }
  58.50% { transform: translateX(-830.0px); }
  58.75% { transform: translateX(-830.0px); }
  59.00% { transform: translateX(-830.0px); }
  59.25% { transform: translateX(-830.0px); }
  59.50% { transform: translateX(-830.0px); }
  59.75% { transform: translateX(-830.0px); }
  60.00% { transform: translateX(-830.0px); }
  60.25% { transform: translateX(-830.0px); }
  60.50% { transform: translateX(-830.0px); }
  60.75% { transform: translateX(-830.0px); }
  61.00% { transform: translateX(-830.0px); }
  61.25% { transform: translateX(-830.0px); }
  61.50% { transform: translateX(-830.0px); }
  61.75% { transform: translateX(-830.0px); }
  62.00% { transform: translateX(-830.0px); }
  62.25% { transform: translateX(-830.0px); }
  62.50% { transform: translateX(-830.0px); }
  62.75% { transform: translateX(-830.0px); }
  63.00% { transform: translateX(-830.0px); }
  63.25% { transform: translateX(-830.0px); }
  63.50% { transform: translateX(-830.0px); }
  63.75% { transform: translateX(-830.0px); }
  64.00% { transform: translateX(-830.0px); }
  64.25% { transform: translateX(-830.0px); }
  64.50% { transform: translateX(-830.0px); }
  64.75% { transform: translateX(-830.0px); }
  65.00% { transform: translateX(-830.0px); }
  65.25% { transform: translateX(-830.0px); }
  65.50% { transform: translateX(-830.0px); }
  65.75% { transform: translateX(-830.0px); }
  66.00% { transform: translateX(-830.0px); }
  66.25% { transform: translateX(-830.0px); }
  66.50% { transform: translateX(-830.0px); }
  66.75% { transform: translateX(-830.0px); }
  67.00% { transform: translateX(-830.0px); }
  67.25% { transform: translateX(-830.0px); }
  67.50% { transform: translateX(-830.0px); }
  67.75% { transform: translateX(-830.0px); }
  68.00% { transform: translateX(-830.0px); }
  68.25% { transform: translateX(-830.0px); }
  68.50% { transform: translateX(-830.0px); }
  68.75% { transform: translateX(-830.0px); }
  69.00% { transform: translateX(-830.0px); }
  69.25% { transform: translateX(-830.0px); }
  69.50% { transform: translateX(-844.4px); }
  69.75% { transform: translateX(-857.5px); }
  70.00% { transform: translateX(-869.4px); }
  70.25% { transform: translateX(-880.3px); }
  70.50% { transform: translateX(-890.2px); }
  70.75% { transform: translateX(-899.1px); }
  71.00% { transform: translateX(-907.3px); }
  71.25% { transform: translateX(-914.8px); }
  71.50% { transform: translateX(-921.5px); }
  71.75% { transform: translateX(-927.7px); }
  72.00% { transform: translateX(-933.3px); }
  72.25% { transform: translateX(-938.4px); }
  72.50% { transform: translateX(-943.0px); }
  72.75% { transform: translateX(-947.3px); }
  73.00% { transform: translateX(-951.1px); }
  73.25% { transform: translateX(-954.6px); }
  73.50% { transform: translateX(-957.8px); }
  73.75% { transform: translateX(-960.7px); }
  74.00% { transform: translateX(-963.3px); }
  74.25% { transform: translateX(-965.7px); }
  74.50% { transform: translateX(-967.9px); }
  74.75% { transform: translateX(-969.9px); }
  75.00% { transform: translateX(-971.7px); }
  75.25% { transform: translateX(-973.4px); }
  75.50% { transform: translateX(-974.9px); }
  75.75% { transform: translateX(-976.2px); }
  76.00% { transform: translateX(-977.5px); }
  76.25% { transform: translateX(-978.6px); }
  76.50% { transform: translateX(-979.6px); }
  76.75% { transform: translateX(-980.6px); }
  77.00% { transform: translateX(-981.4px); }
  77.25% { transform: translateX(-982.2px); }
  77.50% { transform: translateX(-982.9px); }
  77.75% { transform: translateX(-983.5px); }
  78.00% { transform: translateX(-984.1px); }
  78.25% { transform: translateX(-984.6px); }
  78.50% { transform: translateX(-985.1px); }
  78.75% { transform: translateX(-986.8px); }
  79.00% { transform: translateX(-989.7px); }
  79.25% { transform: translateX(-993.7px); }
  79.50% { transform: translateX(-998.8px); }
  79.75% { transform: translateX(-1004.9px); }
  80.00% { transform: translateX(-1011.9px); }
  80.25% { transform: translateX(-1019.9px); }
  80.50% { transform: translateX(-1028.8px); }
  80.75% { transform: translateX(-1038.5px); }
  81.00% { transform: translateX(-1049.1px); }
  81.25% { transform: translateX(-1060.4px); }
  81.50% { transform: translateX(-1072.5px); }
  81.75% { transform: translateX(-1085.4px); }
  82.00% { transform: translateX(-1099.0px); }
  82.25% { transform: translateX(-1113.3px); }
  82.50% { transform: translateX(-1128.3px); }
  82.75% { transform: translateX(-1144.0px); }
  83.00% { transform: translateX(-1160.3px); }
  83.25% { transform: translateX(-1177.3px); }
  83.50% { transform: translateX(-1194.9px); }
  83.75% { transform: translateX(-1213.2px); }
  84.00% { transform: translateX(-1232.1px); }
  84.25% { transform: translateX(-1251.6px); }
  84.50% { transform: translateX(-1271.6px); }
  84.75% { transform: translateX(-1292.3px); }
  85.00% { transform: translateX(-1313.6px); }
  85.25% { transform: translateX(-1335.4px); }
  85.50% { transform: translateX(-1357.8px); }
  85.75% { transform: translateX(-1380.8px); }
  86.00% { transform: translateX(-1404.4px); }
  86.25% { transform: translateX(-1428.5px); }
  86.50% { transform: translateX(-1453.1px); }
  86.75% { transform: translateX(-1478.4px); }
  87.00% { transform: translateX(-1504.1px); }
  87.25% { transform: translateX(-1530.4px); }
  87.50% { transform: translateX(-1557.3px); }
  87.75% { transform: translateX(-1584.7px); }
  88.00% { transform: translateX(-1612.6px); }
  88.25% { transform: translateX(-1641.1px); }
  88.50% { transform: translateX(-1670.1px); }
  88.75% { transform: translateX(-1699.7px); }
  89.00% { transform: translateX(-1729.8px); }
  89.25% { transform: translateX(-1760.4px); }
  89.50% { transform: translateX(-1791.5px); }
  89.75% { transform: translateX(-1823.2px); }
  90.00% { transform: translateX(-1855.4px); }
  90.25% { transform: translateX(-1884.7px); }
  90.50% { transform: translateX(-1911.4px); }
  90.75% { transform: translateX(-1935.7px); }
  91.00% { transform: translateX(-1957.7px); }
  91.25% { transform: translateX(-1977.8px); }
  91.50% { transform: translateX(-1996.1px); }
  91.75% { transform: translateX(-2012.8px); }
  92.00% { transform: translateX(-2027.9px); }
  92.25% { transform: translateX(-2041.7px); }
  92.50% { transform: translateX(-2054.2px); }
  92.75% { transform: translateX(-2065.6px); }
  93.00% { transform: translateX(-2076.0px); }
  93.25% { transform: translateX(-2085.5px); }
  93.50% { transform: translateX(-2094.1px); }
  93.75% { transform: translateX(-2101.9px); }
  94.00% { transform: translateX(-2109.0px); }
  94.25% { transform: translateX(-2115.5px); }
  94.50% { transform: translateX(-2121.4px); }
  94.75% { transform: translateX(-2126.8px); }
  95.00% { transform: translateX(-2131.6px); }
  95.25% { transform: translateX(-2136.1px); }
  95.50% { transform: translateX(-2140.1px); }
  95.75% { transform: translateX(-2143.8px); }
  96.00% { transform: translateX(-2147.2px); }
  96.25% { transform: translateX(-2150.2px); }
  96.50% { transform: translateX(-2153.0px); }
  96.75% { transform: translateX(-2155.5px); }
  97.00% { transform: translateX(-2157.8px); }
  97.25% { transform: translateX(-2159.9px); }
  97.50% { transform: translateX(-2161.8px); }
  97.75% { transform: translateX(-2163.5px); }
  98.00% { transform: translateX(-2165.1px); }
  98.25% { transform: translateX(-2166.5px); }
  98.50% { transform: translateX(-2167.8px); }
  98.75% { transform: translateX(-2169.0px); }
  99.00% { transform: translateX(-2170.1px); }
  99.25% { transform: translateX(-2171.1px); }
  99.50% { transform: translateX(-2172.0px); }
  99.75% { transform: translateX(-2172.8px); animation-timing-function: steps(1, end); }
  100.00% { transform: translateX(360.0px); }
}
@keyframes sled-trees {
  0.00% { transform: translateX(180.0px); }
  0.25% { transform: translateX(180.0px); }
  0.50% { transform: translateX(180.0px); }
  0.75% { transform: translateX(180.0px); }
  1.00% { transform: translateX(180.0px); }
  1.25% { transform: translateX(180.0px); }
  1.50% { transform: translateX(180.0px); }
  1.75% { transform: translateX(180.0px); }
  2.00% { transform: translateX(180.0px); }
  2.25% { transform: translateX(180.0px); }
  2.50% { transform: translateX(180.0px); }
  2.75% { transform: translateX(180.0px); }
  3.00% { transform: translateX(180.0px); }
  3.25% { transform: translateX(180.0px); }
  3.50% { transform: translateX(180.0px); }
  3.75% { transform: translateX(180.0px); }
  4.00% { transform: translateX(180.0px); }
  4.25% { transform: translateX(180.0px); }
  4.50% { transform: translateX(180.0px); }
  4.75% { transform: translateX(180.0px); }
  5.00% { transform: translateX(180.0px); }
  5.25% { transform: translateX(180.0px); }
  5.50% { transform: translateX(180.0px); }
  5.75% { transform: translateX(180.0px); }
  6.00% { transform: translateX(180.0px); }
  6.25% { transform: translateX(180.0px); }
  6.50% { transform: translateX(180.0px); }
  6.75% { transform: translateX(180.0px); }
  7.00% { transform: translateX(180.0px); }
  7.25% { transform: translateX(180.0px); }
  7.50% { transform: translateX(180.0px); }
  7.75% { transform: translateX(180.0px); }
  8.00% { transform: translateX(180.0px); }
  8.25% { transform: translateX(180.0px); }
  8.50% { transform: translateX(180.0px); }
  8.75% { transform: translateX(180.0px); }
  9.00% { transform: translateX(180.0px); }
  9.25% { transform: translateX(180.0px); }
  9.50% { transform: translateX(180.0px); }
  9.75% { transform: translateX(180.0px); }
  10.00% { transform: translateX(180.0px); }
  10.25% { transform: translateX(180.0px); }
  10.50% { transform: translateX(180.0px); }
  10.75% { transform: translateX(180.0px); }
  11.00% { transform: translateX(180.0px); }
  11.25% { transform: translateX(180.0px); }
  11.50% { transform: translateX(180.0px); }
  11.75% { transform: translateX(180.0px); }
  12.00% { transform: translateX(180.0px); }
  12.25% { transform: translateX(180.0px); }
  12.50% { transform: translateX(180.0px); }
  12.75% { transform: translateX(180.0px); }
  13.00% { transform: translateX(180.0px); }
  13.25% { transform: translateX(180.0px); }
  13.50% { transform: translateX(180.0px); }
  13.75% { transform: translateX(180.0px); }
  14.00% { transform: translateX(180.0px); }
  14.25% { transform: translateX(180.0px); }
  14.50% { transform: translateX(180.0px); }
  14.75% { transform: translateX(179.3px); }
  15.00% { transform: translateX(178.2px); }
  15.25% { transform: translateX(176.5px); }
  15.50% { transform: translateX(174.5px); }
  15.75% { transform: translateX(172.0px); }
  16.00% { transform: translateX(169.2px); }
  16.25% { transform: translateX(166.1px); }
  16.50% { transform: translateX(162.7px); }
  16.75% { transform: translateX(158.9px); }
  17.00% { transform: translateX(155.0px); }
  17.25% { transform: translateX(150.8px); }
  17.50% { transform: translateX(146.4px); }
  17.75% { transform: translateX(141.8px); }
  18.00% { transform: translateX(137.1px); }
  18.25% { transform: translateX(132.2px); }
  18.50% { transform: translateX(127.1px); }
  18.75% { transform: translateX(121.9px); }
  19.00% { transform: translateX(116.6px); }
  19.25% { transform: translateX(111.2px); }
  19.50% { transform: translateX(105.7px); }
  19.75% { transform: translateX(100.1px); }
  20.00% { transform: translateX(94.5px); }
  20.25% { transform: translateX(88.8px); }
  20.50% { transform: translateX(83.0px); }
  20.75% { transform: translateX(77.1px); }
  21.00% { transform: translateX(71.2px); }
  21.25% { transform: translateX(65.3px); }
  21.50% { transform: translateX(59.3px); }
  21.75% { transform: translateX(53.2px); }
  22.00% { transform: translateX(47.1px); }
  22.25% { transform: translateX(41.0px); }
  22.50% { transform: translateX(34.8px); }
  22.75% { transform: translateX(28.6px); }
  23.00% { transform: translateX(22.4px); }
  23.25% { transform: translateX(16.2px); }
  23.50% { transform: translateX(9.9px); }
  23.75% { transform: translateX(3.6px); }
  24.00% { transform: translateX(-2.6px); }
  24.25% { transform: translateX(-8.9px); }
  24.50% { transform: translateX(-15.2px); }
  24.75% { transform: translateX(-21.5px); }
  25.00% { transform: translateX(-27.7px); }
  25.25% { transform: translateX(-34.0px); }
  25.50% { transform: translateX(-40.2px); }
  25.75% { transform: translateX(-46.4px); }
  26.00% { transform: translateX(-52.5px); }
  26.25% { transform: translateX(-58.7px); }
  26.50% { transform: translateX(-64.7px); }
  26.75% { transform: translateX(-70.7px); }
  27.00% { transform: translateX(-76.6px); }
  27.25% { transform: translateX(-82.4px); }
  27.50% { transform: translateX(-88.3px); }
  27.75% { transform: translateX(-94.0px); }
  28.00% { transform: translateX(-99.8px); }
  28.25% { transform: translateX(-105.6px); }
  28.50% { transform: translateX(-111.4px); }
  28.75% { transform: translateX(-117.2px); }
  29.00% { transform: translateX(-123.1px); }
  29.25% { transform: translateX(-128.9px); }
  29.50% { transform: translateX(-134.8px); }
  29.75% { transform: translateX(-140.7px); }
  30.00% { transform: translateX(-146.6px); }
  30.25% { transform: translateX(-152.6px); }
  30.50% { transform: translateX(-158.6px); }
  30.75% { transform: translateX(-164.7px); }
  31.00% { transform: translateX(-170.8px); }
  31.25% { transform: translateX(-176.9px); }
  31.50% { transform: translateX(-183.1px); }
  31.75% { transform: translateX(-189.3px); }
  32.00% { transform: translateX(-195.5px); }
  32.25% { transform: translateX(-201.7px); }
  32.50% { transform: translateX(-208.0px); }
  32.75% { transform: translateX(-214.2px); }
  33.00% { transform: translateX(-220.4px); }
  33.25% { transform: translateX(-226.6px); }
  33.50% { transform: translateX(-232.7px); }
  33.75% { transform: translateX(-238.8px); }
  34.00% { transform: translateX(-244.9px); }
  34.25% { transform: translateX(-250.9px); }
  34.50% { transform: translateX(-256.9px); }
  34.75% { transform: translateX(-262.8px); }
  35.00% { transform: translateX(-268.7px); }
  35.25% { transform: translateX(-274.5px); }
  35.50% { transform: translateX(-287.1px); }
  35.75% { transform: translateX(-298.6px); }
  36.00% { transform: translateX(-309.1px); }
  36.25% { transform: translateX(-318.6px); }
  36.50% { transform: translateX(-327.3px); }
  36.75% { transform: translateX(-335.2px); }
  37.00% { transform: translateX(-342.4px); }
  37.25% { transform: translateX(-348.9px); }
  37.50% { transform: translateX(-354.9px); }
  37.75% { transform: translateX(-360.3px); }
  38.00% { transform: translateX(-365.2px); }
  38.25% { transform: translateX(-369.7px); }
  38.50% { transform: translateX(-373.8px); }
  38.75% { transform: translateX(-377.5px); }
  39.00% { transform: translateX(-380.9px); }
  39.25% { transform: translateX(-383.9px); }
  39.50% { transform: translateX(-386.7px); }
  39.75% { transform: translateX(-389.3px); }
  40.00% { transform: translateX(-391.6px); }
  40.25% { transform: translateX(-393.7px); }
  40.50% { transform: translateX(-395.6px); }
  40.75% { transform: translateX(-397.4px); }
  41.00% { transform: translateX(-398.9px); }
  41.25% { transform: translateX(-400.4px); }
  41.50% { transform: translateX(-401.7px); }
  41.75% { transform: translateX(-402.9px); }
  42.00% { transform: translateX(-404.0px); }
  42.25% { transform: translateX(-405.0px); }
  42.50% { transform: translateX(-405.9px); }
  42.75% { transform: translateX(-406.7px); }
  43.00% { transform: translateX(-407.4px); }
  43.25% { transform: translateX(-408.1px); }
  43.50% { transform: translateX(-408.7px); }
  43.75% { transform: translateX(-409.3px); }
  44.00% { transform: translateX(-409.8px); }
  44.25% { transform: translateX(-410.3px); }
  44.50% { transform: translateX(-410.7px); }
  44.75% { transform: translateX(-411.1px); }
  45.00% { transform: translateX(-411.4px); }
  45.25% { transform: translateX(-411.8px); }
  45.50% { transform: translateX(-412.1px); }
  45.75% { transform: translateX(-412.3px); }
  46.00% { transform: translateX(-412.6px); }
  46.25% { transform: translateX(-412.8px); }
  46.50% { transform: translateX(-413.0px); }
  46.75% { transform: translateX(-413.2px); }
  47.00% { transform: translateX(-413.3px); }
  47.25% { transform: translateX(-413.5px); }
  47.50% { transform: translateX(-413.6px); }
  47.75% { transform: translateX(-413.7px); }
  48.00% { transform: translateX(-413.9px); }
  48.25% { transform: translateX(-414.0px); }
  48.50% { transform: translateX(-414.1px); }
  48.75% { transform: translateX(-414.1px); }
  49.00% { transform: translateX(-414.2px); }
  49.25% { transform: translateX(-414.3px); }
  49.50% { transform: translateX(-414.3px); }
  49.75% { transform: translateX(-414.4px); }
  50.00% { transform: translateX(-414.5px); }
  50.25% { transform: translateX(-414.5px); }
  50.50% { transform: translateX(-414.6px); }
  50.75% { transform: translateX(-414.6px); }
  51.00% { transform: translateX(-414.6px); }
  51.25% { transform: translateX(-414.7px); }
  51.50% { transform: translateX(-414.7px); }
  51.75% { transform: translateX(-414.7px); }
  52.00% { transform: translateX(-414.7px); }
  52.25% { transform: translateX(-414.8px); }
  52.50% { transform: translateX(-414.8px); }
  52.75% { transform: translateX(-414.8px); }
  53.00% { transform: translateX(-414.8px); }
  53.25% { transform: translateX(-414.8px); }
  53.50% { transform: translateX(-414.9px); }
  53.75% { transform: translateX(-414.9px); }
  54.00% { transform: translateX(-414.9px); }
  54.25% { transform: translateX(-414.9px); }
  54.50% { transform: translateX(-414.9px); }
  54.75% { transform: translateX(-414.9px); }
  55.00% { transform: translateX(-414.9px); }
  55.25% { transform: translateX(-414.9px); }
  55.50% { transform: translateX(-414.9px); }
  55.75% { transform: translateX(-414.9px); }
  56.00% { transform: translateX(-414.9px); }
  56.25% { transform: translateX(-414.9px); }
  56.50% { transform: translateX(-415.0px); }
  56.75% { transform: translateX(-415.0px); }
  57.00% { transform: translateX(-415.0px); }
  57.25% { transform: translateX(-415.0px); }
  57.50% { transform: translateX(-415.0px); }
  57.75% { transform: translateX(-415.0px); }
  58.00% { transform: translateX(-415.0px); }
  58.25% { transform: translateX(-415.0px); }
  58.50% { transform: translateX(-415.0px); }
  58.75% { transform: translateX(-415.0px); }
  59.00% { transform: translateX(-415.0px); }
  59.25% { transform: translateX(-415.0px); }
  59.50% { transform: translateX(-415.0px); }
  59.75% { transform: translateX(-415.0px); }
  60.00% { transform: translateX(-415.0px); }
  60.25% { transform: translateX(-415.0px); }
  60.50% { transform: translateX(-415.0px); }
  60.75% { transform: translateX(-415.0px); }
  61.00% { transform: translateX(-415.0px); }
  61.25% { transform: translateX(-415.0px); }
  61.50% { transform: translateX(-415.0px); }
  61.75% { transform: translateX(-415.0px); }
  62.00% { transform: translateX(-415.0px); }
  62.25% { transform: translateX(-415.0px); }
  62.50% { transform: translateX(-415.0px); }
  62.75% { transform: translateX(-415.0px); }
  63.00% { transform: translateX(-415.0px); }
  63.25% { transform: translateX(-415.0px); }
  63.50% { transform: translateX(-415.0px); }
  63.75% { transform: translateX(-415.0px); }
  64.00% { transform: translateX(-415.0px); }
  64.25% { transform: translateX(-415.0px); }
  64.50% { transform: translateX(-415.0px); }
  64.75% { transform: translateX(-415.0px); }
  65.00% { transform: translateX(-415.0px); }
  65.25% { transform: translateX(-415.0px); }
  65.50% { transform: translateX(-415.0px); }
  65.75% { transform: translateX(-415.0px); }
  66.00% { transform: translateX(-415.0px); }
  66.25% { transform: translateX(-415.0px); }
  66.50% { transform: translateX(-415.0px); }
  66.75% { transform: translateX(-415.0px); }
  67.00% { transform: translateX(-415.0px); }
  67.25% { transform: translateX(-415.0px); }
  67.50% { transform: translateX(-415.0px); }
  67.75% { transform: translateX(-415.0px); }
  68.00% { transform: translateX(-415.0px); }
  68.25% { transform: translateX(-415.0px); }
  68.50% { transform: translateX(-415.0px); }
  68.75% { transform: translateX(-415.0px); }
  69.00% { transform: translateX(-415.0px); }
  69.25% { transform: translateX(-415.0px); }
  69.50% { transform: translateX(-422.2px); }
  69.75% { transform: translateX(-428.8px); }
  70.00% { transform: translateX(-434.7px); }
  70.25% { transform: translateX(-440.1px); }
  70.50% { transform: translateX(-445.1px); }
  70.75% { transform: translateX(-449.6px); }
  71.00% { transform: translateX(-453.7px); }
  71.25% { transform: translateX(-457.4px); }
  71.50% { transform: translateX(-460.8px); }
  71.75% { transform: translateX(-463.8px); }
  72.00% { transform: translateX(-466.7px); }
  72.25% { transform: translateX(-469.2px); }
  72.50% { transform: translateX(-471.5px); }
  72.75% { transform: translateX(-473.6px); }
  73.00% { transform: translateX(-475.6px); }
  73.25% { transform: translateX(-477.3px); }
  73.50% { transform: translateX(-478.9px); }
  73.75% { transform: translateX(-480.4px); }
  74.00% { transform: translateX(-481.7px); }
  74.25% { transform: translateX(-482.9px); }
  74.50% { transform: translateX(-484.0px); }
  74.75% { transform: translateX(-485.0px); }
  75.00% { transform: translateX(-485.9px); }
  75.25% { transform: translateX(-486.7px); }
  75.50% { transform: translateX(-487.4px); }
  75.75% { transform: translateX(-488.1px); }
  76.00% { transform: translateX(-488.7px); }
  76.25% { transform: translateX(-489.3px); }
  76.50% { transform: translateX(-489.8px); }
  76.75% { transform: translateX(-490.3px); }
  77.00% { transform: translateX(-490.7px); }
  77.25% { transform: translateX(-491.1px); }
  77.50% { transform: translateX(-491.4px); }
  77.75% { transform: translateX(-491.8px); }
  78.00% { transform: translateX(-492.1px); }
  78.25% { transform: translateX(-492.3px); }
  78.50% { transform: translateX(-492.6px); }
  78.75% { transform: translateX(-493.4px); }
  79.00% { transform: translateX(-494.9px); }
  79.25% { transform: translateX(-496.9px); }
  79.50% { transform: translateX(-499.4px); }
  79.75% { transform: translateX(-502.4px); }
  80.00% { transform: translateX(-506.0px); }
  80.25% { transform: translateX(-510.0px); }
  80.50% { transform: translateX(-514.4px); }
  80.75% { transform: translateX(-519.3px); }
  81.00% { transform: translateX(-524.5px); }
  81.25% { transform: translateX(-530.2px); }
  81.50% { transform: translateX(-536.3px); }
  81.75% { transform: translateX(-542.7px); }
  82.00% { transform: translateX(-549.5px); }
  82.25% { transform: translateX(-556.6px); }
  82.50% { transform: translateX(-564.1px); }
  82.75% { transform: translateX(-572.0px); }
  83.00% { transform: translateX(-580.2px); }
  83.25% { transform: translateX(-588.7px); }
  83.50% { transform: translateX(-597.5px); }
  83.75% { transform: translateX(-606.6px); }
  84.00% { transform: translateX(-616.0px); }
  84.25% { transform: translateX(-625.8px); }
  84.50% { transform: translateX(-635.8px); }
  84.75% { transform: translateX(-646.2px); }
  85.00% { transform: translateX(-656.8px); }
  85.25% { transform: translateX(-667.7px); }
  85.50% { transform: translateX(-678.9px); }
  85.75% { transform: translateX(-690.4px); }
  86.00% { transform: translateX(-702.2px); }
  86.25% { transform: translateX(-714.2px); }
  86.50% { transform: translateX(-726.6px); }
  86.75% { transform: translateX(-739.2px); }
  87.00% { transform: translateX(-752.1px); }
  87.25% { transform: translateX(-765.2px); }
  87.50% { transform: translateX(-778.7px); }
  87.75% { transform: translateX(-792.4px); }
  88.00% { transform: translateX(-806.3px); }
  88.25% { transform: translateX(-820.6px); }
  88.50% { transform: translateX(-835.1px); }
  88.75% { transform: translateX(-849.8px); }
  89.00% { transform: translateX(-864.9px); }
  89.25% { transform: translateX(-880.2px); }
  89.50% { transform: translateX(-895.8px); }
  89.75% { transform: translateX(-911.6px); }
  90.00% { transform: translateX(-927.7px); }
  90.25% { transform: translateX(-942.4px); }
  90.50% { transform: translateX(-955.7px); }
  90.75% { transform: translateX(-967.8px); }
  91.00% { transform: translateX(-978.9px); }
  91.25% { transform: translateX(-988.9px); }
  91.50% { transform: translateX(-998.1px); }
  91.75% { transform: translateX(-1006.4px); }
  92.00% { transform: translateX(-1013.9px); }
  92.25% { transform: translateX(-1020.8px); }
  92.50% { transform: translateX(-1027.1px); }
  92.75% { transform: translateX(-1032.8px); }
  93.00% { transform: translateX(-1038.0px); }
  93.25% { transform: translateX(-1042.7px); }
  93.50% { transform: translateX(-1047.0px); }
  93.75% { transform: translateX(-1050.9px); }
  94.00% { transform: translateX(-1054.5px); }
  94.25% { transform: translateX(-1057.7px); }
  94.50% { transform: translateX(-1060.7px); }
  94.75% { transform: translateX(-1063.4px); }
  95.00% { transform: translateX(-1065.8px); }
  95.25% { transform: translateX(-1068.0px); }
  95.50% { transform: translateX(-1070.1px); }
  95.75% { transform: translateX(-1071.9px); }
  96.00% { transform: translateX(-1073.6px); }
  96.25% { transform: translateX(-1075.1px); }
  96.50% { transform: translateX(-1076.5px); }
  96.75% { transform: translateX(-1077.7px); }
  97.00% { transform: translateX(-1078.9px); }
  97.25% { transform: translateX(-1079.9px); }
  97.50% { transform: translateX(-1080.9px); }
  97.75% { transform: translateX(-1081.8px); }
  98.00% { transform: translateX(-1082.5px); }
  98.25% { transform: translateX(-1083.3px); }
  98.50% { transform: translateX(-1083.9px); }
  98.75% { transform: translateX(-1084.5px); }
  99.00% { transform: translateX(-1085.0px); }
  99.25% { transform: translateX(-1085.5px); }
  99.50% { transform: translateX(-1086.0px); }
  99.75% { transform: translateX(-1086.4px); animation-timing-function: steps(1, end); }
  100.00% { transform: translateX(180.0px); }
}
@keyframes leg-a {
  0.00% { transform: rotate(0.0deg); }
  0.25% { transform: rotate(0.0deg); }
  0.50% { transform: rotate(0.0deg); }
  0.75% { transform: rotate(0.0deg); }
  1.00% { transform: rotate(0.0deg); }
  1.25% { transform: rotate(0.0deg); }
  1.50% { transform: rotate(0.0deg); }
  1.75% { transform: rotate(0.0deg); }
  2.00% { transform: rotate(0.0deg); }
  2.25% { transform: rotate(0.0deg); }
  2.50% { transform: rotate(0.0deg); }
  2.75% { transform: rotate(0.0deg); }
  3.00% { transform: rotate(0.0deg); }
  3.25% { transform: rotate(0.0deg); }
  3.50% { transform: rotate(0.0deg); }
  3.75% { transform: rotate(0.0deg); }
  4.00% { transform: rotate(0.0deg); }
  4.25% { transform: rotate(0.0deg); }
  4.50% { transform: rotate(0.0deg); }
  4.75% { transform: rotate(0.0deg); }
  5.00% { transform: rotate(0.0deg); }
  5.25% { transform: rotate(0.0deg); }
  5.50% { transform: rotate(0.0deg); }
  5.75% { transform: rotate(0.0deg); }
  6.00% { transform: rotate(0.0deg); }
  6.25% { transform: rotate(0.0deg); }
  6.50% { transform: rotate(0.0deg); }
  6.75% { transform: rotate(0.0deg); }
  7.00% { transform: rotate(0.0deg); }
  7.25% { transform: rotate(0.0deg); }
  7.50% { transform: rotate(0.0deg); }
  7.75% { transform: rotate(0.0deg); }
  8.00% { transform: rotate(0.0deg); }
  8.25% { transform: rotate(0.0deg); }
  8.50% { transform: rotate(0.0deg); }
  8.75% { transform: rotate(0.0deg); }
  9.00% { transform: rotate(0.0deg); }
  9.25% { transform: rotate(0.0deg); }
  9.50% { transform: rotate(0.0deg); }
  9.75% { transform: rotate(0.0deg); }
  10.00% { transform: rotate(0.0deg); }
  10.25% { transform: rotate(0.0deg); }
  10.50% { transform: rotate(0.0deg); }
  10.75% { transform: rotate(0.0deg); }
  11.00% { transform: rotate(0.0deg); }
  11.25% { transform: rotate(0.0deg); }
  11.50% { transform: rotate(0.0deg); }
  11.75% { transform: rotate(0.0deg); }
  12.00% { transform: rotate(0.0deg); }
  12.25% { transform: rotate(0.0deg); }
  12.50% { transform: rotate(0.0deg); }
  12.75% { transform: rotate(0.0deg); }
  13.00% { transform: rotate(0.0deg); }
  13.25% { transform: rotate(0.0deg); }
  13.50% { transform: rotate(0.0deg); }
  13.75% { transform: rotate(0.0deg); }
  14.00% { transform: rotate(0.0deg); }
  14.25% { transform: rotate(0.0deg); }
  14.50% { transform: rotate(0.0deg); }
  14.75% { transform: rotate(0.0deg); }
  15.00% { transform: rotate(0.0deg); }
  15.25% { transform: rotate(0.0deg); }
  15.50% { transform: rotate(0.0deg); }
  15.75% { transform: rotate(0.0deg); }
  16.00% { transform: rotate(0.0deg); }
  16.25% { transform: rotate(0.0deg); }
  16.50% { transform: rotate(0.0deg); }
  16.75% { transform: rotate(0.0deg); }
  17.00% { transform: rotate(0.0deg); }
  17.25% { transform: rotate(0.0deg); }
  17.50% { transform: rotate(0.0deg); }
  17.75% { transform: rotate(0.0deg); }
  18.00% { transform: rotate(0.0deg); }
  18.25% { transform: rotate(0.0deg); }
  18.50% { transform: rotate(0.0deg); }
  18.75% { transform: rotate(0.0deg); }
  19.00% { transform: rotate(0.0deg); }
  19.25% { transform: rotate(0.0deg); }
  19.50% { transform: rotate(0.0deg); }
  19.75% { transform: rotate(0.0deg); }
  20.00% { transform: rotate(0.0deg); }
  20.25% { transform: rotate(0.0deg); }
  20.50% { transform: rotate(0.0deg); }
  20.75% { transform: rotate(0.0deg); }
  21.00% { transform: rotate(0.0deg); }
  21.25% { transform: rotate(0.0deg); }
  21.50% { transform: rotate(0.0deg); }
  21.75% { transform: rotate(0.0deg); }
  22.00% { transform: rotate(0.0deg); }
  22.25% { transform: rotate(0.0deg); }
  22.50% { transform: rotate(0.0deg); }
  22.75% { transform: rotate(0.0deg); }
  23.00% { transform: rotate(0.0deg); }
  23.25% { transform: rotate(0.0deg); }
  23.50% { transform: rotate(0.0deg); }
  23.75% { transform: rotate(0.0deg); }
  24.00% { transform: rotate(0.0deg); }
  24.25% { transform: rotate(0.0deg); }
  24.50% { transform: rotate(0.0deg); }
  24.75% { transform: rotate(0.0deg); }
  25.00% { transform: rotate(0.0deg); }
  25.25% { transform: rotate(0.0deg); }
  25.50% { transform: rotate(0.0deg); }
  25.75% { transform: rotate(0.0deg); }
  26.00% { transform: rotate(0.0deg); }
  26.25% { transform: rotate(0.0deg); }
  26.50% { transform: rotate(0.0deg); }
  26.75% { transform: rotate(0.0deg); }
  27.00% { transform: rotate(0.0deg); }
  27.25% { transform: rotate(0.0deg); }
  27.50% { transform: rotate(0.0deg); }
  27.75% { transform: rotate(0.0deg); }
  28.00% { transform: rotate(0.0deg); }
  28.25% { transform: rotate(0.0deg); }
  28.50% { transform: rotate(0.0deg); }
  28.75% { transform: rotate(0.0deg); }
  29.00% { transform: rotate(0.0deg); }
  29.25% { transform: rotate(0.0deg); }
  29.50% { transform: rotate(0.0deg); }
  29.75% { transform: rotate(0.0deg); }
  30.00% { transform: rotate(0.0deg); }
  30.25% { transform: rotate(0.0deg); }
  30.50% { transform: rotate(0.0deg); }
  30.75% { transform: rotate(0.0deg); }
  31.00% { transform: rotate(0.0deg); }
  31.25% { transform: rotate(0.0deg); }
  31.50% { transform: rotate(0.0deg); }
  31.75% { transform: rotate(0.0deg); }
  32.00% { transform: rotate(0.0deg); }
  32.25% { transform: rotate(0.0deg); }
  32.50% { transform: rotate(0.0deg); }
  32.75% { transform: rotate(0.0deg); }
  33.00% { transform: rotate(0.0deg); }
  33.25% { transform: rotate(0.0deg); }
  33.50% { transform: rotate(0.0deg); }
  33.75% { transform: rotate(0.0deg); }
  34.00% { transform: rotate(0.0deg); }
  34.25% { transform: rotate(0.0deg); }
  34.50% { transform: rotate(0.0deg); }
  34.75% { transform: rotate(0.0deg); }
  35.00% { transform: rotate(0.0deg); }
  35.25% { transform: rotate(0.0deg); }
  35.50% { transform: rotate(0.0deg); }
  35.75% { transform: rotate(0.0deg); }
  36.00% { transform: rotate(0.0deg); }
  36.25% { transform: rotate(0.0deg); }
  36.50% { transform: rotate(0.0deg); }
  36.75% { transform: rotate(0.0deg); }
  37.00% { transform: rotate(0.0deg); }
  37.25% { transform: rotate(0.0deg); }
  37.50% { transform: rotate(0.0deg); }
  37.75% { transform: rotate(0.0deg); }
  38.00% { transform: rotate(0.0deg); }
  38.25% { transform: rotate(0.0deg); }
  38.50% { transform: rotate(0.0deg); }
  38.75% { transform: rotate(0.0deg); }
  39.00% { transform: rotate(0.0deg); }
  39.25% { transform: rotate(0.0deg); }
  39.50% { transform: rotate(0.0deg); }
  39.75% { transform: rotate(0.0deg); }
  40.00% { transform: rotate(0.0deg); }
  40.25% { transform: rotate(0.0deg); }
  40.50% { transform: rotate(0.0deg); }
  40.75% { transform: rotate(0.0deg); }
  41.00% { transform: rotate(0.0deg); }
  41.25% { transform: rotate(0.0deg); }
  41.50% { transform: rotate(0.0deg); }
  41.75% { transform: rotate(0.0deg); }
  42.00% { transform: rotate(0.0deg); }
  42.25% { transform: rotate(0.0deg); }
  42.50% { transform: rotate(0.0deg); }
  42.75% { transform: rotate(0.0deg); }
  43.00% { transform: rotate(0.0deg); }
  43.25% { transform: rotate(0.0deg); }
  43.50% { transform: rotate(0.0deg); }
  43.75% { transform: rotate(0.0deg); }
  44.00% { transform: rotate(0.0deg); }
  44.25% { transform: rotate(0.0deg); }
  44.50% { transform: rotate(0.0deg); }
  44.75% { transform: rotate(0.0deg); }
  45.00% { transform: rotate(0.0deg); }
  45.25% { transform: rotate(0.0deg); }
  45.50% { transform: rotate(0.0deg); }
  45.75% { transform: rotate(0.0deg); }
  46.00% { transform: rotate(0.0deg); }
  46.25% { transform: rotate(0.0deg); }
  46.50% { transform: rotate(0.0deg); }
  46.75% { transform: rotate(0.0deg); }
  47.00% { transform: rotate(0.0deg); }
  47.25% { transform: rotate(0.0deg); }
  47.50% { transform: rotate(0.0deg); }
  47.75% { transform: rotate(0.0deg); }
  48.00% { transform: rotate(0.0deg); }
  48.25% { transform: rotate(0.0deg); }
  48.50% { transform: rotate(0.0deg); }
  48.75% { transform: rotate(0.0deg); }
  49.00% { transform: rotate(0.0deg); }
  49.25% { transform: rotate(0.0deg); }
  49.50% { transform: rotate(0.0deg); }
  49.75% { transform: rotate(0.0deg); }
  50.00% { transform: rotate(0.0deg); }
  50.25% { transform: rotate(0.0deg); }
  50.50% { transform: rotate(0.0deg); }
  50.75% { transform: rotate(0.0deg); }
  51.00% { transform: rotate(0.0deg); }
  51.25% { transform: rotate(0.0deg); }
  51.50% { transform: rotate(0.0deg); }
  51.75% { transform: rotate(0.0deg); }
  52.00% { transform: rotate(0.0deg); }
  52.25% { transform: rotate(0.0deg); }
  52.50% { transform: rotate(0.0deg); }
  52.75% { transform: rotate(0.0deg); }
  53.00% { transform: rotate(0.0deg); }
  53.25% { transform: rotate(0.0deg); }
  53.50% { transform: rotate(0.0deg); }
  53.75% { transform: rotate(0.0deg); }
  54.00% { transform: rotate(0.0deg); }
  54.25% { transform: rotate(0.0deg); }
  54.50% { transform: rotate(0.0deg); }
  54.75% { transform: rotate(0.0deg); }
  55.00% { transform: rotate(0.0deg); }
  55.25% { transform: rotate(0.0deg); }
  55.50% { transform: rotate(0.0deg); }
  55.75% { transform: rotate(0.0deg); }
  56.00% { transform: rotate(0.0deg); }
  56.25% { transform: rotate(0.0deg); }
  56.50% { transform: rotate(0.0deg); }
  56.75% { transform: rotate(0.0deg); }
  57.00% { transform: rotate(0.0deg); }
  57.25% { transform: rotate(0.0deg); }
  57.50% { transform: rotate(0.0deg); }
  57.75% { transform: rotate(0.0deg); }
  58.00% { transform: rotate(0.0deg); }
  58.25% { transform: rotate(5.1deg); }
  58.50% { transform: rotate(20.8deg); }
  58.75% { transform: rotate(23.3deg); }
  59.00% { transform: rotate(15.9deg); }
  59.25% { transform: rotate(2.9deg); }
  59.50% { transform: rotate(-11.2deg); }
  59.75% { transform: rotate(-21.3deg); }
  60.00% { transform: rotate(-23.8deg); }
  60.25% { transform: rotate(-18.0deg); }
  60.50% { transform: rotate(-5.7deg); }
  60.75% { transform: rotate(8.5deg); }
  61.00% { transform: rotate(19.8deg); }
  61.25% { transform: rotate(24.0deg); }
  61.50% { transform: rotate(19.8deg); }
  61.75% { transform: rotate(8.5deg); }
  62.00% { transform: rotate(-5.3deg); }
  62.25% { transform: rotate(-6.8deg); }
  62.50% { transform: rotate(-0.0deg); }
  62.75% { transform: rotate(3.0deg); }
  63.00% { transform: rotate(8.9deg); }
  63.25% { transform: rotate(12.9deg); }
  63.50% { transform: rotate(13.0deg); }
  63.75% { transform: rotate(13.0deg); }
  64.00% { transform: rotate(13.0deg); }
  64.25% { transform: rotate(13.0deg); }
  64.50% { transform: rotate(13.0deg); }
  64.75% { transform: rotate(13.0deg); }
  65.00% { transform: rotate(13.0deg); }
  65.25% { transform: rotate(13.0deg); }
  65.50% { transform: rotate(13.0deg); }
  65.75% { transform: rotate(13.0deg); }
  66.00% { transform: rotate(13.0deg); }
  66.25% { transform: rotate(12.9deg); }
  66.50% { transform: rotate(8.9deg); }
  66.75% { transform: rotate(3.0deg); }
  67.00% { transform: rotate(0.0deg); }
  67.25% { transform: rotate(0.0deg); }
  67.50% { transform: rotate(0.0deg); }
  67.75% { transform: rotate(0.0deg); }
  68.00% { transform: rotate(0.0deg); }
  68.25% { transform: rotate(0.0deg); }
  68.50% { transform: rotate(0.0deg); }
  68.75% { transform: rotate(0.0deg); }
  69.00% { transform: rotate(0.0deg); }
  69.25% { transform: rotate(0.0deg); }
  69.50% { transform: rotate(0.0deg); }
  69.75% { transform: rotate(0.0deg); }
  70.00% { transform: rotate(0.0deg); }
  70.25% { transform: rotate(0.0deg); }
  70.50% { transform: rotate(0.0deg); }
  70.75% { transform: rotate(0.0deg); }
  71.00% { transform: rotate(0.0deg); }
  71.25% { transform: rotate(0.0deg); }
  71.50% { transform: rotate(0.0deg); }
  71.75% { transform: rotate(0.0deg); }
  72.00% { transform: rotate(0.0deg); }
  72.25% { transform: rotate(0.0deg); }
  72.50% { transform: rotate(0.0deg); }
  72.75% { transform: rotate(0.0deg); }
  73.00% { transform: rotate(0.0deg); }
  73.25% { transform: rotate(0.0deg); }
  73.50% { transform: rotate(0.0deg); }
  73.75% { transform: rotate(0.0deg); }
  74.00% { transform: rotate(0.0deg); }
  74.25% { transform: rotate(0.0deg); }
  74.50% { transform: rotate(0.0deg); }
  74.75% { transform: rotate(0.0deg); }
  75.00% { transform: rotate(0.0deg); }
  75.25% { transform: rotate(0.0deg); }
  75.50% { transform: rotate(0.0deg); }
  75.75% { transform: rotate(0.0deg); }
  76.00% { transform: rotate(0.0deg); }
  76.25% { transform: rotate(0.0deg); }
  76.50% { transform: rotate(0.0deg); }
  76.75% { transform: rotate(0.0deg); }
  77.00% { transform: rotate(0.0deg); }
  77.25% { transform: rotate(0.0deg); }
  77.50% { transform: rotate(0.0deg); }
  77.75% { transform: rotate(0.0deg); }
  78.00% { transform: rotate(0.0deg); }
  78.25% { transform: rotate(0.0deg); }
  78.50% { transform: rotate(0.0deg); }
  78.75% { transform: rotate(0.0deg); }
  79.00% { transform: rotate(0.0deg); }
  79.25% { transform: rotate(0.0deg); }
  79.50% { transform: rotate(0.0deg); }
  79.75% { transform: rotate(0.0deg); }
  80.00% { transform: rotate(0.0deg); }
  80.25% { transform: rotate(0.0deg); }
  80.50% { transform: rotate(0.0deg); }
  80.75% { transform: rotate(0.0deg); }
  81.00% { transform: rotate(0.0deg); }
  81.25% { transform: rotate(0.0deg); }
  81.50% { transform: rotate(0.0deg); }
  81.75% { transform: rotate(0.0deg); }
  82.00% { transform: rotate(0.0deg); }
  82.25% { transform: rotate(0.0deg); }
  82.50% { transform: rotate(0.0deg); }
  82.75% { transform: rotate(0.0deg); }
  83.00% { transform: rotate(0.0deg); }
  83.25% { transform: rotate(0.0deg); }
  83.50% { transform: rotate(0.0deg); }
  83.75% { transform: rotate(0.0deg); }
  84.00% { transform: rotate(0.0deg); }
  84.25% { transform: rotate(0.0deg); }
  84.50% { transform: rotate(0.0deg); }
  84.75% { transform: rotate(0.0deg); }
  85.00% { transform: rotate(0.0deg); }
  85.25% { transform: rotate(0.0deg); }
  85.50% { transform: rotate(0.0deg); }
  85.75% { transform: rotate(0.0deg); }
  86.00% { transform: rotate(0.0deg); }
  86.25% { transform: rotate(0.0deg); }
  86.50% { transform: rotate(0.0deg); }
  86.75% { transform: rotate(0.0deg); }
  87.00% { transform: rotate(0.0deg); }
  87.25% { transform: rotate(0.0deg); }
  87.50% { transform: rotate(0.0deg); }
  87.75% { transform: rotate(0.0deg); }
  88.00% { transform: rotate(0.0deg); }
  88.25% { transform: rotate(0.0deg); }
  88.50% { transform: rotate(0.0deg); }
  88.75% { transform: rotate(0.0deg); }
  89.00% { transform: rotate(0.0deg); }
  89.25% { transform: rotate(0.0deg); }
  89.50% { transform: rotate(0.0deg); }
  89.75% { transform: rotate(0.0deg); }
  90.00% { transform: rotate(0.0deg); }
  90.25% { transform: rotate(0.0deg); }
  90.50% { transform: rotate(0.0deg); }
  90.75% { transform: rotate(0.0deg); }
  91.00% { transform: rotate(0.0deg); }
  91.25% { transform: rotate(0.0deg); }
  91.50% { transform: rotate(0.0deg); }
  91.75% { transform: rotate(0.0deg); }
  92.00% { transform: rotate(0.0deg); }
  92.25% { transform: rotate(0.0deg); }
  92.50% { transform: rotate(0.0deg); }
  92.75% { transform: rotate(0.0deg); }
  93.00% { transform: rotate(0.0deg); }
  93.25% { transform: rotate(0.0deg); }
  93.50% { transform: rotate(0.0deg); }
  93.75% { transform: rotate(0.0deg); }
  94.00% { transform: rotate(0.0deg); }
  94.25% { transform: rotate(0.0deg); }
  94.50% { transform: rotate(0.0deg); }
  94.75% { transform: rotate(0.0deg); }
  95.00% { transform: rotate(0.0deg); }
  95.25% { transform: rotate(0.0deg); }
  95.50% { transform: rotate(0.0deg); }
  95.75% { transform: rotate(0.0deg); }
  96.00% { transform: rotate(0.0deg); }
  96.25% { transform: rotate(0.0deg); }
  96.50% { transform: rotate(0.0deg); }
  96.75% { transform: rotate(0.0deg); }
  97.00% { transform: rotate(0.0deg); }
  97.25% { transform: rotate(0.0deg); }
  97.50% { transform: rotate(0.0deg); }
  97.75% { transform: rotate(0.0deg); }
  98.00% { transform: rotate(0.0deg); }
  98.25% { transform: rotate(0.0deg); }
  98.50% { transform: rotate(0.0deg); }
  98.75% { transform: rotate(0.0deg); }
  99.00% { transform: rotate(0.0deg); }
  99.25% { transform: rotate(0.0deg); }
  99.50% { transform: rotate(0.0deg); }
  99.75% { transform: rotate(0.0deg); }
  100.00% { transform: rotate(0.0deg); }
}
@keyframes leg-b {
  0.00% { transform: rotate(0.0deg); }
  0.25% { transform: rotate(0.0deg); }
  0.50% { transform: rotate(0.0deg); }
  0.75% { transform: rotate(0.0deg); }
  1.00% { transform: rotate(0.0deg); }
  1.25% { transform: rotate(0.0deg); }
  1.50% { transform: rotate(0.0deg); }
  1.75% { transform: rotate(0.0deg); }
  2.00% { transform: rotate(0.0deg); }
  2.25% { transform: rotate(0.0deg); }
  2.50% { transform: rotate(0.0deg); }
  2.75% { transform: rotate(0.0deg); }
  3.00% { transform: rotate(0.0deg); }
  3.25% { transform: rotate(0.0deg); }
  3.50% { transform: rotate(0.0deg); }
  3.75% { transform: rotate(0.0deg); }
  4.00% { transform: rotate(0.0deg); }
  4.25% { transform: rotate(0.0deg); }
  4.50% { transform: rotate(0.0deg); }
  4.75% { transform: rotate(0.0deg); }
  5.00% { transform: rotate(0.0deg); }
  5.25% { transform: rotate(0.0deg); }
  5.50% { transform: rotate(0.0deg); }
  5.75% { transform: rotate(0.0deg); }
  6.00% { transform: rotate(0.0deg); }
  6.25% { transform: rotate(0.0deg); }
  6.50% { transform: rotate(0.0deg); }
  6.75% { transform: rotate(0.0deg); }
  7.00% { transform: rotate(0.0deg); }
  7.25% { transform: rotate(0.0deg); }
  7.50% { transform: rotate(0.0deg); }
  7.75% { transform: rotate(0.0deg); }
  8.00% { transform: rotate(0.0deg); }
  8.25% { transform: rotate(0.0deg); }
  8.50% { transform: rotate(0.0deg); }
  8.75% { transform: rotate(0.0deg); }
  9.00% { transform: rotate(0.0deg); }
  9.25% { transform: rotate(0.0deg); }
  9.50% { transform: rotate(0.0deg); }
  9.75% { transform: rotate(0.0deg); }
  10.00% { transform: rotate(0.0deg); }
  10.25% { transform: rotate(0.0deg); }
  10.50% { transform: rotate(0.0deg); }
  10.75% { transform: rotate(0.0deg); }
  11.00% { transform: rotate(0.0deg); }
  11.25% { transform: rotate(0.0deg); }
  11.50% { transform: rotate(0.0deg); }
  11.75% { transform: rotate(0.0deg); }
  12.00% { transform: rotate(0.0deg); }
  12.25% { transform: rotate(0.0deg); }
  12.50% { transform: rotate(0.0deg); }
  12.75% { transform: rotate(0.0deg); }
  13.00% { transform: rotate(0.0deg); }
  13.25% { transform: rotate(0.0deg); }
  13.50% { transform: rotate(0.0deg); }
  13.75% { transform: rotate(0.0deg); }
  14.00% { transform: rotate(0.0deg); }
  14.25% { transform: rotate(0.0deg); }
  14.50% { transform: rotate(0.0deg); }
  14.75% { transform: rotate(0.0deg); }
  15.00% { transform: rotate(0.0deg); }
  15.25% { transform: rotate(0.0deg); }
  15.50% { transform: rotate(0.0deg); }
  15.75% { transform: rotate(0.0deg); }
  16.00% { transform: rotate(0.0deg); }
  16.25% { transform: rotate(0.0deg); }
  16.50% { transform: rotate(0.0deg); }
  16.75% { transform: rotate(0.0deg); }
  17.00% { transform: rotate(0.0deg); }
  17.25% { transform: rotate(0.0deg); }
  17.50% { transform: rotate(0.0deg); }
  17.75% { transform: rotate(0.0deg); }
  18.00% { transform: rotate(0.0deg); }
  18.25% { transform: rotate(0.0deg); }
  18.50% { transform: rotate(0.0deg); }
  18.75% { transform: rotate(0.0deg); }
  19.00% { transform: rotate(0.0deg); }
  19.25% { transform: rotate(0.0deg); }
  19.50% { transform: rotate(0.0deg); }
  19.75% { transform: rotate(0.0deg); }
  20.00% { transform: rotate(0.0deg); }
  20.25% { transform: rotate(0.0deg); }
  20.50% { transform: rotate(0.0deg); }
  20.75% { transform: rotate(0.0deg); }
  21.00% { transform: rotate(0.0deg); }
  21.25% { transform: rotate(0.0deg); }
  21.50% { transform: rotate(0.0deg); }
  21.75% { transform: rotate(0.0deg); }
  22.00% { transform: rotate(0.0deg); }
  22.25% { transform: rotate(0.0deg); }
  22.50% { transform: rotate(0.0deg); }
  22.75% { transform: rotate(0.0deg); }
  23.00% { transform: rotate(0.0deg); }
  23.25% { transform: rotate(0.0deg); }
  23.50% { transform: rotate(0.0deg); }
  23.75% { transform: rotate(0.0deg); }
  24.00% { transform: rotate(0.0deg); }
  24.25% { transform: rotate(0.0deg); }
  24.50% { transform: rotate(0.0deg); }
  24.75% { transform: rotate(0.0deg); }
  25.00% { transform: rotate(0.0deg); }
  25.25% { transform: rotate(0.0deg); }
  25.50% { transform: rotate(0.0deg); }
  25.75% { transform: rotate(0.0deg); }
  26.00% { transform: rotate(0.0deg); }
  26.25% { transform: rotate(0.0deg); }
  26.50% { transform: rotate(0.0deg); }
  26.75% { transform: rotate(0.0deg); }
  27.00% { transform: rotate(0.0deg); }
  27.25% { transform: rotate(0.0deg); }
  27.50% { transform: rotate(0.0deg); }
  27.75% { transform: rotate(0.0deg); }
  28.00% { transform: rotate(0.0deg); }
  28.25% { transform: rotate(0.0deg); }
  28.50% { transform: rotate(0.0deg); }
  28.75% { transform: rotate(0.0deg); }
  29.00% { transform: rotate(0.0deg); }
  29.25% { transform: rotate(0.0deg); }
  29.50% { transform: rotate(0.0deg); }
  29.75% { transform: rotate(0.0deg); }
  30.00% { transform: rotate(0.0deg); }
  30.25% { transform: rotate(0.0deg); }
  30.50% { transform: rotate(0.0deg); }
  30.75% { transform: rotate(0.0deg); }
  31.00% { transform: rotate(0.0deg); }
  31.25% { transform: rotate(0.0deg); }
  31.50% { transform: rotate(0.0deg); }
  31.75% { transform: rotate(0.0deg); }
  32.00% { transform: rotate(0.0deg); }
  32.25% { transform: rotate(0.0deg); }
  32.50% { transform: rotate(0.0deg); }
  32.75% { transform: rotate(0.0deg); }
  33.00% { transform: rotate(0.0deg); }
  33.25% { transform: rotate(0.0deg); }
  33.50% { transform: rotate(0.0deg); }
  33.75% { transform: rotate(0.0deg); }
  34.00% { transform: rotate(0.0deg); }
  34.25% { transform: rotate(0.0deg); }
  34.50% { transform: rotate(0.0deg); }
  34.75% { transform: rotate(0.0deg); }
  35.00% { transform: rotate(0.0deg); }
  35.25% { transform: rotate(0.0deg); }
  35.50% { transform: rotate(0.0deg); }
  35.75% { transform: rotate(0.0deg); }
  36.00% { transform: rotate(0.0deg); }
  36.25% { transform: rotate(0.0deg); }
  36.50% { transform: rotate(0.0deg); }
  36.75% { transform: rotate(0.0deg); }
  37.00% { transform: rotate(0.0deg); }
  37.25% { transform: rotate(0.0deg); }
  37.50% { transform: rotate(0.0deg); }
  37.75% { transform: rotate(0.0deg); }
  38.00% { transform: rotate(0.0deg); }
  38.25% { transform: rotate(0.0deg); }
  38.50% { transform: rotate(0.0deg); }
  38.75% { transform: rotate(0.0deg); }
  39.00% { transform: rotate(0.0deg); }
  39.25% { transform: rotate(0.0deg); }
  39.50% { transform: rotate(0.0deg); }
  39.75% { transform: rotate(0.0deg); }
  40.00% { transform: rotate(0.0deg); }
  40.25% { transform: rotate(0.0deg); }
  40.50% { transform: rotate(0.0deg); }
  40.75% { transform: rotate(0.0deg); }
  41.00% { transform: rotate(0.0deg); }
  41.25% { transform: rotate(0.0deg); }
  41.50% { transform: rotate(0.0deg); }
  41.75% { transform: rotate(0.0deg); }
  42.00% { transform: rotate(0.0deg); }
  42.25% { transform: rotate(0.0deg); }
  42.50% { transform: rotate(0.0deg); }
  42.75% { transform: rotate(0.0deg); }
  43.00% { transform: rotate(0.0deg); }
  43.25% { transform: rotate(0.0deg); }
  43.50% { transform: rotate(0.0deg); }
  43.75% { transform: rotate(0.0deg); }
  44.00% { transform: rotate(0.0deg); }
  44.25% { transform: rotate(0.0deg); }
  44.50% { transform: rotate(0.0deg); }
  44.75% { transform: rotate(0.0deg); }
  45.00% { transform: rotate(0.0deg); }
  45.25% { transform: rotate(0.0deg); }
  45.50% { transform: rotate(0.0deg); }
  45.75% { transform: rotate(0.0deg); }
  46.00% { transform: rotate(0.0deg); }
  46.25% { transform: rotate(0.0deg); }
  46.50% { transform: rotate(0.0deg); }
  46.75% { transform: rotate(0.0deg); }
  47.00% { transform: rotate(0.0deg); }
  47.25% { transform: rotate(0.0deg); }
  47.50% { transform: rotate(0.0deg); }
  47.75% { transform: rotate(0.0deg); }
  48.00% { transform: rotate(0.0deg); }
  48.25% { transform: rotate(0.0deg); }
  48.50% { transform: rotate(0.0deg); }
  48.75% { transform: rotate(0.0deg); }
  49.00% { transform: rotate(0.0deg); }
  49.25% { transform: rotate(0.0deg); }
  49.50% { transform: rotate(0.0deg); }
  49.75% { transform: rotate(0.0deg); }
  50.00% { transform: rotate(0.0deg); }
  50.25% { transform: rotate(0.0deg); }
  50.50% { transform: rotate(0.0deg); }
  50.75% { transform: rotate(0.0deg); }
  51.00% { transform: rotate(0.0deg); }
  51.25% { transform: rotate(0.0deg); }
  51.50% { transform: rotate(0.0deg); }
  51.75% { transform: rotate(0.0deg); }
  52.00% { transform: rotate(0.0deg); }
  52.25% { transform: rotate(0.0deg); }
  52.50% { transform: rotate(0.0deg); }
  52.75% { transform: rotate(0.0deg); }
  53.00% { transform: rotate(0.0deg); }
  53.25% { transform: rotate(0.0deg); }
  53.50% { transform: rotate(0.0deg); }
  53.75% { transform: rotate(0.0deg); }
  54.00% { transform: rotate(0.0deg); }
  54.25% { transform: rotate(0.0deg); }
  54.50% { transform: rotate(0.0deg); }
  54.75% { transform: rotate(0.0deg); }
  55.00% { transform: rotate(0.0deg); }
  55.25% { transform: rotate(0.0deg); }
  55.50% { transform: rotate(0.0deg); }
  55.75% { transform: rotate(0.0deg); }
  56.00% { transform: rotate(0.0deg); }
  56.25% { transform: rotate(0.0deg); }
  56.50% { transform: rotate(0.0deg); }
  56.75% { transform: rotate(0.0deg); }
  57.00% { transform: rotate(0.0deg); }
  57.25% { transform: rotate(0.0deg); }
  57.50% { transform: rotate(0.0deg); }
  57.75% { transform: rotate(0.0deg); }
  58.00% { transform: rotate(-0.0deg); }
  58.25% { transform: rotate(-5.1deg); }
  58.50% { transform: rotate(-20.8deg); }
  58.75% { transform: rotate(-23.3deg); }
  59.00% { transform: rotate(-15.9deg); }
  59.25% { transform: rotate(-2.9deg); }
  59.50% { transform: rotate(11.2deg); }
  59.75% { transform: rotate(21.3deg); }
  60.00% { transform: rotate(23.8deg); }
  60.25% { transform: rotate(18.0deg); }
  60.50% { transform: rotate(5.7deg); }
  60.75% { transform: rotate(-8.5deg); }
  61.00% { transform: rotate(-19.8deg); }
  61.25% { transform: rotate(-24.0deg); }
  61.50% { transform: rotate(-19.8deg); }
  61.75% { transform: rotate(-8.5deg); }
  62.00% { transform: rotate(5.3deg); }
  62.25% { transform: rotate(6.8deg); }
  62.50% { transform: rotate(0.0deg); }
  62.75% { transform: rotate(-3.0deg); }
  63.00% { transform: rotate(-8.9deg); }
  63.25% { transform: rotate(-12.9deg); }
  63.50% { transform: rotate(-13.0deg); }
  63.75% { transform: rotate(-13.0deg); }
  64.00% { transform: rotate(-13.0deg); }
  64.25% { transform: rotate(-13.0deg); }
  64.50% { transform: rotate(-13.0deg); }
  64.75% { transform: rotate(-13.0deg); }
  65.00% { transform: rotate(-13.0deg); }
  65.25% { transform: rotate(-13.0deg); }
  65.50% { transform: rotate(-13.0deg); }
  65.75% { transform: rotate(-13.0deg); }
  66.00% { transform: rotate(-13.0deg); }
  66.25% { transform: rotate(-12.9deg); }
  66.50% { transform: rotate(-8.9deg); }
  66.75% { transform: rotate(-3.0deg); }
  67.00% { transform: rotate(0.0deg); }
  67.25% { transform: rotate(0.0deg); }
  67.50% { transform: rotate(0.0deg); }
  67.75% { transform: rotate(0.0deg); }
  68.00% { transform: rotate(0.0deg); }
  68.25% { transform: rotate(0.0deg); }
  68.50% { transform: rotate(0.0deg); }
  68.75% { transform: rotate(0.0deg); }
  69.00% { transform: rotate(0.0deg); }
  69.25% { transform: rotate(0.0deg); }
  69.50% { transform: rotate(0.0deg); }
  69.75% { transform: rotate(0.0deg); }
  70.00% { transform: rotate(0.0deg); }
  70.25% { transform: rotate(0.0deg); }
  70.50% { transform: rotate(0.0deg); }
  70.75% { transform: rotate(0.0deg); }
  71.00% { transform: rotate(0.0deg); }
  71.25% { transform: rotate(0.0deg); }
  71.50% { transform: rotate(0.0deg); }
  71.75% { transform: rotate(0.0deg); }
  72.00% { transform: rotate(0.0deg); }
  72.25% { transform: rotate(0.0deg); }
  72.50% { transform: rotate(0.0deg); }
  72.75% { transform: rotate(0.0deg); }
  73.00% { transform: rotate(0.0deg); }
  73.25% { transform: rotate(0.0deg); }
  73.50% { transform: rotate(0.0deg); }
  73.75% { transform: rotate(0.0deg); }
  74.00% { transform: rotate(0.0deg); }
  74.25% { transform: rotate(0.0deg); }
  74.50% { transform: rotate(0.0deg); }
  74.75% { transform: rotate(0.0deg); }
  75.00% { transform: rotate(0.0deg); }
  75.25% { transform: rotate(0.0deg); }
  75.50% { transform: rotate(0.0deg); }
  75.75% { transform: rotate(0.0deg); }
  76.00% { transform: rotate(0.0deg); }
  76.25% { transform: rotate(0.0deg); }
  76.50% { transform: rotate(0.0deg); }
  76.75% { transform: rotate(0.0deg); }
  77.00% { transform: rotate(0.0deg); }
  77.25% { transform: rotate(0.0deg); }
  77.50% { transform: rotate(0.0deg); }
  77.75% { transform: rotate(0.0deg); }
  78.00% { transform: rotate(0.0deg); }
  78.25% { transform: rotate(0.0deg); }
  78.50% { transform: rotate(0.0deg); }
  78.75% { transform: rotate(0.0deg); }
  79.00% { transform: rotate(0.0deg); }
  79.25% { transform: rotate(0.0deg); }
  79.50% { transform: rotate(0.0deg); }
  79.75% { transform: rotate(0.0deg); }
  80.00% { transform: rotate(0.0deg); }
  80.25% { transform: rotate(0.0deg); }
  80.50% { transform: rotate(0.0deg); }
  80.75% { transform: rotate(0.0deg); }
  81.00% { transform: rotate(0.0deg); }
  81.25% { transform: rotate(0.0deg); }
  81.50% { transform: rotate(0.0deg); }
  81.75% { transform: rotate(0.0deg); }
  82.00% { transform: rotate(0.0deg); }
  82.25% { transform: rotate(0.0deg); }
  82.50% { transform: rotate(0.0deg); }
  82.75% { transform: rotate(0.0deg); }
  83.00% { transform: rotate(0.0deg); }
  83.25% { transform: rotate(0.0deg); }
  83.50% { transform: rotate(0.0deg); }
  83.75% { transform: rotate(0.0deg); }
  84.00% { transform: rotate(0.0deg); }
  84.25% { transform: rotate(0.0deg); }
  84.50% { transform: rotate(0.0deg); }
  84.75% { transform: rotate(0.0deg); }
  85.00% { transform: rotate(0.0deg); }
  85.25% { transform: rotate(0.0deg); }
  85.50% { transform: rotate(0.0deg); }
  85.75% { transform: rotate(0.0deg); }
  86.00% { transform: rotate(0.0deg); }
  86.25% { transform: rotate(0.0deg); }
  86.50% { transform: rotate(0.0deg); }
  86.75% { transform: rotate(0.0deg); }
  87.00% { transform: rotate(0.0deg); }
  87.25% { transform: rotate(0.0deg); }
  87.50% { transform: rotate(0.0deg); }
  87.75% { transform: rotate(0.0deg); }
  88.00% { transform: rotate(0.0deg); }
  88.25% { transform: rotate(0.0deg); }
  88.50% { transform: rotate(0.0deg); }
  88.75% { transform: rotate(0.0deg); }
  89.00% { transform: rotate(0.0deg); }
  89.25% { transform: rotate(0.0deg); }
  89.50% { transform: rotate(0.0deg); }
  89.75% { transform: rotate(0.0deg); }
  90.00% { transform: rotate(0.0deg); }
  90.25% { transform: rotate(0.0deg); }
  90.50% { transform: rotate(0.0deg); }
  90.75% { transform: rotate(0.0deg); }
  91.00% { transform: rotate(0.0deg); }
  91.25% { transform: rotate(0.0deg); }
  91.50% { transform: rotate(0.0deg); }
  91.75% { transform: rotate(0.0deg); }
  92.00% { transform: rotate(0.0deg); }
  92.25% { transform: rotate(0.0deg); }
  92.50% { transform: rotate(0.0deg); }
  92.75% { transform: rotate(0.0deg); }
  93.00% { transform: rotate(0.0deg); }
  93.25% { transform: rotate(0.0deg); }
  93.50% { transform: rotate(0.0deg); }
  93.75% { transform: rotate(0.0deg); }
  94.00% { transform: rotate(0.0deg); }
  94.25% { transform: rotate(0.0deg); }
  94.50% { transform: rotate(0.0deg); }
  94.75% { transform: rotate(0.0deg); }
  95.00% { transform: rotate(0.0deg); }
  95.25% { transform: rotate(0.0deg); }
  95.50% { transform: rotate(0.0deg); }
  95.75% { transform: rotate(0.0deg); }
  96.00% { transform: rotate(0.0deg); }
  96.25% { transform: rotate(0.0deg); }
  96.50% { transform: rotate(0.0deg); }
  96.75% { transform: rotate(0.0deg); }
  97.00% { transform: rotate(0.0deg); }
  97.25% { transform: rotate(0.0deg); }
  97.50% { transform: rotate(0.0deg); }
  97.75% { transform: rotate(0.0deg); }
  98.00% { transform: rotate(0.0deg); }
  98.25% { transform: rotate(0.0deg); }
  98.50% { transform: rotate(0.0deg); }
  98.75% { transform: rotate(0.0deg); }
  99.00% { transform: rotate(0.0deg); }
  99.25% { transform: rotate(0.0deg); }
  99.50% { transform: rotate(0.0deg); }
  99.75% { transform: rotate(0.0deg); }
  100.00% { transform: rotate(0.0deg); }
}