/* -----------------------------------------
ROOT COLOR TOKENS
----------------------------------------- */

:root {
/* -----------------------------------------
PATHS / GUIDES
----------------------------------------- */

--beave-path-blue: #00a5ff;

/* -----------------------------------------
DARK BROWNS
----------------------------------------- */

--beave-brown-deep: #250000;
--beave-brown-red: #5e2208;
--beave-brown-muted: #70573e;

/* -----------------------------------------
CLAYS / WOODS
----------------------------------------- */

--beave-clay-dark: #945a32;
--beave-wood: #bf8131;
--beave-wood-dark: #c0772f;

/* -----------------------------------------
LIGHT NEUTRALS
----------------------------------------- */

--beave-gray-beige: #d0ccc9;
--beave-sand: #d5bc86;
--beave-sand-dark: #da9b40;
--beave-sand-light: #e1aa6d;

/* -----------------------------------------
SALMON / PINKS
----------------------------------------- */

--beave-salmon: #e55461;
--beave-peach-soft: #efb77b;
--beave-peach-light: #f7b274;

/* -----------------------------------------
YELLOWS
----------------------------------------- */

--beave-yellow-deep: #eebf02;
--beave-yellow-hot: #ffe600;
--beave-yellow-neon: #ffef00;

/* -----------------------------------------
CREAMS
----------------------------------------- */

--beave-cream: #f6e2ac;
--beave-white-warm: #fffbf8;

  /* BLACKS */
  --beave-black: #000000;
  --beave-black-2: #030303;
  --beave-black-soft: #0a0a0a;
  --beave-black-warm: #0d0703;

  /* GRAYS */
  --beave-gray-dark: #404040;
  --beave-gray: #737373;
  --beave-gray-light: #b5b5b5;
  --beave-gray-lighter: #c9c9c9;
  --beave-gray-soft: #ebebeb;

  /* SURFACES */
  --beave-surface: #f0f0f0;
  --beave-surface-alt: #f1f1f1;
  --beave-surface-muted: #edefee;

  /* WHITES */
  --beave-white: #ffffff;
  --beave-white-soft: #fffefd;

  /* BROWNS */
  --beave-brown: #5b2218;
  --beave-brown-alt: #5f2218;
  --beave-brown-warm: #602714;
  --beave-brown-light: #624529;

  /* RED BROWNS */
  --beave-redbrown: #8f342a;
  --beave-redbrown-alt: #923429;
  --beave-redbrown-soft: #953629;

  /* REDS */
  --beave-red: #ac0202;
  --cart-red: #f00;

  /* CLAYS / TANS */
  --beave-clay: #934226;
  --beave-tan: #9d9475;
  --beave-pink-brown: #b78e87;

  /* OLIVE */
  --beave-olive-dark: #4b401d;

  /* GOLDS */
  --beave-gold-dark: #ca8f00;
  --beave-gold: #d39200;
  --beave-gold-alt: #d69300;

  /* YELLOWS */
  --beave-yellow: #ecb700;
  --beave-yellow-alt: #eab603;
  --beave-yellow-soft: #edb705;
  --beave-yellow-bright: #ffc400;
  --beave-yellow-light: #ffe500;

  /* ORANGES */
  --beave-orange-dark: #9c4a10;
  --beave-orange-mid: #bf6434;
  --beave-orange-soft: #bf6345;
  --beave-orange-light: #e28a52;
  --beave-orange-pale: #e79860;
  --beave-orange: #e36717;

  /* PEACH */
  --beave-peach: #d59f74;

}

/* -----------------------------------------
GLOBAL RESET
----------------------------------------- */

* {

  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

/* -----------------------------------------
PAGE
----------------------------------------- */

html,
body {

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: var(--beave-surface);

}

/* -----------------------------------------
VISIBLE STAGE
----------------------------------------- */

.scene {

  width: 100vw;
  height: 100vh;

  display: flex;

  justify-content: center;
  align-items: center;

  overflow: hidden;

  background: white;

  /* border: 4px solid red; */

}
.viewport {

  aspect-ratio: 16 / 9;

  width: 100vw;

  max-height: 100vh;

  overflow: hidden;

  position: relative;

  /* border: 4px solid red; */
}

/* -----------------------------------------
SVG CONTAINER
----------------------------------------- */

#splash-stage {

  width: 100%;
  height: 100%;

  /* border: 4px solid blue; */

}

/* -----------------------------------------
MASTER SVG
----------------------------------------- */

#splash-stage svg {

  width: 100%;
  height: 100%;

  display: block;

}
#beave-pushing-cart {
  outline: 4px solid red;
}
.motion-path {

  opacity: 0;

  pointer-events: none;

}
#motion-path-cart-beave {
  stroke: lime;
  stroke-width: 8;
  fill: none;
}