/* ═══════════════════════════════════════════
   ANIMATIONS — CSS-only ambient animations
   MoMoney-inspired: Neon glows, bold pulses, energy
   ═══════════════════════════════════════════ */

/* ─── Preloader glow pulse ─── */
@keyframes preloader-glow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(0,117,190,0.4)) drop-shadow(0 0 50px rgba(0,91,151,0.2));
  }
  50% {
    filter: drop-shadow(0 0 35px rgba(0,117,190,0.6)) drop-shadow(0 0 70px rgba(0,91,151,0.4));
  }
}

.preloader__fav {
  animation: preloader-glow 1.8s ease-in-out infinite;
}

/* ─── Marquee icon animations ─── */

/* CODE: brackets open/close + blinking cursor */
@keyframes mq-bracket-open {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}
@keyframes mq-bracket-close {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}
@keyframes mq-cursor-blink {
  0%, 48% { opacity: 0.9; }
  50%, 98% { opacity: 0; }
  100%    { opacity: 0.9; }
}
.marquee-icon--code .mq-bracket-l {
  animation: mq-bracket-open 1.4s ease-in-out infinite;
  transform-origin: center;
}
.marquee-icon--code .mq-bracket-r {
  animation: mq-bracket-close 1.4s ease-in-out infinite;
  transform-origin: center;
}
.marquee-icon--code .mq-cursor {
  animation: mq-cursor-blink 0.9s step-end infinite;
}

/* DESIGN: pen draws a line + dot pulses */
@keyframes mq-pen-draw {
  0%   { stroke-dashoffset: 45; }
  50%  { stroke-dashoffset: 0; }
  50.1% { stroke-dashoffset: 45; }
  100% { stroke-dashoffset: 45; }
}
@keyframes mq-design-dot {
  0%, 45% { r: 2; opacity: 0.6; }
  55%     { r: 3.5; opacity: 1; }
  100%    { r: 2; opacity: 0.6; }
}
.marquee-icon--design .mq-pen-stroke {
  stroke-dasharray: 45;
  animation: mq-pen-draw 2.5s ease-in-out infinite;
}
.marquee-icon--design .mq-pen-curve {
  stroke-dasharray: 60;
  animation: mq-pen-draw 3s ease-in-out infinite 0.3s;
}

/* ANIMATE: ball bounces with ghost trail */
@keyframes mq-ball-drop {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  35%      { transform: translateY(14px) scaleY(1) scaleX(1); }
  42%      { transform: translateY(16px) scaleY(0.65) scaleX(1.25); }
  55%      { transform: translateY(6px) scaleY(1.2) scaleX(0.85); }
  75%      { transform: translateY(0) scaleY(1) scaleX(1); }
}
@keyframes mq-ghost1 {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  35%      { transform: translateY(14px); opacity: 0.08; }
  55%      { transform: translateY(6px); opacity: 0.15; }
  75%      { transform: translateY(0); opacity: 0.25; }
}
@keyframes mq-ghost2 {
  0%, 100% { transform: translateY(0); opacity: 0.12; }
  35%      { transform: translateY(12px); opacity: 0.04; }
  55%      { transform: translateY(4px); opacity: 0.08; }
  75%      { transform: translateY(0); opacity: 0.12; }
}
.marquee-icon--animate .mq-ball {
  animation: mq-ball-drop 1.3s cubic-bezier(0.36, 0, 0.66, 1) infinite;
  transform-origin: center bottom;
}
.marquee-icon--animate .mq-ball-ghost1 {
  animation: mq-ghost1 1.3s cubic-bezier(0.36, 0, 0.66, 1) infinite 0.06s;
}
.marquee-icon--animate .mq-ball-ghost2 {
  animation: mq-ghost2 1.3s cubic-bezier(0.36, 0, 0.66, 1) infinite 0.12s;
}

/* AUTOMATE: meshed gears spin opposite directions */
@keyframes mq-gear-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes mq-gear-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.marquee-icon--automate .mq-gear1 {
  animation: mq-gear-cw 4s linear infinite;
  transform-origin: 11px 11px;
}
.marquee-icon--automate .mq-gear2 {
  animation: mq-gear-ccw 3s linear infinite;
  transform-origin: 23px 23px;
}

/* VISUALIZE: smooth eye blink + pupil drift */
@keyframes mq-eye-blink {
  0%, 88%, 100% { transform: scaleY(1); }
  93%           { transform: scaleY(0.08); }
}
@keyframes mq-pupil-drift {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(2px); }
  50%      { transform: translateX(-1.5px); }
  75%      { transform: translateX(1px); }
}
.marquee-icon--visualize svg {
  animation: mq-eye-blink 4s ease-in-out infinite;
  transform-origin: center;
}
.marquee-icon--visualize .mq-eye-pupil,
.marquee-icon--visualize .mq-eye-iris {
  animation: mq-pupil-drift 5s ease-in-out infinite;
}

