/* Template 25 - XEX Deep Space: Floating particles + radial blue glow */

@keyframes deepSpaceFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}

@keyframes deepSpacePulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.15); }
}

@keyframes deepSpaceTwinkle {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

.profile-preview {
  position: relative;
  overflow: hidden;
}

/* Central radial blue glow */
.profile-preview::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  width: 120%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(30, 100, 220, 0.25) 0%,
    rgba(15, 60, 160, 0.12) 30%,
    transparent 65%);
  animation: deepSpacePulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Secondary glow - bottom accent */
.profile-preview::after {
  content: "";
  position: absolute;
  bottom: -10%;
  left: 50%;
  width: 80%;
  height: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(0, 150, 255, 0.15) 0%,
    transparent 60%);
  animation: deepSpacePulse 8s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 1;
}

.profile-container {
  z-index: 10;
}

/* Floating particle stars via box-shadows on btn pseudo-elements */
.btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(30, 100, 220, 0.15);
  transition: all 0.3s ease;
}

.btn:hover {
  box-shadow: 0 0 30px rgba(30, 100, 220, 0.3), 0 0 60px rgba(30, 100, 220, 0.1);
  background-color: rgba(30, 100, 220, 0.15) !important;
}

.profile-header {
  text-shadow: 0 0 20px rgba(100, 180, 255, 0.4);
}