/* ===================================================
   KURO ARCANA — Révélations spéciales (revelations.js), classes .rv-*
   Une durée par scène (--rv-d) ; toutes les étapes sont en % de cette durée.
   Uniquement transform (et ses propriétés rotate / translate / scale) et opacity.
   =================================================== */

/* La carte quitte sa place pour se jouer en grand au centre, sur un fond assombri, puis y revient */
.rv-calque {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.rv-calque::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5, 2, 8, 0.82);
  animation: rv-fondu 0.25s ease-out both;
  transition: opacity var(--rv-retour, 320ms) ease;
}
/* ≈ 70 % de la largeur sur mobile, 360 px au plus, et toujours dans la hauteur de l'écran */
.rv-calque .rv-scene { width: min(70vw, 360px, 46vh); transition: transform var(--rv-retour, 320ms) cubic-bezier(0.4, 0, 0.2, 1); }
.rv-calque.rv-retour::before { opacity: 0; }
.rv-calque.rv-retour .rv-bandeau, .rv-calque.rv-retour .rv-masque { opacity: 0 !important; }
.rv-place { display: block; }

/* La carte révélée ne joue pas l'apparition habituelle */
.rv-hote {
  position: relative;
  z-index: 5;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.rv-scene {
  --rv-d: 2500ms;
  --rv-couleur: #ffd34d;
  --rv-clair: #fff6c8;
  position: relative;
  perspective: 900px;
  container-type: inline-size;
}

.rv-fullart { --rv-couleur: #d9e2ec; --rv-clair: #ffffff; }
.rv-troll { --rv-couleur: #ffd34d; --rv-clair: #fff6c8; }

/* ---------- Carte : recto (la vraie carte et son contour) et dos ---------- */
.rv-tourne {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  animation: rv-tourne var(--rv-d) cubic-bezier(0.5, 0, 0.2, 1) both;
}

.rv-recto {
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
}

.rv-dos {
  position: absolute;
  inset: 6%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255, 215, 0, 0.55);
  border-radius: 9% / 6.5%;
  background:
    radial-gradient(circle at 50% 45%, rgba(153, 50, 204, 0.55), transparent 65%),
    linear-gradient(160deg, #22081a, #07030a);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  animation: rv-trembler var(--rv-d) linear both;
}

.rv-kanji {
  position: relative;
  font-family: 'Cinzel', serif;
  font-size: 30cqw;
  color: rgba(255, 215, 0, 0.75);
}

/* Lueur du dos : la couleur annonce la rareté */
.rv-lueur {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--rv-clair), var(--rv-couleur) 45%, transparent 80%);
  opacity: 0;
  animation: rv-lueur var(--rv-d) ease-in both;
}

.rv-lueur-rouge { display: none; }

/* Rayons en rotation derrière la carte */
.rv-rayons {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rv-couleur) 55%, transparent) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  animation: rv-rayons var(--rv-d) linear both;
}

.rv-fullart .rv-rayons { display: none; }

/* Flash, onde de choc, particules */
.rv-flash,
.rv-onde {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.rv-flash {
  width: 220%;
  background: radial-gradient(circle, #fff 0%, var(--rv-clair) 25%, color-mix(in srgb, var(--rv-couleur) 60%, transparent) 45%, transparent 70%);
  animation: rv-flash var(--rv-d) ease-out both;
}

.rv-onde {
  width: 90%;
  border: 3px solid var(--rv-clair);
  animation: rv-onde var(--rv-d) ease-out both;
}

.rv-fullart .rv-onde { display: none; }

.rv-particules i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.4cqw;
  height: 2.4cqw;
  margin: -1.2cqw;
  border-radius: 50%;
  background: var(--rv-clair);
  opacity: 0;
  pointer-events: none;
  animation: rv-eclat var(--rv-d) ease-out both;
}

/* Bandeau de la rareté */
.rv-bandeau {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: 14%;
  padding: 0.35em 0;
  background: linear-gradient(90deg, transparent, rgba(10, 5, 5, 0.9) 18%, rgba(10, 5, 5, 0.9) 82%, transparent);
  color: var(--rv-couleur);
  font-family: 'Cinzel', serif;
  font-size: 11cqw;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 10px var(--rv-couleur);
  opacity: 0;
  pointer-events: none;
  animation: rv-bandeau var(--rv-d) cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/* Reflet de la vitrine (Full Art) */
.rv-reflet {
  display: none;
  position: absolute;
  inset: -10% auto -10% 0;
  z-index: 2;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75) 40%, rgba(170, 220, 255, 0.55) 55%, rgba(255, 190, 240, 0.4) 65%, transparent);
  transform: translateX(-160%) skewX(-16deg);
  pointer-events: none;
}