/* BUILD: blocks stack up sequentially */
@keyframes mq-block-up1 {
  0%, 15%  { transform: translateY(24px); opacity: 0; }
  30%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes mq-block-up2 {
  0%, 30%  { transform: translateY(24px); opacity: 0; }
  50%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes mq-block-up3 {
  0%, 50%  { transform: translateY(24px); opacity: 0; }
  70%, 100% { transform: translateY(0); opacity: 1; }
}
.marquee-icon--build .mq-block1 { animation: mq-block-up1 3s ease-out infinite; }
.marquee-icon--build .mq-block2 { animation: mq-block-up2 3s ease-out infinite; }
.marquee-icon--build .mq-block3 { animation: mq-block-up3 3s ease-out infinite; }

/* ADAPT: waves morph + flow horizontally */
@keyframes mq-wave-flow {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-12px); }
}
@keyframes mq-wave-morph {
  0%, 100% { d: path('M0 16 C4 10, 8 22, 12 16 C16 10, 20 22, 24 16 C28 10, 32 22, 36 16'); }
  50%      { d: path('M0 16 C4 22, 8 10, 12 16 C16 22, 20 10, 24 16 C28 22, 32 10, 36 16'); }
}
.marquee-icon--adapt .mq-wave {
  animation: mq-wave-flow 1.8s linear infinite, mq-wave-morph 2.4s ease-in-out infinite;
}
.marquee-icon--adapt .mq-wave2 {
  animation: mq-wave-flow 2.2s linear infinite reverse, mq-wave-morph 3s ease-in-out infinite reverse;
}

/* ─── Cursor pulse (neon) ─── */
@keyframes cursor-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,255,0.3); }
  50%      { box-shadow: 0 0 0 10px rgba(0,229,255,0); }
}

/* ─── Button shimmer (stronger) ─── */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.2) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
}

.btn--primary:hover::before {
  animation: shimmer 0.8s ease forwards;
}

/* ─── Ambient float (for decorative elements) ─── */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%      { transform: translateY(-10px) translateX(6px); }
  66%      { transform: translateY(5px) translateX(-4px); }
}

/* ─── Wave undulation (for service icons) ─── */
@keyframes wave-undulate {
  0%, 100% { d: path("M10,40 Q25,30 40,40 Q55,50 70,40"); }
  50%      { d: path("M10,40 Q25,50 40,40 Q55,30 70,40"); }
}

/* ─── Steam rise (for bites card) ─── */
@keyframes steam-rise {
  0%   { transform: translateY(0); opacity: 0.5; }
  50%  { transform: translateY(-10px); opacity: 0.25; }
  100% { transform: translateY(-20px); opacity: 0; }
}

.card-service__steam {
  animation: steam-rise 2s ease-in-out infinite;
}

.card-service__steam:nth-child(2) { animation-delay: 0.5s; }
.card-service__steam:nth-child(3) { animation-delay: 1s; }

/* ─── Droplet drift ─── */
@keyframes droplet-drift-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-25px) rotate(6deg); }
}

@keyframes droplet-drift-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(-4deg); }
}

@keyframes droplet-drift-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(5deg); }
}

.section-hero__droplet--1 { animation: droplet-drift-1 5s ease-in-out infinite; }
.section-hero__droplet--2 { animation: droplet-drift-2 7s ease-in-out infinite; }
.section-hero__droplet--3 { animation: droplet-drift-3 6s ease-in-out infinite; }

/* ─── Footer wave ─── */
@keyframes footer-wave {
  0%, 100% { d: path("M0,30 Q180,10 360,30 Q540,50 720,30 Q900,10 1080,30 Q1260,50 1440,30 L1440,60 L0,60 Z"); }
  50%      { d: path("M0,30 Q180,50 360,30 Q540,10 720,30 Q900,50 1080,30 Q1260,10 1440,30 L1440,60 L0,60 Z"); }
}

/* ─── Glow pulse (neon intensity) ─── */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

.section-numbers__glow {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ─── Tech pearl rotate ─── */
@keyframes pearl-rotate {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.section-tech__pearl svg {
  animation: pearl-rotate 16s linear infinite;
}

/* ─── Scroll indicator bounce (bouncier) ─── */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}

.section-hero__scroll-arrow {
  animation: scroll-bounce 1.5s ease-in-out infinite;
}

/* ─── Neon text glow animation ─── */
@keyframes neon-flicker {
  0%, 100% { text-shadow: 0 0 20px rgba(0,229,255,0.3), 0 0 40px rgba(0,229,255,0.15); }
  50%      { text-shadow: 0 0 30px rgba(0,229,255,0.5), 0 0 60px rgba(0,229,255,0.25); }
}

/* ─── Card hover glow ─── */
@keyframes card-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,229,255,0.05); }
  50%      { box-shadow: 0 0 40px rgba(0,229,255,0.12); }
}

/* ─── Reduced motion: disable all ─── */
@media (prefers-reduced-motion: reduce) {
  .preloader__fav,
  .section-hero__droplet,
  .section-hero__scroll-arrow,
  .card-service__steam,
  .section-numbers__glow,
  .section-tech__pearl svg {
    animation: none !important;
  }
}