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

.mf__scene {
  position: relative;
  width: 100%;
  aspect-ratio: var(--mf-aspect);
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  background: #050506;
}

.mf__world,
.mf__media,
.mf__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.mf__media img {
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.mf__fan {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%) rotate(var(--angle));
  overflow: hidden;
  border-radius: 50%;
  clip-path: ellipse(48% 48% at 50% 50%);
  opacity: var(--opacity);
  pointer-events: none;
}

.mf__fan-blades,
.mf__fan-sheen {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.mf__fan-blades {
  inset: 5%;
  opacity: .66;
  background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23434a50'/%3E%3Cstop offset='.24' stop-color='%231a1e22'/%3E%3Cstop offset='.76' stop-color='%2307090b'/%3E%3Cstop offset='1' stop-color='%232a3035'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%23656d73' stroke-opacity='.38' stroke-width='.7'%3E%3Cpath d='M52 48C56 30 67 16 84 10C84 29 75 44 58 54C55 53 53 51 52 48Z'/%3E%3Cpath transform='rotate(51.43 50 50)' d='M52 48C56 30 67 16 84 10C84 29 75 44 58 54C55 53 53 51 52 48Z'/%3E%3Cpath transform='rotate(102.86 50 50)' d='M52 48C56 30 67 16 84 10C84 29 75 44 58 54C55 53 53 51 52 48Z'/%3E%3Cpath transform='rotate(154.29 50 50)' d='M52 48C56 30 67 16 84 10C84 29 75 44 58 54C55 53 53 51 52 48Z'/%3E%3Cpath transform='rotate(205.71 50 50)' d='M52 48C56 30 67 16 84 10C84 29 75 44 58 54C55 53 53 51 52 48Z'/%3E%3Cpath transform='rotate(257.14 50 50)' d='M52 48C56 30 67 16 84 10C84 29 75 44 58 54C55 53 53 51 52 48Z'/%3E%3Cpath transform='rotate(308.57 50 50)' d='M52 48C56 30 67 16 84 10C84 29 75 44 58 54C55 53 53 51 52 48Z'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='16' fill='%23111519' stroke='%234d565d' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='5' fill='%23050708'/%3E%3C/svg%3E");
  animation: mf-spin var(--speed) linear infinite;
  animation-delay: var(--delay);
  animation-direction: var(--direction);
  will-change: rotate;
}

.mf__fan-sheen {
  inset: 8%;
  opacity: .18;
  mix-blend-mode: screen;
  background: conic-gradient(from 90deg, transparent 0 39%, rgba(216,241,255,.42) 47%, rgba(79,178,255,.22) 51%, transparent 59% 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 25%, #000 31% 73%, transparent 80%);
  mask-image: radial-gradient(circle, transparent 0 25%, #000 31% 73%, transparent 80%);
  animation: mf-spin calc(var(--speed) * 1.7) linear infinite reverse;
  animation-delay: var(--delay);
}

@keyframes mf-spin {
  to { rotate: 360deg; }
}

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

.mf[data-calibrate="true"] .mf__scene {
  overflow: visible;
  background-image:
    repeating-linear-gradient(to right, rgba(74,149,255,.22) 0 1px, transparent 1px 5%),
    repeating-linear-gradient(to bottom, rgba(74,149,255,.22) 0 1px, transparent 1px 5%);
}

.mf[data-calibrate="true"] .mf__fan {
  overflow: visible;
  outline: 2px solid rgba(74,149,255,.95);
  clip-path: none;
  mix-blend-mode: normal;
}

.mf[data-calibrate="true"] .mf__fan::before,
.mf[data-calibrate="true"] .mf__fan::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  background: #4a95ff;
  transform: translate(-50%, -50%);
}

.mf[data-calibrate="true"] .mf__fan::before { width: 100%; height: 1px; }
.mf[data-calibrate="true"] .mf__fan::after { width: 1px; height: 100%; }

.mf[data-calibrate="true"] .mf__fan-label {
  position: absolute;
  z-index: 6;
  left: 0;
  top: -24px;
  display: block;
  padding: 3px 6px;
  color: white;
  background: rgba(8,18,34,.88);
  border: 1px solid #4a95ff;
  border-radius: 4px;
  font: 600 11px/1.2 system-ui, sans-serif;
  white-space: nowrap;
}

.mf__fan-label { display: none; }

.mf__lights {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.mf__logo {
  position: absolute;
  z-index: 4;
  top: 1.45%;
  right: 1.25%;
  display: block;
  width: 7.4%;
  height: auto;
  opacity: .9;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 7px rgba(34,152,255,.4));
  pointer-events: none;
  user-select: none;
}

@media (max-width: 520px) {
  .mf__fan-blades { opacity: .58; }
  .mf__fan-sheen { opacity: .14; }
  .mf__logo { width: 10.5%; top: 1%; right: 1%; }
}

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