/* Animations du Book et du Suivi (29/10/2026). Une règle : on n'anime que
   transform et opacity, que le navigateur déplace sans repeindre la page, pour
   rester fluide même sans accélération graphique. Tout se coupe si le système
   demande moins d'animations (bloc final). */

/* ------------------------------------------------ changement de page ou d'onglet */
.rz-page-in { animation: rzPageIn .32s cubic-bezier(.2, .8, .3, 1); }
@keyframes rzPageIn { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------ bascule de thème en cercle (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* ------------------------------------------------ Book : palier de panoplie gagné */
#app .app .set-card.rz-pano { animation: rzPano 1.4s ease-out; }
@keyframes rzPano {
  0% { background: transparent; }
  15% { background: color-mix(in srgb, var(--da-violet-hi, #a855f7) 22%, transparent); }
  100% { background: transparent; }
}
#app .app .set-card.rz-pano .set-piece.worn { animation: rzPanoPiece .7s cubic-bezier(.3, 1.6, .5, 1); }
#app .app .set-card.rz-pano .set-piece.worn:nth-child(2) { animation-delay: .06s; }
#app .app .set-card.rz-pano .set-piece.worn:nth-child(3) { animation-delay: .12s; }
#app .app .set-card.rz-pano .set-piece.worn:nth-child(4) { animation-delay: .18s; }
#app .app .set-card.rz-pano .set-piece.worn:nth-child(5) { animation-delay: .24s; }
#app .app .set-card.rz-pano .set-piece.worn:nth-child(n+6) { animation-delay: .3s; }
@keyframes rzPanoPiece { 40% { transform: translateY(-5px) scale(1.15); } }
#app .app .rz-pano-fx {
  position: absolute; right: 4px; top: 2px; z-index: 3; pointer-events: none; white-space: nowrap;
  font: 900 11px var(--body, sans-serif); color: #fff; padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--da-violet, #8b3fe0), var(--da-violet-hi, #a855f7));
  box-shadow: 0 4px 12px -4px rgba(168, 85, 247, .9);
  animation: rzPanoFx 1.7s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes rzPanoFx {
  0% { opacity: 0; transform: translateY(6px) scale(.7); }
  15% { opacity: 1; transform: translateY(-2px) scale(1.06); }
  25% { transform: translateY(-2px) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* ------------------------------------------------ Book : changement de classe */
#app .app .char-portrait.rz-classe img { animation: rzClasse .9s cubic-bezier(.2, .8, .3, 1); }
@keyframes rzClasse {
  0% { opacity: 0; transform: perspective(600px) rotateY(-300deg) scale(.6) translateY(20px); }
  60% { opacity: 1; transform: perspective(600px) rotateY(15deg) scale(1.06); }
  100% { transform: none; }
}
#app .app .rz-classe-fx { position: absolute; left: 50%; top: 55%; width: 0; height: 0; pointer-events: none; z-index: 2; }
#app .app .rz-classe-fx i {
  position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 25%, rgba(196, 140, 255, .9) 50%, transparent 72%);
  transform: rotate(var(--a)) translateY(0);
  animation: rzClasseFx 1.1s cubic-bezier(.15, .7, .3, 1) var(--d) forwards;
}
@keyframes rzClasseFx {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--a) + 40deg)) translateY(-150px) scale(1); }
}

/* ------------------------------------------------ Book : exo PA, PM ou PO posé */
#app .app .slot-exo .exo-tag { animation: rzExo .5s cubic-bezier(.3, 1.7, .5, 1) backwards; }
@keyframes rzExo { 0% { opacity: 0; transform: translateY(-12px) scale(1.5); } 60% { opacity: 1; } }
#app .app .slot-exo .exo-tag.ap { box-shadow: 0 0 0 0 rgba(44, 121, 196, .8); animation: rzExo .5s cubic-bezier(.3, 1.7, .5, 1) backwards, rzExoEclair .8s ease-out .15s; }
@keyframes rzExoEclair { 0% { box-shadow: 0 0 0 0 rgba(90, 170, 255, .9); } 100% { box-shadow: 0 0 0 10px rgba(90, 170, 255, 0); } }

/* ------------------------------------------------ Book : vider le stuff */
.rz-vol-vide { position: fixed; z-index: 400; pointer-events: none; will-change: transform, opacity; object-fit: contain; }

/* ------------------------------------------------ Book : cap de PP franchi */
#app .app .ks-pp.rz-cap { animation: rzCap 1.2s ease-out; }
@keyframes rzCap {
  0% { transform: scale(1); }
  12% { transform: scale(1.04); }
  30% { transform: scale(.99); }
  50% { transform: scale(1); }
}
#app .app .ks-pp.rz-cap strong { animation: rzCapChiffre .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rzCapChiffre { 35% { transform: translateY(-6px) scale(1.12); } }
#app .app .ks-pp.rz-cap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 240, 200, .75) 50%, transparent 65%);
  transform: translateX(-110%); animation: rzCapReflet .9s ease-out forwards;
}
@keyframes rzCapReflet { to { transform: translateX(110%); } }
#app .app .rz-cap-fx {
  position: absolute; left: 50%; top: 4px; z-index: 3; pointer-events: none; white-space: nowrap;
  font: 900 12px var(--body, sans-serif); color: #4a3000; padding: 2px 10px; border-radius: 999px;
  background: linear-gradient(90deg, #ffd77a, #e6a72e); box-shadow: 0 4px 12px -4px rgba(230, 167, 46, .9);
  animation: rzCapFx 1.6s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes rzCapFx {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); }
  15% { opacity: 1; transform: translate(-50%, -2px) scale(1.06); }
  25% { transform: translate(-50%, -2px) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -14px); }
}

