/* ============================================
   LaPista.ATX - Shared Styles
   ============================================ */

/* Typography Overrides */
h1, h2, h3, h4, .font-display { 
  font-family: 'Oswald', sans-serif; 
  letter-spacing: 0.02em; 
  text-transform: uppercase; 
}

body, input, button, .font-body { 
  font-family: 'Space Grotesk', sans-serif; 
}

/* Custom Scrollbar - Industrial Look */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f3f4f6; border-left: 1px solid #e5e7eb; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 0; border: 1px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Noise Texture Overlay */
.bg-noise { position: relative; }
.bg-noise::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 50;
  opacity: 0.6;
}

/* Halftone Pattern Class */
.bg-halftone {
  background-image: radial-gradient(#d1d5db 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Selection Color */
::selection { background: #22c55e; color: #ffffff; }

/* Grunge Border Utility */
.border-grunge { border: 1px solid #e5e7eb; }

/* Font Weight Overrides */
.font-black { font-weight: 700 !important; }
.font-bold { font-weight: 600 !important; }
.font-semibold { font-weight: 500 !important; }
.tracking-tighter { letter-spacing: -0.025em !important; }

/* Accordion Animation (FAQ page) */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary ~ * {
  animation: slideDown 0.2s ease-in-out;
}
@keyframes slideDown {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Ping Animation (for confirmation checkmark) */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}