/* 
  Uni-Challenge Consultants - Premium Advanced Animation & Visual FX Stylesheet
  Keyframes, Inertia Scroll Observers, Floating Badges, Glow Effects & Micro-Interactions
*/

/* -------------------------------------------------------------
   1. GLOBAL SMOOTH SCROLL & PERFORMANCE OPTIMIZATIONS
------------------------------------------------------------- */
html {
  scroll-behavior: smooth !important;
}

.sq-scroll-reveal, 
.sq-pastel-card-item, 
.sq-why-circle-card, 
.sq-horizontal-card, 
.sq-timeline-node-item,
.sq-polaroid-box {
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* -------------------------------------------------------------
   2. ADVANCED KEYFRAME ANIMATIONS
------------------------------------------------------------- */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(35px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes floatSubtleRotate {
  0%, 100% {
    transform: translateY(0) rotate(4deg);
  }
  50% {
    transform: translateY(-6px) rotate(6deg);
  }
}

@keyframes pulseGoldGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 184, 46, 0.4);
  }
  50% {
    box-shadow: 0 0 22px 8px rgba(245, 184, 46, 0.65);
  }
}

@keyframes gradientShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.4);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 10px 4px rgba(225, 29, 72, 0.5);
  }
}

/* -------------------------------------------------------------
   3. ADVANCED SCROLL REVEAL (SILKY STAGGERED ENTRANCES)
------------------------------------------------------------- */
.sq-scroll-reveal,
.fade-up,
.scroll-reveal,
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  filter: blur(2px);
  transition: opacity 0.70s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.70s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.70s ease;
  will-change: opacity, transform, filter;
}

.sq-scroll-reveal.sq-visible,
.sq-scroll-reveal.visible,
.fade-up.sq-visible,
.fade-up.visible,
.scroll-reveal.sq-visible,
.scroll-reveal.visible,
.reveal-on-scroll.sq-visible,
.reveal-on-scroll.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
}

/* Stagger Delays for Cards & Grids */
.sq-scroll-reveal:nth-child(1) { transition-delay: 0.05s; }
.sq-scroll-reveal:nth-child(2) { transition-delay: 0.12s; }
.sq-scroll-reveal:nth-child(3) { transition-delay: 0.19s; }
.sq-scroll-reveal:nth-child(4) { transition-delay: 0.26s; }
.sq-scroll-reveal:nth-child(5) { transition-delay: 0.33s; }
.sq-scroll-reveal:nth-child(6) { transition-delay: 0.40s; }
.sq-scroll-reveal:nth-child(7) { transition-delay: 0.47s; }
.sq-scroll-reveal:nth-child(8) { transition-delay: 0.54s; }

.delay-100 { transition-delay: 0.10s !important; }
.delay-150 { transition-delay: 0.15s !important; }
.delay-200 { transition-delay: 0.20s !important; }
.delay-250 { transition-delay: 0.25s !important; }
.delay-300 { transition-delay: 0.30s !important; }
.delay-400 { transition-delay: 0.40s !important; }
.delay-500 { transition-delay: 0.50s !important; }

/* -------------------------------------------------------------
   4. CONTINUOUS MICRO-ANIMATIONS & HOVER EFFECTS
------------------------------------------------------------- */
.sinquest-hero-polaroid-badge {
  animation: floatSubtleRotate 5s ease-in-out infinite;
}

.sq-taped-note-card {
  animation: floatSoft 6s ease-in-out infinite;
}

.sq-speech-quote-badge {
  animation: floatSoft 5.5s ease-in-out infinite;
}

/* Yellow Button Gloss Sweep Effect */
.btn-sinquest-yellow {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-sinquest-yellow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transition: all 0.6s ease;
  z-index: -1;
}

.btn-sinquest-yellow:hover::before {
  left: 100%;
}

/* Card Hover Micro-Elevations */
.sq-pastel-card-item {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sq-pastel-card-item:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0, 18, 46, 0.12) !important;
}

.sq-pastel-card-item:hover .sq-pastel-icon-circle {
  transform: scale(1.12) rotate(6deg);
  transition: transform 0.3s ease;
}

.sq-why-circle-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sq-why-circle-card:hover {
  transform: translateY(-6px);
}

.sq-why-circle-card:hover .sq-why-circle-icon {
  transform: scale(1.12) rotate(8deg);
  box-shadow: 0 10px 25px rgba(0, 18, 46, 0.15);
}

.sq-horizontal-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sq-horizontal-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 22px 45px rgba(0, 18, 46, 0.12) !important;
}

.sq-horizontal-card:hover .sq-horizontal-card-img {
  transform: scale(1.04);
  transition: transform 0.6s ease;
}

.sq-horizontal-card-img {
  transition: transform 0.6s ease;
}