arena/src/styles/intro.css

.battle-preview {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 0.84;
  pointer-events: none;
  transition:
    opacity 420ms ease,
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#app.match-live .battle-preview {
  opacity: 0;
  transform: scale(1.08);
}

.preview-fighter {
  position: absolute;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: auto 100px;
  image-rendering: pixelated;
  transform-origin: center;
  filter:
    drop-shadow(0 18px 22px rgb(0 0 0 / 0.68))
    saturate(1.14)
    brightness(1.12);
  animation:
    preview-attack var(--sprite-speed) steps(var(--sprite-steps)) infinite,
    preview-breathe 1800ms ease-in-out infinite;
}

.preview-knight {
  --sprite-end: -600px;
  --sprite-scale: 5.2;
  --sprite-speed: 840ms;
  --sprite-steps: 6;
  left: 10vw;
  top: 48vh;
  background-image: url("/assets/characters/knight/Knight-Attack01.png");
  transform: scale(var(--sprite-scale));
}

.preview-orc {
  --sprite-end: -500px;
  --sprite-scale: 5.35;
  --sprite-speed: 760ms;
  --sprite-steps: 5;
  right: 9vw;
  top: 46vh;
  background-image: url("/assets/characters/orc/Orc-Attack01.png");
  transform: scaleX(-1) scale(var(--sprite-scale));
}

.preview-wizard {
  --sprite-end: -500px;
  --sprite-scale: 4.35;
  --sprite-speed: 980ms;
  --sprite-steps: 5;
  left: 56vw;
  top: 24vh;
  background-image: url("/assets/characters/wizard/Wizard-Attack01.png");
  opacity: 0.58;
  transform: scaleX(-1) scale(var(--sprite-scale));
}

.preview-strike {
  position: absolute;
  width: 160px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(255 229 156 / 0.86), transparent);
  box-shadow: 0 0 24px rgb(227 89 59 / 0.5);
  opacity: 0;
  transform-origin: center;
  animation: preview-strike 980ms ease-in-out infinite;
}

.preview-strike-a {
  left: 38vw;
  top: 54vh;
  transform: rotate(-18deg);
}

.preview-strike-b {
  right: 31vw;
  top: 42vh;
  transform: rotate(22deg);
  animation-delay: 260ms;
}

.intro-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 56px);
  pointer-events: none;
  transition:
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#app.match-live .intro-stage {
  opacity: 0;
  transform: scale(0.96);
}

#app.match-live .intro-content {
  pointer-events: none;
}

.intro-content {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
  pointer-events: auto;
  animation: intro-rise 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition:
    transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 360ms ease;
}

#app.options-open:not(.match-live) .intro-content {
  opacity: 0.72;
}

.arena-logo {
  margin: 0;
  color: #fff4d1;
  font-size: clamp(4rem, 16vw, 11rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.9;
  text-shadow:
    0 2px 0 #ad4d37,
    0 14px 42px rgb(0 0 0 / 0.72),
    0 0 40px rgb(230 173 71 / 0.28);
  text-transform: uppercase;
}

.arena-logo .small-text {
  font-size: 0.7em;
  margin-top: 0.05em;
}

.arena-logo span {
  display: block;
}

.arena-meta {
  position: fixed;
  right: clamp(10px, 2vw, 18px);
  bottom: clamp(10px, 2vw, 18px);
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.visitor-count,
.about-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0;
  border: 1px solid rgb(238 185 73 / 0.22);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgb(8 10 7 / 0.68);
  color: #e7c879;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(10px);
  pointer-events: auto;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    opacity 220ms ease;
}

.visitor-count {
  opacity: 0;
  transform: translateY(8px);
}

#app.match-live .visitor-count {
  opacity: 0.86;
  transform: translateY(0);
}

.about-button {
  min-width: 72px;
  color: #ffe8b4;
  font-weight: 900;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.22);
}

.about-button:hover {
  border-color: rgb(238 185 73 / 0.42);
  background: rgb(255 246 216 / 0.14);
  transform: translateY(-1px);
}

.start-button {
  min-width: 180px;
  padding: 0 30px;
  text-transform: uppercase;
}

#app.options-open:not(.match-live) .start-button {
  pointer-events: none;
  visibility: hidden;
}