/* Give the ribbon's lower-left return enough room throughout its float. */
.brand-ribbon,
.brand-ribbon-depth {
  width: 130%;
  height: 86%;
  left: -10%;
  top: 2.5%;
  transform: rotate(-19deg);
}
.brand-ribbon-depth { opacity: .14; }

/* Keep the character and its floor shadow on the same responsive scale. */
.scene {
  container-type: inline-size;
  --mascot-size: min(460px, 88cqw);
  --mascot-top: 55%;
}
.mascot-position {
  top: var(--mascot-top);
  left: 50%;
  right: auto;
  width: var(--mascot-size);
  max-width: none;
  transform: translate(-50%, -50%);
}
.ground-shadow {
  z-index: 2;
  left: 50%;
  right: auto;
  top: calc(var(--mascot-top) + var(--mascot-size) * .438);
  bottom: auto;
  width: calc(var(--mascot-size) * .46);
  height: calc(var(--mascot-size) * .07);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #77715f66 0%, #92897640 35%, #aaa08a1a 62%, transparent 76%);
  filter: blur(4px);
  opacity: .66;
  transform: translateX(-50%);
  animation: grounded-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes grounded-breathe {
  0%, 100% { opacity: .66; scale: 1; }
  50% { opacity: .46; scale: .92; }
}

/* A small cream sculpture and amber bead balance the quiet upper corner. */
.scene::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 9%;
  top: 8%;
  width: clamp(42px, 10cqw, 64px);
  aspect-ratio: 1;
  border-radius: 27%;
  background: linear-gradient(140deg, #fffef9 4%, #f7f2e7 42%, #ded5c2 100%);
  box-shadow: inset 2px 3px 4px #fffdf8, inset -3px -4px 7px #c8bfa766, 7px 13px 18px #897d5a1c;
  transform: rotate(-17deg);
  pointer-events: none;
  animation: corner-sculpture-float 12s ease-in-out infinite;
}
.scene::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  left: calc(9% + clamp(42px, 10cqw, 64px) - 3px);
  top: calc(8% + clamp(42px, 10cqw, 64px) - 7px);
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 23%, #ffe9aa 0%, #ffba50 31%, #f78827 65%, #df681c 100%);
  box-shadow: 2px 6px 9px #9b72351f;
  pointer-events: none;
  animation: corner-bead-float 9s ease-in-out infinite;
}
@keyframes corner-sculpture-float {
  0%, 100% { transform: translateY(0) rotate(-17deg); }
  50% { transform: translateY(-7px) rotate(-11deg); }
}
@keyframes corner-bead-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (min-width: 1600px) {
  .scene { --mascot-size: min(500px, 88cqw); }
}
@media (min-width: 681px) and (max-width: 900px) {
  .scene { --mascot-size: min(460px, 96cqw); }
}
@media (max-width: 680px) {
  .scene {
    --mascot-size: min(260px, 88cqw);
    --mascot-top: 53%;
  }
  .brand-ribbon,
  .brand-ribbon-depth {
    width: 125%;
    height: 70%;
    left: -12%;
    top: 9%;
  }
  .scene::before {
    width: 34px;
    left: 9%;
    top: 9%;
    border-radius: 10px;
  }
  .scene::after {
    left: calc(9% + 29px);
    top: calc(9% + 28px);
    width: 10px;
    height: 10px;
  }
  .ground-shadow { filter: blur(3px); }
  .small-bead { left: 12%; bottom: 12%; }
}