@font-face {
  font-family: "Clash Display";
  src: url("assets/clash-display-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("assets/clash-display-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.rme {
  width: 100%;
  min-width: 0;
  --rme-bg: #050506;
  --rme-text: #f4f2ef;
  --rme-gold: #ffb347;
  --rme-orange: #ff8a1e;
  --rme-deep: #f0631a;
  --rme-line: #1c1c21;
  --rme-blue: #4a95ff;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 56.25vw;
}

.rme__scene {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  background:
    radial-gradient(ellipse 44% 58% at 50% 52%, rgba(255,138,30,.11), transparent 70%),
    radial-gradient(ellipse 84% 90% at 50% 50%, transparent 50%, var(--rme-bg) 100%),
    var(--rme-bg);
}

.rme__heat {
  position: absolute;
  z-index: 0;
  inset: -25%;
  background:
    radial-gradient(ellipse 32% 30% at 32% 50%, rgba(74,149,255,.10), transparent 72%),
    radial-gradient(ellipse 38% 34% at 71% 48%, rgba(255,138,30,.17), transparent 72%),
    radial-gradient(ellipse 26% 42% at 51% 58%, rgba(240,99,26,.12), transparent 74%);
  filter: blur(38px);
  animation: rme-heat 14s ease-in-out infinite alternate;
}

.rme__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rme__back { z-index: 1; }
.rme__front { z-index: 5; }

.rme__parallax {
  position: absolute;
  z-index: 3;
  inset: 0;
  transform: translate3d(var(--rme-x, 0), var(--rme-y, 0), 0);
  transition: transform .85s cubic-bezier(.18,.72,.22,1);
  pointer-events: none;
  will-change: transform;
}

.rme__float {
  position: absolute;
  left: 50%;
  top: 51%;
  width: min(88%, 1040px);
  aspect-ratio: 1529 / 1029;
  transform: translate(-50%, -50%);
  animation: rme-float 12s ease-in-out infinite;
  will-change: transform;
}

.rme__float picture {
  position: absolute;
  inset: 0;
  display: block;
}

.rme__miners {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter:
    contrast(1.055)
    saturate(.86)
    drop-shadow(0 35px 45px rgba(0,0,0,.76))
    drop-shadow(0 0 20px rgba(255,138,30,.10));
}

.rme__fan-glow {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(48%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.rme__fan-glow::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  opacity: .30;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,179,71,.42) 0 8deg, transparent 11deg 34deg),
    radial-gradient(circle, rgba(244,242,239,.18), transparent 62%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 14%, #000 26% 68%, transparent 79%);
  mask-image: radial-gradient(circle, transparent 0 14%, #000 26% 68%, transparent 79%);
  filter: blur(.45px);
  animation: rme-fan var(--speed) linear infinite;
  animation-delay: var(--d);
  will-change: rotate;
}

.rme__fan-glow::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  opacity: .34;
  background: conic-gradient(from 90deg, transparent 0 43%, rgba(244,242,239,.3) 48%, rgba(255,138,30,.24) 51%, transparent 56% 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 44%, #000 52% 61%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 0 44%, #000 52% 61%, transparent 70%);
  animation: rme-fan calc(var(--speed) * 1.7) linear infinite reverse;
  animation-delay: var(--d);
}

.rme__metal-pass {
  position: absolute;
  z-index: 4;
  inset: 8% 7% 18%;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(104deg, transparent 34%, rgba(244,242,239,.28) 47%, rgba(255,179,71,.22) 51%, transparent 63%);
  filter: blur(12px);
  clip-path: polygon(6% 12%, 89% 4%, 97% 78%, 9% 93%);
  animation: rme-metal 9.5s ease-in-out infinite;
}

.rme__frame {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5,5,6,.48), transparent 18% 78%, rgba(5,5,6,.74)),
    radial-gradient(ellipse 91% 85% at 50% 50%, transparent 57%, rgba(5,5,6,.87) 100%);
  box-shadow: inset 0 0 95px rgba(5,5,6,.78);
}

.rme__brand {
  position: absolute;
  z-index: 8;
  left: 7.4%;
  bottom: 9%;
  display: flex;
  align-items: baseline;
  direction: ltr;
  white-space: nowrap;
  pointer-events: none;
  font-family: "Clash Display", Arial, sans-serif;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.62));
}

.rme__brand-name {
  display: inline-flex;
  color: var(--rme-text);
  font-size: clamp(13px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: 0;
}

.rme__brand-name > span {
  display: inline-block;
  animation: rme-brand-hop 5.4s cubic-bezier(.2,.72,.2,1) infinite;
  animation-delay: calc(var(--i) * 28ms);
  will-change: transform;
}

.rme__brand em {
  margin-left: .48em;
  color: #77747d;
  font-size: clamp(7px, 1.05vw, 15px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@keyframes rme-heat {
  from { transform: translate3d(-2%,1%,0) scale(.98); opacity: .62; }
  to { transform: translate3d(2%,-1%,0) scale(1.05); opacity: .9; }
}

@keyframes rme-float {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50% { transform: translate(-50%,calc(-50% - 7px)) scale(1.012); }
}

@keyframes rme-fan { to { rotate: 360deg; } }

@keyframes rme-brand-hop {
  0%, 5%, 20%, 100% { transform: translateY(0); }
  12% { transform: translateY(-.14em); }
}

@keyframes rme-metal {
  0%,22% { transform: translateX(-72%) skewX(-7deg); opacity: 0; }
  38% { opacity: .28; }
  58%,100% { transform: translateX(78%) skewX(-7deg); opacity: 0; }
}

@media (max-width: 900px) {
  .rme { contain-intrinsic-size: auto 66.67vw; }
  .rme__scene { aspect-ratio: 3 / 2; }
  .rme__float { width: 105%; top: 51%; }
  .rme__frame { box-shadow: inset 0 0 68px rgba(5,5,6,.78); }
  .rme__metal-pass { filter: blur(9px); }
}

@media (max-width: 560px) {
  .rme { contain-intrinsic-size: auto 75vw; }
  .rme__scene { aspect-ratio: 4 / 3; }
  .rme__float { width: 119%; top: 51%; }
  .rme__heat { filter: blur(25px); }
  .rme__metal-pass { display: none; }
}

@media (max-width: 380px) {
  .rme__float { width: 128%; }
  .rme__frame { box-shadow: inset 0 0 48px rgba(5,5,6,.82); }
}

@media (hover: none) {
  .rme__parallax { transition: none; }
}

.rme[data-quality="low"] .rme__metal-pass { display: none; }
.rme[data-paused="true"] * { animation-play-state: paused !important; }

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

@media (prefers-contrast: more) {
  .rme__miners { filter: contrast(1.12) saturate(.9) drop-shadow(0 30px 40px rgba(0,0,0,.85)); }
}