.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 75%, rgba(255,255,255,.55) 0 1px, transparent 3px),
    linear-gradient(180deg, #c8a7ff 0%, #efd5ff 42%, #ffd7e8 72%, #fff1ce 100%);
  color: #2b183f;
}

.sparkle {
  position: fixed;
  width: 4px;
  height: 4px;
  z-index: 1;
  border-radius: 999px;
  background: white;
  box-shadow: 0 0 14px 5px rgba(255,255,255,.75);
  animation: twinkle 2.8s ease-in-out infinite;
  pointer-events: none;
}

.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 999px;
}

.sparkle::before { width: 28px; height: 1px; }
.sparkle::after  { width: 1px;  height: 28px; }

@keyframes twinkle {
  0%, 100% { opacity: .45; transform: scale(.85); }
  50%       { opacity: 1;   transform: scale(1.12); }
}

@keyframes drift {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to   { transform: translate3d(-80px,-120px,0) rotate(12deg); }
}

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  inset: -60%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-65%) rotate(12deg);
}

.btn-shine:hover::after {
  animation: shine 1.2s ease-in-out;
}

@keyframes shine {
  to { transform: translateX(65%) rotate(12deg); }
}