/* ==========================================================================
   LOOKITSGRAPHIC Metadata Studio — visuels animés
   drop-symbol : EXIF hex + étiquettes (sans rotation)
   drop-number / empty-files : page + champs
   ========================================================================== */

.md-visual,
.mn-visual {
  --md-sky: #62bfff;
  --md-lavender: #c8c4ff;
  --md-pink: #ff75a8;
  --md-acid: var(--acid, #d9ff32);
}

/* --- Conteneurs existants --------------------------------------------- */

.drop-symbol {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  color: inherit;
  font: inherit;
  display: block;
  overflow: visible;
}

.drop-card {
  overflow: visible;
}

.drop-card h2 {
  margin-top: 16px;
}

.empty-files b {
  width: auto;
  height: auto;
  min-width: 64px;
  min-height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  overflow: visible;
  display: grid;
  place-items: center;
}

/* --- Visuel de dépôt (EXIF + étiquettes) ------------------------------ */

.md-visual {
  position: relative;
  width: 308px;
  max-width: 100%;
  height: 158px;
  margin: 0 auto;
}

.md-frame {
  position: relative;
  z-index: 1;
  width: 308px;
  max-width: 100%;
  height: 158px;
  border: 2px solid var(--ink, #11110f);
  background: #fff;
  box-shadow: 6px 6px 0 var(--ink, #11110f);
  overflow: hidden;
}

.md-hex {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 11px 13px;
  font: 700 9px/1.62 "Courier New", monospace;
  color: var(--ink, #11110f);
  opacity: 0.32;
  word-break: break-all;
  text-align: left;
  white-space: pre-wrap;
  user-select: none;
  pointer-events: none;
}

.md-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  border: 2px solid var(--ink, #11110f);
  background: var(--md-c);
  color: var(--ink, #11110f);
  padding: 6px 8px;
  font: 700 9px/1 "Courier New", monospace;
  font-style: normal;
  letter-spacing: 0.06em;
  white-space: nowrap;
  animation: md-escape 4.8s ease-in infinite;
  animation-delay: var(--md-delay, 0s);
}

@keyframes md-escape {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  7%   { opacity: 1; }
  24%  { transform: translate(-50%, -50%); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--md-x)), calc(-50% + var(--md-y))); opacity: 0; }
}

/* --- Pictogramme page + champs ---------------------------------------- */

.mn-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 55px;
}

.mn-doc {
  position: relative;
  z-index: 3;
  display: block;
  width: 44px;
  height: 55px;
}

.mn-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  border: 1.5px solid var(--ink, #11110f);
  background: var(--mn-c);
  color: var(--ink, #11110f);
  padding: 4px 6px;
  font: 700 9px/1 "Courier New", monospace;
  font-style: normal;
  letter-spacing: 0.06em;
  white-space: nowrap;
  animation: mn-out 3.2s ease-in infinite;
  animation-delay: var(--mn-delay, 0s);
}

@keyframes mn-out {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  12%  { opacity: 1; }
  30%  { transform: translate(-50%, -50%); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--mn-x)), calc(-50% + var(--mn-y))); opacity: 0; }
}

/* Version compacte dans la file vide */
.empty-files .mn-visual {
  transform: scale(1);
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .md-visual *,
  .mn-visual * {
    animation: none !important;
  }

  .md-tag {
    opacity: 1;
  }

  .md-tag:nth-of-type(1) { transform: translate(calc(-50% + -190px), calc(-50% + -92px)); }
  .md-tag:nth-of-type(2) { transform: translate(calc(-50% + 96px), calc(-50% + -96px)); }
  .md-tag:nth-of-type(3) { transform: translate(calc(-50% + -176px), calc(-50% + 52px)); }
  .md-tag:nth-of-type(4) { transform: translate(calc(-50% + 112px), calc(-50% + 64px)); }
  .md-tag:nth-of-type(5) { transform: translate(calc(-50% + -104px), calc(-50% + 104px)); }
  .md-tag:nth-of-type(6) { transform: translate(calc(-50% + 150px), calc(-50% + -24px)); }

  .mn-tag {
    opacity: 1;
  }

  .mn-tag:nth-of-type(1) { transform: translate(calc(-50% + -64px), calc(-50% + -40px)); }
  .mn-tag:nth-of-type(2) { transform: translate(calc(-50% + 38px), calc(-50% + -44px)); }
  .mn-tag:nth-of-type(3) { transform: translate(calc(-50% + -70px), calc(-50% + 26px)); }
  .mn-tag:nth-of-type(4) { transform: translate(calc(-50% + 40px), calc(-50% + 30px)); }
}