/* ==========================================================================
   IDM MOTION GRAPHICS LAYER
   GPU-friendly (transform + opacity only). All animations CSS-driven;
   JS only adds/removes classes + IntersectionObserver callbacks.
   Respects prefers-reduced-motion: reduce.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL REVEAL BASE STATES
   Elements start invisible; JS adds .is-visible to trigger entrance.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* Stagger delay helpers */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }
.reveal-d6 { transition-delay: 0.48s; }
.reveal-d7 { transition-delay: 0.56s; }

/* --------------------------------------------------------------------------
   1. PAGE-LOAD ENTRANCE SEQUENCE
   Banner (0s) → Navbar (0.1s) → Hero badge → Words → Subtitle → CTAs → Visual
   -------------------------------------------------------------------------- */
.top-banner {
  opacity: 0;
  animation: fadeSlideDown 0.5s ease 0s forwards;
}

.navbar {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeSlideDown 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero badge */
.hero-content .badge {
  opacity: 0;
  transform: translateY(16px);
  animation: slideUpFade 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards;
}

/* Hero headline word-by-word reveal — each word wrapped in .hero-word by JS */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: slideUpFade 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Ensure .text-gradient always preserves its cyan-blue gradient fill */
.text-gradient.hero-word,
.hero-title .text-gradient {
  display: inline-block !important;
  background: var(--grad-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.text-gradient .hero-word {
  display: inline !important;
  background: var(--grad-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  opacity: 1 !important;
  transform: none !important;
}


.hero-subtitle {
  opacity: 0;
  transform: translateY(18px);
  animation: slideUpFade 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s forwards;
}

.hero-ctas {
  opacity: 0;
  transform: translateY(16px);
  animation: slideUpFade 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.45s forwards;
}

.hero-social-proof {
  opacity: 0;
  transform: translateY(14px);
  animation: slideUpFade 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.65s forwards;
}

.hero-visual {
  opacity: 0;
  transform: translateX(30px) scale(0.96);
  animation: heroVisualIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards;
}

.hero-stats-strip {
  opacity: 0;
  transform: translateY(24px);
  animation: slideUpFade 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 1.85s forwards;
}

@keyframes slideUpFade {
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes heroVisualIn {
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* --------------------------------------------------------------------------
   2. HERO BACKGROUND BLOBS — slow CSS-only drift
   -------------------------------------------------------------------------- */
.blob-1 {
  animation: blobDrift1 18s ease-in-out infinite alternate;
}
.blob-2 {
  animation: blobDrift2 22s ease-in-out infinite alternate;
}

@keyframes blobDrift1 {
  0%   { transform: translate(0,   0px) scale(1); }
  50%  { transform: translate(60px, 40px) scale(1.15); }
  100% { transform: translate(-30px, 80px) scale(0.9); }
}
@keyframes blobDrift2 {
  0%   { transform: translate(0,   0px)  scale(1); }
  50%  { transform: translate(-50px,-30px) scale(1.1); }
  100% { transform: translate(40px,  60px) scale(0.95); }
}

/* --------------------------------------------------------------------------
   3. HERO PRIMARY CTA — pulse/glow loop + hover snap
   -------------------------------------------------------------------------- */
#heroCtaPrimary {
  animation: ctaGlowPulse 2.8s ease-in-out infinite;
}
@keyframes ctaGlowPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,242,254,0.30); }
  50%       { box-shadow: 0 4px 42px rgba(0,242,254,0.68), 0 0 60px rgba(0,242,254,0.20); }
}
#heroCtaPrimary:hover {
  animation: none;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 45px rgba(0,242,254,0.72);
}

/* --------------------------------------------------------------------------
   4. WHATSAPP FAB — bounce attention loop every 5s
   -------------------------------------------------------------------------- */
.float-whatsapp {
  animation: waBounce 5s cubic-bezier(0.36,0.07,0.19,0.97) 3s infinite;
}
@keyframes waBounce {
  0%,100% { transform: translateY(0)   scale(1); }
  8%       { transform: translateY(-12px) scale(1.06); }
  16%      { transform: translateY(0)   scale(1); }
  24%      { transform: translateY(-7px)  scale(1.03); }
  32%      { transform: translateY(0)   scale(1); }
}
.float-whatsapp:hover {
  animation: none;
  transform: scale(1.14);
  box-shadow: 0 0 30px rgba(37,211,102,0.72);
}

/* --------------------------------------------------------------------------
   5. HERO DASHBOARD — glass card entrance + chart bars grow
   -------------------------------------------------------------------------- */
.glass-dashboard {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.7s ease 1.1s, transform 0.7s ease 1.1s;
}
/* Triggered when hero-visual animation completes (via JS adding .loaded) */
.glass-dashboard.loaded {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.chart-bar {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: none;
  animation: barGrow 1.2s cubic-bezier(0.22,0.61,0.36,1) forwards;
}
.chart-bar-col:nth-child(1) .chart-bar { animation-delay: 1.5s; }
.chart-bar-col:nth-child(2) .chart-bar { animation-delay: 1.65s; }
.chart-bar-col:nth-child(3) .chart-bar { animation-delay: 1.80s; }
.chart-bar-col:nth-child(4) .chart-bar { animation-delay: 1.95s; }
.chart-bar-col:nth-child(5) .chart-bar { animation-delay: 2.10s; }
.chart-bar-col:nth-child(6) .chart-bar { animation-delay: 2.25s; }

@keyframes barGrow {
  to { transform: scaleY(1); }
}

/* Status dot pulse — enhanced */
.status-dot {
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 0 rgba(0,245,160,0.5); }
  50%      { transform: scale(1.3);  opacity: 1;    box-shadow: 0 0 0 6px rgba(0,245,160,0); }
}

/* Floating pills */
.pill-1 { animation: floatPill 5s ease-in-out infinite; }
.pill-2 { animation: floatPill 6.5s ease-in-out 1.5s infinite; }
@keyframes floatPill {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* --------------------------------------------------------------------------
   6. SERVICES CARDS — stagger fade-up + icon hover
   -------------------------------------------------------------------------- */
.service-card {
  /* transition override to keep reveal + hover both working */
  transition: opacity 0.65s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.35s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease,
              background 0.35s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0,242,254,0.18);
}
.service-icon-box svg {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.service-card:hover .service-icon-box svg {
  transform: rotate(12deg) scale(1.18);
}

/* --------------------------------------------------------------------------
   7. ROI CALCULATOR — slider glow, result highlight pulse, number flip
   -------------------------------------------------------------------------- */
.calc-slider:active::-webkit-slider-thumb,
.calc-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(0,242,254,0.22), 0 0 20px rgba(0,242,254,0.6);
  transform: scale(1.28);
}

.calc-highlight-box.calc-updated {
  animation: calcPulse 0.65s ease forwards;
}
@keyframes calcPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,245,160,0); }
  40%  { box-shadow: 0 0 0 14px rgba(0,245,160,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(0,245,160,0); }
}

