/* ============================================================
   LOOKITSGRAPHIC — Animations hover des .tool-visual
   Version finale : une seule animation par outil (choix validés)
   Numérotation conforme au tableau `we` de app.js
   ------------------------------------------------------------
   Aucune modification de app.js requise.
   Les couleurs proviennent de :
     --accent  → injecté par la carte (style={{ "--accent": e.color }})
     --ink --coral --violet --cyan --paper → :root de main.css
   ------------------------------------------------------------
   Chaque déclencheur s'écrit `.tool-card:is(:hover, .is-active)`.
   Sur écran tactile il n'y a pas de survol : scripts/tool-visual-active.js
   pose .is-active sur la carte qui occupe le centre de l'écran, ce qui joue
   exactement la même animation tant qu'on reste dessus.
   ============================================================ */


/* --- Base commune ----------------------------------------- */

/* Le relief au survol vient de main.css ; on le rejoue pour la carte
   active au toucher afin que les deux états restent identiques. */
.tool-card.is-active {
  box-shadow: 11px 11px 0 var(--ink);
  transform: translate(-3px, -3px);
}

.tool-card.is-active .card-top svg {
  transform: translate(3px, -3px);
}

.tool-visual,
.tool-visual * {
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1);
}

.tool-visual > div {
  will-change: transform;
}

