/* === Mexican decor: papel picado, talavera tile, serape stripes === */
:root {
  --color-talavera: #1f4e9c;
  --color-rosa: #e8417a;
  --serape: repeating-linear-gradient(90deg,
    var(--color-red) 0 22px, var(--color-marigold) 22px 30px, var(--color-rosa) 30px 40px,
    var(--color-cream) 40px 43px, var(--color-green) 43px 60px, var(--color-ink) 60px 63px,
    var(--color-talavera) 63px 78px, var(--color-marigold) 78px 84px);
}

/* Papel picado: string of cut-paper flags with a gentle sway. */
.papel-picado {
  height: 86px;
  background: url("../img/papel-picado.svg") repeat-x 0 0 / auto 86px;
  transform-origin: top center;
  animation: sway 6s ease-in-out infinite alternate;
  pointer-events: none;
}
.papel-picado.offset { background-position: 160px 0; animation-delay: -3s; }
@keyframes sway {
  from { transform: skewX(-1.2deg) translateY(-1px); }
  to   { transform: skewX(1.2deg) translateY(1px); }
}
@media (max-width: 600px) { .papel-picado { height: 64px; background-size: auto 64px; } }
@media (prefers-reduced-motion: reduce) { .papel-picado { animation: none; } }

/* Hero sits under the flags. */
.hero { position: relative; padding-top: 0; }
.hero > .papel-picado { margin-bottom: var(--space-3); }

/* Talavera tile pattern. */
.talavera { background: url("../img/talavera.svg") repeat 0 0 / 48px 48px; }

/* Location (dark): flags hang across the top edge. */
.location { position: relative; padding-top: 0; overflow: hidden; }
.location > .papel-picado { margin-bottom: var(--space-6); }


/* Faint tone-on-tone sun / chile / cactus / lime pattern behind the PICK YOURS hero (drawn for this site). */
.hero { background: url("../img/hero-pattern.svg") repeat 0 0 / 96px 96px, var(--color-cream); }
.hero > .papel-picado { background-color: var(--color-cream); }