/* 🎂 Geburtstag: kräftige Partyfarben, Wimpelkette, Konfetti. Unterbau in themes.css. */

body.birthday {
  --bg: #fff8f3;
  --card: #ffffff;
  --text: #2a2333;
  --muted: #6c6378;
  --border: #efe2ea;
  --accent: #6a3fd1;
  --accent-text: #ffffff;
  --head: #c2185b;
  --price: #0f7a6c;
  --badge-bg: #ffc83d;
  --badge-text: #2a1d00;
  --tint1: rgb(106 63 209 / .09);
  --tint2: rgb(255 120 160 / .12);
  --wire: #6c6378;
  --band: repeating-linear-gradient(-45deg, #ff5c8a 0 8px, #ffc83d 8px 16px, #36c5a8 16px 24px, #6a3fd1 24px 32px);
  --fall-speed: 18s;
  --drift: 40px;
  /* Konfetti: schmale Ellipsen in verschiedenen Ausrichtungen */
  --particles-small:
    radial-gradient(2px 5px at 30px 40px, #ff5c8a 50%, transparent 55%),
    radial-gradient(5px 2px at 110px 150px, #ffc83d 50%, transparent 55%),
    radial-gradient(2px 4px at 190px 90px, #36c5a8 50%, transparent 55%),
    radial-gradient(4px 2px at 70px 200px, #4aa8ff 50%, transparent 55%);
  --particles-big:
    radial-gradient(3px 7px at 60px 120px, #6a3fd1 50%, transparent 55%),
    radial-gradient(7px 3px at 250px 30px, #ff5c8a 50%, transparent 55%),
    radial-gradient(3px 6px at 320px 260px, #ffc83d 50%, transparent 55%);
}

@media (prefers-color-scheme: dark) {
  body.birthday {
    --bg: #17141f;
    --card: #221d2e;
    --text: #f4eff8;
    --muted: #b3aac0;
    --border: #352e45;
    --accent: #9b7bff;
    --accent-text: #17141f;
    --head: #ff7aa8;
    --price: #5ee0c4;
    --wire: #8f86a0;
  }
}

body.birthday::before,
body.birthday::after { opacity: .7; }

body.birthday .topbar .kicker::before { content: "🎂 "; }
body.birthday .login h1::after { content: " 🎉"; }
body.birthday .empty::before { content: "🎈 "; }

/* ---------- Wimpelkette ---------- */

body.birthday .garland i { --c: #ff5c8a; }
body.birthday .garland i:nth-of-type(5n + 2) { --c: #ffc83d; }
body.birthday .garland i:nth-of-type(5n + 3) { --c: #36c5a8; }
body.birthday .garland i:nth-of-type(5n + 4) { --c: #6a3fd1; }
body.birthday .garland i:nth-of-type(5n + 5) { --c: #4aa8ff; }

body.birthday .garland i::after {
  width: 26px;
  height: 28px;
  margin-left: -13px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(90deg, rgb(255 255 255 / .18) 50%, transparent 50%), var(--c);
  transform-origin: 50% 0;
  animation: birthday-flutter 2.6s ease-in-out infinite;
}
body.birthday .garland i:nth-of-type(even)::after { animation-delay: -1.3s; }
body.birthday .garland i:nth-of-type(3n)::after { animation-duration: 3.2s; }

@keyframes birthday-flutter {
  0%, 100% { transform: rotate(-4deg) skewX(2deg); }
  50% { transform: rotate(4deg) skewX(-2deg); }
}