/* ============================================================
   Advanced UTM Handler - Visual Effects CSS
   Animation keyframes and effect classes
   ============================================================ */

/* ============================================================
   ATTENTION GLOW EFFECTS
   ============================================================ */

/* Inner Glow Pulse - Pulsing inner glow effect */
@keyframes inner-glow-pulse {
  0% {
    box-shadow: 0 0 5px rgba(var(--glow-primary, 59, 130, 246), 0.3) inset,
      0 0 10px rgba(var(--glow-primary, 59, 130, 246), 0.2) inset;
  }

  50% {
    box-shadow: 0 0 15px rgba(var(--glow-primary, 59, 130, 246), 0.6) inset,
      0 0 20px rgba(var(--glow-primary, 59, 130, 246), 0.4) inset;
  }

  100% {
    box-shadow: 0 0 5px rgba(var(--glow-primary, 59, 130, 246), 0.3) inset,
      0 0 10px rgba(var(--glow-primary, 59, 130, 246), 0.2) inset;
  }
}

/* Inner Glow Breathe - Breathing inner glow effect */
@keyframes inner-glow-breathe {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(var(--glow-primary, 59, 130, 246), 0.4) inset,
      0 0 10px rgba(var(--glow-primary, 59, 130, 246), 0.2) inset;
  }

  50% {
    box-shadow: 0 0 20px rgba(var(--glow-primary, 59, 130, 246), 0.7) inset,
      0 0 25px rgba(var(--glow-primary, 59, 130, 246), 0.5) inset;
  }
}

/* Border Traveling Dot - A dot traveling around the border */
@keyframes border-traveling-dot {
  0% {
    box-shadow: 5px 0 0 0 rgba(var(--glow-primary, 59, 130, 246), 0.8) inset;
  }

  25% {
    box-shadow: 0 5px 0 0 rgba(var(--glow-primary, 59, 130, 246), 0.8) inset;
  }

  50% {
    box-shadow: -5px 0 0 0 rgba(var(--glow-primary, 59, 130, 246), 0.8) inset;
  }

  75% {
    box-shadow: 0 -5px 0 0 rgba(var(--glow-primary, 59, 130, 246), 0.8) inset;
  }

  100% {
    box-shadow: 5px 0 0 0 rgba(var(--glow-primary, 59, 130, 246), 0.8) inset;
  }
}

/* Border Traveling Glow - Glowing section moving around the border */
@keyframes border-traveling-glow {
  0% {
    box-shadow: 3px 0 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.8) inset,
      -3px 0 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.3) inset;
  }

  25% {
    box-shadow: 0 3px 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.8) inset,
      0 -3px 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.3) inset;
  }

  50% {
    box-shadow: -3px 0 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.8) inset,
      3px 0 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.3) inset;
  }

  75% {
    box-shadow: 0 -3px 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.8) inset,
      0 3px 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.3) inset;
  }

  100% {
    box-shadow: 3px 0 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.8) inset,
      -3px 0 5px -2px rgba(var(--glow-primary, 59, 130, 246), 0.3) inset;
  }
}

/* Glow Travelling Light - Inner light effect that travels across the button */
@keyframes glow-travelling-light {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    transform: translate(150%, 150%) rotate(360deg);
    opacity: 0.3;
  }
}

/* Border Slide - Solid dot tracks along the outer edge */
@keyframes border-slide {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

/* Pulse Ring - Circular ripple effect spreading outwards */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--glow-primary, 59, 130, 246), 0.7);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(var(--glow-primary, 59, 130, 246), 0);
  }
}

