/* Custom styles for Pop Up Garage on Evans */

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

  /* Selection color */
  ::selection {
    background-color: rgba(168, 50, 50, 0.4);
    color: #f0d48a;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #0f0e0c;
  }
  ::-webkit-scrollbar-thumb {
    background: #3c3b32;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #5d5c51;
  }

  /* Scroll reveal animations - progressive enhancement */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
  }

  /* Ensure all content is visible by default (no JS gate) */
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
    }
  }

  /* Gold gradient text utility */
  .gold-gradient-text {
    background: linear-gradient(135deg, #f0d48a, #d4a832, #e8c060);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Navbar glass effect */
  #navbar.scrolled {
    background: rgba(15, 14, 12, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(60, 59, 50, 0.5);
  }

  /* Hero text animation - only for below-fold or reduced motion safe */
  @media (prefers-reduced-motion: no-preference) {
    .hero-badge {
      animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero-title {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
      opacity: 0;
    }
    .hero-subtitle {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
      opacity: 0;
    }
    .hero-ctas {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
      opacity: 0;
    }
    .hero-trust {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
      opacity: 0;
    }
  }

  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Button hover glow */
  .btn-glow:hover {
    box-shadow: 0 0 30px rgba(212, 168, 50, 0.3);
  }

  /* Image aspect ratio fallback */
  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }
  .aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
  }