/* Kirava · el objeto carta: inclinación, giro 3D y dorso */

@layer components {

.card {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--surface-3);
  transform-style: preserve-3d;
}

.card-face {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Sin imagen la web sigue siendo útil: nombre, set y número son el esqueleto.
   Si mañana hay que quitar las imágenes, Kirava sigue funcionando. */
/* La carta que no tiene ilustración.
   ------------------------------------------------------------------------
   Una de cada cuatro cartas del catálogo NO tiene imagen en el origen y no la
   va a tener nunca: TCGdex no las digitalizó. O sea que esto no es un estado
   de error pasajero, es una parte permanente del catálogo y tiene que estar
   bien resuelta.

   Antes era un recuadro gris con tres líneas de texto: se leía como un hueco,
   como si a la web le faltara algo. Ahora tiene forma de carta —el mismo
   dorso, el mismo logotipo, la misma proporción— con el número, el nombre y la
   rareza donde uno los busca. Deja de parecer un fallo y pasa a parecer lo que
   es: una carta de la que aún no hay foto.

   El mismo bloque sirve para cuando la imagen SÍ existía y no ha cargado: lo
   pone app.js. Ver ahí por qué hace falta. */
.card-text {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-1);
  padding: 12% var(--sp-3);
  text-align: center;
  container-type: inline-size;
  background:
    radial-gradient(ellipse at 50% 28%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 62%),
    linear-gradient(165deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--line);
}
/* El logotipo, en marca de agua. Con `container-type: inline-size` arriba, las
   medidas van en cqw: la misma ficha vale para una carta de la rejilla y para
   la ampliada sin dos juegos de reglas. */
.ct-mark {
  display: grid;
  place-items: center;
  width: 42cqw;
  aspect-ratio: 1;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, rgb(255 255 255 / .9), rgb(255 255 255 / .35));
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .06);
}
.ct-mark img { width: 58%; height: auto; opacity: .5; }

.ct-num    { font-family: var(--font-num); font-size: 7cqw; color: var(--ink-3); }
.ct-name   { font-size: 9cqw; font-weight: 600; line-height: 1.2; color: var(--ink); }
.ct-rarity { font-size: 6.5cqw; color: var(--ink-3); }

/* «Sin ilustración», en voz baja y abajo del todo. Sin esto, alguien puede
   pensar que la web no ha cargado bien; con esto sabe que la carta existe y
   que la foto es lo que falta. */
.ct-note {
  margin-top: var(--sp-2);
  font-size: 6cqw;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: .75;
}

/* --- Carta ampliada: inclinación 3D siguiendo el puntero ---------------- */

.card-big {
  position: relative;
  width: 100%;
  perspective: 1400px;
  perspective-origin: center;
}

.flip {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  transform-style: preserve-3d;
  /* --rx/--ry vienen del puntero, --flip del giro. Se componen en un solo
     transform para que solo haya una capa compuesta. */
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)));
  transition: transform var(--dur-slow) var(--ease-in-out);
}
/* Mientras el puntero se mueve la inclinación tiene que ser inmediata; la
   transición larga es solo para el giro. */
.flip.is-tracking { transition: none; }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--card-radius);
  /* La sombra acompaña al giro: refuerza la ilusión más que ninguna otra cosa. */
  filter: drop-shadow(0 22px 30px rgb(0 0 0 / .55));
}
.face-back { transform: rotateY(180deg); }

/* --- Dorso -------------------------------------------------------------
   Dorso propio de Kirava. El real es propiedad de Nintendo/Creatures/GAME FREAK
   y TCGdex no lo distribuye: ver docs/DECISIONS.md (D11).

   Va oscuro a propósito, aunque la interfaz sea clara: un dorso de carta real
   lo es, y si aquí fuese claro dejaría de leerse como el reverso de una carta. */

.card-back {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-4);
  padding: 8%;
  background:
    /* Trama diagonal fina, como el guilloché de un dorso de verdad */
    repeating-linear-gradient( 45deg, rgb(255 255 255 / .028) 0 1px, rgb(255 255 255 / 0) 1px 7px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .028) 0 1px, rgb(255 255 255 / 0) 1px 7px),
    radial-gradient(ellipse at 50% 38%, #3d4a52 0%, #262f38 52%, #171d24 100%);
  border: 1px solid rgb(255 255 255 / .1);
  box-shadow: inset 0 0 0 6px rgb(255 255 255 / .05), inset 0 0 40px rgb(0 0 0 / .45);
}

/* El japonés se distingue por color: es la diferencia de dorso que de verdad
   importa (dentro de cada región apenas ha cambiado en 25 años). */
.card-back[data-back="jp"] {
  background:
    repeating-linear-gradient( 45deg, rgb(255 255 255 / .028) 0 1px, rgb(255 255 255 / 0) 1px 7px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .028) 0 1px, rgb(255 255 255 / 0) 1px 7px),
    radial-gradient(ellipse at 50% 38%, #5a4033 0%, #3a2a22 52%, #221812 100%);
}

.back-art { display: grid; justify-items: center; gap: var(--sp-3); width: 100%; }

.back-medallion {
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, rgb(255 255 255 / .14), rgb(255 255 255 / .05));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .16),
    inset 0 2px 12px rgb(0 0 0 / .3),
    0 4px 18px rgb(0 0 0 / .35);
}
.back-medallion img { width: 56%; height: auto; }

.back-word {
  font-size: clamp(.58rem, 2.4cqw, .82rem);
  letter-spacing: .34em;
  font-weight: 700;
  color: rgb(255 255 255 / .55);
  text-indent: .34em;
}
.back-note {
  position: absolute;
  bottom: 5%;
  inset-inline: 0;
  font-size: .6rem;
  color: rgb(255 255 255 / .3);
  text-align: center;
  padding-inline: var(--sp-3);
}

/* --- Transición carta -> detalle --------------------------------------
   La carta crece desde su hueco y vuelve exactamente al mismo sitio. No se
   desvanece: regresa. El nombre lo pone el JS justo antes de la transición. */

::view-transition-old(card-active),
::view-transition-new(card-active) {
  animation-duration: var(--dur-slow);
  animation-timing-function: var(--ease-out);
  mix-blend-mode: normal;
}
::view-transition-group(card-active) { z-index: 50; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--dur); }

}