/* SVG Animations for WordPress Elementor */

/* ================================
   LOVE SVG - Writing Animation
   ================================ */
.love-svg {
  width: 100%;
  height: auto;
  min-width: 40vw
}

.love-path {
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease;
  color: black;
}



.love-animated.animate .love-path {
  animation: writeLove 3s ease-in-out forwards;
}

.love-animated.animate .love-path:nth-child(2) {
  animation-delay: 0.8s;
}

.love-animated.animate .love-path:nth-child(3) {
  animation-delay: 1.6s;
}

.love-animated.animate .love-path:nth-child(4) {
  animation-delay: 2.4s;
}

@keyframes writeLove {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }
  80% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: currentColor;
    stroke: currentColor;
  }
}

/* ================================
   HEART SVG - Pulse Animation
   ================================ */
.heart-svg {
  width: 100%;
  height: auto;
  max-width: 300px;
  transform-origin: center;
}

.heart-animated.animate {
  animation: heartPulse 2s ease-in-out infinite;
}

@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: scale(1.1);
    filter: hue-rotate(10deg);
  }
  50% {
    transform: scale(1.2);
    filter: hue-rotate(20deg);
  }
  75% {
    transform: scale(1.1);
    filter: hue-rotate(10deg);
  }
}

/* ================================
   ARROW SVG - Movement Animation
   ================================ */
.arrow-svg {
  width: 100%;
  height: auto;
  max-width: 300px;
  transform-origin: center;
}

.arrow-animated.animate {
  animation: arrowMove 3s ease-in-out infinite;
}

@keyframes arrowMove {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(10px) rotate(5deg);
  }
  50% {
    transform: translateX(20px) rotate(0deg);
  }
  75% {
    transform: translateX(10px) rotate(-5deg);
  }
}

/* ================================
   HEART-ARROW SVG - Combo Animation
   ================================ */
.heart-arrow-svg {
  width: 100%;
  height: auto;
  max-width: 300px;
  transform-origin: center;
}

.heart-arrow-animated.animate {
  animation: heartArrowCombo 4s ease-in-out infinite;
}

@keyframes heartArrowCombo {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.2);
  }
  50% {
    transform: scale(1.2) rotate(0deg);
    filter: brightness(1.4);
  }
  75% {
    transform: scale(1.1) rotate(-5deg);
    filter: brightness(1.2);
  }
}

/* ================================
   PLANE SVG - Flying Animation
   ================================ */
.plane-svg {
  width: 100%;
  height: auto;
  max-width: 300px;
  transform-origin: center;
}

.plane-animated.animate {
  animation: planeFly 5s ease-in-out infinite;
}

@keyframes planeFly {
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  25% {
    transform: translateX(15px) translateY(-10px) rotate(10deg);
  }
  50% {
    transform: translateX(30px) translateY(-5px) rotate(0deg);
  }
  75% {
    transform: translateX(15px) translateY(5px) rotate(-5deg);
  }
}

/* ================================
   SMILE SVG - Bounce Animation
   ================================ */
.smile-svg {
  width: 100%;
  height: auto;
  max-width: 300px;
  transform-origin: center;
}

.smile-animated.animate {
  animation: smileBounce 2.5s ease-in-out infinite;
}

@keyframes smileBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-15px) scale(1.05);
  }
  60% {
    transform: translateY(-8px) scale(1.02);
  }
}

/* ================================
   START SVG - Rotation Animation
   ================================ */
.start-svg {
  width: 100%;
  height: auto;
  max-width: 300px;
  transform-origin: center;
}

.start-animated.animate {
  animation: startRotate 4s ease-in-out infinite;
}

@keyframes startRotate {
  0%, 100% {
    transform: rotate(0deg) scale(1);
    filter: brightness(1);
  }
  25% {
    transform: rotate(90deg) scale(1.1);
    filter: brightness(1.2);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
    filter: brightness(1.4);
  }
  75% {
    transform: rotate(270deg) scale(1.1);
    filter: brightness(1.2);
  }
}

/* ================================
   GENERAL ANIMATIONS
   ================================ */

/* Fade In Animation */
.svg-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.svg-fade-in.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Scale In Animation */
.svg-scale-in {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svg-scale-in.animate {
  opacity: 1;
  transform: scale(1);
}

/* Slide In from Left */
.svg-slide-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.8s ease-out;
}

.svg-slide-left.animate {
  opacity: 1;
  transform: translateX(0);
}

/* Slide In from Right */
.svg-slide-right {
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.8s ease-out;
}

.svg-slide-right.animate {
  opacity: 1;
  transform: translateX(0);
}

/* Hover Effects */
.svg-hover-effect {
  transition: all 0.3s ease;
  cursor: pointer;
}

.svg-hover-effect:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */
@media (max-width: 768px) {
  .love-svg,
  .heart-svg,
  .arrow-svg,
  .heart-arrow-svg,
  .plane-svg,
  .smile-svg,
  .start-svg {
    max-width: 200px;
  }
  
  /* Reduce animation intensity on mobile */
  @keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }
  
  @keyframes arrowMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
  }
  
  @keyframes planeFly {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(15px) translateY(-5px); }
  }
}

