/* Vitrine du Suivi, chargée après refonte.css :
   - un Dofus (ou objet) obtenu se voit : fond teinté de sa couleur, icône qui
     luit, ruban « Obtenu » dans le coin ;
   - les barres d'avancement prennent la couleur de l'objet, avec un reflet
     qui passe, et deviennent dorées à 100 % ;
   - l'ambiance de la page (calque .rz-amb) se teinte des couleurs des Dofus
     affichés, calculées par refonte.js (--amb1, --amb2).
   --dc est la couleur dominante de l'icône de chaque carte (refonte.js). */

/* ── Cartes obtenues ──────────────────────────────────────────────────────── */
html body .item-card.crafted {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--dc) 16%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--acc) 12%, rgb(37, 27, 48)), rgba(37, 27, 48, .95) 55%) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent),
    0 8px 24px color-mix(in srgb, var(--dc) 22%, transparent) !important;
}
/* la refonte force le fond des cartes en !important, thème clair compris */
html[data-theme="light"] body .item-card.crafted {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--dc) 18%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--acc) 14%, #fff), rgba(250, 247, 252, .97) 55%) !important;
}
html body .item-card.crafted::before { background: linear-gradient(180deg, var(--acc-hi), var(--dc)); width: 4px; }
html body .item-card.crafted .item-slot-frame {
  box-shadow: inset 0 0 0 2px var(--acc) !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--dc) 30%, transparent), transparent 70%);
}
html body .item-card.crafted .item-slot-img { animation: rz-oeuf 3.2s ease-in-out infinite; }
@keyframes rz-oeuf {
  0%, 100% { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--dc) 70%, transparent)); transform: translateY(0); }
  50%      { filter: drop-shadow(0 0 12px var(--dc)) brightness(1.08); transform: translateY(-2px); }
}
/* Ruban « Obtenu » : style-enhanced.css posait un voile sur ::after, on le reprend */
html body .item-card.crafted::after {
  content: "Obtenu";
  inset: auto;
  top: 12px;
  right: -32px;
  width: 116px;
  padding: 3px 0;
  border-radius: 0;
  transform: rotate(38deg);
  background: linear-gradient(90deg, #f7d27a, var(--acc) 55%, var(--acc-dk));
  color: var(--on-acc);
  font: 800 10px/1.4 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  z-index: 2;
}
html body .item-card.crafted .item-title-box { padding-right: 30px; }

/* ── Barres d'avancement ──────────────────────────────────────────────────── */
html body .item-card .progress-bar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dc) 45%, var(--cell)), var(--dc)) !important;
  transition: width .6s var(--ease);
}
html body .item-card .progress-bar::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
  /* par transform et non background-position : le reflet glisse sans repeindre
     chaque barre à chaque image, sur des dizaines de cartes à la fois */
  animation: rz-barre 2.6s linear infinite; will-change: transform;
}
@keyframes rz-barre { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
html body .item-card .progress-bar.fill-success {
  background: linear-gradient(90deg, var(--acc-dk), #ffe08a, var(--acc), #ffe08a, var(--acc-dk)) !important;
  background-size: 200% 100% !important;
  animation: rz-or 3s linear infinite;
  box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 60%, transparent) !important;
}
@keyframes rz-or { to { background-position: -200% 0; } }

/* ── Ambiance aux couleurs des Dofus affichés ─────────────────────────────── */
@property --amb1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --amb2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
.rz-amb {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 25% 0%, color-mix(in srgb, var(--amb1) 62%, transparent), transparent 72%),
    radial-gradient(65% 60% at 95% 85%, color-mix(in srgb, var(--amb2) 50%, transparent), transparent 72%),
    radial-gradient(45% 40% at 60% 45%, color-mix(in srgb, var(--amb1) 22%, transparent), transparent 70%);
  transition: --amb1 1.4s var(--ease), --amb2 1.4s var(--ease);
}
html[data-theme="light"] .rz-amb { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  html body .item-card.crafted .item-slot-img,
  html body .item-card .progress-bar::after,
  html body .item-card .progress-bar.fill-success { animation: none !important; }
}