/* ============================================================
   Monarch Hoard - CARTE 3D ED EFFETTO OLOGRAFICO
   DOVE VA:  static/css/carte-3d.css   (file nuovo)
   ------------------------------------------------------------
   1. Il ventaglio di carte nella slide di benvenuto
   2. Il riflesso olografico (classe .holo e carte della vetrina)
   3. L'inclinazione 3D delle carte della vetrina

   Le posizioni del mouse arrivano da carte-3d.js come
   variabili CSS:
     --mx, --my   dove sta il mouse sulla carta (0% - 100%)
     --rx, --ry   di quanto inclinarla (in gradi)
   ============================================================ */

/* ============================================================
   1. IL VENTAGLIO
   ============================================================ */

/* Annulla lo stile delle immagini "normali" della slide */
.hs__visual--ventaglio { perspective: 1100px; }

.ventaglio {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: block;
  width: 380px;
  height: 400px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s ease-out;
  animation: ventaglio-respira 7s ease-in-out infinite;
}
.ventaglio:hover { animation-play-state: paused; }
@keyframes ventaglio-respira {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Ogni carta parte dal centro e si apre a ventaglio:
   --i = posizione (0, 1, 2...), --n = quante sono.
   Il perno e' in basso al centro, come carte tenute in mano. */
.ventaglio__carta {
  --pos: calc(var(--i) - (var(--n) - 1) / 2);
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 200px;
  margin-left: -100px;
  aspect-ratio: 63 / 88;
  transform-origin: 50% 110%;
  transform: translateX(calc(var(--pos) * 52px))
             rotate(calc(var(--pos) * 11deg))
             translateZ(calc(var(--i) * 6px));
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6));
  transition: translate .3s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}
/* Cambio carta (rotazione): dissolvenza */
.ventaglio__carta img { transition: opacity .45s ease; }
.ventaglio__carta.is-cambia img { opacity: 0; }

.ventaglio__carta img {
  /* !important: vincono sulle regole di .hs__visual img */
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  display: block;
}
/* La carta sotto il mouse si solleva */
.ventaglio__carta:hover {
  translate: 0 -28px;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.55));
  z-index: 5;
}

/* Entrata della slide: le carte si aprono una dopo l'altra */
.hs__slide.is-attiva .ventaglio__carta {
  animation: ventaglio-apri .9s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.2s + var(--i) * .09s);
}
@keyframes ventaglio-apri {
  from { opacity: 0; transform: translateY(60px) rotate(0deg); }
}

/* ============================================================
   2. IL RIFLESSO OLOGRAFICO
   ------------------------------------------------------------
   Due strati sopra all'immagine:
     ::before  arcobaleno che scorre seguendo il mouse
     ::after   un punto di luce dove sta il mouse
   Fuori dal mouse resta un leggero riflesso fermo.
   ============================================================ */
/* ATTENZIONE: qui NON si mette "position: relative".
   Le carte del ventaglio sono anche .holo e devono restare
   "position: absolute" (sezione 1): era proprio questa riga
   a impilarle una sotto l'altra, lasciandone visibile una sola.
   .card-item__media e' gia' "relative" in site.css. */
.holo,
.card-item__media {
  --mx: 50%;
  --my: 50%;
}
.holo {
  /* Gli angoli arrotondati delle carte: il riflesso non
     deve uscire dalla sagoma */
  border-radius: 4.5% / 3.2%;
  overflow: hidden;
}

.holo::before,
.card-item__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 0, 132, 0.55)   0%,
      rgba(255, 196, 0, 0.55)   8%,
      rgba(0, 255, 140, 0.55)  16%,
      rgba(0, 196, 255, 0.55)  24%,
      rgba(160, 80, 255, 0.55) 32%,
      rgba(255, 0, 132, 0.55)  40%);
  background-size: 300% 300%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  opacity: .12;
  transition: opacity .3s ease;
}
.holo::after,
.card-item__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my),
              rgba(255, 255, 255, 0.55) 0%,
              rgba(255, 255, 255, 0.12) 22%,
              transparent 50%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .3s ease;
}

/* Acceso al passaggio del mouse */
.holo:hover::before,
.card-item:hover .card-item__media::before { opacity: .55; }
.holo:hover::after,
.card-item:hover .card-item__media::after  { opacity: 1; }

/* Le carte vendute restano spente */
.card-item.is-sold .card-item__media::before,
.card-item.is-sold .card-item__media::after { display: none; }

/* I badge (rarita', stato, foto) devono stare sopra al riflesso */
.card-item__media > span { z-index: 4; }

/* ============================================================
   3. INCLINAZIONE DELLE CARTE DELLA VETRINA
   ============================================================ */
.card-item {
  --rx: 0deg;
  --ry: 0deg;
  transform-style: preserve-3d;
}
.card-item.is-inclinata {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
  transition: transform .08s linear, border-color var(--transition),
              box-shadow var(--transition);
}

/* ============================================================
   TELEFONO E "MENO ANIMAZIONI"
   ============================================================ */
@media (max-width: 820px) {
  .hs__visual--ventaglio { order: -1; justify-self: center; }
  .ventaglio { width: 260px; height: 250px; }
  .ventaglio__carta { width: 130px; margin-left: -65px; }
  .ventaglio__carta { transform: translateX(calc(var(--pos) * 34px))
                                 rotate(calc(var(--pos) * 10deg)); }
  /* Da telefono non c'e' il mouse: riflesso leggero sempre acceso
     che si muove da solo */
  .holo::before { opacity: .3; animation: holo-scorre 6s linear infinite; }
}
@keyframes holo-scorre {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ventaglio, .ventaglio__carta, .holo::before { animation: none !important; }
  .card-item.is-inclinata { transform: translateY(-4px); }
}