.vna4 {
  width: 100%;
  min-width: 0;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 104.08vw;
}

.vna4 *,
.vna4 *::before,
.vna4 *::after { box-sizing: border-box; }

.vna4__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 638 / 664;
  overflow: hidden;
  isolation: isolate;
  background: #050a11;
}

.vna4__miner {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.vna4__fan {
  position: absolute;
  z-index: 5;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(47%);
  mix-blend-mode: normal;
  opacity: .92;
  pointer-events: none;
}

.vna4__rotor {
  position: absolute;
  z-index: 1;
  inset: 3%;
  display: block;
  width: 94%;
  height: 94%;
  object-fit: contain;
  overflow: visible;
  opacity: .9;
  filter: brightness(.76) contrast(1.16) saturate(.72) drop-shadow(0 0 5px rgba(54,162,235,.4));
  animation: vna4-fan var(--speed) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

.vna4__fan::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 3%;
  background:
    radial-gradient(circle at 34% 30%, rgba(137,222,255,.62), rgba(35,157,238,.4) 38%, rgba(7,77,151,.24) 70%, rgba(3,41,91,.18));
  -webkit-mask: url("assets/fan-rotor.png") center / contain no-repeat;
  mask: url("assets/fan-rotor.png") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: .64;
  animation: vna4-fan var(--speed) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

.vna4__fan::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 5.5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 16%, rgba(139,218,255,.33) 23%, transparent 31% 62%, rgba(29,146,232,.28) 69%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 69%, #000 73% 78%, transparent 82%);
  mask-image: radial-gradient(circle, transparent 0 69%, #000 73% 78%, transparent 82%);
  filter: blur(1.2px);
  animation: vna4-fan calc(var(--speed) * 1.45) linear infinite reverse;
  animation-delay: var(--delay);
}

.vna4__grille-layer {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: .82;
  pointer-events: none;
}

.vna4__aura {
  position: absolute;
  z-index: 2;
  left: 47%;
  top: 52%;
  width: 92%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: .34;
  mix-blend-mode: screen;
  background:
    conic-gradient(from 18deg, transparent 0 16%, rgba(48,163,255,.22) 24%, transparent 34% 55%, rgba(119,215,255,.19) 64%, transparent 73% 88%, rgba(21,117,239,.2) 95%, transparent),
    radial-gradient(ellipse, transparent 48%, rgba(36,151,255,.12) 58%, transparent 71%);
  -webkit-mask-image: radial-gradient(ellipse, transparent 0 47%, #000 53% 68%, transparent 75%);
  mask-image: radial-gradient(ellipse, transparent 0 47%, #000 53% 68%, transparent 75%);
  filter: blur(2.8px);
  animation: vna4-aura 17s linear infinite;
  pointer-events: none;
}

.vna4__wave {
  position: absolute;
  z-index: 4;
  left: -12%;
  top: 4%;
  width: 116%;
  height: 91%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 68% 54% at 45% 50%, transparent 66%, rgba(88,194,255,.2) 68%, rgba(25,129,224,.08) 71%, transparent 75%),
    radial-gradient(ellipse 83% 68% at 48% 52%, transparent 70%, rgba(31,149,242,.15) 72%, transparent 77%);
  mix-blend-mode: screen;
  filter: blur(4px) drop-shadow(0 0 16px rgba(28,142,238,.3));
  opacity: .88;
  transform: rotate(-9deg) scale(.97);
  animation: vna4-wave 8.5s ease-in-out infinite;
  pointer-events: none;
}

.vna4__wave::before,
.vna4__wave::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.vna4__wave::before {
  inset: 8% -4% 43% 0;
  border: max(2px, .42cqw) solid rgba(102,207,255,.5);
  box-shadow:
    0 0 9px rgba(83,192,255,.72),
    0 0 24px rgba(20,123,235,.42),
    inset 0 0 14px rgba(107,216,255,.2);
  transform: rotate(-17deg);
  animation: vna4-orbit-top 9s ease-in-out infinite;
}

.vna4__wave::after {
  inset: 41% -7% 6% -2%;
  border: max(2px, .32cqw) solid rgba(42,158,248,.42);
  box-shadow:
    0 0 8px rgba(68,180,255,.62),
    0 0 22px rgba(18,109,225,.38),
    inset 0 0 12px rgba(70,185,255,.18);
  transform: rotate(13deg);
  animation: vna4-orbit-bottom 11s ease-in-out infinite reverse;
}

.vna4__energy {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.vna4__halo,
.vna4__outline,
.vna4__floor-line {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.vna4__halo {
  stroke: #168dff;
  stroke-width: 7;
  opacity: .19;
  filter: url(#vna4-blue-glow);
  animation: vna4-halo 6.8s ease-in-out infinite;
}

.vna4__outline {
  stroke: url(#vna4-blue-line);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .6;
  animation: vna4-line-breathe 5.6s ease-in-out infinite;
}

.vna4__floor-line {
  stroke: #35caff;
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: .4;
  filter: drop-shadow(0 0 7px rgba(23,157,255,.65));
  animation: vna4-line-breathe 6.8s ease-in-out infinite reverse;
}

.vna4__cooling {
  position: absolute;
  z-index: 4;
  left: 6%;
  top: 12%;
  width: 50%;
  height: 78%;
  opacity: .18;
  background: linear-gradient(90deg, transparent, rgba(54,176,255,.2) 50%, transparent);
  filter: blur(18px);
  transform: translateX(-125%) skewX(-8deg);
  mix-blend-mode: screen;
  animation: vna4-cooling 12s ease-in-out infinite;
  pointer-events: none;
}

.vna4__logo {
  position: absolute;
  z-index: 6;
  right: 2.8%;
  bottom: 1.8%;
  display: block;
  width: 32%;
  height: auto;
  opacity: .9;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(33,153,255,.45));
  pointer-events: none;
  user-select: none;
}

.vna4__frame {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #050a11 0%, rgba(5,10,17,.58) 4%, transparent 13% 76%, rgba(5,10,17,.32) 83%, #050a11 95%),
    linear-gradient(180deg, rgba(5,10,17,.72), transparent 10% 84%, rgba(5,10,17,.78)),
    radial-gradient(ellipse 92% 90% at 48% 48%, transparent 61%, rgba(3,8,15,.38) 83%, #050a11 100%);
  box-shadow: inset 0 0 64px rgba(5,10,17,.52);
}

@keyframes vna4-fan { to { transform: rotate(360deg); } }
@keyframes vna4-aura { to { transform: rotate(360deg); } }
@keyframes vna4-wave {
  0%,100% { transform: rotate(-9deg) scale(.97); opacity: .48; }
  50% { transform: rotate(-6deg) scale(1.025); opacity: .8; }
}

@keyframes vna4-orbit-top {
  0%,100% { transform: rotate(-17deg) scale(.97); opacity: .58; }
  50% { transform: rotate(-13deg) scale(1.03); opacity: 1; }
}

@keyframes vna4-orbit-bottom {
  0%,100% { transform: rotate(13deg) scale(.98); opacity: .5; }
  50% { transform: rotate(9deg) scale(1.025); opacity: .92; }
}

@keyframes vna4-halo {
  0%,100% { opacity: .12; }
  50% { opacity: .24; }
}

@keyframes vna4-line-breathe {
  0%,100% { opacity: .32; }
  50% { opacity: .72; }
}

@keyframes vna4-cooling {
  0%,20% { transform: translateX(-125%) skewX(-8deg); opacity: 0; }
  44% { opacity: .18; }
  70%,100% { transform: translateX(165%) skewX(-8deg); opacity: 0; }
}

.vna4[data-paused="true"] *,
.vna4[data-paused="true"] *::before,
.vna4[data-paused="true"] *::after { animation-play-state: paused !important; }

@media (max-width: 520px) {
  .vna4__logo { width: 36%; right: 1.5%; bottom: 1%; }
  .vna4__halo { stroke-width: 5; }
  .vna4__cooling { display: none; }
}

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