.clip-download {
  --btn-top: #9289e1;
  --btn-mid: #675cb9;
  --btn-bottom: #554b9f;
  /* --btn-shadow: rgba(56, 49, 102, 0.36); */
  --btn-text: #fff9ff;
  --dot-a: rgba(255, 255, 255, 0.96);
  --dot-b: rgba(255, 205, 234, 0.94);
  --dot-c: rgba(170, 226, 255, 0.95);
  --dot-d: rgba(255, 239, 198, 0.98);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 134px;
  padding: 7px 12px;
  border: 2px solid rgba(80, 60, 160, 0.55);
  border-radius: 10px;
  background: #8b7fd4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 10px rgba(60, 45, 140, 0.3);
  color: var(--btn-text) !important;
  text-decoration: none !important;
  transform: translateZ(0);
  transition: transform 180ms ease, filter 180ms ease;
}

.clip-download:hover {
  text-decoration: none !important;
  filter: brightness(1.05);
}

.clip-download:active {
  transform: scale(0.98);
}

.clip-download .btn-text {
  position: relative;
  z-index: 3;
  font: 400 14px/1 'Yusei Magic', sans-serif;
  letter-spacing: 0.01em;
}

.clip-download .glow,
.clip-download .fireworks,
.clip-download .fireworks-b,
.clip-download .fireworks-c {
  position: absolute;
  pointer-events: none;
}

.clip-download .glow {
  inset: -12px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent 68%);
  opacity: 0;
}

.clip-download .fireworks,
.clip-download .fireworks-b,
.clip-download .fireworks-c {
  inset: -24px;
  z-index: 2;
  opacity: 0;
  transform: scale(0.72);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.18));
  mix-blend-mode: screen;
}

.clip-download .fireworks {
  background:
    radial-gradient(circle at 7% 58%, var(--dot-a) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 9% 47%, var(--dot-d) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 12% 35%, var(--dot-b) 0 1.9px, transparent 3.1px),
    radial-gradient(circle at 18% 68%, var(--dot-c) 0 1.7px, transparent 2.9px),
    radial-gradient(circle at 22% 54%, var(--dot-a) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 26% 20%, var(--dot-a) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 32% 74%, var(--dot-d) 0 2px, transparent 3.2px),
    radial-gradient(circle at 38% 44%, var(--dot-c) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 43% 57%, var(--dot-b) 0 1.7px, transparent 2.9px),
    radial-gradient(circle at 46% 16%, var(--dot-b) 0 1.8px, transparent 3px),
    radial-gradient(circle at 54% 78%, var(--dot-a) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 57% 50%, var(--dot-c) 0 1.7px, transparent 2.9px),
    radial-gradient(circle at 61% 30%, var(--dot-d) 0 2px, transparent 3.2px),
    radial-gradient(circle at 70% 64%, var(--dot-c) 0 1.9px, transparent 3px),
    radial-gradient(circle at 74% 52%, var(--dot-a) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 78% 20%, var(--dot-a) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 86% 54%, var(--dot-b) 0 1.8px, transparent 3px),
    radial-gradient(circle at 89% 42%, var(--dot-c) 0 1.8px, transparent 3px),
    radial-gradient(circle at 92% 34%, var(--dot-d) 0 1.9px, transparent 3px);
}

.clip-download .fireworks-b {
  background:
    radial-gradient(circle at 11% 26%, var(--dot-c) 0 1.8px, transparent 3px),
    radial-gradient(circle at 18% 78%, var(--dot-a) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 20% 58%, var(--dot-b) 0 1.8px, transparent 3px),
    radial-gradient(circle at 24% 48%, var(--dot-d) 0 1.9px, transparent 3px),
    radial-gradient(circle at 34% 28%, var(--dot-b) 0 1.7px, transparent 2.9px),
    radial-gradient(circle at 42% 84%, var(--dot-a) 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 45% 60%, var(--dot-d) 0 1.9px, transparent 3px),
    radial-gradient(circle at 50% 40%, var(--dot-c) 0 2px, transparent 3.1px),
    radial-gradient(circle at 59% 18%, var(--dot-d) 0 1.8px, transparent 3px),
    radial-gradient(circle at 66% 74%, var(--dot-b) 0 1.8px, transparent 3px),
    radial-gradient(circle at 69% 52%, var(--dot-a) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 74% 44%, var(--dot-a) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 81% 82%, var(--dot-c) 0 1.8px, transparent 2.9px),
    radial-gradient(circle at 88% 22%, var(--dot-b) 0 1.9px, transparent 3.1px),
    radial-gradient(circle at 90% 48%, var(--dot-d) 0 1.8px, transparent 2.9px),
    radial-gradient(circle at 94% 60%, var(--dot-d) 0 1.8px, transparent 2.9px);
}

