/*
 * ============================================================
 *  NEXTO AGENCY — Animations
 *  All @keyframes extracted from the 7 service pages
 *  Each animation marks its source file(s)
 *
 *  HOW TO USE IN WP MIGRATION:
 *  1. Move this file to /assets/css/animations.css
 *  2. @import in main stylesheet or enqueue in functions.php
 *  3. Keep animation names unchanged — referenced by JS & inline styles
 * ============================================================
 */


/* ── GENTLE FLOATS ── */

@keyframes float-subtle {
  /* Source: diseno-web */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes float-gentle {
  /* Source: diseno-web — used on .floating-note */
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.3deg);
  }
}

@keyframes float {
  /* Source: servicio — larger amplitude float */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}


/* ── PULSE / GLOW ── */

@keyframes pulse-glow {
  /* Source: diseno-web — for .floating-note strong::before indicator dot */
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(78, 71, 255, 0.12), 0 0 16px rgba(78, 71, 255, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(78, 71, 255, 0.08), 0 0 24px rgba(78, 71, 255, 0.55);
    transform: scale(1.1);
  }
}

@keyframes pulse {
  /* Source: servicio — expanding ring pulse */
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; border-width: 1px; }
}


/* ── ROTATING BORDER ── */

@keyframes btn-rotate-border {
  /* Source: diseno-web — hero CTA conic-gradient border rotation */
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ── MARQUEE / SCROLL ── */

@keyframes scroll {
  /* Source: servicio — horizontal marquee scroll */
  to { transform: translateX(-50%); }
}

@keyframes dv6scroll {
  /* Source: servicio — secondary marquee variant */
  to { transform: translateX(-50%); }
}


/* ── HERO ANIMATIONS (servicio) ── */

@keyframes heroLineFlow {
  /* Source: servicio — animated accent line in hero */
  to { transform: translateX(260%); }
}

@keyframes heroNoteFloat {
  /* Source: servicio — floating hero note cards */
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

@keyframes orbFloat1 {
  /* Source: servicio — decorative orb position 1 */
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, -30px); }
}

@keyframes orbFloat2 {
  /* Source: servicio — decorative orb position 2 */
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-30px, 20px); }
}

@keyframes orbFloat3 {
  /* Source: servicio — decorative orb position 3 */
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(20px, -40px); }
}

@keyframes mapRotate {
  /* Source: servicio — rotating SVG map decoration */
  to { transform: rotate(360deg); }
}


/* ── BLINK ── */

@keyframes blink {
  /* Source: servicio — blinking indicator */
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}


/* ── PROCESS SECTION ANIMATIONS (diseno-web · rediseno-web) ── */

@keyframes processDotPulse {
  /* Source: diseno-web, rediseno-web — step indicator dot */
  0%   { opacity: 0.88; transform: scale(0.82); }
  50%  { opacity: 0.34; transform: scale(1.12); }
  100% { opacity: 0.88; transform: scale(0.82); }
}

@keyframes processActiveDotBreath {
  /* Source: diseno-web — active step dot breathing */
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.34);
    box-shadow: 0 0 0 8px rgba(78,71,255,0.1), 0 18px 38px rgba(78,71,255,0.2);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.44);
    box-shadow: 0 0 0 11px rgba(78,71,255,0.14), 0 24px 52px rgba(78,71,255,0.28);
  }
}

@keyframes processHaloBreath {
  /* Source: diseno-web — halo glow behind active step */
  0%, 100% { opacity: 0.74; transform: translateX(-50%) scale(1.02); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.18); }
}

@keyframes processLabelFloat {
  /* Source: diseno-web — step label gentle rise */
  0%, 100% { transform: translateX(-50%) translateY(-4px); }
  50%      { transform: translateX(-50%) translateY(-8px); }
}

@keyframes processCardHoverFloat {
  /* Source: diseno-web — card float on step active */
  0%, 100% { transform: translateY(-10px) scale(1.012); }
  50%      { transform: translateY(-14px) scale(1.016); }
}

@keyframes processTrackAmbient {
  /* Source: diseno-web — ambient glow sliding along track */
  0%   { transform: translateX(-45%); opacity: 0; }
  10%  { opacity: 0.34; }
  50%  { opacity: 0.42; }
  100% { transform: translateX(145%); opacity: 0; }
}

@keyframes processProgressFlow {
  /* Source: diseno-web — gradient shimmer on progress bar */
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes processProgressSheen {
  /* Source: diseno-web, rediseno-web — light sweep across progress bar */
  0%   { left: -42%; opacity: 0; }
  14%  { opacity: 0.86; }
  100% { left: 118%; opacity: 0; }
}

@keyframes processRunnerTrail {
  /* Source: diseno-web — runner light trail */
  0%   { width: 10px; opacity: 0; transform: translateY(-50%) scaleX(0.2); }
  25%  { opacity: 1; }
  100% { width: 160px; opacity: 0; transform: translateY(-50%) scaleX(1); }
}

@keyframes processImpactRing {
  /* Source: diseno-web — expanding ring on step activation */
  0%   { opacity: 0.78; transform: translate(-50%, -50%) scale(0.42); }
  55%  { opacity: 0.48; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}

@keyframes processImpactCore {
  /* Source: diseno-web — core flash on step activation */
  0%   { opacity: 1; transform: scale(0.68); }
  38%  { opacity: 0.92; transform: scale(1.24); }
  100% { opacity: 0.12; transform: scale(1.74); }
}

@keyframes processCardImpact {
  /* Source: diseno-web — card impact bounce on step activation */
  0%   { transform: translateY(-10px) scale(0.985); }
  46%  { transform: translateY(-16px) scale(1.02); }
  100% { transform: translateY(-10px) scale(1.012); }
}