/* 로그인 페이지 화려한 애니메이션 및 스타일 */
.login-bg-anim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* place behind UI but above background images */
  pointer-events: none;
  overflow: hidden;
  visibility: hidden; /* hide until page load */
}

.login-bg-anim.bg-active {
  visibility: visible;
}

.login-bg-anim .bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06; /* slightly more transparent baseline (halved) */
  /* animation name can be overridden per-element via --bubble-anim */
  animation-name: var(--bubble-anim, bubbleMoveFull);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused; /* start paused until bg-active */
  will-change: transform, opacity;
  filter: blur(4px) drop-shadow(0 8px 20px rgba(255, 255, 255, 0.04));
  /* glossy look: subtle inner highlight and light outer sheen */
  background-blend-mode: screen;
  box-shadow: inset 0 -6px 22px rgba(255, 255, 255, 0.06),
    0 4px 18px rgba(255, 255, 255, 0.02);
  /* smoother rendering on transform-heavy elements */
  backface-visibility: hidden;
  /* ensure the animation's 0% styles apply before it runs so bubbles start off-screen */
  animation-fill-mode: both;
}

/* glossy cap for each bubble */
.login-bg-anim .bubble::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 50%;
  top: 6%;
  height: 36%;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.02)
  );
  mix-blend-mode: screen;
  opacity: 0.33;
  pointer-events: none;
  transform: translateY(-6%);
}

.login-bg-anim.bg-active .bubble {
  animation-play-state: running;
}
@keyframes bubbleMove {
  /* element's static position should be just below viewport; start translate at 0 */
  0% {
    transform: translateY(0vh) scale(0.26) translateX(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    transform: translateY(calc(var(--bubble-travel, 1) * -40vh)) scale(0.5)
      translateX(calc(var(--bubble-extra-x, 12px) * 0.66)) rotate(1deg);
    opacity: 0.04;
  }
  40% {
    transform: translateY(calc(var(--bubble-travel, 1) * -80vh)) scale(0.76)
      translateX(calc(var(--bubble-extra-x, 12px) * 1.2)) rotate(1.5deg);
    opacity: 0.12;
  }
  60% {
    transform: translateY(calc(var(--bubble-travel, 1) * -100vh)) scale(0.95)
      translateX(calc(var(--bubble-extra-x, 12px) * 1.66)) rotate(2deg);
    opacity: 0.15;
  }
  80% {
    transform: translateY(calc(var(--bubble-travel, 1) * -120vh)) scale(1.03)
      translateX(calc(var(--bubble-extra-x, 12px) * 2.5)) rotate(3deg);
    opacity: 0.08;
  }
  100% {
    /* off-screen beyond viewport so bubble fades after fully leaving */
    transform: translateY(calc(var(--bubble-travel, 1) * -140vh)) scale(1.08)
      translateX(calc(var(--bubble-extra-x, 12px) * 3.33)) rotate(6deg);
    opacity: 0;
  }
}

/* full-travel: bubble rises and stays visible until off-screen */
@keyframes bubbleMoveFull {
  0% {
    transform: translateY(0vh) scale(0.26) translateX(0) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: translateY(calc(var(--bubble-travel, 1) * -40vh)) scale(0.5)
      translateX(calc(var(--bubble-extra-x, 12px) * 0.66)) rotate(1deg);
    opacity: 0.12;
  }
  50% {
    transform: translateY(calc(var(--bubble-travel, 1) * -80vh)) scale(0.76)
      translateX(calc(var(--bubble-extra-x, 12px) * 1.2)) rotate(1.5deg);
    opacity: 0.28;
  }
  75% {
    transform: translateY(calc(var(--bubble-travel, 1) * -110vh)) scale(0.95)
      translateX(calc(var(--bubble-extra-x, 12px) * 1.66)) rotate(2deg);
    opacity: 0.22;
  }
  100% {
    transform: translateY(calc(var(--bubble-travel, 1) * -140vh)) scale(1.08)
      translateX(calc(var(--bubble-extra-x, 12px) * 3.33)) rotate(6deg);
    opacity: 0;
  }
}

/* short-travel: bubble fades earlier (disappears mid-air) */
@keyframes bubbleMoveShort {
  0% {
    transform: translateY(0vh) scale(0.26) translateX(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    transform: translateY(calc(var(--bubble-travel, 1) * -28vh)) scale(0.45)
      translateX(calc(var(--bubble-extra-x, 12px) * 0.8)) rotate(1deg);
    opacity: 0.12;
  }
  45% {
    transform: translateY(calc(var(--bubble-travel, 1) * -52vh)) scale(0.66)
      translateX(calc(var(--bubble-extra-x, 12px) * 1.3)) rotate(1.6deg);
    opacity: 0.28;
  }
  70% {
    transform: translateY(calc(var(--bubble-travel, 1) * -68vh)) scale(0.82)
      translateX(calc(var(--bubble-extra-x, 12px) * 1.9)) rotate(2deg);
    opacity: 0.12;
  }
  100% {
    transform: translateY(calc(var(--bubble-travel, 1) * -78vh)) scale(0.9)
      translateX(calc(var(--bubble-extra-x, 12px) * 2.1)) rotate(3deg);
    opacity: 0;
  }
}

/* helpers to vary bubble motion via inline style durations/delays */
.login-bg-anim .bubble.small {
  /* small bubbles move slightly quicker but keep linear feel */
  animation-timing-function: linear;
}
.login-bg-anim .bubble.medium {
  animation-timing-function: linear;
}
.login-bg-anim .bubble.large {
  animation-timing-function: linear;
}

/* add soft halo for larger bubbles */
.login-bg-anim .bubble.halo::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.06),
    transparent 30%
  );
  filter: blur(12px);
  opacity: 0.85;
  pointer-events: none;
}

