/* ── CARD HOVER STATES ────────────────────────────────────── */

.evidence-card:hover {
  transform: translateY(-4px) rotate(var(--rotate, 0deg)) scale(1.016);
  box-shadow: var(--shadow-heavy);
  z-index: 10;
}

.scene.motion-lite .evidence-card:hover {
  transform: translateY(-2px) rotate(var(--rotate, 0deg)) scale(1.01);
}

/* individual card type hover tweaks */
.card-notecluster:hover { box-shadow: none; }

.card-envelope:hover .envelope-flap {
  transform: scaleY(0.85);
  transition: transform 0.3s ease;
}

/* ── FOCUSED STATE ───────────────────────────────────────── */

.scene.is-focused .evidence-card:not(.is-active) {
  opacity: 0.28;
  transform: translateY(8px) rotate(var(--rotate, 0deg)) scale(0.985);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

.evidence-card.is-active {
  z-index: 15 !important;
  opacity: 1;
}

.scene.is-focused .evidence-card.is-active {
  transform: translateY(-2px) rotate(var(--rotate, 0deg)) scale(1.012);
}

/* ── STRING ANIMATIONS ───────────────────────────────────── */

.string-path {
  opacity: 0;
  transition: stroke 0.22s ease, stroke-width 0.22s ease, opacity 0.22s ease;
}

.string-path.is-drawn {
  opacity: 0.82;
}

.string-path.is-drawn.pulse {
  stroke: #cf4545;
  stroke-width: 3.2;
  opacity: 1;
}

.string-knot {
  transition: opacity 0.22s ease;
}

/* ── CARD ENTRANCE ANIMATIONS ────────────────────────────── */

.evidence-card {
  opacity: 0;
  transform: translateY(-22px) rotate(var(--rotate, 0deg)) scale(0.95);
}

.evidence-card.entered {
  opacity: 1;
  transform: translateY(0) rotate(var(--rotate, 0deg)) scale(1);
  transition: opacity 0.42s ease-out, transform 0.52s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── CARD FLOATING ANIMATION ─────────────────────────────── */

@keyframes card-float {
  0%, 100% { transform: translateY(0) rotate(var(--rotate, 0deg)); }
  50% { transform: translateY(calc(var(--float-distance, 3px) * -1)) rotate(var(--rotate, 0deg)); }
}

.evidence-card.floating {
  animation: card-float var(--float-duration, 3s) var(--float-delay, 0s) ease-in-out infinite;
}

.scene.ambient-paused .evidence-card.floating {
  animation-play-state: paused;
}

.scene.motion-lite {
  --float-distance: 2px;
}

.scene.motion-reduced {
  --float-distance: 0px;
}

.scene.motion-reduced .evidence-card.floating {
  animation: none;
}

.scene.motion-reduced .evidence-card.entered {
  transition-duration: 0.18s, 0.18s;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .board-controls {
    bottom: 16px;
    right: 16px;
  }

  .board-hint {
    bottom: 18px;
    font-size: 0.72rem;
  }

  .popup-container {
    width: 95vw;
    max-height: calc(100vh - 40px);
  }

  .popup-inner {
    padding: 20px 18px 24px;
  }

  .credentials-archive {
    padding: 16px;
    border-radius: 22px;
  }

  .archive-head,
  .document-header {
    flex-direction: column;
  }

  .archive-count {
    min-width: 0;
    width: 100%;
  }

  .certificate-grid {
    grid-template-columns: 1fr;
  }

  .document-container {
    width: 96vw;
    max-height: calc(100vh - 20px);
    border-radius: 24px;
  }

  .document-header {
    padding: 20px 56px 14px 20px;
  }

  .document-actions {
    width: 100%;
    padding-top: 0;
  }

  .document-open-link {
    width: 100%;
  }

  .document-chamber {
    padding: 14px 14px 18px;
  }

  .document-frame-shell {
    height: calc(100vh - 250px);
    min-height: 420px;
    border-radius: 18px;
  }
}