/* ==========================================================================
   ANIMATIONS & GRID UTILITIES
   ========================================================================== */

.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float { animation: floatY 5s ease-in-out infinite; }

@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(209, 54, 54, 0.45); }
  70% { box-shadow: 0 0 0 14px rgba(209, 54, 54, 0); }
  100% { box-shadow: 0 0 0 0 rgba(209, 54, 54, 0); }
}

.pulse-ring { animation: pulseRing 2.4s ease-out infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .float, .pulse-ring { animation: none; }
}

/* ---- CNC grid texture background utility ---- */
.texture-grid {
  position: relative;
}

.texture-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(24,16,15,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,16,15,0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.texture-grid > * { position: relative; z-index: 1; }