/* 배경 오로라 — 플러그인 페이지에서 계승하되 filter는 애니메이트하지 않는다.
   블러 재계산이 매 프레임 일어나면 물리 전환의 프레임 예산을 갉아먹는다(설계서 §4-6). */

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: aurora-boot-in 1600ms ease-out 80ms forwards;
}

@keyframes aurora-boot-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora { opacity: 1; animation: none; }
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  opacity: .55;
  filter: blur(90px);
  will-change: transform;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
}

.aurora-blob-1 {
  width: 620px; height: 620px;
  top: -220px; left: -140px;
  animation: drift-1 24s ease-in-out infinite;
}

.aurora-blob-2 {
  width: 540px; height: 540px;
  top: 12%; right: -180px;
  animation: drift-2 30s ease-in-out infinite;
}

/* 2·3번 블롭은 --glow-2(보조 색조)를 써서 구간 배경이 단색 워시로 읽히지 않게 한다 */
.aurora-blob-3 {
  width: 700px; height: 700px;
  bottom: -300px; left: 30%;
  background: radial-gradient(circle, var(--glow-2) 0%, transparent 70%);
  animation: drift-3 36s ease-in-out infinite;
}

.aurora-blob-4 {
  width: 460px; height: 460px;
  bottom: 6%; right: 6%;
  background: radial-gradient(circle, var(--glow-2) 0%, transparent 70%);
  animation: drift-4 20s ease-in-out infinite;
}

@keyframes drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(70px, 60px, 0) scale(1.12); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-80px, 50px, 0) scale(.94); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(50px, -70px, 0) scale(1.1); }
}
@keyframes drift-4 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-40px, 40px, 0) scale(1.08); }
}

/* 경계를 밀어붙이는 동안 부풀어 오르는 중앙 글로우 — stage.js가 매 프레임
   --tension-glow(0~1)·--tension-scale을 :root에 쓴다. 저항 지표 하나만 반응하던
   전환의 무게감을 배경 전체로 확장한다(사용자 지시). transform·opacity만 쓴다. */
.aurora-core {
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 60%, transparent) 0%, transparent 60%);
  opacity: var(--tension-glow, 0);
  transform: scale(var(--tension-scale, 1));
  will-change: transform, opacity;
}

/* 아주 옅은 격자 — 평면적인 배경에 질감만 준다. 정적이라 비용이 없다 */
.aurora-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(128, 128, 128, var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 128, 128, var(--grid-alpha)) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
}

@media (max-width: 767px) {
  .aurora-blob-3, .aurora-blob-4 { display: none; }
  .aurora-blob { filter: blur(60px); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none; }
  .aurora-core { display: none; }
}