/* Laravel Velocity Gateway - Custom Styles */

/* CSS Custom Properties for easy theming */
:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  
  --secondary-500: #d946ef;
  --secondary-600: #c026d3;
  
  --glass-opacity: 0.7;
  --glass-blur: 16px;
}

.dark {
  --glass-opacity: 0.4;
  --glass-blur: 20px;
}

/* Glassmorphism Card */
.glass-card {
  background: rgba(255, 255, 255, var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.dark .glass-card {
  background: rgba(15, 23, 42, var(--glass-opacity));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.5),
    0 2px 4px -1px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Smooth scrolling disabled for no-scroll page */
html {
  scroll-behavior: smooth;
  overflow: hidden;
}

/* Custom selection colors */
::selection {
  background-color: var(--primary-500);
  color: white;
}

/* Gradient text animation */
@keyframes gradient-x {
  0%, 100% {
    background-size: 200% 200%;
    background-position: left center;
  }
  50% {
    background-size: 200% 200%;
    background-position: right center;
  }
}

.bg-gradient-to-r {
  animation: gradient-x 15s ease infinite;
}

/* Mask for placeholder logos */
.mask-image-gradient {
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/* Custom scrollbar hidden */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Prevent text selection on decorative elements */
.pointer-events-none {
  user-select: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .glass-card {
    padding: 2rem 1.5rem;
  }
  
  h1 {
    font-size: 2.5rem !important;
  }
}

/* Animation utilities */
.delay-1000 {
  animation-delay: 1000ms;
}

.delay-2000 {
  animation-delay: 2000ms;
}

/* Hover lift effect */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.2);
}

/* Focus visible styles for accessibility */
*:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Dark mode transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}