.rv-fullart .rv-reflet {
  display: block;
  animation: rv-reflet var(--rv-d) ease-in-out both;
}

/* Masque moqueur du Troll */
.rv-masque {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 46%;
  margin-left: -23%;
  opacity: 0;
  pointer-events: none;
  animation: rv-masque var(--rv-d) ease-out both;
}

/* Tremblement de l'écran */
.rv-secousse { animation: rv-secousse 0.45s linear; }

/* Mouvement réduit : simple fondu */
.rv-fondu { animation: rv-fondu 0.3s ease-out both !important; }

/* ---------- LÉGENDAIRE : éveil doré ---------- */
@keyframes rv-tourne {
  0%, 40% { transform: rotateY(180deg) scale(1); }
  50% { transform: rotateY(0deg) scale(1.12); }
  62%, 100% { transform: rotateY(0deg) scale(1); }
}

@keyframes rv-trembler {
  0%, 8% { translate: 0 0; }
  12% { translate: -2px 1px; } 16% { translate: 2px -1px; } 20% { translate: -3px 0; } 24% { translate: 3px 1px; }
  28% { translate: -3px -1px; } 32% { translate: 3px 0; } 36% { translate: -2px 1px; } 40%, 100% { translate: 0 0; }
}

@keyframes rv-lueur {
  0%, 6% { opacity: 0; }
  40% { opacity: 0.95; }
  100% { opacity: 1; }
}

@keyframes rv-rayons {
  0%, 18% { opacity: 0; rotate: 0deg; }
  40% { opacity: 0.85; }
  85% { opacity: 0.6; }
  100% { opacity: 0; rotate: 160deg; }
}

@keyframes rv-flash {
  0%, 44% { opacity: 0; scale: 0.4; }
  50% { opacity: 1; scale: 1; }
  70%, 100% { opacity: 0; scale: 1.3; }
}

@keyframes rv-onde {
  0%, 48% { opacity: 0; scale: 0.4; }
  52% { opacity: 1; }
  78%, 100% { opacity: 0; scale: 2.4; }
}

@keyframes rv-eclat {
  0%, 48% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  54% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}

@keyframes rv-bandeau {
  0%, 55% { opacity: 0; transform: translateX(-35%); }
  66% { opacity: 1; transform: translateX(0); }
  92% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(10%); }
}

@keyframes rv-secousse {
  0%, 100% { translate: 0 0; }
  15% { translate: -6px 3px; } 30% { translate: 5px -4px; } 45% { translate: -4px 2px; }
  60% { translate: 3px -2px; } 80% { translate: -2px 1px; }
}

@keyframes rv-fondu { from { opacity: 0; } to { opacity: 1; } }

/* ---------- FULL ART : vitrine ---------- */
.rv-fullart .rv-tourne { animation-name: rv-fa-tourne; }
.rv-fullart .rv-dos { animation-name: none; }
.rv-fullart .rv-lueur { animation-name: rv-fa-lueur; }
.rv-fullart .rv-flash { animation-name: rv-fa-flash; }
.rv-fullart .rv-particules i { width: 1.8cqw; height: 1.8cqw; animation-name: rv-fa-scintille; }
.rv-fullart .rv-bandeau { animation-name: rv-fa-bandeau; }

@keyframes rv-fa-lueur {
  0% { opacity: 0; }
  15% { opacity: 0.6; } 22% { opacity: 0.35; } 30% { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes rv-fa-tourne {
  0%, 28% { transform: rotateY(180deg) scale(1); }
  40% { transform: rotateY(0deg) scale(1); }
  78% { transform: rotateY(0deg) scale(1.12); }
  94%, 100% { transform: rotateY(0deg) scale(1); }
}

@keyframes rv-fa-flash {
  0%, 34% { opacity: 0; scale: 0.5; }
  40% { opacity: 0.55; scale: 0.9; }
  56%, 100% { opacity: 0; scale: 1.1; }
}

@keyframes rv-reflet {
  0%, 44% { transform: translateX(-160%) skewX(-16deg); }
  72%, 100% { transform: translateX(330%) skewX(-16deg); }
}

@keyframes rv-fa-scintille {
  0%, 80% { opacity: 0; transform: translate(calc(var(--x) * 0.6), calc(var(--y) * 0.8)) scale(0.2); }
  88% { opacity: 1; transform: translate(calc(var(--x) * 0.6), calc(var(--y) * 0.8)) scale(1.2); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 0.6), calc(var(--y) * 0.8)) scale(0.3); }
}

@keyframes rv-fa-bandeau {
  0%, 60% { opacity: 0; transform: translateX(-35%); }
  70%, 92% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(10%); }
}

