/* Floating card animations — staggered so cards don't all move in sync */

@keyframes float-base {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.float-a { animation: float-base 3.2s ease-in-out infinite; }
.float-b { animation: float-base 3.8s ease-in-out 0.4s infinite; }
.float-c { animation: float-base 3.5s ease-in-out 0.8s infinite; }
.float-d { animation: float-base 4.0s ease-in-out 1.2s infinite; }

/* Tool card grid */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
}

/* Tool card */
.tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 1.25rem;
  border: 1px solid #e5e7eb;
  padding: 2rem 1rem 1.5rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  aspect-ratio: 1;
}

.tool-card:hover {
  box-shadow: 0 12px 32px rgba(8, 31, 63, 0.18);
  transform: translateY(-4px) scale(1.03);
  border-color: #f3a81d;
  animation-play-state: paused;
}

.tool-icon {
  font-size: 2.75rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.tool-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.tool-desc {
  font-size: 0.7rem;
  color: #9ca3af;
  line-height: 1.3;
}

/* Admin card accent */
.admin-card {
  border-color: #9ab1d4;
  background: #e8edf5;
}

/* Drag-and-drop ghost */
.sortable-ghost {
  opacity: 0.4;
  background: #dde6ff;
}

/* Tailwind brand colors aren't available until JS loads — define fallbacks */
:root {
  --brand-800: #081f3f;
  --brand-700: #132951;
  --accent-400: #f3a81d;
}