/* Custom CSS for AMTECHLABS - Minimal additions to Tailwind */

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

/* Font defaults */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Technical grid background */
.technical-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* Premium card effect */
.premium-card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 8px 16px -4px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.premium-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 16px 32px -8px rgba(0, 0, 0, 0.08);
  border-color: #D4D4D4;
}

/* Shimmer effect for buttons */
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.shimmer-layer {
  transform: translateX(-100%);
}

.group:hover .shimmer-layer {
  animation: shimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Service card icon container */
.service-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
}

/* Hero slider animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Modal overlay */
.modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* Form input focus states */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Loading spinner */
.spinner {
  border: 2px solid #E2E8F0;
  border-top: 2px solid #4F46E5;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Infinite Marquee Animation - Left to Right as requested (or standard right-to-left) */
/* Standard marquee usually goes right-to-left. User said "from left to right like clients Corolla". 
   Technically, standard reading direction flow is elements enter from right and move left. 
   "left to right" might mean the direction of movement. 
   I will provide standard left-rolling (start right, end left) which is most natural, 
   but can easily flip animation if they specifically mean moving towards the right. 
   Let's stick to standard "infinite loop" which usually moves -100%. */

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

  /* We duplicate items, so -50% is one full set */
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-content {
  display: inline-flex;
  animation: scroll 40s linear infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}

/* Gradient masks for smooth fade edges */
.marquee-mask {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* New Design System Additions */
.bg-gradient-brand {
  background: linear-gradient(135deg, #0F172A 0%, #4F46E5 100%);
}

.bg-gradient-warm {
  background: linear-gradient(135deg, #4F46E5 0%, #F7941D 100%);
}

.bg-tech-wave {
  background-image: url('../img/bg/tech-wave.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Overlay to ensure text readability on the busy background */
.bg-tech-wave::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.85);
  /* canvas color with opacity */
  z-index: 1;
}

.bg-tech-wave>* {
  position: relative;
  z-index: 2;
}

.text-gradient {
  background: linear-gradient(135deg, #4F46E5 0%, #F7941D 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}