/* A quiet illustrated setting for every birthday scene. The masks sit behind the
   canvas and use the skin's own accent, so a variant keeps its chosen palette. */
body[data-mode] {
  --birthday-motif: url('./backgrounds/confetti.svg');
  --birthday-motif-size: 310px 310px;
  --birthday-motif-opacity: .16;
  --birthday-texture: none;
  --birthday-glow: color-mix(in srgb, var(--paper) 38%, transparent);
  --birthday-tint: color-mix(in srgb, var(--accent) 12%, transparent);
  background-color: var(--surface);
  background-image:
    var(--birthday-texture),
    radial-gradient(ellipse 72% 36% at 50% 32%, var(--birthday-glow), transparent 90%),
    radial-gradient(ellipse 45% 30% at 0% 58%, var(--birthday-tint), transparent 90%),
    radial-gradient(ellipse 45% 30% at 100% 8%, var(--birthday-tint), transparent 90%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

body[data-mode] #physical-stage {
  isolation: isolate;
  background-image:
    radial-gradient(ellipse 54% 42% at 50% 51%, var(--birthday-glow), transparent 93%),
    radial-gradient(circle at 7% 18%, var(--birthday-tint), transparent 28%),
    radial-gradient(circle at 93% 82%, var(--birthday-tint), transparent 28%);
}

body[data-mode] #physical-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: var(--accent);
  opacity: var(--birthday-motif-opacity);
  -webkit-mask-image: var(--birthday-motif);
  mask-image: var(--birthday-motif);
  -webkit-mask-size: var(--birthday-motif-size);
  mask-size: var(--birthday-motif-size);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

body[data-mode] #scene-viewport {
  background: radial-gradient(ellipse 43% 47% at 50% 50%, var(--birthday-glow), transparent 100%);
}

/* The original designs each have their own setting. */
body[data-mode=paper],
body[data-mode=letter],
body[data-mode=story],
body[data-mode=wall],
body[data-mode=editorial] {
  --birthday-motif: url('./backgrounds/stationery.svg');
  --birthday-motif-size: 340px 340px;
}
body[data-mode=paper] { --birthday-texture: repeating-linear-gradient(135deg, transparent 0 32px, color-mix(in srgb, var(--accent) 4%, transparent) 33px 34px); }
body[data-mode=letter] { --birthday-texture: repeating-linear-gradient(0deg, transparent 0 47px, color-mix(in srgb, var(--accent) 5%, transparent) 48px 49px); }
body[data-mode=story] { --birthday-motif-size: 390px 390px; --birthday-motif-opacity: .13; }
body[data-mode=wall] { --birthday-texture: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent) 1.5px, transparent 2px); background-size: 34px 34px, auto, auto, auto; }
body[data-mode=editorial] { --birthday-motif-opacity: .09; --birthday-texture: repeating-linear-gradient(0deg, transparent 0 72px, color-mix(in srgb, var(--ink) 7%, transparent) 73px 74px); }

body[data-mode=three],
body[data-mode=dom],
body[data-mode=jar],
body[data-mode=flowers] {
  --birthday-motif: url('./backgrounds/botanical.svg');
  --birthday-motif-size: 380px 380px;
}
body[data-mode=three] { --birthday-motif-opacity: .12; }
body[data-mode=jar] { --birthday-texture: radial-gradient(circle, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 2px); background-size: 23px 23px, auto, auto, auto; }
body[data-mode=flowers] { --birthday-motif-opacity: .21; }

body[data-mode=cake],
body[data-mode=gift],
body[data-mode=room] {
  --birthday-motif: url('./backgrounds/confetti.svg');
  --birthday-motif-size: 270px 270px;
}
body[data-mode=cake] { --birthday-motif-opacity: .19; --birthday-texture: radial-gradient(circle, color-mix(in srgb, var(--paper) 60%, transparent) 7px, transparent 8px); background-size: 70px 70px, auto, auto, auto; }
body[data-mode=gift] { --birthday-motif-opacity: .18; }
body[data-mode=room] { --birthday-motif-opacity: .1; --birthday-texture: repeating-linear-gradient(90deg, transparent 0 84px, color-mix(in srgb, var(--accent) 6%, transparent) 85px 87px); }

body[data-mode=balloons],
body[data-mode=character] {
  --birthday-motif: url('./backgrounds/balloons.svg');
  --birthday-motif-size: 385px 385px;
  --birthday-motif-opacity: .19;
}
body[data-mode=character] { --birthday-motif-size: 450px 450px; }

