.coming-soon-stage {
  position: relative;
  min-height: min(620px, calc(100vh - 5rem));
  display: grid;
  place-items: center;
  gap: 2rem;
  padding: 3rem 1rem;
  overflow: hidden;
  border: 8px dashed #ff0080;
  border-radius: 8px;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 0, 128, 0.34) 0 12deg, rgba(255, 231, 0, 0.34) 12deg 24deg, rgba(0, 214, 255, 0.34) 24deg 36deg, rgba(122, 60, 255, 0.34) 36deg 48deg),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.2) 0 10px, transparent 10px 20px),
    var(--panel);
  box-shadow: inset 0 0 0 12px #00d6ff, 0 0 34px #ff0080, 0 0 70px #ffe700;
  animation: party-bg 0.28s steps(2, end) infinite;
}
.coming-soon-stage::before,
.coming-soon-stage::after {
  content: "COMING SOON COMING SOON COMING SOON";
  position: absolute;
  left: -10%;
  width: 120%;
  color: #ffffff;
  background: #ff004c;
  font-weight: 900;
  font-size: clamp(1.1rem, 3vw, 2.4rem);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-7deg);
  animation: banner-blink 0.2s steps(1, end) infinite;
}
.coming-soon-stage::before { top: 8%; }
.coming-soon-stage::after {
  bottom: 8%;
  transform: rotate(7deg);
  background: #00b050;
}
.badger-line,
.coming-soon-copy,
#templates-music-btn {
  position: relative;
  z-index: 1;
}
.badger-line {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(1rem, 5vw, 4rem);
  width: 100%;
  animation: badger-line-wobble 0.24s ease-in-out infinite alternate;
}
.badger {
  position: relative;
  width: 86px;
  height: 126px;
  filter: drop-shadow(0 0 12px #ffe700) drop-shadow(0 0 22px #00d6ff);
  animation: badger-dance 0.22s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
.badger-2 { animation-delay: -0.18s; }
.badger-3 { animation-delay: -0.34s; }
.badger-face,
.badger-body,
.badger-ear,
.badger-arm,
.badger-foot {
  position: absolute;
}
.badger-ear {
  top: 3px;
  width: 22px;
  height: 24px;
  background: #161616;
  border-radius: 50% 50% 35% 35%;
}
.badger-ear.left { left: 18px; transform: rotate(-18deg); }
.badger-ear.right { right: 18px; transform: rotate(18deg); }
.badger-face {
  top: 18px;
  left: 14px;
  width: 58px;
  height: 58px;
  background:
    linear-gradient(90deg, #161616 0 24%, #f8f4ea 24% 50%, #161616 50% 76%, #f8f4ea 76%);
  border: 3px solid #161616;
  border-radius: 48% 48% 42% 42%;
}
.badger-face::before,
.badger-face::after {
  content: "";
  position: absolute;
  top: 24px;
  width: 7px;
  height: 7px;
  background: #161616;
  border-radius: 50%;
}
.badger-face::before { left: 16px; }
.badger-face::after { right: 16px; }
.badger-body {
  top: 66px;
  left: 18px;
  width: 50px;
  height: 52px;
  background: #4a4239;
  border: 3px solid #161616;
  border-radius: 45% 45% 35% 35%;
}
.badger-arm {
  top: 74px;
  width: 14px;
  height: 42px;
  background: #161616;
  border-radius: 999px;
  transform-origin: top center;
  animation: badger-arms 0.42s ease-in-out infinite alternate;
}
.badger-arm.left { left: 9px; }
.badger-arm.right { right: 9px; animation-delay: -0.22s; }
.badger-foot {
  bottom: 0;
  width: 28px;
  height: 14px;
  background: #161616;
  border-radius: 999px;
}
.badger-foot.left { left: 16px; }
.badger-foot.right { right: 16px; }
.coming-soon-copy {
  display: grid;
  justify-items: center;
  gap: 1rem;
}
.coming-soon-copy::before,
.coming-soon-copy::after {
  color: #ffffff;
  background: #7a3cff;
  border: 4px solid #ffe700;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  animation: sticker-spin 0.42s linear infinite;
}
.coming-soon-copy::before { content: "Very Soon"; }
.coming-soon-copy::after { content: "No Refunds"; animation-direction: reverse; }
.coming-soon-copy h2 {
  margin: 0;
  font-family: var(--ui-font);
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  color: #ff0080;
  animation: rainbow-blink 0.16s steps(1, end) infinite, text-shake 0.09s linear infinite;
  text-shadow:
    0.05em 0.05em 0 #00d6ff,
    -0.05em -0.03em 0 #ffe700,
    0 0 22px #ff004c,
    0 0 48px #7a3cff;
}
#templates-music-btn {
  transform: scale(1.2);
  box-shadow: 0 0 0 5px #ffe700, 0 0 24px #ff0080;
  animation: button-pulse 0.24s ease-in-out infinite alternate;
}
@keyframes badger-dance {
  from { transform: translateY(0) rotate(-18deg) scaleX(0.86) scaleY(1.12); }
  to { transform: translateY(-42px) rotate(18deg) scaleX(1.16) scaleY(0.92); }
}
@keyframes badger-arms {
  from { transform: rotate(-95deg); }
  to { transform: rotate(95deg); }
}
@keyframes rainbow-blink {
  0% { color: #ff004c; }
  16% { color: #ff8c00; }
  32% { color: #ffe700; }
  48% { color: #00b050; }
  64% { color: #00d6ff; }
  80% { color: #7a3cff; }
}
@keyframes party-bg {
  0% { filter: hue-rotate(0deg) saturate(1.8); }
  100% { filter: hue-rotate(180deg) saturate(3); }
}
@keyframes badger-line-wobble {
  from { transform: translateX(-18px) rotate(-2deg); }
  to { transform: translateX(18px) rotate(2deg); }
}
@keyframes text-shake {
  0% { transform: translate(-3px, 2px) rotate(-1deg); }
  50% { transform: translate(3px, -2px) rotate(1deg); }
  100% { transform: translate(-2px, -3px) rotate(0deg); }
}
@keyframes banner-blink {
  0% { color: #fff; background: #ff004c; }
  33% { color: #161616; background: #ffe700; }
  66% { color: #fff; background: #00d6ff; }
}
@keyframes sticker-spin {
  from { transform: rotate(-8deg) scale(1); }
  to { transform: rotate(8deg) scale(1.12); }
}
@keyframes button-pulse {
  from { filter: hue-rotate(0deg) brightness(1); }
  to { filter: hue-rotate(180deg) brightness(1.35); }
}