/* Number flip on update */
.calc-res-val, .highlight-number {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.calc-res-val.num-updating, .highlight-number.num-updating {
  opacity: 0;
  transform: translateY(-8px);
}

/* --------------------------------------------------------------------------
   8. CASE STUDY CARDS
   -------------------------------------------------------------------------- */
.case-card {
  transition: opacity 0.65s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.35s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.case-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg), 0 0 25px rgba(127,0,255,0.22);
  border-color: rgba(127,0,255,0.4);
}

/* --------------------------------------------------------------------------
   9. TESTIMONIALS — card hover + avatar pop-in
   -------------------------------------------------------------------------- */
.testimonial-card {
  transition: opacity 0.65s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.35s ease, box-shadow 0.35s ease;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(0,242,254,0.12);
}
.client-avatar {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
}
.testimonial-card:hover .client-avatar {
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(0,242,254,0.45);
}
/* Avatar pop when card enters viewport */
.testimonial-card.is-visible .client-avatar {
  animation: avatarPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.25s both;
}
@keyframes avatarPop {
  from { transform: scale(0.65); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   10. PRICING CARDS — stagger, badge pulse, hover accent
   -------------------------------------------------------------------------- */
.pricing-card {
  transition: opacity 0.65s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.35s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0,242,254,0.2);
  border-color: rgba(0,242,254,0.55);
}
.pricing-card.featured:hover {
  transform: scale(1.04) translateY(-8px);
}

.popular-tag {
  animation: badgePulse 3.2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 8px rgba(0,242,254,0.2); }
  50%      { box-shadow: 0 0 24px rgba(0,242,254,0.6); }
}

/* --------------------------------------------------------------------------
   11. FAQ ACCORDION — 250ms smooth height + icon rotation
   -------------------------------------------------------------------------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1),
              padding-bottom 0.28s ease;
}

.faq-icon {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
              color 0.25s ease;
  color: var(--text-muted);
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: var(--accent-cyan);
}

/* --------------------------------------------------------------------------
   12. CONTACT FORM — focus glow, shake error, loading spinner, success
   -------------------------------------------------------------------------- */
