/* Swing 25 — Ribbon intro. Palette only: court blue, black, silver, ball green (non-interactive accent), UI lime on PLAY only. */
#ribbonIntro {
  --ri-blue: #043cff; --ri-black: #000; --ri-silver: #e9eef2; --ri-ball: #9aff00; --ri-lime: #c7fc68; --ri-yellow: #ffcf00;
  --ri-ease: cubic-bezier(.22,.61,.36,1);
  position: fixed; inset: 0; z-index: 2147483647; cursor: default; background: var(--ri-black); color: var(--ri-silver); overflow: hidden;
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
}
#ribbonIntro .ri-panel {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 58% 0, 36% 100%, 0 100%);
  background:
    radial-gradient(120% 90% at 22% 38%, #1d52ff 0%, var(--ri-blue) 38%, #02207f 74%, #010a2a 100%);
  transform: translateX(-12%); opacity: 0;
  transition: transform 1.8s var(--ri-ease), opacity .9s var(--ri-ease);
}
#ribbonIntro .ri-panel::after { /* cold LED edge along the diagonal */
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(57.6% 0, 58% 0, 36% 100%, 35.6% 100%);
  background: linear-gradient(180deg, rgba(233,238,242,.0), rgba(233,238,242,.55) 45%, rgba(233,238,242,.0));
}
#ribbonIntro .ri-seven {
  position: absolute; right: 4vw; top: 50%; transform: translateY(-52%);
  font: 900 min(92vh, 62vw)/0.8 "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  color: transparent; -webkit-text-stroke: 2px rgba(233,238,242,.16); letter-spacing: -.02em;
  opacity: 0; transition: opacity 1.8s var(--ri-ease) .6s; pointer-events: none; user-select: none;
}
#ribbonIntro .ri-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ribbonIntro .ri-top {
  position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 28px; right: 28px;
  display: flex; justify-content: space-between; align-items: baseline;
  font: 800 22px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .14em;
}
#ribbonIntro .ri-brand b { color: var(--ri-yellow); font-weight: 800; }
#ribbonIntro .ri-venue { font: 600 12px/1 Inter, sans-serif; letter-spacing: .22em; color: rgba(233,238,242,.7); }
#ribbonIntro .ri-venue em { font-style: normal; color: var(--ri-silver); }
#ribbonIntro .ri-copy {
  position: absolute; left: 28px; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); max-width: min(760px, calc(100vw - 56px));
  display: grid; gap: 18px;
}
#ribbonIntro .ri-eyebrow { margin: 0; font: 600 12px/1 Inter, sans-serif; letter-spacing: .26em; color: rgba(233,238,242,.78); }
#ribbonIntro h1 {
  margin: 0; font: 800 clamp(52px, 9vw, 148px)/.86 "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  letter-spacing: -.005em; text-transform: uppercase; color: var(--ri-silver);
  transform: translateY(14px) scale(1.04); opacity: 0; transform-origin: left bottom;
  transition: opacity .9s var(--ri-ease) 1.2s, transform 1.8s var(--ri-ease) 1.2s;
}
#ribbonIntro h1 span { color: var(--ri-ball); }
#ribbonIntro .ri-actions { display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; transition: opacity .9s var(--ri-ease) 2.1s; }
#ribbonIntro .ri-play {
  display: inline-flex; align-items: center; justify-content: center; min-width: 168px; height: 54px; padding: 0 28px;
  background: var(--ri-lime); color: #000; text-decoration: none;
  font: 800 24px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em;
  transition: background .4s var(--ri-ease), transform .4s var(--ri-ease);
}
#ribbonIntro .ri-play:hover { background: #d8ff8a; }
#ribbonIntro .ri-enter {
  height: 54px; padding: 0 22px; background: rgba(0,0,0,.35); color: var(--ri-silver); cursor: pointer;
  border: 1px solid rgba(233,238,242,.45); font: 700 18px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em;
  transition: border-color .4s var(--ri-ease), background .4s var(--ri-ease);
}
#ribbonIntro .ri-enter:hover { border-color: var(--ri-silver); background: rgba(233,238,242,.08); }
#ribbonIntro .ri-main {
  position: absolute; right: 28px; bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; cursor: pointer;
  background: rgba(0,0,0,.5); color: rgba(233,238,242,.85); border: 1px solid rgba(233,238,242,.28);
  font: 600 11px/1 Inter, sans-serif; letter-spacing: .2em; opacity: 0; transition: opacity .9s var(--ri-ease) 2.4s, border-color .4s;
}
#ribbonIntro .ri-main i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(233,238,242,.6); }
#ribbonIntro .ri-main[aria-pressed="true"] i { background: var(--ri-lime); border-color: var(--ri-lime); }
#ribbonIntro .ri-main:hover { border-color: var(--ri-silver); }
#ribbonIntro :focus-visible { outline: 2px solid var(--ri-yellow); outline-offset: 3px; }

#ribbonIntro.ri-run .ri-panel, #ribbonIntro.ri-still .ri-panel { transform: none; opacity: 1; }
#ribbonIntro.ri-run .ri-seven, #ribbonIntro.ri-still .ri-seven { opacity: 1; }
#ribbonIntro.ri-run h1, #ribbonIntro.ri-still h1 { opacity: 1; transform: translateY(14px) scale(1.04); }
#ribbonIntro.ri-locked h1 { transform: none; transition: transform .16s cubic-bezier(.2,0,0,1); } /* the one hard beat */
#ribbonIntro.ri-run .ri-actions, #ribbonIntro.ri-run .ri-main,
#ribbonIntro.ri-still .ri-actions, #ribbonIntro.ri-still .ri-main { opacity: 1; }
#ribbonIntro.ri-out { opacity: 0; transition: opacity .9s var(--ri-ease); pointer-events: none; }

@media (max-width: 760px) {
  #ribbonIntro .ri-panel { clip-path: polygon(0 0, 100% 0, 100% 34%, 0 62%); }
  #ribbonIntro .ri-panel::after { clip-path: polygon(0 61.6%, 100% 33.6%, 100% 34%, 0 62%); }
  #ribbonIntro .ri-seven { right: -2vw; top: 30%; font-size: 70vw; }
  #ribbonIntro .ri-top, #ribbonIntro .ri-copy { left: 16px; right: 16px; }
  #ribbonIntro .ri-main { left: 16px; right: auto; top: calc(56px + env(safe-area-inset-top, 0px)); bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #ribbonIntro *, #ribbonIntro { transition: none !important; }
  #ribbonIntro h1 { transform: none !important; }
}

/* The launch title hides every other layer while open; the ribbon intro is allowed through, as the Swing 21 opening was. */
body.launch-title-open #ribbonIntro#ribbonIntro#ribbonIntro#ribbonIntro#ribbonIntro,
body.launch-title-open #ribbonIntro#ribbonIntro#ribbonIntro#ribbonIntro#ribbonIntro * { visibility: visible !important; }