.clip-download .fireworks-c {
  inset: -26px;
  background:
    radial-gradient(circle at 14% 18%, var(--dot-a) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 16% 40%, var(--dot-c) 0 1.6px, transparent 2.7px),
    radial-gradient(circle at 28% 62%, var(--dot-b) 0 1.7px, transparent 2.9px),
    radial-gradient(circle at 36% 14%, var(--dot-d) 0 1.8px, transparent 3px),
    radial-gradient(circle at 41% 48%, var(--dot-a) 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 52% 70%, var(--dot-c) 0 1.7px, transparent 2.8px),
    radial-gradient(circle at 58% 28%, var(--dot-b) 0 1.7px, transparent 2.8px),
    radial-gradient(circle at 66% 12%, var(--dot-a) 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 72% 58%, var(--dot-d) 0 1.8px, transparent 3px),
    radial-gradient(circle at 82% 34%, var(--dot-c) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 88% 68%, var(--dot-b) 0 1.6px, transparent 2.8px);
}

.clip-download.clip-download-fresh {
  animation: clip-button-pop 1.02s cubic-bezier(.2,1,.32,1) 1;
}

.clip-download.clip-download-fresh .glow {
  animation: clip-glow-breathe 1.18s ease-out 1;
}

.clip-download.clip-download-fresh .fireworks {
  animation: clip-fireworks-bloom 1.68s ease-out 1;
}

.clip-download.clip-download-fresh .fireworks-b {
  animation: clip-fireworks-bloom-2 1.9s ease-out 0.06s 1;
}

.clip-download.clip-download-fresh .fireworks-c {
  animation: clip-fireworks-bloom-3 2.02s ease-out 0.1s 1;
}

@keyframes clip-button-pop {
  0% { transform: scale(0.93); }
  18% { transform: scale(1.08); }
  40% { transform: scale(0.985); }
  58% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes clip-glow-breathe {
  0% { opacity: 0; transform: scale(0.88); }
  22% { opacity: 1; transform: scale(1.03); }
  52% { opacity: 0.58; transform: scale(1.09); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes clip-fireworks-bloom {
  0% { opacity: 0; transform: scale(0.68) rotate(-10deg); }
  4% { opacity: 0.46; }
  9% { opacity: 0.82; }
  14% { opacity: 1; }
  26% { opacity: 0.68; }
  46% { opacity: 0.38; }
  56% { opacity: 0.42; }
  66% { opacity: 0.28; }
  76% { opacity: 0.36; }
  84% { opacity: 0.22; }
  90% { opacity: 0.16; }
  95% { opacity: 0.07; }
  100% { opacity: 0; transform: scale(1.2) rotate(8deg); }
}

@keyframes clip-fireworks-bloom-2 {
  0% { opacity: 0; transform: scale(0.74) rotate(8deg); }
  5% { opacity: 0.28; }
  12% { opacity: 0.78; }
  18% { opacity: 0.96; }
  30% { opacity: 0.56; }
  50% { opacity: 0.26; }
  60% { opacity: 0.4; }
  70% { opacity: 0.22; }
  80% { opacity: 0.34; }
  88% { opacity: 0.18; }
  94% { opacity: 0.1; }
  97% { opacity: 0.04; }
  100% { opacity: 0; transform: scale(1.18) rotate(-7deg); }
}

@keyframes clip-fireworks-bloom-3 {
  0% { opacity: 0; transform: scale(0.7) rotate(-4deg); }
  6% { opacity: 0.22; }
  14% { opacity: 0.66; }
  21% { opacity: 0.86; }
  32% { opacity: 0.48; }
  40% { opacity: 0.42; }
  52% { opacity: 0.22; }
  62% { opacity: 0.34; }
  74% { opacity: 0.18; }
  82% { opacity: 0.28; }
  88% { opacity: 0.16; }
  95% { opacity: 0.06; }
  100% { opacity: 0; transform: scale(1.14) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .clip-download,
  .clip-download:hover,
  .clip-download:active,
  .clip-download.clip-download-fresh,
  .clip-download .glow,
  .clip-download .fireworks,
  .clip-download .fireworks-b,
  .clip-download .fireworks-c {
    animation: none !important;
    transition: none !important;
    transform: none;
  }
}