/* ═══════════════════════════════════════════════════════════════════════════
   DEVINE LE PARTI — CARDS
   ───────────────────────────────────────────────────────────────────────────
   Charger après tokens.css + system.css. Le sprite SVG (clip-paths) est
   injecté par card-frames.js.

   Architecture en couches (cf. card-frames.js render()) — STROKES DESSINÉS
   APRÈS LA PHOTO pour qu'ils restent toujours visibles :

     1. shadow
     2. card-frame-fill   : outer + fill paper (animé arc-en-ciel si holo)
     3. card-bg-fill      : inner + fill role color
     4. card-bg-pattern   (optionnel)
     5. holo-stripes      (si holo)
     6. card-photo        : clippée à l'inner, fit largeur + bottom
     7. card-shine-bg     : barre blanche verticale (si shiny)
     8. card-frame-stroke : outer + stroke 3px noir (SUR la photo)
     9. card-bg-stroke    : inner + stroke 3px noir
    10. card-shine-frame  : barre blanche verticale dans le ring (si shiny)

   Conséquences :
     - La photo ne mange jamais les strokes (ils passent par-dessus)
     - Le shine défile DERRIÈRE les strokes mais DEVANT la photo
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Wrapper carte ─────────────────────────────────────────────────── */
.card {
  --r: 0deg;
  --card-bg: var(--card-beige);
  display: inline-block;
  position: relative;
  width: 200px;
  height: 300px;
  transform: rotate(var(--r));
  user-select: none;
}
.card-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Drop-shadow néo-brut en px CONSTANTS (≠ le path .card-shadow qui rétrécissait
     avec le SVG → trop fin aux petites tailles). filter:drop-shadow suit la
     silhouette peinte (cadre) et garde un offset fixe quelle que soit la taille. */
  filter: drop-shadow(5px 5px 0 var(--ink));
}

/* ─── Couches SVG : règles fixes ─────────────────────────────────────── */
.card-shadow {
  /* Remplacé par le filter CSS ci-dessus (offset constant). On masque l'ancien
     path d'ombre (qui se réduisait avec le SVG). */
  display: none;
}
.card-frame-fill {
  /* Fond du cadre — off-white par défaut, cycle arc-en-ciel si holo */
  fill: var(--paper);
}
.card-bg-fill {
  fill: var(--card-bg);
}
/* Strokes dessinés sur la photo (couches 8-9) : 3px noir, fill: none */
.card-frame-stroke,
.card-bg-stroke {
  fill: none;
  stroke: var(--ink);
  /* non-scaling-stroke → épaisseur CONSTANTE en px écran quelle que soit la taille du
     SVG. 4px = --bw-thick = MÊME épaisseur que les bordures CSS du jeu (stat-cards,
     post-its, CTA, navbar) → contours cohérents partout. */
  vector-effect: non-scaling-stroke;
  stroke-width: 4;
  stroke-linejoin: miter;
  /* Important : pointer-events none pour que les clics passent à la photo
     dessous si jamais un handler est attaché ailleurs. */
  pointer-events: none;
}

/* Pour SHINY : le cadre se teinte gold pour porter le shine */
.card--shiny .card-frame-fill {
  fill: #FFC024;
}

.card-bg-pattern { opacity: 0.5; }

/* ════════════════════════════════════════════════════════════════════════
   SHINY — barre blanche en diagonale bas-droite, sur FOND + CADRE
   ────────────────────────────────────────────────────────────────────────
   Deux couches identiques (même géométrie via card-frames.js renderShine())
   mais avec des clip-path différents :
     - .card-shine-bg    : clippée à l'aire intérieure (photo + fond)
     - .card-shine-frame : clippée au ring du cadre (anneau off-white)

   Offset temporel : la couche BG démarre 180ms après la couche FRAME.
   L'œil voit le cadre s'allumer en premier, puis le fond suivre → effet
   de profondeur (le cadre "pousse" le shine vers l'intérieur).
   ════════════════════════════════════════════════════════════════════════ */

.card-shine-bg .shine-bar,
.card-shine-bg .shine-bar-2,
.card-shine-bg .shine-bar-3,
.card-shine-frame .shine-bar,
.card-shine-frame .shine-bar-2,
.card-shine-frame .shine-bar-3 {
  /* Reflet « brillante » calqué sur le beige du jeu (pas de blanc pur — retour user).
     Reste un glint clair qui balaie la photo, sans tache blanche stark. */
  fill: var(--paper);
  opacity: 1;
}

