/* Custom animations for tool cards */

/* Drawer card — I4 Specimen Card animation */
.dv-i4-body {
  transition: transform 540ms cubic-bezier(.2,.85,.2,1), box-shadow 360ms ease;
  will-change: transform;
}
.dv-i4-host:hover .dv-i4-body {
  transform: translateX(100%);
  box-shadow: -3px 0 26px -8px rgba(31,35,51,0.45), inset 0 1px 0 rgba(255,255,255,0.65);
}

/* Home page — DrawerCard animation */
.dv-home-drawer {
  transition: transform 540ms cubic-bezier(.2,.85,.2,1);
  will-change: transform;
}
.dv-home-host:hover .dv-home-drawer {
  transform: translateX(100%);
}

/* Truth Detective: hide scrollbar, crosshair cursor */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cursor-target {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%23facc15" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>') 16 16, crosshair;
}

@keyframes scan {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(300%);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

/* StoryTeller card border system */
.st-card {
  border: 1px solid rgba(61, 43, 31, 0.08);
}

/* StoryTeller textured page background */
.st-bg-textured {
  background-color: #F5EFE6;
  background-image: radial-gradient(rgba(61, 43, 31, 0.055) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* StoryTeller floating card shadow */
.st-float {
  box-shadow:
    0 2px 4px rgba(61, 43, 31, 0.04),
    0 8px 20px rgba(61, 43, 31, 0.08),
    0 28px 56px rgba(61, 43, 31, 0.12),
    0 56px 96px rgba(61, 43, 31, 0.06);
}

/* StoryTeller button interaction system */
.st-btn {
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}
.st-btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.015);
  filter: brightness(1.06);
}
.st-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
  filter: brightness(0.97);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}