/* main.css ne neutralise que les transitions : on ajoute les animations */
@media (prefers-reduced-motion: reduce) {
  .tool-visual *,
  .tool-visual *::before,
  .tool-visual *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
   01 — PDF Reader & Studio        (#ff6038)   v-pdf
   ÉVENTAIL — les deux pages s'écartent, le badge + pivote
   ============================================================ */

.v-pdf .pdf-sheet,
.v-pdf span {
  transition: transform 0.4s, box-shadow 0.4s;
}
.tool-card:is(:hover, .is-active) .v-pdf .pdf-sheet.back {
  transform: translate(-78%) rotate(-14deg);
}
.tool-card:is(:hover, .is-active) .v-pdf .pdf-sheet:not(.back) {
  transform: translate(-34%) rotate(4deg);
  box-shadow: 8px 8px 0 var(--ink);
}
.tool-card:is(:hover, .is-active) .v-pdf span {
  transform: rotate(90deg) scale(1.15);
}


/* ============================================================
   02 — ASCII Studio               (#7357ff)   v-ascii
   CONVERSION — révélation machine à écrire, label clignotant
   ============================================================ */

.tool-card:is(:hover, .is-active) .v-ascii pre {
  animation: as-type 1.6s steps(9) infinite;
}
@keyframes as-type {
  0%        { clip-path: inset(0 100% 0 0); }
  70%, 100% { clip-path: inset(0 0 0 0); }
}

.tool-card:is(:hover, .is-active) .v-ascii span {
  animation: as-blink 0.7s steps(2) infinite;
}
@keyframes as-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}


/* ============================================================
   03 — Image Filter Studio        (#ff79ae)   v-filter
   SLIDER AVANT / APRÈS — la séparation coulisse
   ============================================================ */

.v-filter {
  transition: grid-template-columns 0.55s;
}
.v-filter > svg {
  transition: transform 0.55s;
}
.tool-card:is(:hover, .is-active) .v-filter {
  grid-template-columns: 0.22fr 1.78fr;
}
.tool-card:is(:hover, .is-active) .v-filter > svg {
  transform: translate(-160%, -50%) rotate(180deg);
}


/* ============================================================
   04 — Global Format Converter    (#d9ff32)   v-convert
   LOT — la source se dédouble en pile, la sortie se ré-encode
   ============================================================ */

.v-convert .format-file {
  transition: box-shadow 0.4s, transform 0.5s;
}
.tool-card:is(:hover, .is-active) .v-convert .format-file:first-child {
  box-shadow:
    4px 4px 0 var(--ink),
    10px 10px 0 #fbfaf5,
    12px 12px 0 var(--ink),
    18px 18px 0 #fbfaf5,
    20px 20px 0 var(--ink);
  transform: rotate(-4deg) translate(-8px, -6px);
}
.tool-card:is(:hover, .is-active) .v-convert .format-file.output {
  animation: cv-flip 1.1s ease-in-out infinite;
}
@keyframes cv-flip {
  0%, 15%   { transform: rotate(4deg) rotateY(0deg); }
  55%, 100% { transform: rotate(4deg) rotateY(360deg); }
}


/* ============================================================
   05 — Media Downloader           (#59cfe2)   v-download
   ANALYSE — curseur qui scanne l'URL, puis remplissage séquencé
   ============================================================ */

.v-download .fake-url {
  position: relative;
  overflow: hidden;
}
.v-download .fake-url::after {
  content: '';
  position: absolute;
  inset: 0 100% 0 0;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  mix-blend-mode: multiply;
}
.tool-card:is(:hover, .is-active) .v-download .fake-url::after {
  animation: dl-scan 1.4s ease-out infinite;
}
@keyframes dl-scan {
  0%   { inset: 0 100% 0 0; }
  60%  { inset: 0 0 0 0; }
  100% { inset: 0 0 0 100%; }
}

.v-download .download-row i {
  transform-origin: left;
  transition: transform 0.5s 0.35s;
}
.tool-card:is(:hover, .is-active) .v-download .download-row i {
  transform: scaleX(1.25);
}

.v-download .progress span {
  transition: width 0.9s 0.5s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.tool-card:is(:hover, .is-active) .v-download .progress span {
  width: 100%;
}


/* ============================================================
   06 — Metadata Studio            (#ffd83d)   v-metadata
   LECTURE — surlignage séquentiel, alerte sur la ligne GPS
   ============================================================ */

.v-metadata > div {
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image: linear-gradient(var(--accent), var(--accent));
  transition: background-size 0.4s;
}
.tool-card:is(:hover, .is-active) .v-metadata > div { background-size: 100% 100%; }
.tool-card:is(:hover, .is-active) .v-metadata > div:nth-child(2) { transition-delay: 0.1s; }
.tool-card:is(:hover, .is-active) .v-metadata > div:nth-child(3) { transition-delay: 0.2s; }
.tool-card:is(:hover, .is-active) .v-metadata > div:nth-child(4) { transition-delay: 0.3s; }

.tool-card:is(:hover, .is-active) .v-metadata > div:nth-child(3) {
  background-image: linear-gradient(var(--coral), var(--coral));
}

.v-metadata svg { transition: transform 0.3s; }
.tool-card:is(:hover, .is-active) .v-metadata svg { transform: scale(1.3) rotate(-8deg); }


/* ============================================================
   07 — QR & Barcode Studio        (#d9ff32)   v-qr
   GÉNÉRATION — les modules éclosent en vague, colonne par colonne
   ============================================================ */

.v-qr .qr-grid i { transition: transform 0.28s; }
.tool-card:is(:hover, .is-active) .v-qr .qr-grid i.on {
  animation: qr-pop 0.9s ease-out infinite;
}
.tool-card:is(:hover, .is-active) .v-qr .qr-grid i:nth-child(6n+1) { animation-delay: 0s; }
.tool-card:is(:hover, .is-active) .v-qr .qr-grid i:nth-child(6n+2) { animation-delay: 0.07s; }
.tool-card:is(:hover, .is-active) .v-qr .qr-grid i:nth-child(6n+3) { animation-delay: 0.14s; }
.tool-card:is(:hover, .is-active) .v-qr .qr-grid i:nth-child(6n+4) { animation-delay: 0.21s; }
.tool-card:is(:hover, .is-active) .v-qr .qr-grid i:nth-child(6n+5) { animation-delay: 0.28s; }
.tool-card:is(:hover, .is-active) .v-qr .qr-grid i:nth-child(6n)   { animation-delay: 0.35s; }
@keyframes qr-pop {
  0%   { transform: scale(0.15); }
  45%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.v-qr .barcode { transition: transform 0.4s; }
.tool-card:is(:hover, .is-active) .v-qr .barcode { transform: rotate(90deg) scale(1.12); }


/* ============================================================
   08 — 3D File Studio             (#ff6038)   v-3d
   VUE ÉCLATÉE — les faces s'écartent, la cote se révèle
   ============================================================ */

.v-3d .cube,
.v-3d .cube i { transition: transform 0.5s; }

.tool-card:is(:hover, .is-active) .v-3d .cube        { transform: rotateX(-24deg) rotateY(48deg); }
.tool-card:is(:hover, .is-active) .v-3d .cube .front { transform: translateZ(82px); }
.tool-card:is(:hover, .is-active) .v-3d .cube .side  { transform: rotateY(90deg) translateZ(82px); }
.tool-card:is(:hover, .is-active) .v-3d .cube .top   { transform: rotateX(90deg) translateZ(82px); }

.v-3d .measure {
  transform: translateY(14px);
  opacity: 0.65;
  transition: transform 0.4s 0.15s, background-color 0.4s, opacity 0.4s;
}
.tool-card:is(:hover, .is-active) .v-3d .measure {
  transform: translateY(-4px);
  opacity: 1;
  background: var(--violet);
}


/* ============================================================
   09 — Diagram & Mindmap Studio   (#7357ff)   v-mindmap
   FLUX — le trait circule, le nœud central respire
   ============================================================ */

.v-mindmap path {
  stroke-dasharray: 10 8;
}
.tool-card:is(:hover, .is-active) .v-mindmap path {
  animation: mm-flow 0.9s linear infinite;
}
@keyframes mm-flow {
  0%   { stroke-dashoffset: 36; }
  100% { stroke-dashoffset: 0; }
}

.tool-card:is(:hover, .is-active) .v-mindmap .node.center {
  animation: mm-pulse 1.6s ease-in-out infinite;
}
@keyframes mm-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);
             box-shadow: 3px 3px 0 var(--ink); }
  50%      { transform: translate(-50%, -50%) scale(1.1);
             box-shadow: 6px 6px 0 var(--violet); }
}

