/* ===================================================
   KURO ARCANA — Révélation Full Art « vitrine holographique » (classes .rf-*, revelation-fullart.js)
   Animée par GSAP (transform, opacity, background-position) ; ici seulement l'aspect des couches.
   =================================================== */
/* GSAP prend la main : les animations CSS d'origine de la Full Art sont coupées */
.rv-scene.rf-gsap, .rv-scene.rf-gsap * { animation: none !important; }
.rv-calque .rv-scene.rf-gsap { transition: none; transform-style: preserve-3d; }
.rv-calque.rv-retour .rv-scene.rf-gsap { transition: transform var(--rv-retour, 320ms) cubic-bezier(0.4, 0, 0.2, 1); }
.rf-gsap .rv-tourne { transform: none; will-change: transform; }
.rf-gsap .rv-reflet, .rf-gsap .rv-flash, .rf-gsap .rv-onde, .rf-gsap .rv-rayons, .rf-gsap .rv-particules, .rf-gsap .rv-lueur { display: none; }
.rf-gsap .rv-dos { animation: none; }
/* Calque plus sombre : la carte sort de l'obscurité */
.rv-calque:has(.rf-gsap)::before { background: radial-gradient(circle at 50% 45%, rgba(20, 22, 30, 0.88), rgba(0, 0, 0, 0.97) 70%); }

/* Rayons de lumière argentés derrière la carte */
.rf-rayons {
  position: absolute; left: 50%; top: 50%; z-index: -1; width: 260%; aspect-ratio: 1; margin: -130% 0 0 -130%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(235, 242, 255, 0.5) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, rgba(0, 0, 0, 0.6) 30%, transparent 62%);
  mask-image: radial-gradient(circle, #000 8%, rgba(0, 0, 0, 0.6) 30%, transparent 62%);
}

/* Couches sur la carte (dans le recto) */
.rf-ombre, .rf-holo, .rf-lueur { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 6%; }
.rf-ombre { background: #000; }
.rf-holo {
  mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 80, 80, 0.55) 32%, rgba(255, 220, 80, 0.55) 38%, rgba(80, 255, 140, 0.55) 44%, rgba(80, 200, 255, 0.6) 50%, rgba(170, 100, 255, 0.55) 56%, rgba(255, 90, 200, 0.5) 62%, transparent 74%) 0 0 / 250% 100% no-repeat;
}
.rf-lueur { mix-blend-mode: soft-light; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.85), transparent 45%) 50% 50% / 200% 200% no-repeat; }

/* Illustration qui déborde du cadre : avancée en 3D, bords fondus */
.rf-pop { position: absolute; z-index: 4; pointer-events: none; transform-style: preserve-3d; overflow: visible; }
.rf-pop img {
  width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06);
  -webkit-mask-image: radial-gradient(ellipse 46% 40% at 50% 38%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 40% at 50% 38%, #000 55%, transparent 100%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.65)) brightness(1.05) contrast(1.05);
}

/* Particules argentées */
.rf-eclats { position: absolute; left: 50%; top: 50%; z-index: 6; pointer-events: none; }
.rf-eclats i { position: absolute; left: -0.9cqw; top: -0.9cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #f4f8ff; box-shadow: 0 0 2cqw #cfe2ff, 0 0 4cqw rgba(160, 200, 255, 0.6); }
.rf-eclats i.rf-etoile { width: 3cqw; height: 3cqw; left: -1.5cqw; top: -1.5cqw; border-radius: 0; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }

/* Aide et autorisation du gyroscope */
.rf-aide { position: absolute; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 16px; color: #dfe8f5; text-shadow: 0 1px 4px #000; pointer-events: none; }
.rf-gyro { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; color: #1a0820; cursor: pointer; border: 0; background: linear-gradient(180deg, #f4f8ff, #b9c7d8); }
.rv-calque.rv-retour .rf-aide, .rv-calque.rv-retour .rf-gyro { opacity: 0; }