/* Background designs. Put one of these classes on <body> next to its page class. */
html body[class*="bg-"] { background-attachment: fixed; }

/* 1. Galaxy: stars and planets */
body.bg-galaxy {
  background:
    radial-gradient(circle at 82% 22%, #ff7a59 0 38px, transparent 40px),
    radial-gradient(ellipse 90px 14px at 82% 22%, transparent 60px, rgba(255, 210, 63, .8) 61px 64px, transparent 66px),
    radial-gradient(circle at 12% 70%, #38c6a6 0 26px, transparent 28px),
    radial-gradient(circle at 55% 90%, #9b5cff 0 18px, transparent 20px),
    radial-gradient(circle, #fff 0 1.2px, transparent 1.6px) 0 0 / 70px 70px,
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.4px) 35px 20px / 110px 90px,
    radial-gradient(circle at 30% 30%, rgba(108, 76, 245, .5), transparent 45%),
    #0b0b2b;
}

/* 2. Rainbow vortex swirl */
body.bg-vortex {
  background:
    radial-gradient(circle at 50% 50%, rgba(10, 8, 30, .55), rgba(10, 8, 30, .82) 70%),
    repeating-conic-gradient(from 0deg at 50% 50%, #ff4d6d 0 15deg, #ffbf00 15deg 30deg, #39d98a 30deg 45deg, #00b3ff 45deg 60deg, #9b5cff 60deg 75deg);
}

/* 3. Candy stripes */
body.bg-candy {
  background:
    repeating-linear-gradient(135deg, #6c2bd9 0 40px, #ff4fa3 40px 80px, #ffd23f 80px 100px, #6c2bd9 100px 140px);
  background-blend-mode: normal;
}
body.bg-candy::before { content: ""; position: fixed; inset: 0; background: rgba(20, 8, 40, .45); z-index: -1; }

/* 4. Polka dots */
body.bg-dots {
  background:
    radial-gradient(circle, rgba(255,122,89,.8) 0 9px, transparent 10px) 0 0 / 80px 80px,
    radial-gradient(circle, #ffd23f 0 7px, transparent 8px) 40px 40px / 80px 80px,
    radial-gradient(circle, #38c6a6 0 5px, transparent 6px) 20px 60px / 80px 80px,
    #3b1d8f;
}

/* 5. Bubbles */
body.bg-bubbles {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.35) 0 4px, rgba(255,255,255,.12) 5px 55px, rgba(255,255,255,.4) 56px 58px, transparent 59px),
    radial-gradient(circle at 78% 15%, rgba(255,255,255,.35) 0 3px, rgba(255,255,255,.1) 4px 34px, rgba(255,255,255,.4) 35px 37px, transparent 38px),
    radial-gradient(circle at 65% 70%, rgba(255,255,255,.35) 0 5px, rgba(255,255,255,.1) 6px 80px, rgba(255,255,255,.4) 81px 83px, transparent 84px),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,.1) 0 26px, rgba(255,255,255,.4) 27px 29px, transparent 30px),
    radial-gradient(circle at 92% 50%, rgba(255,255,255,.1) 0 20px, rgba(255,255,255,.4) 21px 23px, transparent 24px),
    radial-gradient(circle at 45% 40%, rgba(255,255,255,.1) 0 14px, rgba(255,255,255,.4) 15px 16px, transparent 17px),
    linear-gradient(180deg, #0a6fb8, #0a2a6b);
}

/* 6. Honeycomb, like the inside of a 3D print */
body.bg-honeycomb {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zM28 98L0 82V50l28 16 28-16v32L28 98z' fill='none' stroke='%23ffbf00' stroke-opacity='.45' stroke-width='3'/%3E%3C/svg%3E"),
    radial-gradient(circle at 30% 20%, rgba(255, 122, 89, .35), transparent 50%),
    #2a1650;
}

/* 7. Blueprint grid, like a 3D printer bed */
body.bg-blueprint {
  background:
    linear-gradient(rgba(255,255,255,.25) 2px, transparent 2px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(255,255,255,.25) 2px, transparent 2px) 0 0 / 120px 120px,
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 24px 24px,
    #1450a8;
}

/* 8. Confetti party */
body.bg-confetti {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect x='20' y='30' width='14' height='6' rx='2' fill='%23ff4d6d' transform='rotate(30 27 33)'/%3E%3Crect x='120' y='20' width='14' height='6' rx='2' fill='%23ffd23f' transform='rotate(-20 127 23)'/%3E%3Ccircle cx='170' cy='90' r='5' fill='%2338c6a6'/%3E%3Crect x='60' y='110' width='14' height='6' rx='2' fill='%2300b3ff' transform='rotate(60 67 113)'/%3E%3Ccircle cx='30' cy='160' r='4' fill='%23ffd23f'/%3E%3Crect x='140' y='160' width='14' height='6' rx='2' fill='%239b5cff' transform='rotate(-45 147 163)'/%3E%3Cpath d='M90 60 l6 10 l-12 0z' fill='%23ff7a59'/%3E%3Ccircle cx='100' cy='180' r='3' fill='%23ff4d6d'/%3E%3C/svg%3E"),
    #16112e;
}

/* 9. Ocean waves */
body.bg-waves {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60'%3E%3Cpath d='M0 30 Q30 0 60 30 T120 30 T180 30 T240 30' fill='none' stroke='%2300e5ff' stroke-opacity='.35' stroke-width='4'/%3E%3C/svg%3E") 0 0 / 240px 60px,
    linear-gradient(180deg, #0b3c74, #06284f 60%, #031a36);
}

/* 10. Sunset lava */
body.bg-sunset {
  background:
    radial-gradient(circle at 75% 80%, rgba(255, 210, 63, .85) 0 90px, transparent 160px),
    radial-gradient(circle at 20% 30%, rgba(255, 79, 163, .55), transparent 40%),
    linear-gradient(160deg, #3a0f6b 0%, #b0246b 45%, #ff7a3d 80%, #ffbf3d 100%);
}

/* 5b. Paint bubbles (Design your own): black, piled with yarn threads in hot pink, hot yellow,
   neon pink, dark blue and neon blue. bubbles.js draws the yarn and adds the floating bubbles; every 2 minutes one pops,
   the background flashes neon blue, then the black rolls back in as a wave. */
html body.bg-paint-bubbles {
  background: #050505;
  background-attachment: fixed;
}
/* The neon blue flash after a pop. It sits under the yarn; the black comes back as a wave. */
.blue-wash { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #00b3ff; animation: wash-in .3s ease-out; }
.wash-wave { position: absolute; top: -5%; left: 0; width: 140vw; height: 110%; transform: translateX(-140vw); animation: wash-sweep 1.6s ease-in-out forwards; }
.wash-wave svg { width: 100%; height: 100%; display: block; }
.wash-wave.dark { fill: #1a2a8a; animation-delay: 1.7s; }
.wash-wave.black { fill: #050505; animation-delay: 1.95s; }
@keyframes wash-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wash-sweep { to { transform: translateX(0); } }
.paint-lines, .bubble-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.paint-lines, .bubble-layer { z-index: 0; }
.paint-lines svg { width: 100%; height: 100%; }
.bubble {
  position: absolute; bottom: -140px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0 6%, rgba(255,255,255,.12) 18%, rgba(255,79,216,.08) 60%, rgba(255,230,0,.25) 100%);
  border: 2px solid rgba(255,255,255,.45);
  box-shadow: inset 0 0 18px rgba(255,79,216,.35);
  animation: bubble-rise var(--dur) linear var(--delay) infinite;
}
@keyframes bubble-rise {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(var(--sway), -30vh); }
  50%  { transform: translate(calc(var(--sway) * -1), -60vh); }
  75%  { transform: translate(var(--sway), -90vh); }
  100% { transform: translate(0, calc(-100vh - 280px)); }
}
.bubble.pop::after { content: ""; position: absolute; inset: -30%; border-radius: 50%; border: 3px dashed #ffe600; animation: pop-ring .35s ease-out forwards; }
.bubble.pop { animation: pop-burst .35s ease-out forwards; }
@keyframes pop-burst { to { scale: 1.6; opacity: 0; border-color: #ff1f8e; } }
@keyframes pop-ring { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.4); } }

/* Keep the intro line readable on top of the yarn. */
body.bg-paint-bubbles .lead { display: inline-block; background: rgba(5, 5, 5, .85); color: #fff; padding: 6px 14px; border-radius: 12px; }