/* Effet "jumeau numérique" du logo TwinCard : un objet doré (physique) devient holo bleu (numérique),
   ou l'inverse, avec une ligne de scan qui le traverse.
   Utilisé par l'animation de livraison (delivery.html, holo -> doré).

   Structure HTML :
   <div class="digital">
     <img src="...">                                   la version dorée
     <div class="holo-layer"><img src="..."></div>     la même image, passée en holo bleu
     <span class="scan-line"></span>                   la ligne de scan
   </div>

   Classes à ajouter en JS sur .digital :
   - scan-down : la ligne descend, l'objet devient holo de haut en bas
   - scan-up   : la ligne remonte, l'objet redevient doré de bas en haut
   - is-holo   : l'objet reste holo (après scan-down, ou au départ de la livraison) */

.digital {
  position: relative;
}

.digital > img {
  display: block;                 /* évite l'espace sous l'image, pour que la couche holo la recouvre exactement */
}

/* La couche holo, posée exactement sur l'image dorée */
.holo-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);   /* cachée au départ : on n'en voit aucune ligne */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;           /* le masque (la forme de l'image) est défini plus bas, pour chaque objet */
}

/* L'image passe du doré au bleu : on fait tourner les couleurs (le doré devient cyan, le noir reste noir) */
.digital .holo-layer img {
  width: 100%;
  height: 100%;
  filter: hue-rotate(160deg) saturate(1.8) brightness(1.25);
}

/* Une grille fine par-dessus, comme sur la carte bleue du logo */
.holo-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(25, 184, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 184, 255, 0.22) 1px, transparent 1px);
  background-size: 7px 7px;
}

/* Le masque garde la grille dans la forme de l'image (pas dans les coins transparents) */
.ship-card .holo-layer {
  -webkit-mask-image: url("../images/carte_logo.webp");
  mask-image: url("../images/carte_logo.webp");
}

/* Lueur bleue autour de l'objet quand il est numérique */
.digital.is-holo,
.digital.scan-down {
  filter: drop-shadow(0 0 14px rgba(25, 184, 255, 0.55));
  transition: filter 0.6s ease;
}

.digital.is-holo .holo-layer {
  clip-path: inset(0);
}

/* La ligne de scan : un trait lumineux plus large que l'objet */
.scan-line {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 0;
  height: 3px;
  border-radius: 3px;
  background: #b8f1ff;
  box-shadow: 0 0 10px 3px #19b8ff, 0 0 32px 10px rgba(25, 184, 255, 0.45);
  opacity: 0;
  pointer-events: none;
}

/* Doré -> holo : la ligne descend et le holo apparaît au-dessus d'elle */
.digital.scan-down .holo-layer {
  animation: holo-descend var(--scan-duree, 1s) linear forwards;
}

.digital.scan-down .scan-line {
  animation: ligne-descend var(--scan-duree, 1s) linear forwards;
}

@keyframes holo-descend {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes ligne-descend {
  0%   { top: 0; opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Holo -> doré : la ligne remonte et le doré réapparaît en dessous d'elle */
.digital.scan-up .holo-layer {
  animation: holo-remonte var(--scan-duree, 1s) linear forwards;
}

.digital.scan-up .scan-line {
  animation: ligne-remonte var(--scan-duree, 1s) linear forwards;
}

@keyframes holo-remonte {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0); }
}

@keyframes ligne-remonte {
  0%   { top: 100%; opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 0; opacity: 0; }
}

/* Animations réduites : on passe directement à l'état final, sans ligne de scan */
@media (prefers-reduced-motion: reduce) {
  .scan-line {
    display: none;
  }

  .digital.scan-down .holo-layer {
    animation: none;
    clip-path: inset(0);
  }

  .digital.scan-up .holo-layer {
    animation: none;
    clip-path: inset(0 0 100% 0);
  }
}