/* ===========================
   PREMIUM UX EFFECTS CSS
   Professional micro-interactions
   =========================== */

/* 1. SCROLL PROGRESS BAR */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  width: 0%;
  z-index: 99999;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* 2. SECTION REVEAL ANIMATION */
.section-hidden {
  opacity: 0;
  transform: translateY(50px);
  transition: none;
}

.section-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Stagger effect for child elements */
.section-revealed > * {
  animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.section-revealed > *:nth-child(1) { animation-delay: 0.1s; }
.section-revealed > *:nth-child(2) { animation-delay: 0.2s; }
.section-revealed > *:nth-child(3) { animation-delay: 0.3s; }
.section-revealed > *:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. MAGNETIC BUTTONS */
.btn,
.carousel-nav,
.whatsapp-float {
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* 4. SMOOTH SCROLL BEHAVIOR */
html {
  scroll-behavior: smooth;
}

/* 5. COUNTER ANIMATION */
.kpi .value {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

.kpi .value.counted {
  animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===========================
   ADDITIONAL PREMIUM TOUCHES
   =========================== */

/* Card hover elevation */
.card-item,
.quote,
.kpi {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Text selection styling */
::selection {
  background: var(--primary);
  color: #ffffff;
}

::-moz-selection {
  background: var(--primary);
  color: #ffffff;
}

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

/* Smooth font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Loading state prevention */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Prevent layout shift */
img[src] {
  aspect-ratio: attr(width) / attr(height);
}

/* Hardware acceleration for animations */
.card-item,
.btn,
.carousel-nav,
.scroll-progress-bar {
  transform: translateZ(0);
  will-change: transform;
}

/* RIPPLE EFFECT on buttons */
.btn {
  position: relative;
  overflow: hidden;
}

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

.btn:active::after {
  width: 300px;
  height: 300px;
  transition: 0s;
}

/* Subtle box shadow on scroll for navbar */
.navbar {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
  background: rgba(16, 52, 80, 0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Card micro-interactions */
.card-item {
  transform-origin: center;
}

.card-item:hover {
  filter: brightness(1.02);
}

/* Improved focus states */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Testimonial cards premium feel */
.quote {
  transform-origin: center;
  perspective: 1000px;
}

.quote:hover {
  transform: translateY(-8px) scale(1.02) rotateX(2deg);
}

/* KPI cards breathing animation */
.kpi {
  animation: breathe 4s ease-in-out infinite;
}

.kpi:nth-child(1) { animation-delay: 0s; }
.kpi:nth-child(2) { animation-delay: 0.5s; }
.kpi:nth-child(3) { animation-delay: 1s; }
.kpi:nth-child(4) { animation-delay: 1.5s; }

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .scroll-progress-bar {
    transition: none;
  }
  
  .section-hidden {
    opacity: 1;
    transform: none;
  }
}