.auth-fluid-art {
  isolation: isolate;
  background: linear-gradient(135deg, #ff5b22 0%, #ff7b22 34%, #ff9d4a 67%, #ffc08f 100%);
  border-right-color: rgba(255, 255, 255, .08);
}

.auth-fluid-art::before,
.auth-fluid-art::after {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -2;
  border-radius: 42%;
  filter: blur(44px);
  will-change: transform;
}

.auth-fluid-art::before {
  background: conic-gradient(from 30deg, rgba(255, 244, 230, .64), rgba(255, 111, 22, .3), rgba(145, 35, 0, .3), rgba(255, 201, 139, .72), rgba(255, 244, 230, .64));
  animation: fluid-orbit 17s ease-in-out infinite alternate;
}

.auth-fluid-art::after {
  inset: 18% -28% -26% 10%;
  background: radial-gradient(circle at 28% 25%, rgba(255, 238, 216, .8), transparent 25%), radial-gradient(circle at 70% 62%, rgba(255, 72, 0, .62), transparent 38%);
  animation: fluid-drift 13s ease-in-out infinite alternate;
}

.auth-fluid-blob {
  position: absolute;
  z-index: -1;
  border-radius: 48% 52% 56% 44% / 45% 38% 62% 55%;
  filter: blur(20px);
  mix-blend-mode: soft-light;
  will-change: transform;
}

.auth-fluid-blob-one {
  width: 58%;
  aspect-ratio: 1;
  left: -9%;
  top: 8%;
  background: rgba(255, 234, 205, .78);
  animation: blob-one 11s ease-in-out infinite alternate;
}

.auth-fluid-blob-two {
  width: 63%;
  aspect-ratio: 1;
  right: -14%;
  bottom: -9%;
  background: rgba(201, 54, 0, .62);
  animation: blob-two 15s ease-in-out infinite alternate;
}

.auth-fluid-blob-three {
  width: 42%;
  aspect-ratio: 1;
  right: 14%;
  top: 18%;
  background: rgba(255, 153, 73, .75);
  animation: blob-three 9s ease-in-out infinite alternate;
}

.auth-fluid-grain {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  pointer-events: none;
}

.auth-fluid-brand {
  position: absolute;
  left: clamp(34px, 6vw, 86px);
  bottom: clamp(34px, 6vw, 78px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px 14px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(72, 19, 0, .28);
}

.auth-fluid-brand img {
  position: static;
  width: 72px;
  height: 44px;
  grid-row: 1 / 3;
  object-fit: contain;
  animation: none;
  filter: drop-shadow(0 8px 18px rgba(75, 21, 0, .22));
}

.auth-fluid-brand span {
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 650;
  letter-spacing: .12em;
}

.auth-fluid-brand small {
  font-size: 13px;
  font-weight: 450;
  letter-spacing: .025em;
  opacity: .84;
}

@keyframes fluid-orbit {
  from { transform: translate3d(-3%, -2%, 0) rotate(-7deg) scale(1); }
  to { transform: translate3d(5%, 3%, 0) rotate(16deg) scale(1.08); }
}

@keyframes fluid-drift {
  from { transform: translate3d(1%, -5%, 0) rotate(4deg); }
  to { transform: translate3d(-7%, 6%, 0) rotate(-12deg) scale(1.12); }
}

@keyframes blob-one { to { transform: translate3d(16%, 11%, 0) rotate(18deg) scale(.9); } }
@keyframes blob-two { to { transform: translate3d(-15%, -12%, 0) rotate(-15deg) scale(1.08); } }
@keyframes blob-three { to { transform: translate3d(7%, 18%, 0) rotate(24deg) scale(1.14); } }

@media (prefers-reduced-motion: reduce) {
  .auth-fluid-art::before,
  .auth-fluid-art::after,
  .auth-fluid-blob { animation: none; }
}