/* ═══════════════════════════════════════════
   SYLQ OPTIMIZED ANIMATIONS
   GPU accelerated, throttled, and reduced motion compliant
   ═══════════════════════════════════════════ */

@keyframes loaderPulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes spinOnce { from { transform: rotate(0) translateZ(0) } to { transform: rotate(360deg) translateZ(0) } }
@keyframes tagLine { from { transform: scaleX(0.6) translateZ(0) } to { transform: scaleX(1) translateZ(0) } }
@keyframes emUnderline { 0%, 100% { transform: scaleX(.3) translateZ(0); opacity: .2 } 50% { transform: scaleX(1) translateZ(0); opacity: .4 } }
@keyframes marquee { from { transform: translateX(0) translateZ(0) } to { transform: translateX(-50%) translateZ(0) } }
@keyframes dotPulse { 0%, 100% { opacity: .4 } 50% { opacity: 1 } }
@keyframes shake { 0%, 100% { transform: translateX(0) translateZ(0) } 25% { transform: translateX(-6px) translateZ(0) } 75% { transform: translateX(6px) translateZ(0) } }
@keyframes drawCheck { to { stroke-dashoffset: 0 } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg) translateZ(0) } 50% { transform: translateY(-12px) rotate(1deg) translateZ(0) } }
@keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(0deg) translateZ(0) } 50% { transform: translateY(-8px) rotate(-1.5deg) translateZ(0) } }
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes breathe { 0%, 100% { opacity: .04; transform: scale(1) translateZ(0) } 50% { opacity: .08; transform: scale(1.02) translateZ(0) } }
@keyframes lineGrow { from { transform: scaleX(0) translateZ(0) } to { transform: scaleX(1) translateZ(0) } }
@keyframes gradientShift { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
@keyframes subtleRotate { from { transform: rotate(0deg) translateZ(0) } to { transform: rotate(360deg) translateZ(0) } }
@keyframes countUp { from { opacity: 0; transform: translateY(12px) translateZ(0) } to { opacity: 1; transform: translateY(0) translateZ(0) } }
@keyframes glintSlide { 0% { transform: translateX(-100%) skewX(-15deg) translateZ(0) } 100% { transform: translateX(200%) skewX(-15deg) translateZ(0) } }

/* ── Animation defaults: Force GPU rendering and fill-mode ── */
.marquee-track, .hero-orb-1, .hero-orb-2, .hero-mockup, .loader-text, .pulse-dot, .theme-toggle, .pricing::before, .pricing-card.featured, .services::before, .process::after, .cta::before {
  animation-fill-mode: both !important;
  transform: translateZ(0);
  will-change: transform;
}

/* ── Scroll reveal variants ── */
.reveal {
  opacity: 0;
  transform: translateY(28px) translateZ(0);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-28px) translateZ(0);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(28px) translateZ(0);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(.92) translateZ(0);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

/* Stagger Delays */
.delay-1 { transition-delay: .1s }
.delay-2 { transition-delay: .2s }
.delay-3 { transition-delay: .3s }
.delay-4 { transition-delay: .4s }
.delay-5 { transition-delay: .5s }
.delay-6 { transition-delay: .6s }

.section-label.reveal, .section-tag.reveal, .case-study-header.reveal { transition-duration: 1s }
.section-label.reveal h2, .case-study-header.reveal h2 { transition: opacity 1s cubic-bezier(.22,1,.36,1) .1s, transform 1s cubic-bezier(.22,1,.36,1) .1s }

.service-item.reveal { transform: translateY(32px) translateZ(0); transition-duration: .7s }
.service-item.reveal.visible { transform: translateY(0) translateZ(0) }

.pricing-card.reveal { transform: translateY(36px) translateZ(0); transition-duration: .75s }
.pricing-card.reveal.visible { transform: translateY(0) translateZ(0) }

.process-step.reveal-left { transform: translateX(-32px) translateZ(0); transition-duration: .7s }
.process-step.reveal-left.visible { transform: translateX(0) translateZ(0) }

.testimonial-slider.reveal { transform: translateY(20px) translateZ(0); transition-duration: .9s }
.testimonial-slider.reveal.visible { transform: translateY(0) translateZ(0) }

.stagger-children > * {
  opacity: 0;
  transform: translateY(16px) translateZ(0);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.stagger-children.visible > *:nth-child(1) { transition-delay: .05s; opacity: 1; transform: translateY(0) translateZ(0) }
.stagger-children.visible > *:nth-child(2) { transition-delay: .1s; opacity: 1; transform: translateY(0) translateZ(0) }
.stagger-children.visible > *:nth-child(3) { transition-delay: .15s; opacity: 1; transform: translateY(0) translateZ(0) }
.stagger-children.visible > *:nth-child(4) { transition-delay: .2s; opacity: 1; transform: translateY(0) translateZ(0) }
.stagger-children.visible > *:nth-child(5) { transition-delay: .25s; opacity: 1; transform: translateY(0) translateZ(0) }
.stagger-children.visible > *:nth-child(6) { transition-delay: .3s; opacity: 1; transform: translateY(0) translateZ(0) }

/* ── Mobile specific performance enhancements (<768px) ── */
@media (max-width: 768px) {
  /* Disable resource-heavy animated background noise / grain */
  body::before {
    display: none !important;
  }
  
  /* Disable parallax / float animations on mobile to prevent layout lag */
  .hero-orb-1, .hero-orb-2, .hero-mockup, .pricing::before, .process::after, .cta::before {
    animation: none !important;
    transform: none !important;
  }
  
  /* Simplify transitions and reduce reveal offset */
  .reveal {
    transform: translateY(12px) !important;
    transition-duration: 0.4s !important;
  }
  .reveal-left {
    transform: translateX(-12px) !important;
    transition-duration: 0.4s !important;
  }
  .reveal-right {
    transform: translateX(12px) !important;
    transition-duration: 0.4s !important;
  }
  
  /* Stagger children with smaller intervals */
  .delay-1, .delay-2, .delay-3, .delay-4, .delay-5, .delay-6 {
    transition-delay: 0s !important;
  }
}

/* ── Respect User's Reduced Motion Settings ── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .service-item.reveal, .pricing-card.reveal, .process-step.reveal-left, .testimonial-slider.reveal, .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}