.v-mindmap .node:not(.center) {
  transition: background-color 0.3s, transform 0.3s;
}
.tool-card:is(:hover, .is-active) .v-mindmap .node.n1 { transition-delay: 0.05s; background: var(--accent); }
.tool-card:is(:hover, .is-active) .v-mindmap .node.n2 { transition-delay: 0.15s; background: var(--accent); }
.tool-card:is(:hover, .is-active) .v-mindmap .node.n3 { transition-delay: 0.25s; background: var(--accent); }
.tool-card:is(:hover, .is-active) .v-mindmap .node.n4 { transition-delay: 0.35s; background: var(--accent); }


/* ============================================================
   10 — Font Studio                (#59cfe2)   v-font
   TYPE TESTER — le Aa se resserre, les 5 lettres flippent
   ============================================================ */

.v-font > b {
  transition: transform 0.45s, letter-spacing 0.45s;
}
.tool-card:is(:hover, .is-active) .v-font > b {
  letter-spacing: 0px;
  transform: skewX(10deg) scale(1.06);
}

.v-font i { transition: transform 0.35s; }
.tool-card:is(:hover, .is-active) .v-font i {
  animation: ft-flip 1.2s ease-in-out infinite;
}
.tool-card:is(:hover, .is-active) .v-font i:nth-child(2) { animation-delay: 0.08s; }
.tool-card:is(:hover, .is-active) .v-font i:nth-child(3) { animation-delay: 0.16s; }
.tool-card:is(:hover, .is-active) .v-font i:nth-child(4) { animation-delay: 0.24s; }
.tool-card:is(:hover, .is-active) .v-font i:nth-child(5) { animation-delay: 0.32s; }
@keyframes ft-flip {
  0%, 60%, 100% { transform: rotateX(0deg); }
  30%           { transform: rotateX(180deg); }
}


/* ============================================================
   11 — Audio / Video Studio       (#ff79ae)   v-media
   LECTURE — tête de lecture qui défile, forme d'onde vivante
   ============================================================ */

.v-media .playhead { transition: left 0.3s; }
.tool-card:is(:hover, .is-active) .v-media .playhead {
  animation: md-play 3s linear infinite;
}
@keyframes md-play {
  0%   { left: 12%; }
  100% { left: 92%; }
}

.v-media .track.pink i { transform-origin: center; }
.tool-card:is(:hover, .is-active) .v-media .track.pink i {
  animation: md-wave 0.65s ease-in-out infinite alternate;
}
.tool-card:is(:hover, .is-active) .v-media .track.pink i:nth-child(2n) { animation-delay: 0.1s; }
.tool-card:is(:hover, .is-active) .v-media .track.pink i:nth-child(3n) { animation-delay: 0.2s; }
.tool-card:is(:hover, .is-active) .v-media .track.pink i:nth-child(5n) { animation-delay: 0.3s; }
@keyframes md-wave {
  0%   { transform: scaleY(0.4); }
  100% { transform: scaleY(1.6); }
}

.v-media .player span { transition: transform 0.3s; }
.tool-card:is(:hover, .is-active) .v-media .player span { transform: scale(1.2); }


/* ============================================================
   12 — Markdown Studio            (#d9ff32)   v-markdown
   FRAPPE EN DIRECT — le code s'écrit, l'aperçu suit
   ============================================================ */

.md-code b,
.md-code span {
  transform: translateX(-6px);
  opacity: 0.55;
  transition: transform 0.3s, opacity 0.3s;
}
.tool-card:is(:hover, .is-active) .md-code b,
.tool-card:is(:hover, .is-active) .md-code span {
  transform: translateX(0);
  opacity: 1;
}
.tool-card:is(:hover, .is-active) .md-code span:nth-child(2) { transition-delay: 0.08s; }
.tool-card:is(:hover, .is-active) .md-code span:nth-child(3) { transition-delay: 0.16s; }
.tool-card:is(:hover, .is-active) .md-code span:nth-child(4) { transition-delay: 0.24s; }

.md-preview i {
  transform-origin: left;
  transform: scaleX(0.25);
  transition: transform 0.4s;
}
.tool-card:is(:hover, .is-active) .md-preview i                { transform: scaleX(1); transition-delay: 0.3s; }
.tool-card:is(:hover, .is-active) .md-preview i:nth-of-type(2) { transition-delay: 0.4s; }
.tool-card:is(:hover, .is-active) .md-preview i:nth-of-type(3) { transition-delay: 0.5s; }

.tool-card:is(:hover, .is-active) .split-label {
  animation: md-live 1s steps(2) infinite;
}
@keyframes md-live {
  0%, 100% { background: var(--accent); }
  50%      { background: var(--coral); }
}