/* RideSOS shared styles — light theme matching the app's actual UI palette */

:root {
  --sos-red: #e11d2e;
  --sos-red-dark: #b8101f;
  --sos-green: #16a34a;
  --sos-green-dark: #166534;
  --ink: #1a1d23;
  --paper: #f6f7f9;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--paper);
  overflow-x: hidden;
}

.font-display {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.reveal-visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.reveal-visible { opacity: 1; transform: translateX(0); }
.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.reveal-visible { opacity: 1; transform: scale(1); }

/* stagger helper: set custom delay via style="--d: 120ms" */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  transition-delay: var(--d, 0ms);
}

/* ---------- Nav ---------- */
#site-nav {
  transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease;
  background-color: rgba(246, 247, 249, 0.7);
  backdrop-filter: blur(10px);
}
#site-nav.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -16px rgba(26, 29, 35, 0.18);
}

/* ---------- Blobs / ambient glow ---------- */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  animation: float-blob 14s ease-in-out infinite;
}
.blob-red { background: radial-gradient(circle at 30% 30%, #e11d2e, transparent 70%); }
.blob-green { background: radial-gradient(circle at 30% 30%, #16a34a, transparent 70%); }

@keyframes float-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.08); }
  66% { transform: translate(-25px, 25px) scale(0.95); }
}

/* ---------- Floating phone mockup ---------- */
.float-y {
  animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-18px); }
}

/* ---------- Pulse ring (SOS button) ---------- */
.pulse-ring::before,
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--sos-red);
  opacity: 0.55;
  animation: pulse-ring 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.pulse-ring::after {
  animation-delay: 1.2s;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ---------- Gradient text ---------- */
.text-gradient {
  background: linear-gradient(90deg, #e11d2e 0%, #ff6b57 50%, #e11d2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-green {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 50%, #16a34a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Card hover lift ---------- */
.card-lift {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}
.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -20px rgba(225, 29, 46, 0.18);
  border-color: rgba(225, 29, 46, 0.35);
}

/* ---------- Marquee (cities) ---------- */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Mobile menu ---------- */
#mobile-menu {
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.menu-open {
  transform: translateX(0%);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f6f7f9; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #e11d2e; }

/* ---------- Loader ---------- */
#page-loader {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#page-loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
}

/* ---------- Utility: subtle grid background ---------- */
.bg-grid {
  background-image:
    linear-gradient(rgba(26,29,35,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,29,35,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Back to top button */
#back-to-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}