/* Rainbow background utility */
.rainbow-background {
  background: radial-gradient(at 63.3% 51.2%, #FFE3E8 0px, transparent 50%),
              radial-gradient(at 63.3% 13.8%, #FFDECF 0px, transparent 50%),
              radial-gradient(at 79% 5%, #FCEFB1 0px, transparent 50%),
              radial-gradient(at 5% 37%, #D0F7F0 0px, transparent 50%),
              radial-gradient(at 8% 78%, #D9E0FF 0px, transparent 50%) #FFFFFF;
  background-repeat: no-repeat;
}
/* Rainbow gradient button utility */
.rainbow-button {
  background: linear-gradient(70deg, #f9a8d4 0%, #a490dfff 60%, #86efac 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}
  
.rainbow-button:active {
  transform: scale(0.98);
}
/* Rainbow gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, #FFE5EC 0%, #f9a8d4 25%, #a78bfa 50%, #86efac 75%, #99f6e4 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-border {
  position: relative;
  background: white;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #f9a8d4, #a78bfa, #86efac, #99f6e4);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes holoPanZoom {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  50% {
    transform: scale(1.08) translate(-3%, -2%);
  }
  100% {
    transform: scale(1) translate(0%, 0%);
  }
}

.bg-holo {
  position: absolute;
  inset: -10%; /* extra room for zoom */
  filter: blur(30px);
  transform-origin: center;
  will-change: transform;

  background: radial-gradient(at 63.3% 51.2%, #FFE3E8 0px, transparent 50%), radial-gradient(at 63.3% 13.8%, #FFDECF 0px, transparent 50%), radial-gradient(at 79% 5%, #FCEFB1 0px, transparent 50%), radial-gradient(at 5% 37%, #D0F7F0 0px, transparent 50%), radial-gradient(at 8% 78%, #D9E0FF 0px, transparent 50%) #FFFFFF;;
  background-repeat: no-repeat;

  animation: holoPanZoom 90s ease-in-out infinite;
}