.beup-login-visual-host {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: #fff !important;
}

.beup-login-visual-host > .v-img__img,
.beup-login-visual-host > .v-img__picture,
.beup-login-visual-host > .v-img__placeholder,
.beup-login-visual-host > .v-img__error {
  opacity: 0 !important;
  visibility: hidden !important;
}

.v-img:has(> #beup-login-visual-v1) img[alt="banner"] {
  opacity: 0 !important;
  visibility: hidden !important;
}

.beup-login-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
  user-select: none;
}

.beup-login-visual img {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.beup-login-visual__stage-wrap {
  position: absolute;
  inset: -0.8%;
  overflow: hidden;
}

.beup-login-visual__stage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.008);
  transform-origin: 50% 52%;
  filter: brightness(1.075) contrast(1.055) saturate(1.02);
  animation: beup-stage-breathe 16s ease-in-out infinite;
  will-change: transform, filter;
}

.beup-login-visual__flow {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

.beup-login-visual__particle {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(18px, 3.2%, 30px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  filter: saturate(1.2) brightness(1.03);
  will-change: left, top, opacity, transform;
}

.beup-login-visual__particle--cloud {
  animation: beup-flow-cloud 6.8s linear -0.8s infinite;
}

.beup-login-visual__particle--globe {
  animation: beup-flow-globe 5.9s linear -2.2s infinite;
}

.beup-login-visual__particle--building {
  animation: beup-flow-building 7.2s linear -4.1s infinite;
}

.beup-login-visual__particle--antenna {
  animation: beup-flow-antenna 5.6s linear -1.4s infinite;
}

.beup-login-visual__particle--shield {
  animation: beup-flow-shield 7.6s linear -5.2s infinite;
}

.beup-login-visual__particle--server {
  animation: beup-flow-server 6.3s linear -3.4s infinite;
}

.beup-login-visual__particle--user {
  animation: beup-flow-user 7s linear -2.8s infinite;
}

.beup-login-visual__particle--trail-a {
  animation-delay: -4.2s;
  width: clamp(14px, 2.3%, 22px);
}

.beup-login-visual__particle--trail-b {
  animation-delay: -0.5s;
  width: clamp(14px, 2.3%, 22px);
}

.beup-login-visual__particle--trail-c {
  animation-delay: -1.4s;
  width: clamp(14px, 2.3%, 22px);
}

.beup-login-visual__core {
  position: absolute;
  left: 50%;
  top: 47.2%;
  z-index: 3;
  width: 41.2%;
  aspect-ratio: 900 / 733;
  transform: translate(-50%, -47%);
  transform-origin: 50% 55%;
  animation: beup-core-float 7.2s ease-in-out infinite;
  will-change: transform, filter;
}

.beup-login-visual__core-disk,
.beup-login-visual__core-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.beup-login-visual__core-disk {
  z-index: 2;
  filter: saturate(1.02) contrast(1.01);
}

.beup-login-visual__core-glow {
  z-index: 1;
  opacity: 0.18;
  filter: blur(15px) saturate(1.25);
  transform: scale(1.018);
  animation: beup-core-glow 4.8s ease-in-out infinite;
}

.beup-login-visual__core-logo {
  position: absolute;
  left: 50%;
  top: 38.8%;
  z-index: 4;
  width: 52%;
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
}

.beup-login-visual__core-shadow {
  position: absolute;
  left: 50%;
  top: 54.1%;
  z-index: 2;
  width: 38%;
  aspect-ratio: 900 / 733;
  transform: translate(-50%, -50%) scaleX(0.88) scaleY(0.22);
  transform-origin: center;
  opacity: 0.12;
  filter: brightness(0) blur(18px);
  animation: beup-shadow-breathe 7.2s ease-in-out infinite;
  will-change: transform, opacity;
}

.beup-login-visual__core-shadow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes beup-stage-breathe {
  0%, 100% {
    transform: scale(1.008) translate3d(0, 0, 0);
    filter: brightness(1.075) contrast(1.055) saturate(1.02);
  }
  50% {
    transform: scale(1.017) translate3d(-0.25%, -0.35%, 0);
    filter: brightness(1.085) contrast(1.055) saturate(1.04);
  }
}

@keyframes beup-flow-cloud {
  0% { left: 17.8%; top: 24.2%; opacity: 0; transform: translate(-50%, -50%) scale(0.58); }
  14% { opacity: 0.96; }
  25% { left: 24%; top: 28%; }
  50% { left: 30.5%; top: 33%; }
  75% { left: 35.2%; top: 38.2%; }
  88% { opacity: 0.95; }
  100% { left: 39%; top: 43.5%; opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes beup-flow-globe {
  0% { left: 50.2%; top: 11.5%; opacity: 0; transform: translate(-50%, -50%) scale(0.58); }
  14% { opacity: 0.96; }
  25% { left: 50.1%; top: 18%; }
  50% { left: 50%; top: 24.7%; }
  75% { left: 49.9%; top: 31%; }
  88% { opacity: 0.95; }
  100% { left: 49.8%; top: 36.8%; opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes beup-flow-building {
  0% { left: 82.1%; top: 25.2%; opacity: 0; transform: translate(-50%, -50%) scale(0.58); }
  14% { opacity: 0.96; }
  25% { left: 76%; top: 28.3%; }
  50% { left: 70.9%; top: 32.3%; }
  75% { left: 66.4%; top: 37.4%; }
  88% { opacity: 0.95; }
  100% { left: 62.8%; top: 43.2%; opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes beup-flow-antenna {
  0% { left: 87.2%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.58); }
  14% { opacity: 0.96; }
  25% { left: 82%; top: 50.2%; }
  50% { left: 76.3%; top: 49.7%; }
  75% { left: 70.8%; top: 49.5%; }
  88% { opacity: 0.95; }
  100% { left: 65.6%; top: 50.2%; opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes beup-flow-shield {
  0% { left: 75%; top: 75%; opacity: 0; transform: translate(-50%, -50%) scale(0.58); }
  14% { opacity: 0.96; }
  25% { left: 72%; top: 70.2%; }
  50% { left: 68.5%; top: 66.1%; }
  75% { left: 65%; top: 62.9%; }
  88% { opacity: 0.95; }
  100% { left: 61.5%; top: 59.8%; opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes beup-flow-server {
  0% { left: 41.8%; top: 81.2%; opacity: 0; transform: translate(-50%, -50%) scale(0.58); }
  14% { opacity: 0.96; }
  25% { left: 44.1%; top: 76.1%; }
  50% { left: 46.5%; top: 71%; }
  75% { left: 48.8%; top: 66.8%; }
  88% { opacity: 0.95; }
  100% { left: 51%; top: 62.7%; opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes beup-flow-user {
  0% { left: 10.8%; top: 61%; opacity: 0; transform: translate(-50%, -50%) scale(0.58); }
  14% { opacity: 0.96; }
  25% { left: 17.2%; top: 60.3%; }
  50% { left: 24%; top: 59%; }
  75% { left: 30.7%; top: 57.2%; }
  88% { opacity: 0.95; }
  100% { left: 36.3%; top: 54.2%; opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes beup-core-float {
  0%, 100% {
    transform: translate(-50%, -47%) translateY(3px) rotate(-0.06deg);
    filter: brightness(1);
  }
  50% {
    transform: translate(-50%, -47%) translateY(-10px) rotate(0.06deg);
    filter: brightness(1.025);
  }
}

@keyframes beup-core-glow {
  0%, 100% { opacity: 0.12; transform: scale(1.012); }
  50% { opacity: 0.24; transform: scale(1.032); }
}

@keyframes beup-shadow-breathe {
  0%, 100% {
    opacity: 0.12;
    transform: translate(-50%, -50%) scaleX(0.88) scaleY(0.22);
  }
  50% {
    opacity: 0.07;
    transform: translate(-50%, -50%) scaleX(0.74) scaleY(0.18);
  }
}

@media (max-width: 959.98px) {
  .beup-login-visual {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beup-login-visual *,
  .beup-login-visual *::before,
  .beup-login-visual *::after {
    animation: none !important;
  }

  .beup-login-visual__stage {
    transform: scale(1.008) !important;
    filter: brightness(1.075) contrast(1.055) saturate(1.02) !important;
  }

  .beup-login-visual__core {
    transform: translate(-50%, -47%) !important;
    filter: none !important;
  }

  .beup-login-visual__core-shadow {
    transform: translate(-50%, -50%) scaleX(0.82) scaleY(0.2) !important;
  }
}