/* Custom styles for LibertyX Bitcoin ATM */

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

/* Custom font loading */
@font-face {
  font-family: 'Custom Icons';
  src: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>') format('svg');
  font-display: swap;
}

/* Base styles */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #5c4a3d;
  background-color: #fdfbf7;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
}

/* Custom color utilities */
.bg-terracotta-50 { background-color: #fdf0eb; }
.bg-terracotta-100 { background-color: #fce4d6; }
.bg-terracotta-200 { background-color: #f8c4b0; }
.bg-terracotta-300 { background-color: #f29d7e; }
.bg-terracotta-400 { background-color: #ec6f48; }
.bg-terracotta-500 { background-color: #e04a24; }
.bg-terracotta-600 { background-color: #c93517; }
.bg-terracotta-700 { background-color: #a52712; }
.bg-terracotta-800 { background-color: #852414; }
.bg-terracotta-900 { background-color: #6e2013; }

.text-terracotta-50 { color: #fdf0eb; }
.text-terracotta-100 { color: #fce4d6; }
.text-terracotta-200 { color: #f8c4b0; }
.text-terracotta-300 { color: #f29d7e; }
.text-terracotta-400 { color: #ec6f48; }
.text-terracotta-500 { color: #e04a24; }
.text-terracotta-600 { color: #c93517; }
.text-terracotta-700 { color: #a52712; }
.text-terracotta-800 { color: #852414; }
.text-terracotta-900 { color: #6e2013; }

.bg-sand-50 { background-color: #fdfbf7; }
.bg-sand-100 { background-color: #faf5ec; }
.bg-sand-200 { background-color: #f5ecda; }
.bg-sand-300 { background-color: #eddfc0; }
.bg-sand-400 { background-color: #e2ca9e; }
.bg-sand-500 { background-color: #d4b47c; }
.bg-sand-600 { background-color: #c49a5e; }
.bg-sand-700 { background-color: #a67d4a; }
.bg-sand-800 { background-color: #86623d; }
.bg-sand-900 { background-color: #6d5032; }

.text-sand-50 { color: #fdfbf7; }
.text-sand-100 { color: #faf5ec; }
.text-sand-200 { color: #f5ecda; }
.text-sand-300 { color: #eddfc0; }
.text-sand-400 { color: #e2ca9e; }
.text-sand-500 { color: #d4b47c; }
.text-sand-600 { color: #c49a5e; }
.text-sand-700 { color: #a67d4a; }
.text-sand-800 { color: #86623d; }
.text-sand-900 { color: #6d5032; }

/* Button styles */
.btn-primary {
  background: linear-gradient(135deg, #e04a24 0%, #c93517 100%);
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #c93517 0%, #a52712 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(224, 74, 36, 0.3);
}

.btn-secondary {
  background: transparent;
  border: 2px solid #e04a24;
  color: #c93517;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-secondary:hover {
  background: #e04a24;
  color: white;
}

/* Card hover effects */
.card-hover {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(224, 74, 36, 0.15);
}

/* Service card styles */
.service-card {
  background: linear-gradient(145deg, #fdfbf7 0%, #faf5ec 100%);
  border: 1px solid #f5ecda;
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.3s ease;
}

.service-card:hover {
  background: linear-gradient(145deg, #fce4d6 0%, #fdf0eb 100%);
  border-color: #f29d7e;
}

/* Form styles */
.form-input {
  background: #faf5ec;
  border: 2px solid #f5ecda;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #5c4a3d;
  width: 100%;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #e04a24;
  background: white;
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 74, 36, 0.1);
}

.form-input::placeholder {
  color: #d4b47c;
}

/* Animation classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
  }
}

/* Navigation styles */
.nav-scrolled {
  background: rgba(253, 251, 247, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Bitcoin icon animation */
.bitcoin-icon {
  animation: float 3s ease-in-out infinite;
}

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

/* Pulse animation */
.pulse-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #fdfbf7;
}

::-webkit-scrollbar-thumb {
  background: #e2ca9e;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d4b47c;
}

/* Hero gradient backgrounds */
.hero-gradient {
  background: linear-gradient(135deg, #fdfbf7 0%, #fce4d6 25%, #f8c4b0 50%, #f29d7e 75%, #ec6f48 100%);
}

.hero-gradient-dark {
  background: linear-gradient(135deg, #a52712 0%, #c93517 25%, #e04a24 50%, #ec6f48 75%, #f29d7e 100%);
}

.sand-gradient {
  background: linear-gradient(180deg, #fdfbf7 0%, #faf5ec 50%, #f5ecda 100%);
}

/* CTA gradient */
.cta-gradient {
  background: linear-gradient(135deg, #a52712 0%, #c93517 50%, #e04a24 100%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-gradient {
    background: linear-gradient(180deg, #fdfbf7 0%, #fce4d6 50%, #f8c4b0 100%);
  }
  
  .cta-gradient {
    background: linear-gradient(180deg, #a52712 0%, #c93517 100%);
  }
}