/* ---------- TROLL : fausse alerte ---------- */
.rv-troll .rv-tourne { animation-name: rv-tr-tourne; }
.rv-troll .rv-dos { animation-name: rv-tr-dos; }
.rv-troll .rv-lueur { animation-name: rv-tr-lueur-or; }
.rv-troll .rv-lueur-rouge {
  display: block;
  background: radial-gradient(circle at 50% 50%, #ffe08a, #ff5a1f 45%, transparent 80%);
  animation-name: rv-tr-lueur-rouge;
}
.rv-troll .rv-rayons { animation-name: rv-tr-rayons; }
.rv-troll .rv-flash {
  background: radial-gradient(circle, #fff 0%, #ffd08a 25%, rgba(255, 90, 31, 0.55) 45%, transparent 70%);
  animation-name: rv-tr-flash;
}
.rv-troll .rv-onde { border-color: #ff8a3c; animation-name: rv-tr-onde; }
.rv-troll .rv-particules i {
  top: auto;
  bottom: 8%;
  width: 3cqw;
  height: 4cqw;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 70%, #fff3b0, #ff9a2e 50%, #ff3d1f);
  animation-name: rv-tr-flamme;
}
.rv-troll .rv-bandeau { color: #ff8a3c; text-shadow: 0 0 10px #ff5a1f; animation-name: rv-tr-bandeau; }

@keyframes rv-tr-dos {
  0%, 8% { translate: 0 0; }
  12% { translate: -2px 1px; } 16% { translate: 2px -1px; } 20% { translate: -3px 0; } 24% { translate: 3px 1px; }
  /* Tout se fige puis glitch */
  28%, 33% { translate: 0 0; }
  34% { translate: 7px 0; } 35% { translate: -9px 0; } 36% { translate: 4px 0; } 37% { translate: -3px 0; } 38%, 100% { translate: 0 0; }
}

@keyframes rv-tr-lueur-or {
  0%, 6% { opacity: 0; }
  26% { opacity: 0.95; }
  33% { opacity: 0.95; }
  38%, 100% { opacity: 0; }
}

@keyframes rv-tr-lueur-rouge {
  0%, 33% { opacity: 0; }
  35% { opacity: 1; } 36% { opacity: 0.2; } 37%, 100% { opacity: 1; }
}

@keyframes rv-tr-rayons {
  0%, 10% { opacity: 0; rotate: 0deg; }
  26% { opacity: 0.85; rotate: 40deg; }
  33% { opacity: 0.85; rotate: 40deg; }
  38%, 100% { opacity: 0; rotate: 40deg; }
}

@keyframes rv-tr-tourne {
  0%, 38% { transform: rotateY(180deg) rotateZ(0deg) translateY(0) scale(1); }
  46% { transform: rotateY(60deg) rotateZ(-22deg) translateY(-26px) scale(1.08); }
  52% { transform: rotateY(-30deg) rotateZ(18deg) translateY(-10px) scale(1.04); }
  58% { transform: rotateY(10deg) rotateZ(-8deg) translateY(0) scale(0.92); }
  64% { transform: rotateY(0deg) rotateZ(4deg) translateY(-8px) scale(1.04); }
  70% { transform: rotateY(0deg) rotateZ(-2deg) translateY(0) scale(0.98); }
  76%, 100% { transform: rotateY(0deg) rotateZ(0deg) translateY(0) scale(1); }
}

@keyframes rv-tr-flash {
  0%, 56% { opacity: 0; scale: 0.4; }
  60% { opacity: 0.9; scale: 1; }
  76%, 100% { opacity: 0; scale: 1.3; }
}

@keyframes rv-tr-onde {
  0%, 58% { opacity: 0; scale: 0.4; }
  62% { opacity: 1; }
  84%, 100% { opacity: 0; scale: 2.2; }
}

@keyframes rv-tr-flamme {
  0%, 62% { opacity: 0; transform: translate(calc(var(--x) * 0.55), 0) scale(0.5); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--x) * 0.65), calc(-40cqw - var(--i) * 4cqw)) scale(1.1); }
}

@keyframes rv-tr-bandeau {
  0%, 66% { opacity: 0; transform: scale(0.3); }
  72% { opacity: 1; transform: scale(1.25); }
  78% { transform: scale(0.9); }
  84%, 94% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes rv-masque {
  0%, 38% { opacity: 0; transform: scale(0.2) rotate(-20deg); }
  44% { opacity: 1; transform: scale(1.1) rotate(8deg); }
  52% { opacity: 1; transform: scale(1) rotate(-6deg); }
  58%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); }
}

/* Version courte (récapitulatif x10) : sans tremblement de l'écran, bandeau plus petit */
.rv-court .rv-bandeau { font-size: 10cqw; }
.rv-court .rv-particules i:nth-child(n + 7) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rv-scene *, .rv-secousse { animation: none !important; }
}