/* ESK Outcome Stats — keyframes + desktop/mobile layout switch. Markup is
   inline-styled (see esk-outcomes.php); this file carries only what inline
   styles cannot: keyframes, the 660px layout toggle, and motion prefs. */

.esko, .esko * { box-sizing: border-box; }
.esko a { color: inherit; text-decoration: none; }

@keyframes eskPulse   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.45); } }
@keyframes eskFloat   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes eskDrift   { 0%,100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
@keyframes eskArrow   { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes eskArrowY  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes eskTwinkle { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1deg); } }
@keyframes eskStreak  { 0%,100% { transform: scaleX(0.5); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes eskStamp   { 0% { transform: scale(2.2); opacity: 0; } 40% { opacity: 1; } 60% { transform: scale(0.88); opacity: 1; } 78% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes eskWave    { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }

/* Layout switch: desktop is default; mobile shown under 660px. */
.esko__desktop { display: block; }
.esko__mobile  { display: none; }

@media (max-width: 659px) {
  .esko__desktop { display: none; }
  .esko__mobile  { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .esko [data-loop] { animation: none !important; }
}

/* Full-bleed inside WPBakery columns: drop the builder's default
   15px column padding when this element is the column content. */
.vc_column_container > .vc_column-inner:has(.esko) { padding-left: 0; padding-right: 0; }

/* Kill the theme's mobile .vc_row{padding:0 12px} (320-768 media rule)
   for rows that contain this element — full-bleed on mobile too. */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .vc_row:has(.esko) { padding-left: 0 !important; padding-right: 0 !important; }
}


/* Support-line shimmer — same sweep as Why Choose (.eskw__t2). Longhands so
   background-position stays animatable (a !important shorthand would freeze it). */
.esko__support {
  background-image: linear-gradient(100deg, #022450 0%, #022450 42%, #e36745 50%, #022450 58%, #022450 100%) !important;
  background-size: 300% auto !important;
  background-position: 0% 50%;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: eskoGrad 6s ease-in-out infinite !important;
}
@keyframes eskoGrad { 0% { background-position: 0% 50%; } 75%, 100% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .esko__support { animation: none !important; } }