/* ------------------------------------------------ Suivi : carte cochée */
.resource-item-row.rz-flip .res-row-icon { animation: rzFlip .7s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes rzFlip {
  0% { transform: perspective(400px) rotateY(0); }
  50% { transform: perspective(400px) rotateY(180deg) scale(1.2); }
  100% { transform: perspective(400px) rotateY(360deg); }
}
.resource-item-row.rz-flip { position: relative; overflow: hidden; }
.resource-item-row.rz-flip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(120, 230, 160, .28) 50%, transparent 70%);
  transform: translateX(-100%); animation: rzFlipVague .8s ease-out forwards;
}
@keyframes rzFlipVague { to { transform: translateX(100%); } }

/* ------------------------------------------------ Suivi : barres de progression
   La barre glisse jusqu'à sa valeur, une vague lumineuse la parcourt. */
#modal-item-progress-bar, .res-progress-fill { position: relative; overflow: hidden; transition: width .6s cubic-bezier(.2, .8, .3, 1); }
html body #modal-item-progress-bar::after, .res-progress-fill::after {
  display: block;
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-100%); animation: rzVague 2.6s ease-in-out .2s 1 forwards;
}
@keyframes rzVague { to { transform: translateX(100%); } }

/* ------------------------------------------------ Suivi : multiplicateur du calculateur */
#prosp-mult-total { display: inline-block; }
#prosp-mult-total.rz-roule { animation: rzRoule .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes rzRoule { 30% { transform: translateY(-3px) scale(1.08); } }

/* ------------------------------------------------ Suivi : éclosion d'un Dofus */
.rz-eclosion {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(20, 10, 35, .55), rgba(20, 10, 35, .75));
  animation: rzEcFond .35s ease-out;
}
.rz-eclosion.rz-ec-fin { opacity: 0; transition: opacity .45s ease; }
@keyframes rzEcFond { from { opacity: 0; } }
.rz-ec-scene { position: relative; width: 320px; height: 320px; display: grid; place-items: center; }
/* L'œuf tremble, se fissure, encaisse le flash puis réapparaît révélé : plus
   grand, doré, il flotte au-dessus de la bannière jusqu'à la fin. */