/* aurora layer */
.login-bg-anim .aurora {
  position: absolute;
  inset: -10% -10% -10% -10%;
  background: radial-gradient(
      40% 60% at 10% 20%,
      rgba(255, 200, 100, 0.06),
      transparent 8%
    ),
    radial-gradient(50% 70% at 80% 80%, rgba(0, 200, 255, 0.06), transparent 9%),
    linear-gradient(180deg, rgba(20, 10, 30, 0.6), rgba(10, 6, 20, 0.6));
  filter: blur(36px) contrast(1.05) saturate(1.2);
  transform: translateZ(0);
  animation: auroraShift 8s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes auroraShift {
  0% {
    transform: translateX(-6%) translateY(0) scale(1);
  }
  50% {
    transform: translateX(6%) translateY(-2%) scale(1.02);
  }
  100% {
    transform: translateX(-6%) translateY(0) scale(1);
  }
}

/* subtle grain overlay for richness */
.login-bg-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 4 4"><rect width="4" height="4" fill="rgba(0,0,0,0)"/><circle cx="1" cy="1" r="0.4" fill="rgba(0,0,0,0.02)"/></svg>');
  opacity: 0.02;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* sparkle layer (tiny fast particles) */
.login-bg-anim .sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: radial-gradient(
      circle at 10% 20%,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 2px
    );
  background-size: 60px 60px, 90px 90px;
  opacity: 0.9;
  mix-blend-mode: screen;
  filter: blur(2px) saturate(1.1);
  animation: sparkShift 6.5s linear infinite;
}

@keyframes sparkShift {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-6px) translateX(8px) scale(1.02);
    opacity: 0.95;
  }
  100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.9;
  }
}

/* bubble pulse & sway */
.login-bg-anim .bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.14),
    transparent 40%
  );
  mix-blend-mode: screen;
  opacity: 0.6;
  transform-origin: center;
  /* make pulse linear so it doesn't introduce eased pauses */
  animation: bubblePulse 6s linear infinite;
}

/* fade-in helper used when a bubble is introduced from the pool */
.login-bg-anim .bubble.fade-in {
  animation: none; /* animation properties remain, we only use opacity transition */
  opacity: 0;
  transition: opacity 550ms ease-in;
}
.login-bg-anim .bubble.fade-in.show {
  opacity: 0.14; /* target baseline for a glossy bubble; JS will adjust actual opacity */
}

@keyframes bubblePulse {
  /* subtle continuous pulse without easing slowdowns */
  0% {
    transform: scale(1) translateY(0);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.03) translateY(-3px);
    opacity: 0.98;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 0.92;
  }
}

/* bubbleMove includes subtle sway in its keyframes now; no separate sway animation */

/* ensure login-card and UI are above the animation */
.login-card {
  position: relative;
  z-index: 3;
}

.login-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18), 0 1.5px 8px 0 #00c6ff44;
  border-radius: 18px;
  padding: 36px 28px 28px 28px;
  overflow: visible;
  animation: cardPop 0.7s cubic-bezier(0.4, 2, 0.6, 1) 0.1s both;
}
@keyframes cardPop {
  0% {
    transform: scale(0.85) translateY(40px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.login-card .login-btn:hover,
.login-card .register-btn:hover {
  transform: scale(1.07);
  box-shadow: 0 4px 16px #00c6ff55;
}

.login-card .glow {
  text-shadow: 0 0 8px #00c6ff, 0 0 16px #0072ff;
  color: #007bff;
  font-weight: bold;
  font-size: 2.1rem;
  margin-bottom: 18px;
  letter-spacing: 2px;
  animation: glowPulse 2.2s infinite alternate;
}
@keyframes glowPulse {
  0% {
    text-shadow: 0 0 8px #00c6ff, 0 0 16px #0072ff;
  }
  100% {
    text-shadow: 0 0 24px #00c6ff, 0 0 48px #0072ff;
  }
}

.login-card .input-anim {
  position: relative;
  overflow: visible;
}
.login-card .input-anim::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%);
  border-radius: 2px;
  opacity: 0.7;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.login-card input:focus + .input-anim::after {
  transform: scaleX(1);
}