/* 01 intro — hexagons fly in, assemble the P2E badge, reveal the real logo, burst into the hero.
   Only shown when html.arena-intro is set by the inline gate in 01-intro.html. */
.intro { display: none; }
html.arena-intro .intro { display: block; position: fixed; inset: 0; z-index: 300; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 50%, #120a2a 0%, #040b15 70%);
  /* failsafe: if the script never runs, get out of the way */
  animation: intro-failsafe .5s 4s forwards; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.intro-logo { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; object-fit: contain; opacity: 0; pointer-events: none;
  will-change: transform, opacity, clip-path; filter: drop-shadow(0 0 28px rgba(153,44,255,.55)); }
.intro-skip { position: absolute; right: 24px; bottom: 24px; z-index: 2; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(10,14,26,.6); color: #fff; cursor: pointer;
  font: 700 12px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; opacity: 0; animation: intro-skip-in .4s .25s forwards;
  transition: border-color .2s, background .2s; }
.intro-skip:hover, .intro-skip:focus-visible { border-color: var(--lime); background: rgba(208,250,0,.12); outline: none; }
.intro-skip i { font-size: 10px; color: var(--lime); }
@keyframes intro-skip-in { to { opacity: 1; } }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
@media (max-width: 767px) {
  .intro-logo { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
  .intro-skip { right: 16px; bottom: 20px; }
}