@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;
}

.rma2 {
  width: 100%;
  min-width: 0;
  --rma2-bg: #050506;
  --rma2-text: #f4f2ef;
  --rma2-muted: #9d9aa2;
  --rma2-gold: #ffb347;
  --rma2-orange: #ff8a1e;
  --rma2-deep: #f0631a;
  --rma2-line: #1c1c21;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 49.86vw;
}

.rma2__scene {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1464 / 730;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  background: var(--rma2-bg);
}

.rma2__world {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform: scale(1.002);
  transform-origin: 72% 48%;
  animation: rma2-world 18s ease-in-out infinite alternate;
  will-change: transform;
}

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

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

.rma2__lights {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.rma2__power-aura {
  position: absolute;
  z-index: 3;
  left: 78.5%;
  top: 52%;
  width: 34%;
  aspect-ratio: 1.08;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: .35;
  mix-blend-mode: screen;
  background:
    conic-gradient(from 30deg, transparent 0 22%, rgba(255,179,71,.34) 34%, transparent 47% 67%, rgba(240,99,26,.26) 79%, transparent 92%),
    radial-gradient(ellipse, transparent 44%, rgba(255,138,30,.16) 58%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse, transparent 0 40%, #000 51% 66%, transparent 76%);
  mask-image: radial-gradient(ellipse, transparent 0 40%, #000 51% 66%, transparent 76%);
  filter: blur(3px);
  animation: rma2-aura 8s ease-in-out infinite;
}

.rma2__fan {
  position: absolute;
  z-index: 4;
  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;
}

.rma2__fan::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: rma2-fan var(--speed) linear infinite;
  animation-delay: var(--delay);
  will-change: rotate;
}

.rma2__fan::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: rma2-fan calc(var(--speed) * 1.7) linear infinite reverse;
  animation-delay: var(--delay);
}

.rma2__led {
  position: absolute;
  z-index: 5;
  left: var(--x);
  top: var(--y);
  width: .42%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #6ee7a0;
  box-shadow: 0 0 7px 2px rgba(110,231,160,.58);
  animation: rma2-led 2.7s ease-in-out infinite;
  animation-delay: var(--delay);
}

.rma2__frame {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5,5,6,.26), transparent 20% 78%, rgba(5,5,6,.42)),
    radial-gradient(ellipse 96% 90% at 50% 50%, transparent 62%, rgba(5,5,6,.68) 100%);
  box-shadow: inset 0 0 52px rgba(5,5,6,.58);
}

.rma2__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));
}

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

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

.rma2__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 rma2-world {
  from { transform: scale(1.002) translate3d(0,0,0); }
  to { transform: scale(1.017) translate3d(-.35%,.2%,0); }
}

@keyframes rma2-aura {
  0%,100% { transform: scale(.94) rotate(-3deg); opacity: .24; }
  50% { transform: scale(1.07) rotate(4deg); opacity: .44; }
}

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

@keyframes rma2-led {
  0%,100% { opacity: .62; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.16); }
}

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

@media (max-width: 900px) {
  .rma2__power-aura { opacity: .28; }
}

@media (max-width: 520px) {
  .rma2__power-aura { opacity: .22; }
  .rma2__fan::before { opacity: .18; }
  .rma2__frame { box-shadow: inset 0 0 28px rgba(5,5,6,.64); }
}

.rma2[data-quality="low"] .rma2__power-aura { filter: none; }
.rma2[data-paused="true"] * { animation-play-state: paused !important; }

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