/* Shimmer Glow - Diagonal light sweep */
@keyframes shimmer-sweep {
  0% {
    left: -60%;
  }

  30% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

@keyframes wave-motion {

  0%,
  100% {
    transform: scale(1) translate(0, 0);
  }

  20% {
    transform: scale(1.05) translate(2px, -2px);
  }

  40% {
    transform: scale(0.98) translate(-1px, 2px);
  }

  60% {
    transform: scale(1.03) translate(-2px, -1px);
  }

  80% {
    transform: scale(1.01) translate(1px, 1px);
  }
}

/* ============================================================
   HOVER EFFECTS
   ============================================================ */

/* Lift Shadow - Element lifts with shadow effect */
@keyframes lift-shadow {
  0% {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  100% {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  }
}

/* Skew Effect - Slight skew on hover */
@keyframes skew-effect {
  0% {
    transform: skewX(0deg);
  }

  25% {
    transform: skewX(-2deg);
  }

  75% {
    transform: skewX(2deg);
  }

  100% {
    transform: skewX(0deg);
  }
}

/* Bounce Effect - Bouncy animation */
@keyframes bounce-effect {

  0%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(-3px);
  }
}

/* ============================================================
   GLOW EFFECT APPLICATION CLASSES
   ============================================================ */

/* Inner Glow Pulse */
.adv-utm-glow-pulse {
  animation: inner-glow-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --glow-primary: 59, 130, 246;
  /* Default blue */
  overflow: hidden;
}

/* Inner Glow Breathe */
.adv-utm-glow-breathe {
  animation: inner-glow-breathe 2.5s infinite;
  --glow-primary: 59, 130, 246;
  /* Default blue */
  overflow: hidden;
}

/* Border Traveling Dot */
.adv-utm-glow-border-dot {
  animation: border-traveling-dot 3s linear infinite;
  --glow-primary: 59, 130, 246;
  /* Default blue */
  overflow: hidden;
}

/* Border Traveling Glow */
.adv-utm-glow-border-glow {
  animation: border-traveling-glow 4s linear infinite;
  --glow-primary: 59, 130, 246;
  /* Default blue */
  overflow: hidden;
}

/* Travelling Light Glow */
.adv-utm-glow-travelling-light {
  position: relative;
  overflow: hidden;
  --glow-primary: 59, 130, 246;
  /* Default blue */
}

.adv-utm-glow-travelling-light::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.3;
  pointer-events: none;
  animation: glow-travelling-light 3s linear infinite;
  z-index: 1;
  border-radius: inherit;
  filter: blur(8px);
}

/* Pulse Ring Effect */
.adv-utm-glow-pulse-ring {
  position: relative;
  --glow-primary: 59, 130, 246;
  overflow: visible !important;
  animation: pulse-ring 2s cubic-bezier(0.24, 0, 0.38, 1) infinite !important;
}

/* Shimmer Glow Effect */
.adv-utm-glow-shimmer {
  position: relative;
  overflow: hidden !important;
  --glow-primary: 59, 130, 246;
  box-shadow: 0 4px 15px rgba(var(--glow-primary, 59, 130, 246), 0.4) !important;
}

.adv-utm-glow-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(30deg);
  animation: shimmer-sweep 3s infinite;
  pointer-events: none;
  z-index: 1;
}

/* Border Slide Dot - The actual dot that tracks the edge */
.adv-utm-border-slide-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: rgb(var(--glow-primary, 59, 130, 246));
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  border: none;

  /* Center the dot on the path */
  offset-anchor: center;

  animation: border-slide 6s linear infinite;

  box-shadow: 0 0 12px rgba(var(--glow-primary, 59, 130, 246), 0.6);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hide the dot on hover to avoid color mismatch with hover background */
.adv-utm-button-wrapper:hover .adv-utm-border-slide-dot {
  opacity: 0;
  visibility: hidden;
}

/* Base button wrapper for the effect */
.adv-utm-button-wrapper {
  position: relative;
  display: inline-flex;
  padding: 0;
  transition: transform 0.3s ease;
  vertical-align: middle;
}

/* Border Slide - The class added to the button */
.adv-utm-glow-border-slide {
  position: relative;
  z-index: 2;
  transform-origin: center;
}

/* Alternative animation using transforms for better compatibility */
@keyframes border-slide-alternative {
  0% {
    transform: translate(0, -7px);
  }

  25% {
    transform: translate(calc(100% - 7px), -7px);
  }

  50% {
    transform: translate(calc(100% - 7px), calc(100% - 7px));
  }

  75% {
    transform: translate(-7px, calc(100% - 7px));
  }

  100% {
    transform: translate(-7px, -7px);
  }
}

/* ============================================================
   HOVER EFFECT APPLICATION CLASSES
   ============================================================ */

/* Lift Shadow Hover & Active */
.adv-utm-hover-lift:hover,
.adv-utm-hover-lift:active {
  animation: lift-shadow 0.3s ease-out forwards;
}

/* Skew Effect Hover & Active */
.adv-utm-hover-skew:hover,
.adv-utm-hover-skew:active {
  animation: skew-effect 0.4s ease-in-out forwards;
}

/* Bounce Effect Hover & Active */
.adv-utm-hover-bounce:hover,
.adv-utm-hover-bounce:active {
  animation: bounce-effect 0.6s ease-out forwards;
}

/* ============================================================
   IMAGE WIDGET SPECIFIC OVERRIDES
   Ensure hover effects only apply to image links, not the wrapper
   ============================================================ */

/* Prevent hover effects on the Elementor widget wrapper for images */
.elementor-widget-image.adv-utm-hover-lift:hover,
.elementor-widget-image.adv-utm-hover-lift:active,
.elementor-widget-image.adv-utm-hover-skew:hover,
.elementor-widget-image.adv-utm-hover-skew:active,
.elementor-widget-image.adv-utm-hover-bounce:hover,
.elementor-widget-image.adv-utm-hover-bounce:active {
  animation: none !important;
  transform: none !important;
  box-shadow: inherit !important;
}

