:root {
  --blood-red: #d70032;
  --ember-red: #ff3155;
  --deep-red: #4a000f;
  --night-red: #120005;
  --metal-gold: #ffd76a;
  --hot-gold: #fff1ad;
}

* {
  box-sizing: border-box;
}

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

body {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.landing-shell {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgb(170 0 38 / 35%), transparent 36%),
    #080002;
}

.hero-stage {
  position: relative;
  width: 390px;
  max-width: 100vw;
  height: 844px;
  min-height: 640px;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 51% 28%,
      rgb(255 42 84 / 92%) 0,
      rgb(190 0 44 / 62%) 18%,
      transparent 43%
    ),
    radial-gradient(circle at 4% 48%, rgb(255 14 61 / 48%) 0, transparent 32%),
    radial-gradient(circle at 96% 52%, rgb(216 0 48 / 48%) 0, transparent 34%),
    linear-gradient(
      180deg,
      #170007 0%,
      #5f0018 30%,
      #a9002c 52%,
      #520014 76%,
      #0c0004 100%
    );
  box-shadow:
    0 0 86px rgb(255 0 56 / 18%),
    inset 0 0 90px rgb(5 0 2 / 68%);
}

.hero-stage::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    repeating-conic-gradient(
      from 210deg at 50% 35%,
      transparent 0deg 7deg,
      rgb(255 162 179 / 10%) 7.6deg 8.4deg,
      transparent 9deg 17deg
    ),
    linear-gradient(
      90deg,
      rgb(0 0 0 / 31%),
      transparent 19% 81%,
      rgb(0 0 0 / 32%)
    );
  content: "";
}

.hero-stage::after {
  position: absolute;
  z-index: 1;
  inset: 46% -20% -9%;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgb(4 0 1 / 99%) 0 34%,
      transparent 73%
    ),
    repeating-radial-gradient(
      ellipse at 50% 109%,
      rgb(255 13 62 / 16%) 0 2px,
      transparent 3px 15px
    );
  opacity: 0.94;
  content: "";
}

.inferno-glow {
  position: absolute;
  z-index: 1;
  width: 105%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.68;
  filter: blur(28px);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

.inferno-glow-one {
  top: 7%;
  left: -58%;
  background: conic-gradient(
    from 35deg,
    transparent,
    #ff174a,
    transparent 35%,
    #ff8aa1 50%,
    transparent 66%
  );
  animation: inferno-drift 12s ease-in-out infinite alternate;
}

.inferno-glow-two {
  top: 27%;
  right: -60%;
  background: conic-gradient(
    from 180deg,
    transparent,
    #ff4770,
    transparent 36%,
    #bc002b 59%,
    transparent 77%
  );
  animation: inferno-drift 14s ease-in-out -6s infinite alternate-reverse;
}

.energy-burst {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 50%;
  width: 178%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(255 64 98 / 0%) 0deg 6.7deg,
    rgb(255 187 198 / 22%) 7.2deg 7.8deg,
    rgb(255 32 76 / 0%) 8.5deg 15deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 0 13%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0 13%, transparent 68%);
  opacity: 0.86;
  animation: energy-spin 28s linear infinite;
  pointer-events: none;
}

.blade-streak {
  position: absolute;
  z-index: 3;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    #ff2255 14%,
    #fff 46% 55%,
    #ff5276 82%,
    transparent
  );
  box-shadow:
    0 0 5px #ffffff,
    0 0 13px #ff5b7e,
    0 0 28px #ff003c;
  opacity: 0.72;
  transform-origin: center;
  pointer-events: none;
}

.blade-streak-one {
  top: 24%;
  left: -19%;
  width: 76%;
  transform: rotate(-56deg);
  animation: blade-flash 4.6s ease-in-out infinite;
}

.blade-streak-two {
  top: 35%;
  right: -31%;
  width: 68%;
  transform: rotate(52deg);
  opacity: 0.44;
  animation: blade-flash 5.4s ease-in-out -2.6s infinite;
}

.light-sweep {
  position: absolute;
  z-index: 19;
  top: 0;
  left: -88%;
  width: 44%;
  height: 76%;
  transform: skewX(-19deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 224 226 / 24%),
    transparent
  );
  filter: blur(9px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: scene-sweep 5.8s ease-in-out infinite;
  pointer-events: none;
}

