/* Chitty Landing Page Styles */

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse-border {
  0%, 100% { border-color: rgba(255, 107, 0, 0.5); }
  50% { border-color: rgba(255, 107, 0, 1); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

.pulse-border {
  animation: pulse-border 2s ease-in-out infinite;
}

/* Custom gradients */
.gradient-orange {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8533 100%);
}

.gradient-mesh {
  background-image: 
    radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 0.3) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.2) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.3) 0px, transparent 50%);
}

/* Glass effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Mobile menu animation */
.mobile-menu-enter {
  transform: translateX(100%);
}

.mobile-menu-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-out;
}

/* Card hover effects */
.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* PIN input styling */
.pin-input {
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  text-transform: uppercase;
}

.pin-input::placeholder {
  letter-spacing: normal;
  text-transform: none;
}

/* Loading animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spin {
  animation: spin 1s linear infinite;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .hero-image {
    max-height: 300px;
  }
}

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

/* Focus states */
*:focus {
  outline: 2px solid #FF6B00;
  outline-offset: 2px;
}

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

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

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

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