/* Grain texture */
.grain {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Fallback art if remote photo fails */
.fallback-art {
  background: radial-gradient(circle at 30% 20%, rgba(255, 154, 31, 0.25), transparent 40%),
              radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.15), transparent 40%),
              linear-gradient(135deg, #161B2E, #0F1424);
}
.fallback-art::after {
  content: "🚛";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8rem;
  opacity: 0.6;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Custom radial gradient util */
.bg-gradient-radial { background-image: radial-gradient(var(--tw-gradient-stops)); }

/* Size button active state */
.size-btn.active {
  background-color: rgba(255, 154, 31, 0.15);
  border-color: #FF9A1F;
  color: #FFB547;
}

/* FAQ details — remove default marker */
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; }

/* Selection */
::selection { background: #FF9A1F; color: #0A0E1A; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0A0E1A; }
::-webkit-scrollbar-thumb { background: #1F2538; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #FF9A1F; }

/* Reveal animation on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}