.shard-field,
.particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.shard-field {
  z-index: 4;
}

.shard-field span {
  --r: 0deg;
  --s: 1;
  position: absolute;
  width: 13px;
  height: 25px;
  clip-path: polygon(50% 0, 100% 76%, 54% 100%, 0 71%);
  background: linear-gradient(
    145deg,
    rgb(255 212 219 / 92%),
    rgb(255 41 84 / 58%) 45%,
    rgb(74 0 20 / 18%)
  );
  box-shadow: 0 0 14px rgb(255 23 71 / 75%);
  opacity: 0.76;
  animation: shard-drift 7.6s ease-in-out infinite;
  will-change: transform;
}

.shard-field span:nth-child(1) {
  top: 10%;
  left: 11%;
  --r: 19deg;
  --s: 0.7;
  animation-delay: -1.2s;
}
.shard-field span:nth-child(2) {
  top: 18%;
  right: 9%;
  --r: 44deg;
  --s: 1.06;
  animation-delay: -4.4s;
}
.shard-field span:nth-child(3) {
  top: 30%;
  left: 4%;
  --r: -24deg;
  --s: 0.62;
  animation-delay: -2.8s;
}
.shard-field span:nth-child(4) {
  top: 39%;
  right: 4%;
  --r: 71deg;
  --s: 0.82;
  animation-delay: -5.5s;
}
.shard-field span:nth-child(5) {
  top: 55%;
  left: 12%;
  --r: 28deg;
  --s: 0.92;
  animation-delay: -6.1s;
}
.shard-field span:nth-child(6) {
  top: 61%;
  right: 11%;
  --r: -33deg;
  --s: 0.66;
  animation-delay: -3.5s;
}
.shard-field span:nth-child(7) {
  top: 73%;
  left: 7%;
  --r: 63deg;
  --s: 0.58;
  animation-delay: -0.6s;
}
.shard-field span:nth-child(8) {
  top: 78%;
  right: 5%;
  --r: -52deg;
  --s: 0.86;
  animation-delay: -4.8s;
}
.shard-field span:nth-child(9) {
  top: 25%;
  left: 38%;
  --r: 17deg;
  --s: 0.42;
  animation-delay: -5.9s;
}
.shard-field span:nth-child(10) {
  top: 46%;
  right: 35%;
  --r: -63deg;
  --s: 0.48;
  animation-delay: -2.1s;
}
.shard-field span:nth-child(11) {
  top: 67%;
  left: 43%;
  --r: 52deg;
  --s: 0.44;
  animation-delay: -6.7s;
}
.shard-field span:nth-child(12) {
  top: 88%;
  right: 27%;
  --r: -16deg;
  --s: 0.57;
  animation-delay: -3.9s;
}

.particle-field {
  z-index: 5;
}

