@tailwind base;
@tailwind components;
@tailwind utilities;

/* Landing Page Hero Animations */
@layer utilities {
  /* Pin A appear animation */
  @keyframes pin-appear-a {
    0% {
      opacity: 0;
      transform: scale(0) translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .animate-pin-appear-a {
    animation: pin-appear-a 0.6s ease-out 0.3s both;
  }

  /* Pin B appear animation */
  @keyframes pin-appear-b {
    0% {
      opacity: 0;
      transform: scale(0) translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .animate-pin-appear-b {
    animation: pin-appear-b 0.6s ease-out 0.6s both;
  }

  /* Connection line draw animation */
  @keyframes line-draw {
    0% {
      stroke-dashoffset: 1000;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }

  .animate-line-draw {
    animation: line-draw 0.8s ease-out 0.9s both;
  }

  /* Distance badge appear animation */
  @keyframes distance-appear {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }
  }

  .animate-distance-appear {
    animation: distance-appear 0.5s ease-out 1.2s both;
  }

  /* CTA Button bright blue pulse animation */
  @keyframes cta-pulse-blue {
    0% {
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
      box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
    100% {
      box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
  }

  .animate-cta-pulse-blue {
    animation: cta-pulse-blue 1.5s ease-out 1s infinite;
  }

  /* Scroll-triggered fade-in-up animation */
  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out both;
  }

  /* Staggered animation delays for multiple items */
  .animate-delay-100 {
    animation-delay: 0.1s;
  }

  .animate-delay-200 {
    animation-delay: 0.2s;
  }

  .animate-delay-300 {
    animation-delay: 0.3s;
  }

  .animate-delay-400 {
    animation-delay: 0.4s;
  }

  /* Hover lift effect for cards */
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
  }

  .hover-lift:hover {
    transform: translateY(-4px);
  }

  /* Performance optimization */
  .animate-pin-appear-a,
  .animate-pin-appear-b,
  .animate-distance-appear {
    will-change: transform, opacity;
  }

  /* Mobile optimizations */
  @media (max-width: 768px) {
    /* Simplify animations on mobile for better performance */
    .animate-cta-pulse-blue {
      animation-duration: 2.5s; /* Slower on mobile to save battery */
    }

    /* Reduce transform intensity on mobile */
    .hover-lift:hover {
      transform: translateY(-2px);
    }
  }

  /* Respect user preference for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .animate-pin-appear-a,
    .animate-pin-appear-b,
    .animate-line-draw,
    .animate-distance-appear,
    .animate-cta-pulse-blue,
    .animate-fade-in-up {
      animation: none;
      opacity: 1;
      transform: none;
    }

    .hover-lift:hover {
      transform: none;
    }
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Leaflet Map Customization */
@layer components {
  .leaflet-container {
    @apply rounded-lg;
  }

  /* Distance label styling */
  .distance-label {
    background-color: white;
    border: 2px solid #3b82f6;
    border-radius: 4px;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 14px;
    color: #1e40af;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  /* Marker customization */
  .user-marker,
  .helper-marker {
    background: transparent;
    border: none;
  }
}