/* ─── TAROT CARD SPINNER ─── */

/*
 * Géométrie
 * ---------
 * .tarot-pivot  — boîte de taille 0, positionnée au coin inférieur gauche
 *                 de la carte (le point qui touche le sol).
 *                 Anime rotateY → axe VERTICAL DU MONDE → le coin ne bouge pas.
 *
 * .tarot-card   — décalée top:−344px left:0 pour que son coin inf-gauche
 *                 coïncide avec l'origine du pivot (le sol).
 *                 transform-origin: 0% 100% = coin inf-gauche.
 *                 Inclinaison statique rotateX : la carte penche vers l'arrière
 *                 → l'axe vertical traverse la carte longitudinalement (de bas en haut).
 *
 *   rotateY=0°  : face avant visible (carte penche vers l'arrière)
 *   rotateY=90° : arête visible (carte penche sur le côté)
 *   rotateY=180°: dos visible (carte penche vers l'avant)
 *   rotateY=270°: autre arête
 */

.tarot-scene {
  position: relative;
  height: 550px;
  perspective: 700px;
  perspective-origin: 50% 35%;
}

/* Ombre elliptique au coin (sur le sol) */
.tarot-scene::after {
  content: '';
  position: absolute;
  bottom: 34px;
  left: calc(50% - 18px);
  width: 36px;
  height: 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  filter: blur(5px);
  pointer-events: none;
}

/* Pivot de taille zéro — seul rotateY (axe monde) anime ici */
.tarot-pivot {
  position: absolute;
  bottom: 38px;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: tarot-spin 9s linear infinite;
}

@keyframes tarot-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/*
 * Carte : coin inf-gauche au pivot.
 * rotateZ(-30deg) aligne la diagonale bas-gauche→haut-droit sur l'axe Y vertical.
 * Preuve : arctan(200/344) ≈ 30.1°
 *   top-right avant rotation : (200, −344)
 *   top-right après rotateZ(−30°) : (≈0, −398) → sur l'axe Y ✓
 * Les deux coins opposés restent donc immobiles pendant la rotation.
 */
.tarot-card {
  position: absolute;
  top: -344px;
  left: 0;
  width: 200px;
  height: 344px;
  transform-origin: 0% 100%;     /* coin inférieur gauche = pivot */
  transform: rotateZ(-30deg);    /* diagonale alignée sur l'axe de rotation */
  transform-style: preserve-3d;
}

/* ── Faces ── */
.tarot-face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
}

.tarot-face--front {
  transform: translateZ(6px);
  overflow: hidden;
  box-shadow: inset 0 0 0 .2rem var(--color-black, #373702);
}

.tarot-face--front picture,
.tarot-face--front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tarot-face--back {
  transform: rotateY(180deg) translateZ(6px);
  overflow: hidden;
  box-shadow: inset 0 0 0 .2rem var(--color-black, #373702);
}

/* ── Arêtes — épaisseur 12 px ──
   Chaque panneau centré sur son arête → couvre z = −6 … +6.
   arête gauche  : left −6px,  rotateY(−90°) → face −X
   arête droite  : left 194px, rotateY(+90°) → face +X
   arête haute   : top  −6px,  rotateX(+90°) → face −Y
   arête basse   : top 338px,  rotateX(−90°) → face +Y
*/
.tarot-edge {
  position: absolute;
  background-color: var(--color-black, #373702);
}

.tarot-edge--left {
  width: 12px;
  height: 344px;
  top: 0;
  left: -6px;
  transform: rotateY(-90deg);
}

.tarot-edge--right {
  width: 12px;
  height: 344px;
  top: 0;
  left: 194px;
  transform: rotateY(90deg);
}

.tarot-edge--top {
  width: 200px;
  height: 12px;
  top: -6px;
  left: 0;
  transform: rotateX(90deg);
}

.tarot-edge--bottom {
  width: 200px;
  height: 12px;
  top: 338px;
  left: 0;
  transform: rotateX(-90deg);
}