/* ============================================
   Save Car Transpor't San Antonio — Custom Styles
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* --- Skip Link --- */
.skip-link {
  position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
  background: #800020; color: #fff; padding: 12px 24px; border-radius: 0 0 8px 8px;
  z-index: 100; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* --- Navigation --- */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: #ffb4c8; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* --- Mobile Menu --- */
.mobile-menu { animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.mobile-nav-link { display: block; }

/* --- Hero --- */
.hero { position: relative; }
.hero-bg-pattern {
  background-image: radial-gradient(circle at 25% 25%, rgba(255,182,200,0.15) 0%, transparent 50%),
                    radial-gradient(circle at 75% 75%, rgba(255,140,170,0.1) 0%, transparent 50%);
}

/* Hero badge */
.hero-badge { animation: fadeInUp 0.6s ease both; }

/* Hero images */
.hero-img-main { animation: fadeInRight 0.8s ease 0.2s both; }
.hero-accent-card { animation: fadeInLeft 0.8s ease 0.4s both; }
.hero-float-badge { animation: float 3s ease-in-out infinite; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Scroll indicator */
.scroll-indicator { display: flex; flex-direction: column; align-items: center; }
.scroll-mouse {
  width: 26px; height: 40px; border: 2px solid rgba(255,255,255,0.3);
  border-radius: 13px; position: relative;
}
.scroll-wheel {
  width: 4px; height: 8px; background: rgba(255,255,255,0.5);
  border-radius: 2px; position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%); animation: scrollWheel 1.5s ease-in-out infinite;
}
@keyframes scrollWheel { 0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 22px; } }

/* --- Buttons --- */
.btn-primary { box-shadow: 0 10px 40px rgba(255,77,115,0.3); }
.btn-primary:hover { box-shadow: 0 14px 50px rgba(255,77,115,0.4); }
.btn-secondary { backdrop-filter: blur(8px); }

/* --- Services --- */
.card-service { position: relative; overflow: hidden; }
.card-service::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #800020, #ff4d73);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
.card-service:hover::before { transform: scaleX(1); }

/* --- About --- */
.about-img-1 { animation: zoomIn 0.8s ease both; }
.about-img-2 { animation: zoomIn 0.8s ease 0.2s both; }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* --- Why Us --- */
.card-why { transition: all 0.4s ease; }
.card-why:hover { transform: translateY(-4px); }

/* --- Testimonials --- */
.card-testimonial { transition: all 0.4s ease; }
.card-testimonial:hover { transform: translateY(-4px); }

/* --- CTA Banner --- */
.cta-banner { position: relative; }
.cta-bg { background: linear-gradient(135deg, #ff4d73 0%, #800020 100%); }
.cta-pattern {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,0.03) 35px, rgba(255,255,255,0.03) 70px);
}
.btn-cta-primary { box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.btn-cta-primary:hover { box-shadow: 0 14px 50px rgba(0,0,0,0.3); }

/* --- Contact --- */
.contact-form-wrapper { transition: box-shadow 0.3s ease; }
.input-field { transition: all 0.2s ease; }
.input-field:focus { border-color: #800020; box-shadow: 0 0 0 3px rgba(128,0,32,0.1); }
.btn-submit { transition: all 0.3s ease; }

/* --- Footer --- */
.footer { position: relative; }
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #800020, #ff4d73, #800020);
}

/* --- Back to Top --- */
.back-to-top { transition: all 0.3s ease; }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(128,0,32,0.4); }

/* --- Scroll Reveal --- */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hero { min-height: auto; padding: 120px 0 80px; }
  .hero h1 { font-size: 2.75rem; }
  .hero-collage { display: none; }
  .section { padding-top: 4rem; padding-bottom: 4rem; }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .hero h1 { font-size: 4rem; }
}

@media (min-width: 1024px) {
  .hero { min-height: 100vh; }
}

/* --- Focus styles --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #ff4d73;
  outline-offset: 2px;
  border-radius: 4px;
}