/* ==================================================================
   perf.css, le mode d'effets allégés.

   Activé par `html.fx-lite` (voir js/perf.js) quand le navigateur dessine
   sans accélération matérielle, ou quand le joueur le demande.

   La règle est simple : un navigateur sait animer `transform` et
   `opacity` sans repeindre, en déplaçant des calques déjà dessinés.
   Tout le reste (flou, ombre portée animée, mode de fusion, dégradé qui
   défile) l'oblige à recalculer chaque pixel à chaque image. Avec une
   carte graphique, ça passe ; au processeur, une seule couche floutée
   plein écran coûte plus qu'une image entière.

   On garde donc toute la chorégraphie, et on retire uniquement ce qui
   se repeint : les flous, les fusions, les dégradés animés et les
   reflets. L'ouverture reste spectaculaire, elle devient fluide.
   ================================================================== */

/* --------------------------- surfaces floutées ---------------------------
   `backdrop-filter` floute ce qui passe dessous, à chaque image où quelque
   chose bouge derrière. On le remplace par un fond presque opaque. */
.fx-lite .topbar,
.fx-lite .tabbar,
.fx-lite .coll-toolbar,
.fx-lite .player,
.fx-lite .shop-nav,
.fx-lite .rail-nav,
.fx-lite .deck-count,
.fx-lite .foot-count,
.fx-lite .act,
.fx-lite .jacket-star,
.fx-lite .detail-scrim,
.fx-lite .tour-mask {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fx-lite .topbar { background: rgba(9, 9, 15, .97); }
.fx-lite .tabbar { background: rgba(9, 9, 16, .99); }
.fx-lite .coll-toolbar { background: #11111b; }
.fx-lite .player { background: rgba(16, 16, 26, .98); }

/* ------------------------------- le sachet ------------------------------- */
.fx-lite .pack-prism,
.fx-lite .pack-sheen,
.fx-lite .pack-gloss { display: none; }
.fx-lite .pack-halo { filter: none; animation: none; opacity: .45; }
.fx-lite .pack-shadow { filter: none; animation: none; }
.fx-lite .win-disc { filter: none; }
.fx-lite .pack-motif { mix-blend-mode: normal; opacity: .22; }
.fx-lite .pack-window img { filter: none; }
.fx-lite .foot-gems i { box-shadow: none; }
.fx-lite .shop-logo { mix-blend-mode: normal; opacity: .14; animation: none; filter: none; }
.fx-lite .shop-skeleton { animation: none; }

/* ------------------------------- la scène ------------------------------- */
.fx-lite .stage-rays { display: none; }
.fx-lite #fx-flash { mix-blend-mode: normal; }
.fx-lite .cr-fill { filter: none; }
.fx-lite .deck::after { filter: none; animation: none; }
.fx-lite .dk-disc,
.fx-lite .back-disc { filter: none; }
.fx-lite .dk-logo,
.fx-lite .back-logo { filter: none; }
.fx-lite .reveal-slot.has-aura .aura { filter: none; }
.fx-lite .reveal-slot.is-mythic .aura { animation: aura-pulse 2.6s ease-in-out infinite; }
.fx-lite .stage[data-rarity="mythic"] .stage-rays { animation: none; }

/* la déchirure : la même explosion, sans ombre portée animée */
.fx-lite .charge-wrap.is-tearing .tear-light { animation-name: tear-burst-lite; }
@keyframes tear-burst-lite {
  0%   { transform: scale(1, 1);    opacity: 0; }
  18%  { transform: scale(26, 1.6); opacity: 1; }
  46%  { transform: scale(40, 30);  opacity: .9; }
  100% { transform: scale(70, 120); opacity: 0; }
}

/* le tampon de rareté claque sans flou de mouvement */
.fx-lite .rarity-stamp.is-on { animation-name: stamp-slam-lite; }
.fx-lite .rarity-stamp.is-mythic.is-on { animation: stamp-slam-lite .9s cubic-bezier(.16,1,.3,1) forwards; background-position: 0 0; }
@keyframes stamp-slam-lite {
  0%   { opacity: 0; transform: scale(4) rotate(-9deg); }
  22%  { opacity: 1; transform: scale(1) rotate(-2deg); }
  30%  { transform: scale(1.09) rotate(1deg); }
  40%  { transform: scale(1) rotate(0); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}

/* les éclats volent sans filtre de luminosité ni ombre recalculés */
.fx-lite .shard { animation-name: shard-fly-lite; }
.fx-lite .shard::after { mix-blend-mode: normal; opacity: .35; }
@keyframes shard-fly-lite {
  0%   { transform: translate3d(0,0,0); opacity: 1; }
  65%  { opacity: 1; }
  100% {
    transform: translate3d(var(--tx), var(--ty), 240px)
               rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(.7);
    opacity: 0;
  }
}

/* -------------------------------- la carte -------------------------------- */
.fx-lite .card::after { filter: none; opacity: 0 !important; }
.fx-lite .card-bg { display: none; }
.fx-lite .art-holo { mix-blend-mode: normal; animation: none !important; opacity: calc(var(--holo, 0) * .6); }
.fx-lite .art-shine { mix-blend-mode: normal; }
.fx-lite .card:not(.is-popped) .card-glare { display: none; }
.fx-lite .star { filter: none; }
.fx-lite .meter-track i { box-shadow: none; }
.fx-lite .card.r-secret .card-frame { animation: none; }
.fx-lite .card.is-cracking .card-back::after { mix-blend-mode: normal; opacity: .6; }
.fx-lite .card.is-sounding .card-art::after { filter: none; }

/* ------------------------------ la collection ------------------------------
   Des dizaines de disques qui tournent en permanence, chacun sur son
   calque : au processeur, c'est autant de rotations à recomposer. Ils ne
   tournent plus qu'au survol. */
.fx-lite .disc-label { animation: none; }
.fx-lite .jacket-item:hover .disc-label { animation: disc-spin 3.5s linear infinite; }
.fx-lite .disc-pie { filter: none; }
.fx-lite .jacket-spine { mix-blend-mode: normal; opacity: .5; }
.fx-lite .jacket-badge,
.fx-lite .kpi-bar i,
.fx-lite .sp-bar i,
.fx-lite .coll-fill { box-shadow: none; }

/* -------------------------------- le reste -------------------------------- */
.fx-lite .ach-badge.is-ready .badge-svg { filter: none; }
.fx-lite .brand-logo { filter: none; }
.fx-lite .tour-ring { animation: none; }
.fx-lite .stage-hint { animation: none; }

/* l'aura et les anneaux de charge couvrent une grande surface : en mode
   allégé, un seul anneau et une aura resserrée */
.fx-lite .reveal-slot.is-charging::after { display: none; }
.fx-lite .reveal-slot.has-aura .aura { width: 140%; }