/* Fundo "sakura": brilhos borrados que flutuam, uma arvore de cerejeira ao fundo e petalas caindo.
   So decoracao (aria-hidden, sem clique). Respeita "reduzir movimento" e cai para menos petalas no celular. */
.sakura-fundo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #0b0709; }
.sakura-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,5,7,.15) 0, rgba(8,5,7,.3) 60%, rgba(8,5,7,.45) 100%); }
.sakura-brilho { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(80px); opacity: .32; will-change: transform; animation: sakura-flutua 38s ease-in-out infinite alternate; }
.sakura-brilho--a { left: -15vmax; top: -10vmax; background: #ff2a6d; }
.sakura-brilho--b { right: -18vmax; top: 15vh; background: #8a4bff; animation-duration: 46s; animation-delay: -12s; opacity: .26; }
.sakura-brilho--c { left: 25vw; bottom: -30vmax; background: #ff8fb1; animation-duration: 52s; animation-delay: -20s; opacity: .22; }
@keyframes sakura-flutua { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vmax, 5vmax, 0) scale(1.12); } }
.sakura-arvore { position: absolute; right: -6vmin; bottom: -4vmin; width: min(78vmin, 900px); aspect-ratio: 1; background: url(/assets/sakura-arvore.svg) no-repeat right bottom / contain; opacity: .85; }
.sakura-petalas { position: absolute; inset: 0; }
.sakura-petalas i { position: absolute; top: -6%; border-radius: 150% 0 150% 0; background: radial-gradient(circle at 30% 30%, #ffe3ec, #ff9fbd 70%, #ff7aa5); animation: sakura-cai linear infinite; will-change: transform; }
@keyframes sakura-cai {
  0%   { transform: translate3d(0, -8vh, 0) rotate(0deg); }
  25%  { transform: translate3d(5vw, 25vh, 0) rotate(110deg); }
  50%  { transform: translate3d(-4vw, 55vh, 0) rotate(210deg); }
  75%  { transform: translate3d(6vw, 85vh, 0) rotate(300deg); }
  100% { transform: translate3d(1vw, 112vh, 0) rotate(400deg); }
}
.sakura-petalas i:nth-child(1) { left: 32%; width: 19px; height: 23px; animation-duration: 24s; animation-delay: -4s; opacity: 0.65; filter: blur(1px); }
.sakura-petalas i:nth-child(2) { left: 62%; width: 20px; height: 25px; animation-duration: 25s; animation-delay: -2s; opacity: 0.45; }
.sakura-petalas i:nth-child(3) { left: 35%; width: 18px; height: 22px; animation-duration: 19s; animation-delay: -6s; opacity: 0.75; filter: blur(1px); }
.sakura-petalas i:nth-child(4) { left: 72%; width: 17px; height: 21px; animation-duration: 22s; animation-delay: -20s; opacity: 0.55; }
.sakura-petalas i:nth-child(5) { left: 83%; width: 12px; height: 15px; animation-duration: 29s; animation-delay: -29s; opacity: 0.75; filter: blur(1px); }
.sakura-petalas i:nth-child(6) { left: 3%; width: 20px; height: 25px; animation-duration: 28s; animation-delay: -2s; opacity: 0.55; filter: blur(1px); }
.sakura-petalas i:nth-child(7) { left: 7%; width: 14px; height: 17px; animation-duration: 28s; animation-delay: 0s; opacity: 0.65; }
.sakura-petalas i:nth-child(8) { left: 78%; width: 16px; height: 20px; animation-duration: 27s; animation-delay: -25s; opacity: 0.75; }
.sakura-petalas i:nth-child(9) { left: 95%; width: 19px; height: 23px; animation-duration: 23s; animation-delay: -4s; opacity: 0.65; }
.sakura-petalas i:nth-child(10) { left: 6%; width: 12px; height: 15px; animation-duration: 23s; animation-delay: -6s; opacity: 0.65; filter: blur(1px); }
.sakura-petalas i:nth-child(11) { left: 57%; width: 20px; height: 25px; animation-duration: 29s; animation-delay: -9s; opacity: 0.75; filter: blur(1px); }
.sakura-petalas i:nth-child(12) { left: 51%; width: 19px; height: 23px; animation-duration: 21s; animation-delay: -17s; opacity: 0.75; filter: blur(1px); }
.sakura-petalas i:nth-child(13) { left: 31%; width: 15px; height: 18px; animation-duration: 26s; animation-delay: 0s; opacity: 0.65; filter: blur(1px); }
.sakura-petalas i:nth-child(14) { left: 87%; width: 12px; height: 15px; animation-duration: 27s; animation-delay: -27s; opacity: 0.65; filter: blur(1px); }
.sakura-petalas i:nth-child(15) { left: 75%; width: 19px; height: 23px; animation-duration: 17s; animation-delay: -6s; opacity: 0.65; }
.sakura-petalas i:nth-child(16) { left: 17%; width: 11px; height: 13px; animation-duration: 23s; animation-delay: -20s; opacity: 0.75; }
.sakura-petalas i:nth-child(17) { left: 46%; width: 11px; height: 13px; animation-duration: 22s; animation-delay: -4s; opacity: 0.45; }
.sakura-petalas i:nth-child(18) { left: 56%; width: 16px; height: 20px; animation-duration: 29s; animation-delay: -3s; opacity: 0.45; filter: blur(1px); }
/* Ranking: a arte dos tronos vira o fundo borrado (como na pagina inicial). */
.sakura-fundo--ranking { background: #0b0709 url(/media/decor/fundoranking.png) center / cover no-repeat; }
.sakura-fundo--ranking::before { content: ""; position: absolute; inset: -40px; background: inherit; filter: blur(46px) saturate(1.5) brightness(.85); }
.sakura-fundo--ranking::after { background: linear-gradient(to bottom, rgba(8,5,7,.3) 0, rgba(8,5,7,.6) 55%, rgba(8,5,7,.9) 100%); }
@media (max-width: 700px) {
  .sakura-brilho { filter: blur(60px); }
  .sakura-arvore { width: 90vmin; opacity: .4; }
  .sakura-petalas i:nth-child(n+9) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sakura-brilho, .sakura-petalas i { animation: none; }
  .sakura-petalas { display: none; }
}