/* Effets de survol des cartes « Équipe Esport ».
   Partagé par le site (page Équipe) et l'aperçu du panel : garder les deux structures identiques.
   Carte : .hv-card.hv-<effet> > .hv-clip > .hv-media (image) + .hv-fx (calque d'effet), le contenu passe au-dessus (z-index > 1).
   Variables : --hv-a / --hv-b = couleurs du joueur, --hv-x / --hv-y = position du curseur (0 à 1), --hv-radius = arrondi.
   La carte porte ombres et transformations ; .hv-clip découpe l'intérieur avec clip-path : un simple overflow: hidden
   perd l'arrondi des coins dans Chrome quand l'image zoome sous un élément flouté (backdrop-filter). */

.hv-card {
  --hv-a: #34d399;
  --hv-b: #22d3ee;
  --hv-x: 0.5;
  --hv-y: 0.5;
  --hv-radius: 16px;
  position: relative;
  border-radius: var(--hv-radius);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.hv-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0 round var(--hv-radius));
}

.hv-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

.hv-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 1. Zoom */
.hv-zoom:hover .hv-media { transform: scale(1.1); }

/* 2. Dézoom */
.hv-zoom-out .hv-media { transform: scale(1.18); }
.hv-zoom-out:hover .hv-media { transform: scale(1); }

/* 3. Inclinaison 3D : la carte suit le curseur, avec un reflet */
.hv-tilt { transition: transform 0.25s ease-out, box-shadow 0.5s ease; }
.hv-tilt:hover {
  transform: perspective(900px) rotateX(calc((0.5 - var(--hv-y)) * 16deg)) rotateY(calc((var(--hv-x) - 0.5) * 16deg)) scale(1.02);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85);
}
.hv-tilt .hv-fx { background: radial-gradient(circle at calc(var(--hv-x) * 100%) calc(var(--hv-y) * 100%), rgba(255, 255, 255, 0.22), transparent 55%); }
.hv-tilt:hover .hv-fx { opacity: 1; }

/* 4. Projecteur : l'image s'assombrit, un faisceau suit le curseur */
.hv-spotlight:hover .hv-media { filter: brightness(0.5) saturate(0.8); }
.hv-spotlight .hv-fx {
  background: radial-gradient(circle at calc(var(--hv-x) * 100%) calc(var(--hv-y) * 100%), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 22%, transparent 45%);
  mix-blend-mode: overlay;
}
.hv-spotlight:hover .hv-fx { opacity: 1; }

/* 5. Révélation couleur */
.hv-reveal .hv-media { filter: grayscale(1) brightness(0.75); }
.hv-reveal:hover .hv-media { filter: grayscale(0) brightness(1); transform: scale(1.04); }

/* 6. Mise au point */
.hv-focus .hv-media { filter: blur(5px) brightness(0.8); transform: scale(1.08); }
.hv-focus:hover .hv-media { filter: blur(0) brightness(1); transform: scale(1); }

/* 7. Halo néon */
.hv-neon:hover { box-shadow: 0 0 0 2px var(--hv-a), 0 0 24px var(--hv-a), 0 0 60px -10px var(--hv-b); }
.hv-neon:hover .hv-media { transform: scale(1.05); }

/* 8. Élévation */
.hv-lift:hover { transform: translateY(-12px); box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hv-lift:hover .hv-media { transform: scale(1.05); }

/* 9. Reflet : un éclat traverse la carte */
.hv-shine .hv-fx {
  opacity: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 130% 0;
  transition: none;
}
.hv-shine:hover .hv-fx { background-position: -30% 0; transition: background-position 0.9s ease; }
.hv-shine:hover .hv-media { transform: scale(1.04); }

/* 10. Glitch */
@keyframes hv-glitch-shift {
  0%, 100% { transform: translate(0) scale(1.03); filter: none; }
  20% { transform: translate(-3px, 1px) scale(1.03); filter: hue-rotate(40deg) saturate(1.6); }
  40% { transform: translate(3px, -1px) scale(1.03); filter: none; }
  60% { transform: translate(-1px, 2px) scale(1.03); filter: hue-rotate(-40deg) contrast(1.3); }
  80% { transform: translate(2px, -2px) scale(1.03); filter: none; }
}
@keyframes hv-glitch-band {
  0% { clip-path: inset(12% 0 80% 0); transform: translateX(-6px); }
  25% { clip-path: inset(55% 0 30% 0); transform: translateX(5px); }
  50% { clip-path: inset(30% 0 62% 0); transform: translateX(-3px); }
  75% { clip-path: inset(78% 0 8% 0); transform: translateX(6px); }
  100% { clip-path: inset(40% 0 50% 0); transform: translateX(0); }
}
.hv-glitch:hover .hv-media { animation: hv-glitch-shift 0.5s steps(1) infinite; }
.hv-glitch .hv-fx { background: linear-gradient(90deg, var(--hv-a), var(--hv-b)); mix-blend-mode: screen; }
.hv-glitch:hover .hv-fx { opacity: 0.55; animation: hv-glitch-band 0.8s steps(1) infinite; }

/* 11. Scanner */
@keyframes hv-scan {
  from { background-position: 0 -40%, 0 0; }
  to { background-position: 0 140%, 0 0; }
}
.hv-scan .hv-fx {
  background:
    linear-gradient(to bottom, transparent, color-mix(in srgb, var(--hv-a) 55%, transparent) 50%, transparent) no-repeat,
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px);
  background-size: 100% 28%, 100% 100%;
}
.hv-scan:hover .hv-fx { opacity: 1; animation: hv-scan 1.8s linear infinite; }

