/* ========================================================= */
/*                      AURORA BACKGROUND                    */
/* ========================================================= */

/* Base container aurora */
.aurora {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Kunci ukuran viewport dinamis mobile/tablet */
  z-index: -2;
  display: block;
  background: linear-gradient(180deg, #02020a 0%, #020317 100%);
  overflow: hidden;
  contain: strict; /* Isolasi total layout dari DOM utama */
  pointer-events: none;
}

/* Layer blob bersama */
.aurora::before,
.aurora::after,
.aurora .mid {
  content: '';
  position: absolute;
  inset: -15%;
  transform-origin: center;
  /* Filter diletakkan statis di sini, bukan di dalam @keyframes */
  filter: blur(55px) saturate(130%);
  mix-blend-mode: screen;
  opacity: 0.85;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translateZ(0); /* Akselerasi hardware GPU */
}

/* Aurora Layer 1 (Kiri Atas & Kanan Bawah) */
.aurora::before {
  background:
    radial-gradient(
      60% 40% at 20% 30%,
      rgba(86, 240, 193, 0.85),
      transparent 30%
    ),
    radial-gradient(
      50% 30% at 80% 70%,
      rgba(153, 102, 255, 0.7),
      transparent 30%
    );
  animation: floatAurora1 18s ease-in-out infinite alternate;
}

/* Aurora Layer 2 (Bagian Tengah) */
.aurora .mid {
  background:
    radial-gradient(
      50% 50% at 50% 40%,
      rgba(255, 170, 120, 0.75),
      transparent 25%
    ),
    radial-gradient(
      55% 35% at 30% 70%,
      rgba(120, 200, 255, 0.6),
      transparent 25%
    );
  animation: floatAurora2 22s ease-in-out infinite alternate;
}

/* Aurora Layer 3 (Kanan Atas & Kiri Bawah) */
.aurora::after {
  background:
    radial-gradient(
      45% 40% at 70% 20%,
      rgba(160, 255, 200, 0.7),
      transparent 25%
    ),
    radial-gradient(
      60% 40% at 10% 80%,
      rgba(200, 120, 255, 0.55),
      transparent 28%
    );
  animation: floatAurora3 26s ease-in-out infinite alternate;
}

/* ========================================================= */
/*                         NOISE LAYER                       */
/* ========================================================= */

.noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.02'/></svg>");
  mix-blend-mode: overlay;
  contain: strict;
}

/* ========================================================= */
/*                         ANIMASI GPU                       */
/* ========================================================= */

/* Menggunakan transform murni untuk performa 60-120 FPS tanpa flicker */
@keyframes floatAurora1 {
  0% {
    transform: translate3d(-3%, -2%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(3%, 3%, 0) rotate(4deg);
  }
}

@keyframes floatAurora2 {
  0% {
    transform: translate3d(2%, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-3%, 4%, 0) scale(1.04);
  }
}

@keyframes floatAurora3 {
  0% {
    transform: translate3d(0%, 3%, 0);
    opacity: 0.7;
  }
  100% {
    transform: translate3d(-4%, -2%, 0);
    opacity: 0.9;
  }
}