/*
  ADAPTATION KHEIDOLONE
  ---------------------
  Base commune pour tous les SETs Kheidolone.

  Ce fichier :
  - garde le ratio 750 × 1050 ;
  - définit la zone d'illustration par défaut des cartes classiques ;
  - adapte pokemon-cards-css à notre composant React ;
  - uniformise les raretés Kheidolone.

  Les gabarits particuliers (ex: KRN-004) doivent être placés
  dans un fichier dédié chargé APRÈS celui-ci.
*/

.karn-card {
  /* Cartes Kheidolone : 750 × 1050 */
  --card-aspect: 0.7142857143;

  /* Zone d'illustration par défaut (anciens SETs / set de base) */
  --clip:
    inset(
      13.9% 6.3% 32.1% 6.3%
      round 1.3% / 0.9%
    );

  /* Tout sauf la zone d'illustration */
  --clip-invert:
    polygon(
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%,
      0% 67.9%,
      93.7% 67.9%,
      93.7% 13.9%,
      6.3% 13.9%,
      6.3% 67.9%,
      0% 67.9%
    );

  --clip-stage: var(--clip);
  --clip-stage-invert: var(--clip-invert);

  /* Zone intérieure légèrement resserrée pour les effets plein cadre */
  --clip-borders:
    inset(
      1.8% 2.4%
      round 3% / 2%
    );

  /* Variables d'interaction */
  --card-scale: 1;
  --card-opacity: 0;
  --translate-x: 0px;
  --translate-y: 0px;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --pointer-x: 50%;
  --pointer-y: 50%;
  --background-x: 50%;
  --background-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-left: 0.5;
  --pointer-from-top: 0.5;

  width: 100%;
}

.karn-card .card__rotator {
  width: 100%;
  cursor: inherit;
}

.karn-card .card__front > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.karn-card:not(.interacting) .card__rotator {
  transition:
    transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 400ms ease;
}

.karn-card:not(.interacting) .card__shine,
.karn-card:not(.interacting) .card__glare {
  transition:
    opacity 400ms ease,
    background-position 400ms ease,
    visibility 0s linear 400ms;
}

.karn-card.interacting .card__shine,
.karn-card.interacting .card__glare {
  visibility: visible;
}

.karn-card button {
  font: inherit;
}

.karn-card.zoomable .card__rotator {
  cursor: zoom-in;
}

.karn-card.karn-card-large .card__rotator {
  perspective: 700px;
}

.karn-card .card__rotator:focus {
  outline: none;
}

/* =========================================================
   COMMUNE
   ========================================================= */

.karn-card[data-karn-rarity="common"] {
  --card-glow: hsl(45, 25%, 80%);
}

/* =========================================================
   PEU COMMUNE
   Reverse Holo sur le cadre / hors illustration
   ========================================================= */

.karn-card[data-karn-rarity="uncommon"] {
  --card-glow: hsl(145, 55%, 72%);
}

/* =========================================================
   RARE
   Holo limité à l'illustration
   ========================================================= */

.karn-card[data-karn-rarity="rare"] {
  --card-glow: hsl(205, 90%, 70%);
}

.karn-card[data-karn-rarity="rare"] .card__shine,
.karn-card[data-karn-rarity="rare"] .card__glare,
.karn-card[data-karn-rarity="rare"] .card__glare:after {
  clip-path: var(--clip);
}

.karn-card[data-karn-rarity="rare"] .card__rotator {
  box-shadow:
    0 0 12px rgba(80, 170, 255, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   ÉPIQUE
   Utilise maintenant le clip dynamique du set au lieu
   d'un inset codé en dur.
   ========================================================= */

.karn-card[data-karn-rarity="epic"] {
  --card-glow: hsl(25, 95%, 76%);
  --karn-epic-shine-opacity: 0.22;
  --karn-epic-glare-opacity: 0.18;
}

.karn-card[data-karn-rarity="epic"] .card__shine {
  opacity: 0 !important;
  filter: brightness(0.98) contrast(1.08) saturate(1.08) !important;
  mix-blend-mode: color-dodge !important;
  clip-path: var(--clip) !important;

  background-image:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.10) 12%,
      rgba(255, 125, 125, 0.20) 20%,
      rgba(255, 180, 60, 0.18) 28%,
      rgba(255, 240, 120, 0.22) 36%,
      rgba(120, 255, 200, 0.18) 46%,
      rgba(120, 200, 255, 0.24) 58%,
      rgba(170, 140, 255, 0.22) 70%,
      rgba(255, 150, 230, 0.20) 82%,
      rgba(255, 255, 255, 0.12) 92%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      295deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.06) 22%,
      rgba(180, 220, 255, 0.10) 40%,
      rgba(255, 255, 255, 0) 65%
    ) !important;

  background-size:
    240% 240%,
    180% 180% !important;

  background-position:
    calc(var(--pointer-x, 50%) * 1.1) calc(var(--pointer-y, 50%) * 1.1),
    calc(100% - (var(--pointer-x, 50%) * 0.8))
      calc(100% - (var(--pointer-y, 50%) * 0.8)) !important;
}

.karn-card[data-karn-rarity="epic"] .card__glare,
.karn-card[data-karn-rarity="epic"] .card__glare:after {
  clip-path: var(--clip) !important;
}

.karn-card[data-karn-rarity="epic"] .card__glare {
  opacity: 0 !important;
  mix-blend-mode: hard-light !important;
  filter: brightness(1.02) saturate(1.1) !important;

  background-image:
    radial-gradient(
      circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.28) 10%,
      rgba(255, 220, 180, 0.18) 18%,
      rgba(255, 180, 220, 0.12) 26%,
      rgba(140, 220, 255, 0.10) 35%,
      rgba(255, 255, 255, 0) 55%
    ) !important;

  background-size: 160% 160% !important;
  background-position: center center !important;
}

.karn-card[data-karn-rarity="epic"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0) 24%,
      rgba(220, 230, 255, 0.05) 38%,
      rgba(255, 255, 255, 0) 52%,
      rgba(255, 255, 255, 0.06) 67%,
      rgba(255, 255, 255, 0) 100%
    );
  mix-blend-mode: soft-light;
}

.karn-card[data-karn-rarity="epic"] .card__rotator {
  filter: saturate(1.03) contrast(1.02) !important;
}

.karn-card[data-karn-rarity="epic"].interacting .card__shine {
  opacity: var(--karn-epic-shine-opacity) !important;
}

.karn-card[data-karn-rarity="epic"].interacting .card__glare {
  opacity: var(--karn-epic-glare-opacity) !important;
}

.karn-card[data-karn-rarity="epic"].interacting::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* =========================================================
   MYTHIQUE
   ========================================================= */

.karn-card[data-karn-rarity="mythic"] {
  --card-glow: hsl(43, 95%, 72%);
}

/* =========================================================
   SECRET / FULL ART
   ========================================================= */

.karn-card[data-karn-rarity="secret"] {
  --card-glow: hsl(190, 90%, 85%);
}