.particle-field span {
  position: absolute;
  border-radius: 50%;
  background: #ffd4d9;
  box-shadow:
    0 0 5px #ffffff,
    0 0 13px #ff315d,
    0 0 22px #ff0037;
  opacity: 0;
  animation-name: particle-rise;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.brand-logo {
  position: absolute;
  z-index: 24;
  top: max(2.2%, env(safe-area-inset-top));
  left: 4.5%;
  width: 52%;
  isolation: isolate;
  filter: drop-shadow(0 3px 1px rgb(0 0 0 / 82%))
    drop-shadow(0 0 10px rgb(255 82 66 / 38%));
}

.brand-logo img {
  position: relative;
  z-index: 1;
  animation: logo-glow-pulse 2.6s ease-in-out infinite;
  will-change: filter;
}

.brand-logo-shine {
  position: absolute;
  z-index: 2;
  inset: -9%;
  background: linear-gradient(
    105deg,
    transparent 24%,
    rgb(255 255 255 / 0%) 38%,
    rgb(255 255 255 / 96%) 49%,
    rgb(255 213 116 / 72%) 53%,
    transparent 67%
  );
  background-size: 260% 100%;
  background-position: 175% 0;
  filter: blur(0.35px);
  -webkit-mask: url("assets/logo.webp") center / contain no-repeat;
  mask: url("assets/logo.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  animation: logo-shine 2.6s ease-in-out infinite;
  will-change: background-position;
  pointer-events: none;
}

.logo-flare {
  position: absolute;
  z-index: 3;
  top: 22%;
  right: -3%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      transparent 45%,
      rgb(255 255 255 / 92%) 49% 51%,
      transparent 55%
    ),
    linear-gradient(
      0deg,
      transparent 45%,
      rgb(255 220 126 / 82%) 49% 51%,
      transparent 55%
    ),
    radial-gradient(circle, #fff 0 4%, #ffe28d 9%, transparent 34%);
  filter: drop-shadow(0 0 8px #ffb227);
  opacity: 0;
  animation: logo-flare 2.6s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

.warrior-duo,
.coin-cloud,
.claim-button {
  position: absolute;
  will-change: transform;
}

.warrior-duo {
  z-index: 9;
  top: -3.6%;
  left: 50%;
  width: 104%;
  transform: translateX(-50%);
  filter: drop-shadow(0 17px 17px rgb(13 0 4 / 72%))
    drop-shadow(0 0 18px rgb(255 30 70 / 26%));
  animation: warrior-float 5.6s ease-in-out -0.9s infinite;
  pointer-events: none;
}

.warrior-duo img,
.coin-cloud img {
  width: 100%;
  height: auto;
}

.promo-stage {
  position: absolute;
  z-index: 18;
  top: 39.2%;
  left: 3.1%;
  width: 93.8%;
  height: 30.5%;
  perspective: 760px;
}

.promo-group {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.45vh, 14px);
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: promo-cycle 9s cubic-bezier(0.22, 0.75, 0.18, 1) infinite both;
}

.promo-group-one {
  animation-delay: 0s;
}

.promo-group-two {
  animation-delay: -6s;
}

.promo-group-three {
  gap: clamp(6px, 0.85vh, 8px);
  animation-delay: -3s;
}

.promo-panel {
  position: relative;
  display: grid;
  width: 100%;
  min-height: clamp(54px, 7.2vh, 66px);
  place-items: center;
  padding: 10px 13px;
  overflow: hidden;
  border: 1px solid rgb(255 203 105 / 86%);
  border-radius: 12px;
  background:
    linear-gradient(
      102deg,
      rgb(67 0 13 / 98%),
      rgb(154 0 32 / 96%) 48%,
      rgb(49 0 11 / 98%)
    ),
    #600017;
  box-shadow:
    0 4px 0 #250008,
    0 5px 0 rgb(255 52 69 / 85%),
    inset 0 1px 0 rgb(255 238 175 / 54%),
    inset 0 0 16px rgb(255 28 62 / 44%),
    0 0 20px rgb(255 0 48 / 38%);
}

.promo-panel::before {
  position: absolute;
  inset: 3px;
  border: 1px solid rgb(255 68 88 / 54%);
  border-radius: 9px;
  content: "";
  pointer-events: none;
}

.promo-panel::after {
  position: absolute;
  top: 0;
  left: -92%;
  width: 50%;
  height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 237 211 / 26%),
    transparent
  );
  content: "";
  animation: panel-glint 3s ease-in-out infinite;
}

.promo-panel img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgb(39 0 8 / 92%))
    drop-shadow(0 0 4px rgb(255 71 66 / 24%));
}

.promo-panel-slim {
  min-height: clamp(42px, 5.65vh, 50px);
  padding: 7px 11px;
}

.promo-panel-slim img {
  max-height: 34px;
}

.free-offer {
  position: relative;
  width: 98%;
  padding: 0 3px 2px;
  filter: drop-shadow(0 5px 1px rgb(66 0 11 / 90%))
    drop-shadow(0 0 10px rgb(255 30 49 / 58%));
}

.free-offer::before {
  position: absolute;
  z-index: -1;
  inset: 20% -2% 5%;
  transform: skewX(-3deg);
  border: 1px solid rgb(255 96 73 / 62%);
  border-radius: 13px;
  background: linear-gradient(
    100deg,
    rgb(43 0 9 / 80%),
    rgb(151 0 29 / 68%),
    rgb(42 0 9 / 82%)
  );
  box-shadow:
    0 4px 0 rgb(37 0 8 / 78%),
    0 0 18px rgb(255 0 47 / 38%);
  content: "";
}

.free-offer img {
  width: 100%;
}

