.serape-stripe {
  height: 5px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg,
    var(--fiesta-pink) 0 10px,
    var(--fiesta-yellow) 10px 17px,
    var(--fiesta-teal) 17px 29px,
    var(--fiesta-orange) 29px 39px,
    var(--fiesta-green) 39px 50px,
    var(--fiesta-purple) 50px 61px,
    var(--fiesta-red) 61px 72px);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

.papel-band {
  position: absolute;
  top: clamp(0px, 1vh, 10px);
  left: 50%;
  width: min(112vw, 780px);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.papel-picado {
  width: 100%;
  height: auto;
  overflow: visible;
  animation: bunting-sway 5.8s ease-in-out infinite;
}

.papel-string {
  fill: none;
  stroke: rgba(246,239,223,.72);
  stroke-width: 3;
  stroke-linecap: round;
}

.flag {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: flag-sway 3.8s ease-in-out infinite;
}

.flag:nth-of-type(odd) {
  animation-delay: -.9s;
}

.flag .paper {
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.24));
}

.flag circle,
.flag path:not(.paper) {
  fill: rgba(246,239,223,.34);
  stroke: rgba(246,239,223,.34);
  stroke-width: 5;
  stroke-linecap: round;
}

.flag-pink .paper { fill: var(--fiesta-pink); }
.flag-teal .paper { fill: var(--fiesta-teal); }
.flag-yellow .paper { fill: var(--fiesta-yellow); }
.flag-orange .paper { fill: var(--fiesta-orange); }
.flag-green .paper { fill: var(--fiesta-green); }
.flag-red .paper { fill: var(--fiesta-red); }
.flag-purple .paper { fill: var(--fiesta-purple); }

.avatar-disc {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cream);
  background:
    linear-gradient(135deg, var(--avatar-a, var(--fiesta-pink)), var(--avatar-b, var(--fiesta-teal))),
    var(--fiesta-pink);
  box-shadow:
    inset 0 0 0 3px rgba(246,239,223,.22),
    0 8px 18px rgba(0,0,0,.28);
  font-family: var(--font-title);
  font-size: 1.12rem;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
}

@keyframes bunting-sway {
  0%, 100% { transform: rotate(-.45deg); }
  50% { transform: rotate(.45deg); }
}

@keyframes flag-sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50% { transform: rotate(1.1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .papel-picado,
  .flag {
    animation: none;
  }
}