/* Backgrounds behind transparent cut-out piñatas.
   Portfolio covers (.work--cutout) get the party backdrop photo; the price card (.product__art--cutouts) gets a sunburst.
   The price card picks its tint with a tone-* class: pink | yellow | teal | purple. */

:root { --purple: #7b5cd6; }

.product__art--cutouts {
  --tone: var(--pink);
  --paper: color-mix(in srgb, var(--tone) 24%, var(--bg));
  --mark-soft: color-mix(in srgb, var(--tone) 36%, var(--bg));
}
.product__art--cutouts.tone-pink   { --tone: var(--pink); }
.product__art--cutouts.tone-yellow { --tone: var(--yellow); }
.product__art--cutouts.tone-teal   { --tone: var(--teal); }
.product__art--cutouts.tone-purple { --tone: var(--purple); }

/* party backdrop: the studio set Claudia picked (cream wall, yellow floor, balloons) behind each cut-out;
   the piñata stands on the floor. The 2x2 feature tile gets the bigger file. */
.work--cutout .work__open {
  background: var(--stripe) url("../img/backdrop-party-640.webp") 50% 100% / cover no-repeat;
}
.work--cutout.work--feature .work__open { background-image: url("../img/backdrop-party-1086.webp"); }

/* the lightbox shows the same set behind a cut-out (gallery.js adds .has-backdrop to the photo and to its thumb) */
.lightbox__img.has-backdrop {
  background: var(--stripe) url("../img/backdrop-party-1086.webp") 50% 100% / cover no-repeat;
}
.lightbox__thumb.has-backdrop {
  background: var(--stripe) url("../img/backdrop-party-640.webp") 50% 100% / cover no-repeat;
}

/* rays: a sunburst coming out from behind the piñatas */
.product__art--cutouts {
  background:
    radial-gradient(circle at 50% 50%, var(--paper) 0 8%, transparent 52%),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--mark-soft) 0 7.5deg, var(--paper) 7.5deg 15deg);
}