#welcome {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: calc(var(--safe-top) + var(--sp-5)) var(--sp-5)
           calc(var(--safe-bottom) + var(--sp-5));
  background: var(--c-magenta-deep);
  z-index: var(--z-feed);
  overflow: hidden;
  isolation: isolate;
}

/* While the welcome splash is on screen, hide the gameplay overlays. The
 * gradient stage is only hidden while welcome is in its IDLE state — once
 * .is-leaving fires, we let the gradient stage show through so the welcome
 * bg can fade smoothly into the blue gameplay backdrop instead of
 * collapsing to the body's black. */
body:has(#welcome:not([hidden])) #points-counter,
body:has(#welcome:not([hidden])) .event-countdown,
body:has(#welcome:not([hidden])) .solo-progress {
  display: none !important;
}
body:has(#welcome:not([hidden]):not(.is-leaving)) #gradient-stage {
  display: none !important;
}

.welcome__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
  z-index: 1;
}

.welcome__welcome {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: -3px 6px 0 #000;
  margin: 0;
}

.welcome__logo-img {
  display: block;
  width: min(280px, 70%);
  height: auto;
  filter: drop-shadow(-3px 6px 0 #000);
}

.welcome__sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.2rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: var(--sp-4) 0 0;
}

.welcome__countdown {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-white);
  text-align: center;
  z-index: 1;
}

.welcome__countdown-text {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.6vw, 1.35rem);
  letter-spacing: 0.02em;
}

.welcome__countdown-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 12vw, 3.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: -2px 4px 0 rgba(0, 0, 0, 0.45);
}

.welcome__countdown [data-welcome-countdown] {
  font-variant-numeric: tabular-nums;
}

/* ── Rainbow stripes (diagonal band crossing the bottom-left corner) ──
 * The band enters from the LEFT edge (mid-height), passes through the
 * corner, and exits through the BOTTOM edge (mid-width). The container is
 * deliberately oversized so its parallel stripes are clipped by the
 * viewport edges at the rotated angle. */
.welcome__stripes {
  position: absolute;
  width: 140%;
  pointer-events: none;
  transform-origin: 50% 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 0;
}

.welcome__stripes--bottom {
  left: -40%;
  bottom: -10%;
  transform: rotate(32deg);
}

.welcome__stripes--top {
  right: -40%;
  top: -10%;
  transform: rotate(32deg);
}

.welcome__stripe {
  height: 22px;
  width: 100%;
  transform-origin: left center;
  animation: welcome-stripe-in 700ms var(--ease-spring) backwards;
}
.welcome__stripe--cyan    { background: var(--c-cyan);         animation-delay:  60ms; }
.welcome__stripe--blue    { background: var(--c-blue-deep);    animation-delay: 120ms; }
.welcome__stripe--green   { background: var(--c-green-light);  animation-delay: 180ms; }
.welcome__stripe--orange  { background: var(--c-orange-light); animation-delay: 240ms; }
.welcome__stripe--pink    { background: var(--c-pink);         animation-delay: 300ms; }
.welcome__stripe--magenta { background: var(--c-magenta-deep); animation-delay: 360ms; }

@keyframes welcome-stripe-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome__stripe { animation: none; }
}

/* ── Exit animation ───────────────────────────────────────────────────
 * Triggered by JS adding .is-leaving to #welcome right before transitioning
 * to the first event. Stripes contract back to scaleX(0) (reverse of how
 * they arrived), then the text elements fade out. The welcome bg stays
 * fully opaque the whole time so we never expose the body underneath —
 * the gameplay below is revealed only after #welcome is snap-hidden. */

#welcome.is-leaving {
  pointer-events: none;
  animation: welcome-bg-fade 520ms 200ms var(--ease-decel) forwards;
}

@keyframes welcome-bg-fade {
  from { background-color: var(--c-magenta-deep); }
  to   { background-color: transparent; }
}

#welcome.is-leaving .welcome__stripe {
  animation: welcome-stripe-out 380ms var(--ease-decel) forwards;
}

/* Reverse the entry stagger: the last stripe to arrive leaves first. */
#welcome.is-leaving .welcome__stripe--magenta { animation-delay:   0ms; }
#welcome.is-leaving .welcome__stripe--pink    { animation-delay:  60ms; }
#welcome.is-leaving .welcome__stripe--orange  { animation-delay: 120ms; }
#welcome.is-leaving .welcome__stripe--green   { animation-delay: 180ms; }
#welcome.is-leaving .welcome__stripe--blue    { animation-delay: 240ms; }
#welcome.is-leaving .welcome__stripe--cyan    { animation-delay: 300ms; }

#welcome.is-leaving .welcome__hero,
#welcome.is-leaving .welcome__countdown {
  animation: welcome-text-out 320ms 220ms ease-out forwards;
}

@keyframes welcome-stripe-out {
  from { transform: scaleX(1); opacity: 1; }
  to   { transform: scaleX(0); opacity: 1; }
}

@keyframes welcome-text-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-8px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #welcome.is-leaving .welcome__stripe,
  #welcome.is-leaving .welcome__hero,
  #welcome.is-leaving .welcome__countdown {
    animation: welcome-text-out 160ms ease-out forwards;
  }
}