backstory/frontend/src/NewApp/Components/Beta.css

.beta-clipper.mobile {
  left: 0px;
}

.beta-clipper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 72px;
  overflow: visible;
  pointer-events: none;
  z-index: 1101;
  cursor: pointer;
  font-family: 'Roboto';
  line-height: 40px;
}

.beta-label.mobile::before {
  margin-left: -15px;
}

.beta-label::before {
  padding-left: 10px;
  content: "";
}

.beta-label.mobile  {
  transform: rotate(45deg);
  right: 0px;
}

.beta-label {
  width: 300px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-45deg);
  transform-origin: bottom center;
  font-size: 28px;
  text-align: center;
  font-weight: bold;
  color: #d8d8d8;
  background: rgba(255, 215, 0, 0.5);
  border: 1px solid gold;
  padding: 8px;
  z-index: 11;
  pointer-events: auto;
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.6), 0 0 10px rgba(255, 215, 0, 0.4), 0 0 16px rgba(255, 215, 0, 0.2);
}

.beta-label:hover {
  color: white;
  animation: glow-pulse 1.2s infinite ease-in-out;
}
.beta-label.animate {
  animation: text-pulse 1.5s ease-in-out;
  animation-delay: 1s;
}
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.particles::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, transparent 70%) -15% 110%,
    radial-gradient(circle, rgba(173, 216, 255, 0.95) 0%, transparent 70%) 83% 120%,
    radial-gradient(circle, rgba(255, 255, 200, 0.9) 0%, transparent 70%) -8% 95%,
    radial-gradient(circle, rgba(200, 240, 255, 0.9) 0%, transparent 70%) 115% 105%,
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%) 42% 130%,
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, transparent 50%) -20% 80%,
    radial-gradient(circle, rgba(200, 230, 255, 0.9) 0%, transparent 40%) 125% 90%,
    radial-gradient(circle, rgba(255, 240, 200, 0.85) 0%, transparent 60%) 35% 135%,
    radial-gradient(circle, rgba(220, 240, 255, 0.9) 0%, transparent 55%) -25% 110%,
    radial-gradient(circle, rgba(255, 255, 230, 0.9) 0%, transparent 65%) 110% 70%,
    radial-gradient(circle, rgba(170, 220, 255, 0.85) 0%, transparent 65%) 20% 140%,
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 60%) -10% 75%,
    radial-gradient(circle, rgba(255, 250, 220, 0.85) 0%, transparent 75%) 130% 115%,
    radial-gradient(circle, rgba(210, 235, 255, 0.95) 0%, transparent 80%) 5% 125%,
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 75%) -30% 100%;
  background-repeat: no-repeat;
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px, 10px 10px, 5px 5px, 6px 6px, 8px 8px, 7px 7px, 11px 11px,
    10px 10px, 9px 9px, 14px 14px, 15px 15px, 12px 12px;
  filter: blur(0.5px);
  opacity: 0;
  animation-name: none;
}
.beta-label.animate .particles::before {
  animation-name: beam-sparkles;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes glow-pulse {
  0% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
  }
  100% {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
  }
}
@keyframes text-pulse {
  0% {
    color: #d8d8d8;
  }
  50% {
    color: gold;
  }
  100% {
    color: #d8d8d8;
  }
}
@keyframes beam-sparkles {
  0% {
    opacity: 1;
    background-position: -15% 110%, 83% 120%, -8% 95%, 115% 105%, 42% 130%, -20% 80%, 125% 90%, 35% 135%, -25% 110%,
      110% 70%, 20% 140%, -10% 75%, 130% 115%, 5% 125%, -30% 100%;
  }
  25% {
    background-position: 0% 90%, 75% 95%, 5% 85%, 100% 85%, 45% 100%, -5% 70%, 105% 75%, 40% 110%, -5% 90%, 95% 65%,
      25% 115%, 5% 70%, 110% 95%, 15% 100%, -10% 85%;
  }
  50% {
    background-position: 20% 70%, 65% 70%, 30% 70%, 80% 65%, 48% 75%, 20% 60%, 80% 60%, 45% 80%, 25% 70%, 75% 60%,
      40% 85%, 30% 65%, 85% 70%, 35% 75%, 15% 70%;
  }
  75% {
    background-position: 40% 55%, 55% 55%, 45% 60%, 65% 55%, 49% 60%, 40% 52%, 60% 52%, 48% 60%, 42% 55%, 58% 52%,
      45% 62%, 43% 53%, 62% 57%, 47% 58%, 38% 55%;
  }
  100% {
    opacity: 0;
    background-position: 50% 40%, 50% 42%, 50% 38%, 50% 45%, 50% 41%, 50% 35%, 50% 43%, 50% 39%, 50% 44%, 50% 37%,
      50% 46%, 50% 36%, 50% 47%, 50% 40%, 50% 38%;
  }
}