/* One small, transparent vector shared by every decorative effect. */
:root { --ninja-bubble:url('/assets/ninja-bubble.svg'); }
.quiz-bubbles i:nth-child(n),
body.ninja-tutorial::before, body.ninja-tutorial::after,
body:has(#publicSetup.open)::after, body:has(#lobby.open)::after {
  background:var(--ninja-bubble) center/contain no-repeat;
  border:0; box-shadow:none;
}

/* The logo bubbles stay behind content and never intercept interaction. */
.intro, .blog-modal, body.ninja-ambient { isolation:isolate; }
.intro::before, .intro::after,
.blog-modal::before, .blog-modal::after,
body.ninja-ambient::before, body.ninja-ambient::after {
  content:""; position:fixed; width:clamp(7rem,19vw,17rem); aspect-ratio:1;
  background:var(--ninja-bubble) center/contain no-repeat;
  pointer-events:none; z-index:-1;
  animation:ninja-drift 9s ease-in-out infinite alternate;
}
.intro::before, .blog-modal::before, body.ninja-ambient::before { top:9%; right:4%; }
.intro::after, .blog-modal::after, body.ninja-ambient::after {
  bottom:7%; left:3%; width:clamp(9rem,24vw,20rem);
  animation-duration:12s; animation-direction:alternate-reverse;
}
body.ninja-ambient::before, body.ninja-ambient::after { z-index:0; }
body.ninja-ambient > main { position:relative; z-index:1; }
.intro__mark { background:var(--ninja-bubble) center/contain no-repeat; border-color:transparent; box-shadow:none; }
.intro__mark svg { opacity:0; }
.intro__mark:hover { background:var(--ninja-bubble) center/contain no-repeat; }

/* Opaque scene backdrops prevent the quiz flashing through transitions. */
body:has(#publicSetup.open)::before, body:has(#lobby.open)::before,
body.to-tutorial::before {
  background:var(--ninja-bubble) 8% 80%/clamp(9rem,24vw,19rem) auto no-repeat,
    var(--ninja-bubble) 82% 18%/clamp(6rem,15vw,12rem) auto no-repeat,
    linear-gradient(145deg,#f7f7f5,#eef6fb 52%,#f4f2fb);
}
body:has(#publicSetup.open)::before, body:has(#lobby.open)::before {
  background:var(--ninja-bubble) 8% 80%/clamp(9rem,24vw,19rem) auto no-repeat,
    linear-gradient(145deg,#f7f7f5,#eef6fb 52%,#f4f2fb);
}
.done {
  background:var(--ninja-bubble) 4% 85%/clamp(8rem,24vw,20rem) auto no-repeat,
    var(--ninja-bubble) 94% 12%/clamp(6rem,18vw,15rem) auto no-repeat,#f3f8fb;
}
.dash, .review {
  background-image:var(--ninja-bubble),var(--ninja-bubble);
  background-position:98% 8%,2% 90%;
  background-size:clamp(6rem,17vw,14rem),clamp(8rem,21vw,18rem);
  background-repeat:no-repeat;
}
.certificate__preview::after { background:var(--ninja-bubble) center/contain no-repeat; }

/* Celebrations use floating bubbles, not spinning rays or rainbow confetti. */
.award.show::before {
  width:180px; height:180px;
  background:var(--ninja-bubble) center/contain no-repeat;
  animation:ninja-award-breathe 4s ease-in-out infinite alternate;
}
.award.show::after { display:none; }
.confetti { position:fixed; inset:0; pointer-events:none; }
.done > .confetti { width:auto; max-width:none; }
.done > :not(.confetti) { position:relative; z-index:1; }
.confetti i {
  top:auto; bottom:-90px; left:var(--x); width:var(--size,42px); height:var(--size,42px);
  border:0; border-radius:50%;
  background:var(--ninja-bubble) center/contain no-repeat;
  animation:ninja-rise var(--d,5s) ease-out var(--delay,0s) both;
}
.boot__spinner {
  width:48px; height:48px; border:0;
  background:var(--ninja-bubble) center/contain no-repeat;
  animation:ninja-drift 2s ease-in-out infinite alternate;
}
@keyframes ninja-drift { from { transform:translate3d(0,0,0); } to { transform:translate3d(-16px,22px,0) rotate(5deg); } }
@keyframes ninja-rise {
  0% { opacity:0; transform:translate3d(0,0,0) scale(.75); }
  12% { opacity:.9; }
  80% { opacity:.7; }
  100% { opacity:0; transform:translate3d(var(--drift,25px),-115vh,0) scale(1.12); }
}
@keyframes ninja-award-breathe {
  from { opacity:.5; transform:translate(-50%,-50%) scale(.94); }
  to { opacity:.8; transform:translate(-50%,-50%) scale(1.1); }
}
@media (max-width:600px) {
  .quiz-bubbles i:nth-child(n) { max-width:42vw; max-height:42vw; }
  .confetti i:nth-child(n+15) { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .quiz-bubbles i, .intro::before, .intro::after, .blog-modal::before, .blog-modal::after,
  body.ninja-ambient::before, body.ninja-ambient::after,
  body.ninja-tutorial::before, body.ninja-tutorial::after,
  .award.show::before, .boot__spinner { animation:none!important; }
  .confetti { display:none; }
}