/* 12. Duotone aux couleurs du joueur */
.hv-duotone .hv-fx { background: linear-gradient(to top, var(--hv-a), var(--hv-b)); mix-blend-mode: color; }
.hv-duotone:hover .hv-fx { opacity: 0.9; }
.hv-duotone:hover .hv-media { transform: scale(1.05); filter: contrast(1.1); }

/* 13. Panoramique */
.hv-pan .hv-media { transform: scale(1.18) translateY(5%); transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease; }
.hv-pan:hover .hv-media { transform: scale(1.18) translateY(-5%); }

/* 14. Rotation */
.hv-rotate:hover .hv-media { transform: scale(1.18) rotate(-3deg); }

/* 15. Contour animé : un trait lumineux fait le tour de la carte */
@keyframes hv-spin {
  from { transform: translate(-50%, -50%) rotate(0turn); }
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
.hv-trace .hv-fx {
  padding: 2px;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.hv-trace .hv-fx::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  aspect-ratio: 1;
  background: conic-gradient(transparent 0 55%, var(--hv-a) 75%, var(--hv-b) 90%, transparent);
  animation: hv-spin 2.6s linear infinite paused;
}
.hv-trace:hover .hv-fx { opacity: 1; }
.hv-trace:hover .hv-fx::before { animation-play-state: running; }
.hv-trace:hover .hv-media { transform: scale(1.05); }

/* 16. Vague de couleur : les couleurs du joueur montent depuis le bas */
.hv-wave .hv-fx {
  opacity: 1;
  background: linear-gradient(to top, color-mix(in srgb, var(--hv-a) 60%, transparent), color-mix(in srgb, var(--hv-b) 25%, transparent) 55%, transparent 85%);
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hv-wave:hover .hv-fx { transform: translateY(0); }
.hv-wave:hover .hv-media { transform: scale(1.04); }

/* 17. Cinéma : bandes noires et image plus contrastée */
.hv-cinema .hv-fx { opacity: 1; }
.hv-cinema .hv-fx::before,
.hv-cinema .hv-fx::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  background: #000;
  transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hv-cinema .hv-fx::before { top: 0; }
.hv-cinema .hv-fx::after { bottom: 0; }
.hv-cinema:hover .hv-fx::before,
.hv-cinema:hover .hv-fx::after { height: 11%; }
.hv-cinema:hover .hv-media { transform: scale(1.08); filter: contrast(1.15) saturate(1.2); }

/* 18. Hologramme */
@keyframes hv-flicker {
  0%, 100% { opacity: 0.75; }
  8% { opacity: 0.35; }
  10% { opacity: 0.8; }
  54% { opacity: 0.6; }
  56% { opacity: 0.9; }
}
.hv-hologram .hv-fx {
  background:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--hv-a) 35%, transparent) 0 2px, transparent 2px 5px),
    linear-gradient(to top, color-mix(in srgb, var(--hv-a) 30%, transparent), transparent 70%);
  mix-blend-mode: screen;
}
.hv-hologram:hover .hv-fx { opacity: 0.75; animation: hv-flicker 2.2s steps(1) infinite; }
.hv-hologram:hover .hv-media { filter: saturate(0.3) brightness(1.1) contrast(1.2); transform: scale(1.03) skewX(-1deg); }

/* 19. Parallaxe : l'image glisse à l'opposé du curseur */
.hv-parallax .hv-media { inset: -6%; transition: transform 0.3s ease-out, filter 0.6s ease; }
.hv-parallax:hover .hv-media { transform: translate(calc((0.5 - var(--hv-x)) * 8%), calc((0.5 - var(--hv-y)) * 8%)) scale(1.05); }

/* 20. Pulsation lumineuse */
@keyframes hv-pulse {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hv-a) 60%, transparent), 0 0 12px -2px var(--hv-a); }
  50% { box-shadow: 0 0 0 2px var(--hv-a), 0 0 38px 2px var(--hv-b); }
}
.hv-pulse:hover { animation: hv-pulse 1.6s ease-in-out infinite; }
.hv-pulse:hover .hv-media { transform: scale(1.06); }

/* « Aucun » (.hv-none) : pas de règle, la carte reste fixe */

@media (prefers-reduced-motion: reduce) {
  .hv-card,
  .hv-card .hv-media,
  .hv-card .hv-fx,
  .hv-card .hv-fx::before,
  .hv-card .hv-fx::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .hv-card:hover { transform: none !important; }
}