/**
 * LOOKITSGRAPHIC — PDF Reader
 * Visuel doc-art animé (zone de dépôt)
 *
 * Trois cadences volontairement non harmoniques :
 *   éventail + remplissage → 5,4 s
 *   balayage du scan       → 2,9 s
 *   pulsation du badge     → 3,6 s
 */

.doc-art {
  width: 175px;
  height: 205px;
  position: relative;
  margin-bottom: 35px;
}

.doc-art > i,
.doc-art > div {
  position: absolute;
  width: 142px;
  height: 184px;
  left: 16px;
  top: 9px;
  border: 2px solid var(--ink);
}

.doc-art > i:first-child {
  background: var(--orange);
  animation: art-left 5.4s ease-in-out infinite;
}

.doc-art > i:nth-child(2) {
  background: var(--blue);
  animation: art-right 5.4s ease-in-out infinite;
  animation-delay: 0.15s;
}

@keyframes art-left {
  0%, 100% { transform: rotate(-9deg) translate(-15px, 5px); }
  50%      { transform: rotate(-19deg) translate(-34px, 10px); }
}

@keyframes art-right {
  0%, 100% { transform: rotate(7deg) translate(14px, -4px); }
  50%      { transform: rotate(17deg) translate(33px, -9px); }
}

.doc-art > div {
  background: var(--white);
  color: var(--ink);
  padding: 18px;
  text-align: left;
  overflow: hidden;
  box-shadow: 7px 8px 0 var(--ink);
  animation: art-lift 5.4s ease-in-out infinite;
}

@keyframes art-lift {
  0%, 100% { transform: translateY(0); box-shadow: 7px 8px 0 var(--ink); }
  50%      { transform: translateY(-7px); box-shadow: 11px 13px 0 var(--ink); }
}

.doc-art > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  top: -36px;
  background: linear-gradient(
    180deg,
    transparent,
    #d7ff2f99 45%,
    #d7ff2fd9 50%,
    #d7ff2f99 55%,
    transparent
  );
  animation: art-scan 2.9s linear infinite;
}

@keyframes art-scan {
  0%   { top: -36px; }
  100% { top: 190px; }
}

.doc-art > div > b {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 4px 6px;
  font: 700 12px/1 SpaceMono, ui-monospace, monospace;
  animation: art-badge 3.6s ease-in-out infinite;
}

@keyframes art-badge {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(-2deg) scale(1.06); }
}

.doc-art em {
  display: block;
  height: 5px;
  margin-top: 13px;
  width: 75%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0.12);
  animation: art-fill 5.4s ease-out infinite;
}

.doc-art em:first-of-type {
  width: 100%;
  margin-top: 24px;
}

.doc-art em:nth-of-type(2) {
  animation-delay: 0.14s;
}

.doc-art em:last-of-type {
  width: 48%;
  animation-delay: 0.28s;
}

@keyframes art-fill {
  0%, 8%    { transform: scaleX(0.12); }
  28%, 86%  { transform: scaleX(1); }
  100%      { transform: scaleX(0.12); }
}

.doc-art section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 16px;
}

.doc-art section span {
  height: 21px;
  background: var(--acid);
  border: 1px solid var(--ink);
  transform-origin: center bottom;
  transform: scaleY(0.15);
  animation: art-tile 5.4s cubic-bezier(0.2, 0.9, 0.25, 1) infinite;
  animation-delay: 0.42s;
}

.doc-art section span:last-child {
  animation-delay: 0.56s;
}

@keyframes art-tile {
  0%, 20%   { transform: scaleY(0.15); }
  40%, 86%  { transform: scaleY(1); }
  100%      { transform: scaleY(0.15); }
}

@media (prefers-reduced-motion: reduce) {
  .doc-art *,
  .doc-art > div::after {
    animation: none !important;
  }

  .doc-art > i:first-child {
    transform: rotate(-9deg) translate(-15px, 5px);
  }

  .doc-art > i:nth-child(2) {
    transform: rotate(7deg) translate(14px, -4px);
  }

  .doc-art em {
    transform: scaleX(1);
  }

  .doc-art section span {
    transform: scaleY(1);
  }

  .doc-art > div::after {
    display: none;
  }
}