.coin-cloud {
  pointer-events: none;
}

.coins-top {
  z-index: 12;
  top: 7.5%;
  left: -34%;
  width: 57%;
  opacity: 0.86;
  filter: blur(0.25px) drop-shadow(0 9px 8px rgb(37 0 4 / 58%));
  animation: coins-top-float 5.8s ease-in-out -2.2s infinite;
}

.coins-side {
  z-index: 14;
  top: 52%;
  right: -38%;
  width: 63%;
  opacity: 0.8;
  filter: blur(0.8px) drop-shadow(0 9px 10px rgb(35 0 4 / 62%));
  animation: coins-side-float 5.2s ease-in-out -4.1s infinite;
}

.coins-front {
  z-index: 23;
  bottom: -8%;
  left: -31%;
  width: 72%;
  opacity: 0.93;
  filter: blur(1.2px) drop-shadow(0 12px 12px rgb(34 0 4 / 72%));
  animation: coins-front-float 4.8s ease-in-out -1.3s infinite;
}

.claim-button {
  z-index: 30;
  bottom: max(2.7%, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  width: 89%;
  min-height: clamp(72px, 10.2vh, 88px);
  transform: translateX(-50%);
  place-items: center;
  overflow: hidden;
  border: 3px solid #ffe6a0;
  border-radius: 21px;
  background:
    linear-gradient(
      180deg,
      rgb(255 48 59 / 95%) 0,
      rgb(210 0 24 / 97%) 47%,
      rgb(113 0 15 / 99%) 100%
    ),
    #bb001d;
  box-shadow:
    0 0 0 3px #9b3d0b,
    0 0 0 6px #ffd56a,
    0 9px 0 #410007,
    0 14px 18px rgb(11 0 2 / 78%),
    inset 0 3px 2px rgb(255 239 191 / 72%),
    inset 0 -6px 13px rgb(66 0 10 / 72%),
    0 0 24px rgb(255 28 47 / 54%);
  color: #ffeeb4;
  text-decoration: none;
  outline: none;
  touch-action: manipulation;
  animation: claim-pulse 1.55s cubic-bezier(0.33, 0.06, 0.23, 1) infinite;
}

.claim-button::before {
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(255 221 126 / 75%);
  border-radius: 15px;
  box-shadow:
    inset 0 0 0 2px rgb(120 0 15 / 58%),
    inset 0 0 15px rgb(255 83 76 / 36%);
  content: "";
  pointer-events: none;
}

.claim-text {
  position: relative;
  z-index: 2;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(42px, 11.8vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(
    180deg,
    #fff8d4 0%,
    #ffdb68 44%,
    #e99a17 72%,
    #fff0a9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 #744000) drop-shadow(0 4px 1px #3c0008)
    drop-shadow(0 0 5px rgb(255 230 142 / 45%));
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.claim-shine {
  position: absolute;
  z-index: 3;
  top: -25%;
  left: -64%;
  width: 35%;
  height: 150%;
  transform: skewX(-22deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 78%),
    transparent
  );
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: claim-shine 2.45s ease-in-out infinite;
  pointer-events: none;
}

.claim-flare {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: -30%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      transparent 46%,
      rgb(255 255 255 / 94%) 49% 51%,
      transparent 54%
    ),
    linear-gradient(
      0deg,
      transparent 46%,
      rgb(255 225 128 / 84%) 49% 51%,
      transparent 54%
    ),
    radial-gradient(circle, #ffffff 0 3%, #ffd66e 8%, transparent 34%);
  filter: drop-shadow(0 0 8px #ffb11b);
  animation: claim-flare 2.45s ease-in-out infinite;
  pointer-events: none;
}

.claim-button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 9px;
}

.claim-button:active {
  animation: none;
  transform: translateX(-50%) scale(0.96);
}

.edge-vignette {
  position: absolute;
  z-index: 40;
  inset: 0;
  box-shadow:
    inset 0 0 56px rgb(7 0 2 / 62%),
    inset 0 -28px 44px rgb(4 0 1 / 58%);
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes promo-cycle {
  0% {
    opacity: 0.65;
    filter: blur(7px) brightness(1.5);
    transform: translateY(16px) rotateX(-13deg) scale(0.93);
  }
  4% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: translateY(0) rotateX(0deg) scale(1);
  }
  30.5% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: translateY(0) rotateX(0deg) scale(1);
  }
  34% {
    opacity: 0;
    filter: blur(9px) brightness(1.55);
    transform: translateY(-18px) rotateX(12deg) scale(1.06);
  }
  100% {
    opacity: 0;
    filter: blur(9px) brightness(1.55);
    transform: translateY(-18px) rotateX(12deg) scale(1.06);
  }
}

@keyframes panel-glint {
  0%,
  22% {
    left: -92%;
  }
  62%,
  100% {
    left: 146%;
  }
}

@keyframes warrior-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-0.3deg);
  }
  50% {
    transform: translateX(-50%) translateY(-10px) rotate(0.45deg);
  }
}

