/*
 * Landing page — the arena entrance. A theme-immune dark stage (arena
 * black-out): pulls the raw --rb-* palette and locally-scoped --pyro-*
 * colors instead of the semantic --color-* layer that flips light/dark.
 * Every other public surface follows the semantic layer; this page is the
 * one documented exception (mirrors the brand plates' marketing-only rule).
 */

rb-entrance {
  display: block;
}

.stage {
  --pyro-gold: #e6c769;
  --pyro-orange: #ff5a1f;
  --stage-ink: #050a1a;

  position: relative;
  min-height: 100svh;
  display: grid;
  /* The middle spacer keeps the callout below the titantron at every
     viewport — on very short screens the card slides under the fold
     instead of over the logo. */
  grid-template-rows: auto minmax(52svh, 1fr) auto;
  isolation: isolate;
  overflow: hidden;
  background: var(--stage-ink);
  color: var(--rb-cream-100);
}

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

/* Stage media — one <picture>: animated AVIF on motion-ok desktop, still
   photo everywhere else. Cover-fit so the plate reaches every edge;
   center-top keeps the titantron in frame when portrait phones crop the
   sides. */
.stage__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* Legibility scrims: bottom-up ink gradient for the card, soft top vignette
   for the eyebrow. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 10, 26, 0.55) 0%,
    rgba(5, 10, 26, 0) 14%,
    rgba(5, 10, 26, 0) 55%,
    rgba(5, 10, 26, 0.75) 82%,
    rgba(5, 10, 26, 0.95) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.stage__top {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  /* The top rail sits above the grid's spacer row; without an explicit
     cross-axis alignment the eyebrow stretches — bleeding its scrim +
     backdrop blur down across the titantron. Anchor it. */
  align-items: flex-start;
  padding: var(--space-5);
}

.stage__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: rgba(5, 10, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stage__bottom {
  position: relative;
  z-index: 5;
  grid-row: 3;
  display: grid;
  justify-items: center;
  padding: var(--space-5) var(--space-5) var(--space-7);
}

.stage__card {
  width: 100%;
  max-width: 540px;
  padding: var(--space-5);
  background: rgba(5, 10, 26, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

.stage__card p {
  margin: 0 0 var(--space-3);
}

.stage__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.stage__card li {
  white-space: nowrap;
}

.stage__card .soon {
  color: var(--rb-cream-300);
}

/* The capability lines are the way in — each links to its page as it
   ships. */
.stage__card a {
  color: var(--rb-cream-100);
  text-underline-offset: 0.2em;
}

.stage__card a:hover {
  color: var(--rb-gold-300);
}

/* Short/wide viewports: go two-column so the card stays low and clear of
   the titantron logo. */
@media (min-width: 64rem) {
  .stage__card {
    max-width: 56rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-5);
    align-items: center;
  }

  .stage__card p {
    margin: 0;
  }
}

/* Rise cue — elements are visible by default (no-JS baseline); when the
   custom element adds .stage--anim the keyframes replay them from hidden. */
@keyframes stage-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stage--anim .stage__eyebrow {
  animation: stage-rise 0.7s var(--ease-standard) 1.6s backwards;
}

.stage--anim .stage__card {
  animation: stage-rise 0.7s var(--ease-standard) 2s backwards;
}

/* Bell flash — four white-out pulses fired by the custom element at
   irregular intervals before the chrome rises (the fanfare). */
.bell-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    60% 60% at 50% 50%,
    rgba(255, 244, 200, 0.85) 0%,
    rgba(255, 244, 200, 0) 70%
  );
  z-index: 20;
  pointer-events: none;
  opacity: 0;
}

.bell-flash.flash-now {
  animation: stage-bell 0.42s var(--ease-emphasized) 1 forwards;
}

@keyframes stage-bell {
  0% {
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Pop pyro — irregular gold/orange bursts at hot-spots up the ramp (the
   fireworks). The custom element creates and removes each .pop; the CSS
   owns the look. */
.pop-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.pop {
  position: absolute;
  width: 22vmin;
  height: 22vmin;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(
    circle,
    rgba(255, 244, 200, 0.95) 0%,
    rgba(230, 199, 105, 0.7) 22%,
    rgba(255, 90, 31, 0.45) 45%,
    rgba(255, 90, 31, 0) 70%
  );
  filter: blur(1px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: stage-pop 700ms var(--ease-emphasized) forwards;
}

.pop.tiny {
  width: 14vmin;
  height: 14vmin;
  animation-duration: 520ms;
}

.pop.huge {
  width: 32vmin;
  height: 32vmin;
  animation-duration: 900ms;
}

@keyframes stage-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.05);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

/* Reduced motion: static photo, no flashes, no pops, chrome visible from
   first paint (the custom element also gates itself on the same query). */
@media (prefers-reduced-motion: reduce) {
  .stage--anim .stage__eyebrow,
  .stage--anim .stage__card {
    animation: none;
  }

  .pop-layer,
  .bell-flash {
    display: none;
  }
}