/* ─── Performance optimisations for bonanzanetflix.top ─── */

/* Promote heavy animated elements to their own GPU layer */
.aawdrd,                          /* ellipse decor container */
.aawdre,                          /* decor item */
.aawdrf,                          /* person container */
.aawdrg, .aawdrh, .aawdri,        /* person parts */
.aawdrl,                          /* effects layer */
.bottom__section-button,
.modal__logo,
.modal__logo-flare,
[data-js="reel"] {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Limit paint area – hint to the browser these regions are independent */
.aawdrd, .aawdrf, .aawdrl, [data-js="reel"], #slot {
  contain: layout paint style;
}

/* Reduce repaint area for the heavy fire shockwave GIF */
.aawdrl img {
  will-change: opacity;
  transform: translateZ(0);
}

/* Pause CPU-hungry continuous animations when tab is hidden */
@media (prefers-reduced-motion: reduce) {
  .aawdre,
  .aawdrg, .aawdrh, .aawdri,
  .modal__logo, .modal__logo-flare,
  .bottom__section-button { animation: none !important; }
}

/* Skip the heavy 500KB fire shockwave GIF on mobile (we still keep it for desktop) */
@media (max-width: 767px) {
  .aawdrl img[src*="desctop_fire_shockwave"] { display: none; }
}

/* Stop infinite person animation while a modal is open (saves ~10% CPU) */
.is--modal-open .aawdrg,
.is--modal-open .aawdrh,
.is--modal-open .aawdri { animation-play-state: paused !important; }

/* Don't ever invalidate layout when symbols load */
.symbol, .symbolContainer img, [class^="icon-"] {
  contain: layout paint;
  image-rendering: auto;
}

/* Anchor decorative ellipse items onto a transform-only animation
   (browser then doesn't have to recalc layout each frame) */
[data-js="ellipse"] [data-js="item"] {
  will-change: transform;
  transform: translateZ(0);
}

/* ─── Hide page edges / blend background ─── */
html, body {
  background: radial-gradient(ellipse at center, #311c5a 0%, #0a0524 80%) !important;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

/* Stretch main page wrapper to entire viewport, edges meet screen edges */
.aawdqu {
  width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: scroll !important;
}

/* Modal background also covers fully (no leaking edges around win modal) */
.modal__wrapper {
  background-size: cover !important;
  background-position: center center !important;
}



/* ─── Soft feather edges of the joker character image ─── */
.aawdrk {
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, #000 60%, transparent 100%);
}
.aawdrf:before { display: none !important; }   /* always hide rectangular bg-aura */