/* Only allow hover effects on image links */
.adv-utm-image-link.adv-utm-hover-lift:hover,
.adv-utm-image-link.adv-utm-hover-lift:active {
  animation: lift-shadow 0.3s ease-out forwards;
}

.adv-utm-image-link.adv-utm-hover-skew:hover,
.adv-utm-image-link.adv-utm-hover-skew:active {
  animation: skew-effect 0.4s ease-in-out forwards;
}

.adv-utm-image-link.adv-utm-hover-bounce:hover,
.adv-utm-image-link.adv-utm-hover-bounce:active {
  animation: bounce-effect 0.6s ease-out forwards;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

  .adv-utm-glow-pulse,
  .adv-utm-glow-breathe,
  .adv-utm-glow-border-dot,
  .adv-utm-glow-border-glow,
  .adv-utm-glow-travelling-light::before,
  .adv-utm-border-slide-dot {
    animation-iteration-count: 1 !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   COMBINED EFFECT SUPPORT
   Allows simultaneous glow + hover effects
   ============================================================ */

/* Inner Glow Pulse + Lift Hover */
.adv-utm-glow-pulse.adv-utm-hover-lift {
  animation: inner-glow-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.adv-utm-glow-pulse.adv-utm-hover-lift:hover {
  animation: lift-shadow 0.3s ease-out forwards;
}

/* Inner Glow Pulse + Skew Hover */
.adv-utm-glow-pulse.adv-utm-hover-skew {
  animation: inner-glow-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.adv-utm-glow-pulse.adv-utm-hover-skew:hover {
  animation: skew-effect 0.4s ease-in-out forwards;
}

/* Inner Glow Pulse + Bounce Hover */
.adv-utm-glow-pulse.adv-utm-hover-bounce {
  animation: inner-glow-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.adv-utm-glow-pulse.adv-utm-hover-bounce:hover {
  animation: bounce-effect 0.6s ease-out forwards;
}

/* Inner Glow Breathe + Lift Hover */
.adv-utm-glow-breathe.adv-utm-hover-lift {
  animation: inner-glow-breathe 2.5s infinite;
}

.adv-utm-glow-breathe.adv-utm-hover-lift:hover {
  animation: lift-shadow 0.3s ease-out forwards;
}

/* Inner Glow Breathe + Skew Hover */
.adv-utm-glow-breathe.adv-utm-hover-skew {
  animation: inner-glow-breathe 2.5s infinite;
}

.adv-utm-glow-breathe.adv-utm-hover-skew:hover {
  animation: skew-effect 0.4s ease-in-out forwards;
}

/* Inner Glow Breathe + Bounce Hover */
.adv-utm-glow-breathe.adv-utm-hover-bounce {
  animation: inner-glow-breathe 2.5s infinite;
}

.adv-utm-glow-breathe.adv-utm-hover-bounce:hover {
  animation: bounce-effect 0.6s ease-out forwards;
}

/* Border Dot Glow + Lift Hover */
.adv-utm-glow-border-dot.adv-utm-hover-lift {
  animation: border-traveling-dot 3s linear infinite;
}

.adv-utm-glow-border-dot.adv-utm-hover-lift:hover {
  animation: lift-shadow 0.3s ease-out forwards;
}

/* Border Dot Glow + Skew Hover */
.adv-utm-glow-border-dot.adv-utm-hover-skew {
  animation: border-traveling-dot 3s linear infinite;
}

.adv-utm-glow-border-dot.adv-utm-hover-skew:hover {
  animation: skew-effect 0.4s ease-in-out forwards;
}

/* Border Dot Glow + Bounce Hover */
.adv-utm-glow-border-dot.adv-utm-hover-bounce {
  animation: border-traveling-dot 3s linear infinite;
}

.adv-utm-glow-border-dot.adv-utm-hover-bounce:hover {
  animation: bounce-effect 0.6s ease-out forwards;
}

/* Border Glow + Lift Hover */
.adv-utm-glow-border-glow.adv-utm-hover-lift {
  animation: border-traveling-glow 4s linear infinite;
}

.adv-utm-glow-border-glow.adv-utm-hover-lift:hover {
  animation: lift-shadow 0.3s ease-out forwards;
}

/* Border Glow + Skew Hover */
.adv-utm-glow-border-glow.adv-utm-hover-skew {
  animation: border-traveling-glow 4s linear infinite;
}

.adv-utm-glow-border-glow.adv-utm-hover-skew:hover {
  animation: skew-effect 0.4s ease-in-out forwards;
}

/* Border Glow + Bounce Hover */
.adv-utm-glow-border-glow.adv-utm-hover-bounce {
  animation: border-traveling-glow 4s linear infinite;
}

.adv-utm-glow-border-glow.adv-utm-hover-bounce:hover {
  animation: bounce-effect 0.6s ease-out forwards;
}

/* Travelling Light Glow + Lift Hover */
.adv-utm-glow-travelling-light.adv-utm-hover-lift {
  position: relative;
  overflow: hidden;
}

.adv-utm-glow-travelling-light.adv-utm-hover-lift::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.3;
  pointer-events: none;
  animation: glow-travelling-light 3s linear infinite;
  z-index: 1;
  border-radius: inherit;
  filter: blur(8px);
}

.adv-utm-glow-travelling-light.adv-utm-hover-lift:hover {
  animation: lift-shadow 0.3s ease-out forwards;
}

.adv-utm-glow-travelling-light.adv-utm-hover-lift:hover::before {
  opacity: 0;
}

/* Travelling Light Glow + Skew Hover */
.adv-utm-glow-travelling-light.adv-utm-hover-skew {
  position: relative;
  overflow: hidden;
}

.adv-utm-glow-travelling-light.adv-utm-hover-skew::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.3;
  pointer-events: none;
  animation: glow-travelling-light 3s linear infinite;
  z-index: 1;
  border-radius: inherit;
  filter: blur(8px);
}

.adv-utm-glow-travelling-light.adv-utm-hover-skew:hover {
  animation: skew-effect 0.4s ease-in-out forwards;
}

.adv-utm-glow-travelling-light.adv-utm-hover-skew:hover::before {
  opacity: 0;
}

/* Travelling Light Glow + Bounce Hover */
.adv-utm-glow-travelling-light.adv-utm-hover-bounce {
  position: relative;
  overflow: hidden;
}

.adv-utm-glow-travelling-light.adv-utm-hover-bounce::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.3;
  pointer-events: none;
  animation: glow-travelling-light 3s linear infinite;
  z-index: 1;
  border-radius: inherit;
  filter: blur(8px);
}

.adv-utm-glow-travelling-light.adv-utm-hover-bounce:hover {
  animation: bounce-effect 0.6s ease-out forwards;
}

.adv-utm-glow-travelling-light.adv-utm-hover-bounce:hover::before {
  opacity: 0;
}

/* Border Slide + Lift Hover */
.adv-utm-glow-border-slide.adv-utm-hover-lift {
  position: relative;
  overflow: visible;
}

.adv-utm-glow-border-slide.adv-utm-hover-lift:hover {
  animation: lift-shadow 0.3s ease-out forwards;
}


/* Border Slide + Skew Hover */
.adv-utm-glow-border-slide.adv-utm-hover-skew {
  position: relative;
  overflow: visible;
}

.adv-utm-glow-border-slide.adv-utm-hover-skew:hover {
  animation: skew-effect 0.4s ease-in-out forwards;
}


/* Border Slide + Bounce Hover */
.adv-utm-glow-border-slide.adv-utm-hover-bounce {
  position: relative;
  overflow: visible;
}

.adv-utm-glow-border-slide.adv-utm-hover-bounce:hover {
  animation: bounce-effect 0.6s ease-out forwards;
}

/* ============================================================
   TELEGRAM LOGO EFFECT
   ============================================================ */

:root {
  --telegram-blue: #0088cc;
  --telegram-icon-size: 32px;
}

.adv-utm-glow-telegram {
  position: relative !important;
  background-color: var(--telegram-blue) !important;
  color: white !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 55px !important;
  /* Make room for the logo */
  padding-right: 25px !important;
  /* Balanced padding */
  border-radius: 50px !important;
  /* Oval shape */
  box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
  overflow: hidden !important;
  border: none !important;
}

.adv-utm-glow-telegram:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
}

.adv-utm-glow-telegram:active {
  transform: translateY(0);
}

/* Container for the logo circle */
.adv-utm-telegram-logo {
  position: absolute;
  left: 10px;
  width: var(--telegram-icon-size);
  height: var(--telegram-icon-size);
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  animation: telegram-circle-pulse 2s infinite ease-in-out;
}

/* The Paper Plane SVG */
.adv-utm-paper-plane {
  width: 18px;
  height: 18px;
  fill: var(--telegram-blue);
  position: absolute;
  z-index: 3;
  transform: translate(-1px, 0);
  /* Slight adjustment for visual centering */
}

.adv-utm-btn-text {
  user-select: none;
  z-index: 1;
}

/* Continuous gentle pulse for the white circle */
@keyframes telegram-circle-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
}

/* Compatibility with hover effects */
.adv-utm-glow-telegram.adv-utm-hover-lift:hover {
  animation: lift-shadow 0.3s ease-out forwards;
}

.adv-utm-glow-telegram.adv-utm-hover-skew:hover {
  animation: skew-effect 0.4s ease-in-out forwards;
}

.adv-utm-glow-telegram.adv-utm-hover-bounce:hover {
  animation: bounce-effect 0.6s ease-out forwards;
}