@keyframes coins-top-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-10deg) scale(1);
  }
  50% {
    transform: translate3d(24px, 18px, 0) rotate(2deg) scale(1.07);
  }
}

@keyframes coins-side-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
  }
  50% {
    transform: translate3d(-23px, -21px, 0) rotate(-4deg) scale(1.08);
  }
}

@keyframes coins-front-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-6deg) scale(1);
  }
  50% {
    transform: translate3d(22px, -18px, 0) rotate(4deg) scale(1.065);
  }
}

@keyframes claim-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1) drop-shadow(0 0 8px rgb(255 29 50 / 26%));
  }
  50% {
    transform: translateX(-50%) scale(1.052);
    filter: brightness(1.13) drop-shadow(0 0 17px rgb(255 61 62 / 58%));
  }
}

@keyframes logo-shine {
  0%,
  18% {
    background-position: 175% 0;
  }
  70%,
  100% {
    background-position: -75% 0;
  }
}

@keyframes logo-glow-pulse {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  42% {
    filter: brightness(1.34) saturate(1.16)
      drop-shadow(0 0 8px rgb(255 225 135 / 78%));
  }
  56% {
    filter: brightness(1.08) saturate(1.05);
  }
}

@keyframes logo-flare {
  0%,
  16%,
  80%,
  100% {
    opacity: 0;
    transform: translate(50%, -50%) scale(0.3) rotate(0deg);
  }
  49% {
    opacity: 1;
    transform: translate(50%, -50%) scale(1.22) rotate(45deg);
  }
}

@keyframes claim-shine {
  0%,
  26% {
    left: -64%;
  }
  68%,
  100% {
    left: 132%;
  }
}

@keyframes claim-flare {
  0%,
  24%,
  78%,
  100% {
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
  }
  52% {
    opacity: 1;
    transform: scale(1.05) rotate(45deg);
  }
}

@keyframes particle-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.35);
  }
  22% {
    opacity: 0.95;
  }
  64% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: translate3d(10px, -69px, 0) scale(1.5);
  }
}

@keyframes shard-drift {
  0%,
  100% {
    opacity: 0.46;
    transform: translate3d(0, 0, 0) rotate(var(--r)) scale(var(--s));
  }
  50% {
    opacity: 0.92;
    transform: translate3d(9px, -16px, 0) rotate(var(--r)) scale(var(--s));
  }
}

@keyframes inferno-drift {
  0% {
    transform: translate3d(-4%, -3%, 0) rotate(-9deg) scale(0.92);
  }
  100% {
    transform: translate3d(15%, 10%, 0) rotate(16deg) scale(1.13);
  }
}

@keyframes energy-spin {
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes blade-flash {
  0%,
  100% {
    filter: brightness(0.7);
    opacity: 0.3;
  }
  48% {
    filter: brightness(1.7);
    opacity: 0.95;
  }
}

@keyframes scene-sweep {
  0%,
  17% {
    left: -88%;
    opacity: 0;
  }
  34% {
    opacity: 0.72;
  }
  59% {
    left: 148%;
    opacity: 0;
  }
  100% {
    left: 148%;
    opacity: 0;
  }
}

@media (max-width: 430px) {
  .hero-stage {
    width: 100vw;
    height: 100svh;
    max-height: none;
  }
}

@media (max-height: 700px) {
  .promo-stage {
    top: 37.5%;
    height: 31.5%;
  }

  .warrior-duo {
    top: -5%;
    width: 100%;
  }

  .claim-button {
    width: 85%;
  }
}