/* Premium UI/UX Enhancements - Inspired by Modern Premium Business Websites */

/* ============================================
   ENHANCED VARIABLES & DESIGN TOKENS
   ============================================ */
:root {
  /* Premium Color Enhancements */
  --premium-glow: rgba(0, 118, 163, 0.4);
  --premium-glow-strong: rgba(0, 153, 204, 0.6);
  --premium-shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.12);
  --premium-shadow-medium: 0 12px 48px rgba(0, 118, 163, 0.15);
  --premium-shadow-strong: 0 20px 64px rgba(0, 118, 163, 0.25);
  
  /* Enhanced Glassmorphism */
  --glass-premium: rgba(255, 255, 255, 0.08);
  --glass-premium-border: rgba(255, 255, 255, 0.15);
  --glass-premium-hover: rgba(255, 255, 255, 0.12);
  
  /* Premium Transitions */
  --transition-premium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   ENHANCED SCROLL ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px var(--premium-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--premium-glow-strong), 0 0 60px var(--premium-glow);
  }
}

/* ============================================
   PREMIUM CARD ENHANCEMENTS
   ============================================ */
.serviceCard,
.industryCard,
.statCard,
.aboutStatCard,
.testimonialCard {
  position: relative;
  overflow: hidden;
  transition: var(--transition-premium);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.serviceCard::before,
.industryCard::before,
.statCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.serviceCard:hover::before,
.industryCard:hover::before,
.statCard:hover::before {
  left: 100%;
}

.serviceCard:hover,
.industryCard:hover,
.statCard:hover,
.aboutStatCard:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--premium-shadow-strong);
  border-color: rgba(0, 118, 163, 0.4);
}

/* ============================================
   ENHANCED BUTTON INTERACTIONS
   ============================================ */
.contactButton,
.ctaButton,
.formButton.primary,
.enquiryButton {
  position: relative;
  overflow: hidden;
  transition: var(--transition-premium);
  transform-style: preserve-3d;
}

.contactButton::after,
.ctaButton::after,
.formButton.primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.contactButton:hover::after,
.ctaButton:hover::after,
.formButton.primary:hover::after {
  width: 300px;
  height: 300px;
}

.contactButton:hover,
.ctaButton:hover,
.formButton.primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 40px var(--premium-glow);
}

.contactButton:active,
.ctaButton:active,
.formButton.primary:active {
  transform: translateY(-1px) scale(1.02);
}

/* ============================================
   PREMIUM FORM ENHANCEMENTS
   ============================================ */
.formInput,
.formSelect,
.formTextarea {
  transition: var(--transition-premium);
  background: var(--glass-premium);
  border: 1px solid var(--glass-premium-border);
}

.formInput:focus,
.formSelect:focus,
.formTextarea:focus {
  background: var(--glass-premium-hover);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(0, 118, 163, 0.1),
              0 8px 24px rgba(0, 118, 163, 0.15);
  transform: translateY(-2px);
}

.formInput:hover,
.formSelect:hover,
.formTextarea:hover {
  border-color: rgba(0, 118, 163, 0.5);
  background: var(--glass-premium-hover);
}

/* ============================================
   ENHANCED STATISTICS DISPLAY
   ============================================ */
.heroStat,
.statCard,
.aboutStatCard {
  position: relative;
  animation: fadeInUp 0.6s ease-out backwards;
}

.heroStat:nth-child(1) { animation-delay: 0.1s; }
.heroStat:nth-child(2) { animation-delay: 0.2s; }
.heroStat:nth-child(3) { animation-delay: 0.3s; }

.statValue,
.heroStatValue,
.aboutStatValue {
  background: linear-gradient(135deg, #00b3e6 0%, #0076a3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.statValue::after,
.heroStatValue::after,
.aboutStatValue::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0;
  transition: var(--transition-premium);
}

.statCard:hover .statValue::after,
.heroStat:hover .heroStatValue::after,
.aboutStatCard:hover .aboutStatValue::after {
  opacity: 1;
  transform: scaleX(1.2);
}

/* ============================================
   PREMIUM NAVIGATION ENHANCEMENTS
   ============================================ */
.navLink {
  position: relative;
  transition: var(--transition-premium);
}

.navLink::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-primary);
  transform: translateX(-50%);
  transition: var(--transition-premium);
}

.navLink:hover::after,
.navLink.active::after {
  width: 100%;
}

.navLink:hover {
  color: var(--accent-primary);
  transform: translateY(-2px);
}

/* ============================================
   ENHANCED HEADER GLASSMORPHISM
   ============================================ */
