:root {
  color-scheme: dark;
  background: #020202;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  background: #020202;
}

.rf {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  perspective: 1400px;
  background:
    radial-gradient(circle at 47% 50%, rgba(116, 37, 9, .09), transparent 38%),
    radial-gradient(circle at 68% 28%, rgba(151, 199, 210, .035), transparent 32%),
    #020202;
}

.rf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, .72) 100%);
}

.rf__plane {
  --pointer-x: 0;
  --pointer-y: 0;
  position: absolute;
  inset: -18% -12%;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(-3deg + var(--pointer-y) * 2.4deg))
    rotateY(calc(var(--pointer-x) * 4deg))
    rotateZ(-2deg);
  transition: transform .28s ease-out;
}

.rf-miner {
  --scale: 1;
  --tilt: 0deg;
  --depth: 0px;
  --phase: 0s;
  --drift: 5px;
  position: absolute;
  width: clamp(148px, 17vw, 330px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform:
    translate3d(-50%, -50%, var(--depth))
    rotateZ(var(--tilt))
    scale(var(--scale));
  animation: rf-miner-drift 8.6s ease-in-out var(--phase) infinite alternate;
  filter:
    drop-shadow(0 19px 15px rgba(0, 0, 0, .78))
    drop-shadow(0 0 10px rgba(255, 112, 31, .035));
  will-change: transform;
}

.rf-miner__world,
.rf-miner__media,
.rf-miner__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

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

.rf-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(47% 47% at 50% 50%);
  opacity: var(--opacity);
  pointer-events: none;
}

.rf-fan__blades,
.rf-fan__sheen {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.rf-fan__blades {
  inset: 6%;
  opacity: .58;
  mix-blend-mode: multiply;
  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='.28' 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: rf-spin var(--speed) linear var(--delay) infinite;
  animation-direction: var(--direction);
  will-change: rotate;
}

.rf-fan__sheen {
  inset: 9%;
  opacity: .08;
  mix-blend-mode: screen;
  background: conic-gradient(from 100deg, transparent 0 40%, rgba(230, 241, 245, .38) 48%, transparent 57% 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 28%, #000 34% 71%, transparent 79%);
  mask-image: radial-gradient(circle, transparent 0 28%, #000 34% 71%, transparent 79%);
  animation: rf-spin calc(var(--speed) * 1.8) linear var(--delay) infinite reverse;
}

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

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

@keyframes rf-miner-drift {
  from { margin-top: calc(var(--drift) * -1); }
  to { margin-top: var(--drift); }
}

@media (max-width: 680px) {
  .rf__plane {
    inset: -12% -145%;
  }

  .rf-miner {
    width: clamp(128px, 48vw, 190px);
  }

  .rf-fan__sheen {
    display: none;
  }
}

@media (min-aspect-ratio: 2/1) {
  .rf__plane {
    inset: -34% -8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rf-miner,
  .rf-fan__blades,
  .rf-fan__sheen {
    animation: none !important;
  }
}