body[data-mode=candle],
body[data-mode=quest],
body[data-mode=arcade] {
  --birthday-motif: url('./backgrounds/stars.svg');
  --birthday-motif-size: 340px 340px;
}
body[data-mode=candle],
body[data-mode=musicbox],
body[data-mode=arcade] {
  --birthday-glow: color-mix(in srgb, var(--accent) 17%, transparent);
  --birthday-tint: color-mix(in srgb, var(--accent) 11%, transparent);
  --birthday-motif-opacity: .29;
}
body[data-mode=quest] { --birthday-motif-opacity: .17; }

body[data-mode=musicbox] {
  --birthday-motif: url('./backgrounds/music.svg');
  --birthday-motif-size: 340px 340px;
}
body[data-mode=comic] {
  --birthday-motif: url('./backgrounds/comic.svg');
  --birthday-motif-size: 330px 330px;
  --birthday-motif-opacity: .17;
  --birthday-texture: radial-gradient(circle, color-mix(in srgb, var(--ink) 15%, transparent) 1px, transparent 2px);
  background-size: 19px 19px, auto, auto, auto;
}
body[data-mode=builder] {
  --birthday-motif: url('./backgrounds/confetti.svg');
  --birthday-motif-opacity: .13;
  --birthday-texture: linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px, auto, auto, auto;
}
body[data-mode=builder] #physical-stage {
  background-image: radial-gradient(ellipse 54% 42% at 50% 51%, var(--birthday-glow), transparent 93%);
}

/* Alternate skins keep the same interaction while changing the world around it. */
body:is([data-style=garden], [data-style=botanical], [data-style=floral], [data-style=picnic], [data-style=watercolor], [data-style=linen]) {
  --birthday-motif: url('./backgrounds/botanical.svg');
  --birthday-motif-size: 370px 370px;
  --birthday-motif-opacity: .19;
}
body:is([data-style=space], [data-style=night], [data-style=fantasy], [data-style=winter], [data-style=foil], [data-style=luxury], [data-style=embossed]) {
  --birthday-motif: url('./backgrounds/stars.svg');
  --birthday-motif-size: 350px 350px;
  --birthday-motif-opacity: .24;
}
body:is([data-style=party], [data-style=candy], [data-style=children], [data-style=toy], [data-style=bakery], [data-style=family], [data-style=friendship], [data-style=group], [data-style=milestone], [data-style=pastel], [data-style=chibi], [data-style=animal]) {
  --birthday-motif: url('./backgrounds/confetti.svg');
  --birthday-motif-size: 255px 255px;
  --birthday-motif-opacity: .21;
}
body:is([data-style=music], [data-style=vinyl], [data-style=retro], [data-style=cafe], [data-style=cozy]) {
  --birthday-motif: url('./backgrounds/music.svg');
  --birthday-motif-size: 340px 340px;
}
body:is([data-style=comic], [data-style=webtoon], [data-style=superhero], [data-style=doodle], [data-style=crayon], [data-style=drawing]) {
  --birthday-motif: url('./backgrounds/comic.svg');
  --birthday-motif-size: 320px 320px;
  --birthday-motif-opacity: .18;
}
body:is([data-style=letter], [data-style=paper], [data-style=journal], [data-style=notebook], [data-style=parchment], [data-style=typewriter], [data-style=receipt], [data-style=yearbook], [data-style=newspaper], [data-style=typography], [data-style=polaroid], [data-style=photo], [data-style=photography], [data-style=travel], [data-style=sticky], [data-style=origami], [data-style=papercraft], [data-style=handmade]) {
  --birthday-motif: url('./backgrounds/stationery.svg');
  --birthday-motif-size: 350px 350px;
  --birthday-motif-opacity: .14;
}
body:is([data-style=balloon], [data-style=ocean], [data-style=romantic]) {
  --birthday-motif: url('./backgrounds/balloons.svg');
  --birthday-motif-size: 390px 390px;
}
body:is([data-style=pixel], [data-style=gaming], [data-style=arcade], [data-style=micro]) {
  --birthday-motif: url('./backgrounds/stars.svg');
  --birthday-motif-size: 290px 290px;
  --birthday-texture: linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}
body:is([data-style=batik], [data-style=nusantara], [data-style=wood], [data-style=clay], [data-style=vintage]) {
  --birthday-motif: url('./backgrounds/botanical.svg');
  --birthday-motif-size: 415px 415px;
  --birthday-motif-opacity: .13;
}

@media (max-width: 700px) {
  body[data-mode] { --birthday-motif-size: 300px 300px; }
  body[data-mode] #physical-stage::before { opacity: calc(var(--birthday-motif-opacity) * .8); }
}
@media print {
  body[data-mode], body[data-mode] #physical-stage, body[data-mode] #scene-viewport { background: white; }
  body[data-mode] #physical-stage::before { display: none; }
}