.form-input, .form-textarea {
  transition: border-color 0.22s ease,
              box-shadow 0.22s ease,
              background 0.22s ease;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0,242,254,0.15), 0 0 18px rgba(0,242,254,0.12);
}

/* Validation error shake */
.form-input.field-error,
.form-textarea.field-error {
  border-color: #ff4d6d;
  animation: shakeError 0.45s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes shakeError {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-7px); }
  30%      { transform: translateX(7px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(4px); }
  75%      { transform: translateX(-2px); }
}

/* Loading spinner on submit button */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.82;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  animation: spinLoader 0.65s linear infinite;
}
@keyframes spinLoader {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Success checkmark state */
.btn-success {
  background: linear-gradient(135deg,#00f5a0 0%,#00d9f5 100%) !important;
  color: #070913 !important;
  animation: successPop 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes successPop {
  from { transform: scale(0.92); }
  to   { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   13. WHY-US CARDS
   -------------------------------------------------------------------------- */
.why-card {
  transition: opacity 0.65s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.35s cubic-bezier(0.22,0.61,0.36,1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.why-card:hover {
  transform: translateY(-7px);
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-lg), 0 0 22px rgba(0,242,254,0.15);
}
.why-icon {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.why-card:hover .why-icon {
  transform: scale(1.14) rotate(-6deg);
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer-link {
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-link:hover {
  color: var(--accent-cyan);
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   15. MARQUEE — pause on hover
   -------------------------------------------------------------------------- */
.marquee-wrapper:hover .marquee-content {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   16. THEME TOGGLE SPIN
   -------------------------------------------------------------------------- */
.theme-toggle-btn.spinning {
  animation: spinOnce 0.38s ease;
}
@keyframes spinOnce {
  from { transform: rotate(0deg)   scale(0.82); }
  to   { transform: rotate(360deg) scale(1); }
}

/* --------------------------------------------------------------------------
   17. BACK TO TOP
   -------------------------------------------------------------------------- */
.float-backtotop {
  transition: opacity 0.3s ease, visibility 0.3s ease,
              transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}

/* --------------------------------------------------------------------------
   PREFERS-REDUCED-MOTION — Disable ALL animations and make visible instantly
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,.reveal-left,.reveal-right,.reveal-scale,
  .navbar,.top-banner,
  .hero-content .badge,.hero-word,.hero-subtitle,
  .hero-ctas,.hero-social-proof,.hero-visual,.hero-stats-strip,
  .glass-dashboard {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .chart-bar { transform: scaleY(1) !important; animation: none !important; }
  #heroCtaPrimary,.float-whatsapp,.popular-tag,
  .status-dot,.blob-1,.blob-2,.pill-1,.pill-2 {
    animation: none !important;
  }
}

/* ==========================================================================
   LIGHT MODE ANIMATION ADJUSTMENTS
   Softer glows that work on bright backgrounds
   ========================================================================== */
[data-theme="light"] #heroCtaPrimary {
  animation: ctaGlowPulseLight 2.8s ease-in-out infinite;
}
@keyframes ctaGlowPulseLight {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,114,255,0.28); }
  50%       { box-shadow: 0 4px 40px rgba(0,114,255,0.55), 0 0 50px rgba(0,242,254,0.18); }
}
[data-theme="light"] #heroCtaPrimary:hover {
  animation: none;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 40px rgba(0,114,255,0.6);
}

[data-theme="light"] .popular-tag {
  animation: badgePulseLight 3.2s ease-in-out infinite;
}
@keyframes badgePulseLight {
  0%,100% { box-shadow: 0 0 8px rgba(0,114,255,0.2); }
  50%      { box-shadow: 0 0 22px rgba(0,114,255,0.5); }
}

[data-theme="light"] .calc-highlight-box.calc-updated {
  animation: calcPulseLight 0.65s ease forwards;
}
@keyframes calcPulseLight {
  0%   { box-shadow: 0 0 0 0 rgba(0,114,255,0); }
  40%  { box-shadow: 0 0 0 14px rgba(0,114,255,0.2); }
  100% { box-shadow: 0 0 0 0 rgba(0,114,255,0); }
}

[data-theme="light"] .pricing-card:hover {
  box-shadow: 0 20px 44px rgba(11,20,60,0.14), 0 0 28px rgba(0,114,255,0.18);
  border-color: rgba(0,114,255,0.4);
}
[data-theme="light"] .service-card:hover {
  box-shadow: 0 20px 44px rgba(11,20,60,0.12), 0 0 24px rgba(0,114,255,0.12);
}