.material-mascot-band {
  position: relative;
  width: min(100%, var(--max));
  height: clamp(190px, 15vw, 240px);
  margin: 0 auto;
  overflow: hidden;
  contain: layout paint style;
  isolation: isolate;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.material-mascot {
  position: absolute;
  z-index: 2;
  bottom: 35px;
  left: var(--mascot-x);
  width: var(--mascot-width);
  height: auto;
  max-width: none;
  transform-origin: 50% 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.material-mascot--buttons {
  --mascot-x: 3.5%;
  --mascot-width: clamp(118px, 10vw, 172px);
}

.material-mascot--zipper {
  --mascot-x: 20%;
  --mascot-width: clamp(58px, 4.8vw, 78px);
}

.material-mascot--ribbon {
  --mascot-x: 31%;
  --mascot-width: clamp(76px, 6.2vw, 102px);
}

.material-mascot--buckle {
  --mascot-x: 44%;
  --mascot-width: clamp(66px, 5.2vw, 88px);
}

.material-mascot--patch {
  --mascot-x: 55.5%;
  --mascot-width: clamp(82px, 6.8vw, 112px);
}

.material-mascot--lace {
  --mascot-x: 66.5%;
  --mascot-width: clamp(86px, 7.4vw, 122px);
  bottom: 72px;
}

.material-mascot--cord {
  --mascot-x: 77.5%;
  --mascot-width: clamp(112px, 10vw, 166px);
}

.material-mascot--snap {
  --mascot-x: 90%;
  --mascot-width: clamp(72px, 5.8vw, 96px);
}

@media (prefers-reduced-motion: no-preference) {
  .material-mascot--buttons { animation: mascot-hop 3.8s cubic-bezier(.45, 0, .2, 1) -1.2s infinite; }
  .material-mascot--zipper { animation: mascot-step 4.6s ease-in-out -.7s infinite; }
  .material-mascot--ribbon { animation: mascot-sway 5.2s ease-in-out -2.4s infinite; }
  .material-mascot--buckle { animation: mascot-bob 4.1s ease-in-out -1.9s infinite; }
  .material-mascot--patch { animation: mascot-breathe 4.8s ease-in-out -.8s infinite; }
  .material-mascot--lace { animation: mascot-float 5.6s ease-in-out -3.1s infinite; }
  .material-mascot--cord { animation: mascot-creep 6.2s ease-in-out -2.2s infinite; }
  .material-mascot--snap { animation: mascot-pop 4.3s cubic-bezier(.45, 0, .2, 1) -1.5s infinite; }
}

@keyframes mascot-hop {
  0%, 42%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(5px, -12px, 0) rotate(2deg); }
  58% { transform: translate3d(9px, 0, 0) rotate(0); }
}

@keyframes mascot-step {
  0%, 100% { transform: translate3d(-4px, 0, 0) rotate(-2deg); }
  25% { transform: translate3d(0, -5px, 0) rotate(2deg); }
  50% { transform: translate3d(5px, 0, 0) rotate(-1deg); }
  75% { transform: translate3d(9px, -5px, 0) rotate(2deg); }
}

@keyframes mascot-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(5px, -7px, 0) rotate(4deg); }
}

@keyframes mascot-bob {
  0%, 100% { transform: translate3d(0, 0, 0) scaleY(1); }
  45% { transform: translate3d(0, -8px, 0) scaleY(1.015); }
  55% { transform: translate3d(0, -8px, 0) scaleY(1.015); }
}

@keyframes mascot-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(1deg) scale(1); }
  50% { transform: translate3d(-3px, -4px, 0) rotate(-2deg) scale(1.025); }
}

@keyframes mascot-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); opacity: .95; }
  50% { transform: translate3d(8px, -16px, 0) rotate(3deg); opacity: 1; }
}

@keyframes mascot-creep {
  0%, 100% { transform: translate3d(-7px, 0, 0) scaleX(.985); }
  25% { transform: translate3d(-2px, -3px, 0) scaleX(1.015); }
  50% { transform: translate3d(5px, 0, 0) scaleX(.985); }
  75% { transform: translate3d(10px, -3px, 0) scaleX(1.015); }
}

@keyframes mascot-pop {
  0%, 38%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  46% { transform: translate3d(0, -13px, 0) rotate(-3deg); }
  54% { transform: translate3d(0, -13px, 0) rotate(3deg); }
  62% { transform: translate3d(0, 0, 0) rotate(0); }
}

@media (max-width: 1100px) {
  .material-mascot--buttons { --mascot-x: 2%; }
  .material-mascot--zipper { --mascot-x: 19%; }
  .material-mascot--ribbon { --mascot-x: 31%; }
  .material-mascot--buckle { --mascot-x: 44%; }
  .material-mascot--patch { --mascot-x: 57%; }
  .material-mascot--lace { --mascot-x: 69%; }
  .material-mascot--cord { --mascot-x: 82%; }
  .material-mascot--snap { display: none; }
}

@media (max-width: 767px) {
  .material-mascot-band {
    height: 156px;
  }

  .material-mascot { bottom: 18px; }
  .material-mascot:nth-child(n + 6) { display: none; }
  .material-mascot--buttons { --mascot-x: -2%; --mascot-width: 104px; }
  .material-mascot--zipper { --mascot-x: 25%; --mascot-width: 54px; }
  .material-mascot--ribbon { --mascot-x: 43%; --mascot-width: 70px; }
  .material-mascot--buckle { --mascot-x: 63%; --mascot-width: 58px; }
  .material-mascot--patch { --mascot-x: 82%; --mascot-width: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .material-mascot { animation: none !important; }
}