@media (max-width: 767px) {  
  .heart-svg,
  .arrow-svg,
  .heart-arrow-svg,
  .plane-svg,
  .smile-svg,
  .start-svg {
    max-width: 250px;
  }
	
  .love-svg {
    min-width: 75vw !important;
  }
}

/* ================================
   ACCESSIBILITY
   ================================ */
@media (prefers-reduced-motion: reduce) {
  .love-animated.animate .love-path,
  .heart-animated.animate,
  .arrow-animated.animate,
  .heart-arrow-animated.animate,
  .plane-animated.animate,
  .smile-animated.animate,
  .start-animated.animate,
  .svg-fade-in,
  .svg-scale-in,
  .svg-slide-left,
  .svg-slide-right {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ================================
   ELEMENTOR SPECIFIC ANIMATIONS
   ================================ */

/* Elementor Love Animation */
.elementor-love .love-path {
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

.elementor-love.animate .love-path {
    animation: writeLoveElementor 4s ease-in-out forwards !important;
}

.elementor-love.animate .love-path:nth-child(2) {
    animation-delay: 1s !important;
}

.elementor-love.animate .love-path:nth-child(3) {
    animation-delay: 2s !important;
}

.elementor-love.animate .love-path:nth-child(4) {
    animation-delay: 3s !important;
}

@keyframes writeLoveElementor {
  0% {
    stroke-dashoffset: 2000;
    fill: currentColor;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: currentColor;
    fill-opacity: 1;
  }
}/* Elementor Heart Animation */
.elementor-heart {
    width: 100%;
    height: auto;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.elementor-heart.animate {
    animation: heartPulseElementor 2s ease-in-out infinite !important;
}

@keyframes heartPulseElementor {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.05);
    }
    75% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* Elementor Arrow Animation */
.elementor-arrow {
    width: 100%;
    height: auto;
    transform-origin: center;
}

.elementor-arrow .arrow-path {
    stroke-dasharray: 2500;
    stroke-dashoffset: 2500;
    transition: all 0.3s ease;
    fill: transparent;
}

.elementor-arrow.animate .arrow-path {
    animation: drawArrowElementor 3s ease-in-out forwards, moveArrowElementor 1.5s ease-in-out 3s infinite !important;
}

.elementor-arrow.animate .arrow-path:nth-child(1) {
    animation-delay: 0s, 3s !important;
}

.elementor-arrow.animate .arrow-path:nth-child(2) {
    animation-delay: 0.5s, 3.5s !important;
}

@keyframes drawArrowElementor {
  0% {
    stroke-dashoffset: 2500;
    fill: currentColor;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: currentColor;
    fill-opacity: 1;
  }
}@keyframes moveArrowElementor {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

/* Elementor Container Styles */
.svg-animation-container,
.heart-animation-container,
.arrow-animation-container {
    text-align: center;
    padding: 20px;
}

.svg-animation-container:hover .elementor-love {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.heart-animation-container:hover .elementor-heart {
    animation-duration: 1s;
}

.arrow-animation-container:hover .elementor-arrow {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* ================================
   UTILITY ANIMATIONS
   ================================ */

/* Infinite Rotation Animation */
.infinite_rotation {
    animation: infiniteRotation 4s linear infinite;
    transform-origin: center;
}

@keyframes infiniteRotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Heartbeat Pulse Animation */
.heart_beats {
    animation: heartBeats 1.2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes heartBeats {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    40% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

/* Infinity Path Animation */
.infinity_path {
    position: relative;
    animation: infinityPath 8s ease-in-out infinite;
}

@keyframes infinityPath {
    0% {
        transform: translate(0, 0);
    }
    12.5% {
        transform: translate(20px, -15px);
    }
    25% {
        transform: translate(30px, 0);
    }
    37.5% {
        transform: translate(20px, 15px);
    }
    50% {
        transform: translate(0, 0);
    }
    62.5% {
        transform: translate(-20px, 15px);
    }
    75% {
        transform: translate(-30px, 0);
    }
    87.5% {
        transform: translate(-20px, -15px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* ================================
   PERFORMANCE OPTIMIZATIONS
   ================================ */
.love-animated,
.heart-animated,
.arrow-animated,
.heart-arrow-animated,
.plane-animated,
.smile-animated,
.start-animated,
.elementor-love,
.elementor-heart,
.elementor-arrow {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* Pause animations when not visible */
.svg-container:not(.in-viewport) .love-animated.animate,
.svg-container:not(.in-viewport) .heart-animated.animate,
.svg-container:not(.in-viewport) .arrow-animated.animate,
.svg-container:not(.in-viewport) .heart-arrow-animated.animate,
.svg-container:not(.in-viewport) .plane-animated.animate,
.svg-container:not(.in-viewport) .smile-animated.animate,
.svg-container:not(.in-viewport) .start-animated.animate {
  animation-play-state: paused;
}