/* Tailles et positions pilotées par variables CSS, randomisées à chaque
   iteration via JS (card-frames.js → attachShineRandomizer). Fallbacks
   donnent l'état initial cohérent même si JS n'a pas encore tourné. */
.card-shine-bg .shine-bar,
.card-shine-frame .shine-bar {
  y: var(--shine-y1, -18px);
  height: var(--shine-h1, 36px);
}
.card-shine-bg .shine-bar-2,
.card-shine-frame .shine-bar-2 {
  y: var(--shine-y2, 34px);
  height: var(--shine-h2, 14px);
}
.card-shine-bg .shine-bar-3,
.card-shine-frame .shine-bar-3 {
  y: var(--shine-y3, 60px);
  height: var(--shine-h3, 0px);
}

.card-shine-bg .shine-sweep,
.card-shine-frame .shine-sweep {
  animation: shine-45 var(--shine-dur, 3.4s) linear infinite;
}
.card-shine-bg .shine-sweep {
  animation-delay: 50ms;
}

@keyframes shine-45 {
  0%   { transform: translateY(-360px); }
  20%  { transform: translateY(360px); }   /* sweep en ~1s, hold ~4s */
  100% { transform: translateY(360px); }
}

/* ════════════════════════════════════════════════════════════════════════
   HOLO — barbershop pole sur le FOND + cycle arc-en-ciel sur le CADRE
   ────────────────────────────────────────────────────────────────────────
   - Bg : bandes diagonales 6 couleurs qui défilent (renderHoloPole).
   - Cadre (.card-frame-fill) : cycle entre les MÊMES 6 teintes (hue-1..6)
     en linear. Les keyframes sont sur la propriété `fill` — interpolation
     CSS gère bien les transitions de fill entre couleurs SVG.
   ════════════════════════════════════════════════════════════════════════ */

.holo-stripes {
  animation: holo-barbershop 2.4s linear infinite;
  transform-box: fill-box;
}
@keyframes holo-barbershop {
  from { transform: translateX(0); }
  to   { transform: translateX(72px); }   /* 1 période = 6 stripes × 12px */
}

/* Cycle arc-en-ciel sur le cadre — même rythme que le barbershop pour
   que les 2 animations restent visuellement liées (3.6s = 1.5 × 2.4s
   donne un déphasage progressif intéressant). */
.card--holo .card-frame-fill {
  animation: holo-frame-cycle 3.6s linear infinite;
}
@keyframes holo-frame-cycle {
  0%   { fill: var(--hue-1); }
  16.6%{ fill: var(--hue-2); }
  33.3%{ fill: var(--hue-3); }
  50%  { fill: var(--hue-4); }
  66.6%{ fill: var(--hue-5); }
  83.3%{ fill: var(--hue-6); }
  100% { fill: var(--hue-1); }
}

/* Holo : on garde le shine 45° en surcouche (en plus du barbershop fond
   + cycle arc-en-ciel cadre). Le shine vient compléter, pas remplacer. */

/* ════════════════════════════════════════════════════════════════════════
   ANIMATIONS : entrée / sortie de la carte
   ════════════════════════════════════════════════════════════════════════ */

@keyframes card-slide-in {
  0%   { opacity: 0; transform: translate(-30px, 0) rotate(calc(var(--r) - 8deg)); }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); }
}
@keyframes card-slide-out {
  0%   { opacity: 1; transform: translate(0, 0) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(60px, 0) rotate(calc(var(--r) + 6deg)); }
}
.card.is-entering { animation: card-slide-in 360ms var(--ease-out) backwards; }
.card.is-leaving  { animation: card-slide-out 280ms var(--ease-press) forwards; }

/* ════════════════════════════════════════════════════════════════════════
   Tailles utilitaires
   ════════════════════════════════════════════════════════════════════════ */

.card-sm { width: 120px; height: 180px; }
.card-md { width: 180px; height: 270px; }
.card-lg { width: 240px; height: 360px; }
.card-xl { width: 320px; height: 480px; }

/* ════════════════════════════════════════════════════════════════════════
   Reduced motion
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .card.is-entering,
  .card.is-leaving { animation: none; }
  .card-shine-bg .shine-sweep,
  .card-shine-frame .shine-sweep,
  .holo-stripes,
  .card--holo .card-frame-fill { animation: none; }
}