.header {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(10, 10, 15, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: 1001 !important; /* Ensure header is above confetti but below banner */
}

/* ============================================
   PREMIUM HERO SECTION ENHANCEMENTS
   ============================================ */
.hero {
  position: relative;
  z-index: 1; /* Ensure hero is below header */
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 118, 163, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: pulse 4s ease-in-out infinite;
}

.title {
  animation: fadeInUp 0.8s ease-out;
  text-shadow: 0 4px 20px rgba(0, 118, 163, 0.3);
}

.heroBadge {
  animation: fadeInScale 0.6s ease-out;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ============================================
   ENHANCED TESTIMONIAL CARDS
   ============================================ */
.testimonialCard {
  transition: var(--transition-premium);
  position: relative;
}

.testimonialCard::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 80px;
  color: var(--accent-primary);
  opacity: 0.2;
  font-family: Georgia, serif;
  transition: var(--transition-premium);
}

.testimonialCard:hover::before {
  opacity: 0.4;
  transform: scale(1.1);
}

.testimonialCard:hover {
  transform: translateY(-6px);
  box-shadow: var(--premium-shadow-strong);
}

/* ============================================
   PREMIUM SECTION TRANSITIONS
   ============================================ */
section {
  position: relative;
  overflow: hidden;
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-primary),
    transparent
  );
  transition: left 1s ease;
}

section:hover::before {
  left: 100%;
}

/* ============================================
   ENHANCED SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0076a3, #0099cc, #00b3e6);
  border-radius: 6px;
  border: 2px solid var(--bg-secondary);
  transition: var(--transition-premium);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0099cc, #00b3e6, #00c4f0);
  box-shadow: 0 0 10px var(--premium-glow);
}

/* ============================================
   PREMIUM LOADING STATES
   ============================================ */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: shimmer 2s infinite;
}

/* ============================================
   ENHANCED SOCIAL LINKS
   ============================================ */
.socialLink,
.founderSocialLink {
  transition: var(--transition-premium);
  position: relative;
}

.socialLink::before,
.founderSocialLink::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: var(--transition-premium);
}

.socialLink:hover::before,
.founderSocialLink:hover::before {
  opacity: 1;
}

.socialLink:hover,
.founderSocialLink:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 24px var(--premium-glow);
}

/* ============================================
   PREMIUM FOOTER ENHANCEMENTS
   ============================================ */
.footer {
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-primary),
    transparent
  );
}

/* ============================================
   ENHANCED MOBILE INTERACTIONS
   ============================================ */
@media (max-width: 768px) {
  .serviceCard:active,
  .industryCard:active,
  .statCard:active {
    transform: scale(0.98);
  }
  
  .contactButton:active,
  .ctaButton:active {
    transform: scale(0.95);
  }
}

/* ============================================
   PREMIUM FOCUS STATES
   ============================================ */
*:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px rgba(0, 118, 163, 0.2);
}

/* ============================================
   ENHANCED SELECTION
   ============================================ */
::selection {
  background: rgba(0, 118, 163, 0.4);
  color: var(--text-primary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   PREMIUM ANIMATION UTILITIES
   ============================================ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

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

.scale-in {
  animation: fadeInScale 0.6s ease-out;
}

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

/* ============================================
   PREMIUM GRADIENT TEXT ENHANCEMENTS
   ============================================ */
.gradientText {
  background: linear-gradient(135deg, #00b3e6 0%, #0076a3 50%, #0099cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ============================================
   PREMIUM BADGE ENHANCEMENTS
   ============================================ */
.heroBadge,
.founderBadge,
.aboutHeroBadge {
  position: relative;
  overflow: hidden;
}

.heroBadge::before,
.founderBadge::before,
.aboutHeroBadge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.heroBadge:hover::before,
.founderBadge:hover::before,
.aboutHeroBadge:hover::before {
  left: 100%;
}

/* ============================================
   ENHANCED ENQUIRY FORM
   ============================================ */
.enquiryForm {
  position: relative;
  overflow: hidden;
}

.enquiryForm::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(0, 118, 163, 0.1) 0%,
    transparent 70%
  );
  animation: rotate 20s linear infinite;
  pointer-events: none;
}

/* ============================================
   PREMIUM STATISTICS GRID
   ============================================ */
.statsGrid,
.aboutStatsGrid {
  display: grid;
  gap: 1.5rem;
}

.statsGrid .statCard,
.aboutStatsGrid .aboutStatCard {
  transition-delay: calc(var(--index, 0) * 0.1s);
}

/* ============================================
   ENHANCED HERO STATS
   ============================================ */
.heroStats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.heroStat {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: 1.5rem;
  background: var(--glass-premium);
  border: 1px solid var(--glass-premium-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: var(--transition-premium);
}

.heroStat:hover {
  background: var(--glass-premium-hover);
  transform: translateY(-6px);
  box-shadow: var(--premium-shadow-medium);
}

/* ============================================
   PREMIUM CURSOR EFFECT (Optional)
   ============================================ */
.premium-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10002; /* Above everything */
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-width 0.3s;
  mix-blend-mode: difference;
}

.premium-cursor.hover {
  width: 40px;
  height: 40px;
  border-width: 1px;
  background: rgba(0, 118, 163, 0.1);
}

/* ============================================
   RIPPLE EFFECT
   ============================================ */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ============================================
   FORM VALIDATION STATES
   ============================================ */
.formInput.has-value,
.formSelect.has-value,
.formTextarea.has-value {
  border-color: rgba(0, 118, 163, 0.5);
}

.formInput.is-valid,
.formSelect.is-valid,
.formTextarea.is-valid {
  border-color: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.1);
}

.formInput.is-invalid,
.formSelect.is-invalid,
.formTextarea.is-invalid {
  border-color: #f87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.1);
}