/* ============================================================
   noise.css — compiled from scss/noise.scss
   (sass --style=expanded). Edit the .scss, not this file.
   ============================================================ */
.noise {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #18344b;
  isolation: isolate;
}

.noise__field {
  position: absolute;
  inset: -20%;
  filter: blur(66px) saturate(1.18);
}

.noise__warp {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
.noise__warp--a { animation: warp-cw 128s linear infinite; }
.noise__warp--b { animation: warp-ccw 167s linear infinite; }

.noise__blob {
  position: absolute;
  will-change: transform;
}

/* warp A — blobs 1–4 */
.noise__warp--a .noise__blob:nth-child(1) {
  top: 6%; left: 14%; width: 80vmax; height: 80vmax;
  background: radial-gradient(circle at center, #6e9ab9 0%, rgba(110,154,185,0) 64%);
  opacity: 0.55;
  animation: drift-a 34s ease-in-out 0s infinite;
}
.noise__warp--a .noise__blob:nth-child(2) {
  top: 60%; left: 70%; width: 66vmax; height: 66vmax;
  background: radial-gradient(circle at center, #45708f 0%, rgba(69,112,143,0) 64%);
  opacity: 0.58;
  animation: drift-b 41s ease-in-out -9s infinite;
}
.noise__warp--a .noise__blob:nth-child(3) {
  top: 34%; left: 48%; width: 94vmax; height: 94vmax;
  background: radial-gradient(circle at center, #3f5795 0%, rgba(63,87,149,0) 64%);
  opacity: 0.42;
  animation: drift-c 29s ease-in-out -18s infinite;
}
.noise__warp--a .noise__blob:nth-child(4) {
  top: 80%; left: 18%; width: 72vmax; height: 72vmax;
  background: radial-gradient(circle at center, #345e7f 0%, rgba(52,94,127,0) 64%);
  opacity: 0.52;
  animation: drift-d 47s ease-in-out -5s infinite;
}

/* warp B — blobs 5–7 */
.noise__warp--b .noise__blob:nth-child(1) {
  top: 4%; left: 78%; width: 58vmax; height: 58vmax;
  background: radial-gradient(circle at center, #6e9ab9 0%, rgba(110,154,185,0) 64%);
  opacity: 0.48;
  animation: drift-e 38s ease-in-out -23s infinite;
}
.noise__warp--b .noise__blob:nth-child(2) {
  top: 56%; left: 38%; width: 52vmax; height: 52vmax;
  background: radial-gradient(circle at center, #c9a36b 0%, rgba(201,163,107,0) 64%);
  opacity: 0.3;
  animation: drift-f 44s ease-in-out -31s infinite;
}
.noise__warp--b .noise__blob:nth-child(3) {
  top: 26%; left: 62%; width: 86vmax; height: 86vmax;
  background: radial-gradient(circle at center, #234c6e 0%, rgba(35,76,110,0) 64%);
  opacity: 0.55;
  animation: drift-g 31s ease-in-out -12s infinite;
}

.noise__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 14%, rgba(255,255,255,0.1), rgba(255,255,255,0) 46%),
    radial-gradient(130% 120% at 50% 60%, rgba(0,0,0,0) 52%, rgba(8,18,28,0.55) 100%);
}

.noise__grain {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background-image: url("grain.png");
  background-size: 220px 220px;
  opacity: 0.55;
  animation: grain-drift 5.4s steps(6) infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(7vmax, -5vmax) scale(1.16) rotate(16deg); }
  66% { transform: translate(-5vmax, 6vmax) scale(0.95) rotate(-12deg); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(-7vmax, 4vmax) scale(0.9) rotate(-22deg); }
  66% { transform: translate(6vmax, -4vmax) scale(1.18) rotate(14deg); }
}
@keyframes drift-c {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(5vmax, 6vmax) scale(1.2) rotate(10deg); }
  66% { transform: translate(-6vmax, -5vmax) scale(0.92) rotate(-16deg); }
}
@keyframes drift-d {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(-5vmax, -6vmax) scale(0.96) rotate(-14deg); }
  66% { transform: translate(7vmax, 3vmax) scale(1.14) rotate(20deg); }
}
@keyframes drift-e {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(8vmax, 3vmax) scale(1.1) rotate(24deg); }
  66% { transform: translate(-4vmax, 7vmax) scale(0.9) rotate(-10deg); }
}
@keyframes drift-f {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(-6vmax, -4vmax) scale(1.25) rotate(-18deg); }
  66% { transform: translate(5vmax, 5vmax) scale(0.94) rotate(12deg); }
}
@keyframes drift-g {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(4vmax, -7vmax) scale(0.92) rotate(16deg); }
  66% { transform: translate(-7vmax, 4vmax) scale(1.16) rotate(-20deg); }
}
@keyframes warp-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes warp-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes grain-drift {
  0% { background-position: 0 0; }
  100% { background-position: 220px 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .noise__warp, .noise__blob, .noise__grain { animation: none !important; }
}