.rz-ec-oeuf { position: relative; width: 150px; height: 150px; animation: rzEcOeuf 3.4s cubic-bezier(.4, 0, .6, 1) forwards; }
.rz-ec-oeuf img { width: 100%; height: 100%; object-fit: contain; animation: rzEcBrille 2.2s ease-out 1.1s forwards; }
@keyframes rzEcOeuf {
  0% { transform: scale(.4); opacity: 0; }
  9% { transform: scale(1.05); opacity: 1; }
  13% { transform: scale(1); }
  17%, 23%, 29% { transform: rotate(-7deg); }
  20%, 26%, 31% { transform: rotate(7deg); }
  32% { transform: rotate(0) scale(1.06); }
  35% { transform: scale(.82); }
  44% { transform: scale(1.38); }
  52% { transform: scale(1.22) translateY(0); }
  70% { transform: scale(1.22) translateY(-8px); }
  85% { transform: scale(1.22) translateY(0); }
  100% { transform: scale(1.22) translateY(-6px); opacity: 1; }
}
@keyframes rzEcBrille {
  0% { filter: brightness(2.2) drop-shadow(0 0 0 rgba(255, 215, 120, 0)); }
  35% { filter: brightness(1.15) drop-shadow(0 0 18px rgba(255, 215, 120, .95)); }
  100% { filter: brightness(1.05) drop-shadow(0 0 12px rgba(255, 215, 120, .8)); }
}
.rz-ec-fissures { position: absolute; inset: 18% 22%; width: 56%; height: 64%; overflow: visible; }
.rz-ec-fissures path {
  fill: none; stroke: #fff7d6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 120; stroke-dashoffset: 120; opacity: 0;
  animation: rzEcFissure .5s ease-out .65s forwards, rzEcFissureFin .2s ease-out 1.15s forwards;
}
.rz-ec-fissures path:nth-child(n+2) { animation-delay: .9s, 1.15s; }
@keyframes rzEcFissureFin { to { opacity: 0; } }
@keyframes rzEcFissure { to { stroke-dashoffset: 0; opacity: 1; } }
.rz-ec-halo {
  position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 140, .65), rgba(255, 190, 80, .15) 45%, transparent 70%);
  opacity: 0; animation: rzEcHalo 3s ease-out forwards;
}
@keyframes rzEcHalo { 0%, 20% { opacity: 0; transform: scale(.5); } 45% { opacity: .6; } 75% { opacity: 1; transform: scale(1.2); } 100% { opacity: .5; transform: scale(1.3); } }
.rz-ec-rayons { position: absolute; inset: 0; opacity: 0; animation: rzEcRayons 2.4s ease-out 1.05s forwards; }
@keyframes rzEcRayons { 0% { opacity: 0; transform: scale(.4) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2) rotate(40deg); } }
.rz-ec-rayon {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 160px; margin-left: -4px;
  transform-origin: 50% 0; transform: rotate(var(--a));
  background: linear-gradient(rgba(255, 240, 190, .95), transparent);
  border-radius: 4px;
}
.rz-ec-flash {
  position: absolute; width: 200px; height: 200px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255, 236, 170, .9) 30%, transparent 70%);
  animation: rzEcFlash .7s ease-out 1.1s forwards;
}
@keyframes rzEcFlash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4); } }
.rz-ec-eclats { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.rz-ec-eclat {
  position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 25%, rgba(255, 210, 110, .95) 50%, transparent 72%);
  transform: rotate(var(--a)) translateY(0);
  animation: rzEcEclat 1.2s cubic-bezier(.15, .7, .3, 1) calc(1.12s + var(--d)) forwards;
}
@keyframes rzEcEclat { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-170px) scale(.4); } }
.rz-ec-banniere {
  position: absolute; bottom: -6px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translateX(-50%); opacity: 0; white-space: nowrap;
  animation: rzEcBan .6s cubic-bezier(.2, 1.3, .4, 1) 1.3s forwards;
}
.rz-ec-banniere span { font: 800 12px "Nunito", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.rz-ec-banniere strong {
  font: 900 28px/1.1 "Nunito", sans-serif; color: #3a2400; padding: 6px 24px; border-radius: 999px;
  background: linear-gradient(135deg, #fff0b8, #ffcf55 45%, #e6a72e);
  box-shadow: 0 10px 30px -6px rgba(230, 167, 46, .9), 0 0 0 3px rgba(255, 220, 130, .35);
}
@keyframes rzEcBan { from { opacity: 0; transform: translate(-50%, 16px) scale(.7); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .rz-page-in, #app .app .set-card.rz-pano, #app .app .set-card.rz-pano .set-piece.worn, #app .app .char-portrait.rz-classe img,
  #app .app .slot-exo .exo-tag, #app .app .ks-pp.rz-cap, #app .app .ks-pp.rz-cap strong, .resource-item-row.rz-flip .res-row-icon,
  #prosp-mult-total.rz-roule, html body #modal-item-progress-bar::after, .res-progress-fill::after { animation: none !important; }
  #app .app .rz-pano-fx, #app .app .rz-classe-fx, #app .app .rz-cap-fx, #app .app .ks-pp.rz-cap::after, .resource-item-row.rz-flip::after, .rz-eclosion { display: none !important; }
  #modal-item-progress-bar, .res-progress-fill { transition: none; }
}