.no9-intro {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  background: var(--bg);
}

.no9-intro__skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 3;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 99px;
  color: var(--white);
  font: 700 13px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.no9-intro__skip:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.no9-intro__edge {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -46px;
  height: 50px;
  background: var(--pink);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 92% 70%, 85% 45%, 74% 85%, 63% 50%, 52% 100%, 41% 55%, 30% 80%, 19% 40%, 9% 75%, 0 45%);
}

.no9-intro__streak { position: absolute; left: -10%; width: 120%; height: 90px; pointer-events: none; }
.no9-intro__streak svg { display: block; width: 100%; height: 100%; transform-origin: left center; transform: scaleX(0); }
.no9-intro__streak--1 { top: 14%; transform: rotate(-24deg); }
.no9-intro__streak--2 { top: 62%; transform: rotate(-16deg); }
.no9-intro__streak--3 { top: 80%; height: 44px; transform: rotate(-28deg); }

.no9-intro__stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }

.no9-intro__badge { position: relative; width: 132px; height: 132px; }
.no9-intro__badge::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 92, 138, .7), transparent 65%);
  opacity: 0;
}
.no9-intro__badge img { position: relative; display: block; width: 100%; height: 100%; opacity: 0; }

.no9-intro__u6s { margin: 14px 0 0; color: var(--pink); font-size: 30px; opacity: 0; }
.no9-intro__foot { margin: 0; color: var(--white); font-size: 74px; opacity: 0; }
.no9-intro__bingo { margin: -4px 0 0; padding: .06em 0 .1em; color: var(--pink); font-size: clamp(84px, 24vw, 104px); text-shadow: 0 0 30px rgba(255, 92, 138, .35); overflow: hidden; }
.no9-intro__bingo-in { display: block; transform: translateX(-110%); opacity: 0; }

.no9-intro__balls { display: flex; gap: 8px; margin-top: 18px; }
.no9-intro__balls .no9-intro__ball { opacity: 0; }
.no9-intro__balls .no9-intro__ball:nth-child(1) { --i: 0; }
.no9-intro__balls .no9-intro__ball:nth-child(2) { --i: 1; }
.no9-intro__balls .no9-intro__ball:nth-child(3) { --i: 2; }
.no9-intro__balls .no9-intro__ball:nth-child(4) { --i: 3; }
.no9-intro__balls .no9-intro__ball:nth-child(5) { --i: 4; }
.no9-intro__balls .no9-intro__ball:nth-child(6) { --i: 5; }

.no9-intro__pot { margin: 18px 0 0; font-size: 30px; opacity: 0; }
.no9-intro__pot span { color: var(--pink); }

.no9-intro.is-play .no9-intro__streak svg { animation: no9-intro-streak .45s var(--ease) both; }
.no9-intro.is-play .no9-intro__streak--1 svg { animation-delay: .1s; }
.no9-intro.is-play .no9-intro__streak--2 svg { animation-delay: .22s; }
.no9-intro.is-play .no9-intro__streak--3 svg { animation-delay: .34s; }
.no9-intro.is-play .no9-intro__badge img { animation: no9-intro-badge .8s var(--ease) .45s both; }
.no9-intro.is-play .no9-intro__badge::before { animation: no9-intro-glow .7s ease-in-out 1.1s 2 both; }
.no9-intro.is-play .no9-intro__u6s { animation: no9-intro-slam .4s var(--ease) 1.2s both; }
.no9-intro.is-play .no9-intro__foot { animation: no9-intro-slam .45s var(--ease) 1.4s both; }
.no9-intro.is-play .no9-intro__bingo-in { animation: no9-intro-brush .45s var(--ease) 1.7s both, no9-intro-shake .4s linear 2.15s; }
.no9-intro.is-play.is-balls .no9-intro__balls .no9-intro__ball { animation: no9-intro-drop .75s linear both; animation-delay: calc(var(--i) * .08s); }
.no9-intro.is-play.is-pot .no9-intro__pot { animation: no9-intro-slam .35s var(--ease) both; }
.no9-intro.is-play.is-out { animation: no9-intro-out .55s cubic-bezier(.7, 0, .3, 1) forwards; }

@keyframes no9-intro-streak { to { transform: scaleX(1); } }
@keyframes no9-intro-badge {
  0% { opacity: 0; transform: scale(0) rotate(-540deg); }
  70% { opacity: 1; transform: scale(1.15) rotate(12deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes no9-intro-glow {
  0%, 100% { opacity: 0; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes no9-intro-slam {
  0% { opacity: 0; transform: scale(2.6); }
  65% { opacity: 1; transform: scale(.94); }
  100% { opacity: 1; transform: none; }
}
@keyframes no9-intro-brush {
  0% { opacity: 0; transform: translateX(-110%); }
  10% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes no9-intro-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-5px, 2px) rotate(-1.5deg); }
  40% { transform: translate(5px, -2px) rotate(1.5deg); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, 0); }
}
@keyframes no9-intro-drop {
  0% { opacity: 0; transform: translateY(-460px); animation-timing-function: ease-in; }
  50% { opacity: 1; transform: translateY(0); animation-timing-function: ease-out; }
  68% { transform: translateY(-34px); animation-timing-function: ease-in; }
  84% { transform: translateY(0); animation-timing-function: ease-out; }
  92% { transform: translateY(-8px); animation-timing-function: ease-in; }
  100% { opacity: 1; transform: none; }
}
@keyframes no9-intro-out { to { transform: translateY(calc(-100% - 60px)); } }

@media (prefers-reduced-motion: reduce) {
  .no9-intro { display: none !important; }
}