/* Magic Moments — additive micro-delight (CSS only, no assets) */



.magic-moment-active {

  transition: filter 0.35s ease;

}



.magic-moment--welcome {

  animation: magic-moment-welcome 1.4s ease-out;

}



.magic-moment--celebrate {

  animation: magic-moment-celebrate 1.6s ease-out;

}



.magic-moment--legendary {

  animation: magic-moment-legendary 1.8s ease-out;

  filter: saturate(1.12);

}



.magic-moment--social {

  animation: magic-moment-social 1.2s ease-out;

}



.magic-moment--milestone {

  animation: magic-moment-pulse 1.5s ease-out;

}



.magic-moment--collection {

  animation: magic-moment-collection 1.7s ease-out;

}



.magic-moment--huge-win {

  animation: magic-moment-huge-win 1.4s ease-out;

}



.magic-moment--jackpot {

  animation: magic-moment-jackpot 2s ease-out;

  filter: brightness(1.06) saturate(1.16);

}



.magic-moment--streak {

  animation: magic-moment-streak 1.2s ease-out;

}



.magic-moment--profile-celebrate {

  animation: magic-moment-profile 1.6s ease-out;

  border-color: rgba(251, 191, 36, 0.65) !important;

  box-shadow: 0 0 28px rgba(251, 191, 36, 0.22);

}



.magic-moment--collection-complete,

.collection-profile.magic-moment--collection-complete {

  animation: magic-moment-collection-panel 1.8s ease-out;

  color: #fde68a !important;

  box-shadow: 0 0 20px rgba(251, 191, 36, 0.14);

}



.retention-activity-row--magic {

  border-left: 3px solid rgba(192, 132, 252, 0.75);

  background: linear-gradient(90deg, rgba(192, 132, 252, 0.12), transparent 72%);

}



.retention-toast.magic-moment-toast {

  border-color: rgba(192, 132, 252, 0.65);

  box-shadow: 0 0 18px rgba(192, 132, 252, 0.18);

}



@keyframes magic-moment-welcome {

  0% { box-shadow: inset 0 0 0 0 rgba(96, 165, 250, 0); filter: brightness(1); }

  35% { box-shadow: inset 0 0 100px 0 rgba(96, 165, 250, 0.16); filter: brightness(1.03); }

  100% { box-shadow: inset 0 0 0 0 rgba(96, 165, 250, 0); filter: brightness(1); }

}



@keyframes magic-moment-celebrate {

  0%, 100% { transform: scale(1); }

  30% { transform: scale(1.004); }

  55% { transform: scale(0.998); }

  75% { transform: scale(1.002); }

}



@keyframes magic-moment-legendary {

  0% { box-shadow: inset 0 0 0 rgba(251, 191, 36, 0); filter: saturate(1); }

  25% { box-shadow: inset 0 0 140px rgba(251, 191, 36, 0.18); filter: saturate(1.14); }

  60% { box-shadow: inset 0 0 80px rgba(251, 191, 36, 0.1); }

  100% { box-shadow: inset 0 0 0 rgba(251, 191, 36, 0); filter: saturate(1.08); }

}



@keyframes magic-moment-social {

  0%, 100% { filter: hue-rotate(0deg) brightness(1); }

  50% { filter: hue-rotate(10deg) brightness(1.03); }

}



@keyframes magic-moment-pulse {

  0%, 100% { opacity: 1; filter: brightness(1); }

  45% { opacity: 0.96; filter: brightness(1.05); }

}



@keyframes magic-moment-collection {

  0% { transform: translateY(0); }

  20% { transform: translateY(-3px); }

  45% { transform: translateY(0); }

  70% { transform: translateY(-2px); }

  100% { transform: translateY(0); }

}



@keyframes magic-moment-huge-win {

  0%, 100% { transform: scale(1); filter: brightness(1); }

  18% { transform: scale(1.008); filter: brightness(1.04); }

  38% { transform: scale(0.997); }

}



@keyframes magic-moment-jackpot {

  0% { box-shadow: inset 0 0 0 rgba(244, 114, 182, 0); }

  20% { box-shadow: inset 0 0 120px rgba(244, 114, 182, 0.2); }

  45% { box-shadow: inset 0 0 80px rgba(251, 191, 36, 0.16); }

  70% { box-shadow: inset 0 0 50px rgba(244, 114, 182, 0.1); }

  100% { box-shadow: inset 0 0 0 rgba(244, 114, 182, 0); }

}



@keyframes magic-moment-streak {

  0%, 100% { filter: brightness(1); }

  50% { filter: brightness(1.06); }

}



@keyframes magic-moment-profile {

  0% { transform: scale(1); opacity: 1; }

  35% { transform: scale(1.012); }

  100% { transform: scale(1); opacity: 1; }

}



@keyframes magic-moment-collection-panel {

  0%, 100% { letter-spacing: normal; filter: brightness(1); }

  50% { letter-spacing: 0.05em; filter: brightness(1.08); }

}



@media (prefers-reduced-motion: reduce) {

  .magic-moment-active,

  .magic-moment--profile-celebrate,

  .magic-moment--collection-complete {

    animation: none !important;

    transition: none !important;

  }

}