/* ═══════════════════════════════════════════════════════════════
   HARMONY - Plate illustrations & animations
   Blueprint line-art, parchment-on-ink aesthetic
   ═══════════════════════════════════════════════════════════════ */

/* ─── Plate shell overrides - illustrations replace dashed placeholder ─── */
.plate-slot.has-illo::after { display: none; }
.plate-slot.has-illo::before { opacity: 0.6; }

.plate-slot .plate-illo {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.plate-slot .plate-illo svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Corner ticks - registration marks */
.plate-slot.has-illo .corner-tick {
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--ink);
  border-style: solid;
  border-width: 0;
  z-index: 2;
  opacity: 0.55;
}
.plate-slot .tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.plate-slot .tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.plate-slot .bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; }
.plate-slot .br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

/* Plate ID stamp (top-right) */
.plate-slot .plate-stamp {
  position: absolute;
  top: 16px; right: 18px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--parchment);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS - per-line SVG drafting (NO clip-path wipe).
   Each <line>/<path>/<rect> animates its own stroke-dashoffset via
   inline <animate> so the drawing literally assembles itself.
   IntersectionObserver adds .in-view → the card fades up; the SVG
   <animate> elements begin on their own (begin="Xs") and freeze.
   ═══════════════════════════════════════════════════════════════ */

.plate-slot.has-illo {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.plate-slot.has-illo.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* No clip-path wipe. Each element draws itself via inline <animate>. */

/* Legacy .draw / .fade classes are kept visible - new SVGs use inline
   <animate> for drafting, so the .draw class is a no-op now. */
.plate-slot .plate-illo .draw {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.plate-slot .plate-illo .fade { opacity: 1; }

/* Subtle live pulse kept for data-flow dots - same cadence as before
   so "live" indicators still feel alive after the wipe settles. */
.plate-slot.in-view .plate-illo .pulse {
  animation: pulse 2.4s ease-in-out infinite;
  animation-delay: 3.4s;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Traveling dot retained for signal flow */
.plate-slot.in-view .plate-illo .travel {
  animation: travel 3.2s cubic-bezier(.4,.2,.6,.8) infinite;
  animation-delay: 3.6s;
}
@keyframes travel {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Corner ticks + stamps fade in last */
.plate-slot .corner-tick,
.plate-slot .plate-stamp {
  opacity: 0;
  transition: opacity 0.6s ease 1.0s;
}
.plate-slot.in-view .corner-tick { opacity: 0.55; }
.plate-slot.in-view .plate-stamp { opacity: 1; }

/* Hover: gentle lift */
.plate-slot.has-illo {
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1),
              transform 0.9s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.3s ease;
}
.plate-slot.has-illo.in-view:hover {
  box-shadow: 0 8px 24px rgba(16,25,43,0.08);
  transform: translateY(-2px);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .plate-slot.has-illo {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .plate-slot .plate-illo svg {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    animation: none !important;
  }
  .plate-slot .plate-illo .draw,
  .plate-slot .plate-illo .fade,
  .plate-slot .corner-tick,
  .plate-slot .plate-stamp { opacity: 1; stroke-dashoffset: 0; animation: none !important; }
}