/**
 * Animated Hover Element Styles
 * Works with Elementor Sections and Containers
 */

/* Base styles for animated hover enabled elements */
.elementor-section.animated-hover-enabled,
.elementor-container.animated-hover-enabled,
.animated-container-wrapper.animated-hover-enabled,
.elementor-widget.animated-hover-enabled,
.elementor-widget.animated-hover-enabled .elementor-widget-container {
    position: relative !important;
    --animated-hover-color: #9333ea;
    --animated-hover-speed: 2s;
    --animated-hover-border-width: 2px;
    overflow: visible;
}

/* For widgets, apply to widget container */
.elementor-widget.animated-hover-enabled .elementor-widget-container {
    position: relative !important;
}

/* Ensure containers have proper positioning */
.elementor-container.animated-hover-enabled {
    isolation: isolate;
}

/* Widget wrapper styles */
.animated-container-wrapper {
    position: relative;
    width: 100%;
    min-height: 50px;
    border-radius: 8px;
}

.animated-container-content {
    position: relative;
    z-index: 1;
}

/* Ensure widget wrapper has proper border-radius inheritance */
.animated-container-wrapper::before,
.animated-container-wrapper::after {
    border-radius: inherit;
}

/* ============================================
   GLOW ANIMATION (Glødende)
   ============================================ */
.elementor-section.animated-hover-type-glow,
.elementor-container.animated-hover-type-glow,
.animated-container-wrapper.animated-hover-type-glow,
.elementor-widget.animated-hover-type-glow .elementor-widget-container {
    border: var(--animated-hover-border-width) solid transparent;
}

.elementor-section.animated-hover-type-glow::before,
.elementor-container.animated-hover-type-glow::before,
.animated-container-wrapper.animated-hover-type-glow::before,
.elementor-widget.animated-hover-type-glow .elementor-widget-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--animated-hover-color);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(10px);
    pointer-events: none;
}

.elementor-section.animated-hover-type-glow::after,
.elementor-container.animated-hover-type-glow::after,
.animated-container-wrapper.animated-hover-type-glow::after,
.elementor-widget.animated-hover-type-glow .elementor-widget-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: var(--animated-hover-border-width) solid var(--animated-hover-color);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Hover mode */
.elementor-section.animated-hover-mode-hover.animated-hover-type-glow:hover::before,
.elementor-container.animated-hover-mode-hover.animated-hover-type-glow:hover::before,
.animated-container-wrapper.animated-hover-mode-hover.animated-hover-type-glow:hover::before,
.elementor-widget.animated-hover-mode-hover.animated-hover-type-glow:hover .elementor-widget-container::before,
.elementor-section.animated-hover-mode-hover.animated-hover-type-glow:hover::after,
.elementor-container.animated-hover-mode-hover.animated-hover-type-glow:hover::after,
.animated-container-wrapper.animated-hover-mode-hover.animated-hover-type-glow:hover::after,
.elementor-widget.animated-hover-mode-hover.animated-hover-type-glow:hover .elementor-widget-container::after {
    opacity: 1 !important;
    animation: glow-pulse var(--animated-hover-speed) ease-in-out infinite;
}

/* Always animated mode */
.elementor-section.animated-hover-mode-always.animated-hover-type-glow::before,
.elementor-container.animated-hover-mode-always.animated-hover-type-glow::before,
.animated-container-wrapper.animated-hover-mode-always.animated-hover-type-glow::before,
.elementor-widget.animated-hover-mode-always.animated-hover-type-glow .elementor-widget-container::before,
.elementor-section.animated-hover-mode-always.animated-hover-type-glow::after,
.elementor-container.animated-hover-mode-always.animated-hover-type-glow::after,
.animated-container-wrapper.animated-hover-mode-always.animated-hover-type-glow::after,
.elementor-widget.animated-hover-mode-always.animated-hover-type-glow .elementor-widget-container::after {
    opacity: 1 !important;
    animation: glow-pulse var(--animated-hover-speed) ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}

/* ============================================
   PULSE ANIMATION (Pulserende)
   ============================================ */
.elementor-section.animated-hover-type-pulse,
.elementor-container.animated-hover-type-pulse,
.animated-container-wrapper.animated-hover-type-pulse {
    border: var(--animated-hover-border-width) solid transparent;
}

.elementor-section.animated-hover-type-pulse::before,
.elementor-container.animated-hover-type-pulse::before,
.animated-container-wrapper.animated-hover-type-pulse::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: var(--animated-hover-border-width) solid var(--animated-hover-color);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Hover mode */
.elementor-section.animated-hover-mode-hover.animated-hover-type-pulse:hover::before,
.elementor-container.animated-hover-mode-hover.animated-hover-type-pulse:hover::before,
.animated-container-wrapper.animated-hover-mode-hover.animated-hover-type-pulse:hover::before {
    opacity: 1 !important;
    animation: pulse-border var(--animated-hover-speed) ease-in-out infinite;
}

/* Always animated mode */
.elementor-section.animated-hover-mode-always.animated-hover-type-pulse::before,
.elementor-container.animated-hover-mode-always.animated-hover-type-pulse::before,
.animated-container-wrapper.animated-hover-mode-always.animated-hover-type-pulse::before {
    opacity: 1 !important;
    animation: pulse-border var(--animated-hover-speed) ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* ============================================
   ROTATE ANIMATION (Roterende)
   ============================================ */
.elementor-section.animated-hover-type-rotate,
.elementor-container.animated-hover-type-rotate,
.animated-container-wrapper.animated-hover-type-rotate {
    border: var(--animated-hover-border-width) solid transparent;
    position: relative;
}

.elementor-section.animated-hover-type-rotate::before,
.elementor-container.animated-hover-type-rotate::before,
.animated-container-wrapper.animated-hover-type-rotate::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        0deg,
        var(--animated-hover-color) 0%,
        transparent 25%,
        transparent 75%,
        var(--animated-hover-color) 100%
    );
    background: conic-gradient(
        from 0deg,
        var(--animated-hover-color),
        transparent 50%,
        transparent 50%,
        var(--animated-hover-color)
    );
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Hover mode */
.elementor-section.animated-hover-mode-hover.animated-hover-type-rotate:hover::before,
.elementor-container.animated-hover-mode-hover.animated-hover-type-rotate:hover::before,
.animated-container-wrapper.animated-hover-mode-hover.animated-hover-type-rotate:hover::before {
    opacity: 1 !important;
    animation: rotate-border var(--animated-hover-speed) linear infinite;
}

/* Always animated mode */
.elementor-section.animated-hover-mode-always.animated-hover-type-rotate::before,
.elementor-container.animated-hover-mode-always.animated-hover-type-rotate::before,
.animated-container-wrapper.animated-hover-mode-always.animated-hover-type-rotate::before {
    opacity: 1 !important;
    animation: rotate-border var(--animated-hover-speed) linear infinite;
}

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

/* ============================================
   SHIMMER ANIMATION (Skinnende)
   ============================================ */
.elementor-section.animated-hover-type-shimmer,
.elementor-container.animated-hover-type-shimmer,
.animated-container-wrapper.animated-hover-type-shimmer {
    border: var(--animated-hover-border-width) solid transparent;
    position: relative;
    overflow: visible;
}

.elementor-section.animated-hover-type-shimmer::before,
.elementor-container.animated-hover-type-shimmer::before,
.animated-container-wrapper.animated-hover-type-shimmer::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        var(--animated-hover-color) 50%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Hover mode */
.elementor-section.animated-hover-mode-hover.animated-hover-type-shimmer:hover::before,
.elementor-container.animated-hover-mode-hover.animated-hover-type-shimmer:hover::before,
.animated-container-wrapper.animated-hover-mode-hover.animated-hover-type-shimmer:hover::before {
    opacity: 1 !important;
    animation: shimmer-sweep var(--animated-hover-speed) ease-in-out infinite;
}

/* Always animated mode */
.elementor-section.animated-hover-mode-always.animated-hover-type-shimmer::before,
.elementor-container.animated-hover-mode-always.animated-hover-type-shimmer::before,
.animated-container-wrapper.animated-hover-mode-always.animated-hover-type-shimmer::before {
    opacity: 1 !important;
    animation: shimmer-sweep var(--animated-hover-speed) ease-in-out infinite;
}

@keyframes shimmer-sweep {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* ============================================
   BORDER DRAW ANIMATION (Tegnende)
   ============================================ */
.elementor-section.animated-hover-type-border-draw,
.elementor-container.animated-hover-type-border-draw,
.animated-container-wrapper.animated-hover-type-border-draw {
    border: var(--animated-hover-border-width) solid transparent;
    position: relative;
}

.elementor-section.animated-hover-type-border-draw::before,
.elementor-container.animated-hover-type-border-draw::before,
.animated-container-wrapper.animated-hover-type-border-draw::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    border-radius: inherit;
    padding: var(--animated-hover-border-width);
    background: var(--animated-hover-color);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    clip-path: inset(0 100% 100% 0);
}

/* Hover mode */
.elementor-section.animated-hover-mode-hover.animated-hover-type-border-draw:hover::before,
.elementor-container.animated-hover-mode-hover.animated-hover-type-border-draw:hover::before,
.animated-container-wrapper.animated-hover-mode-hover.animated-hover-type-border-draw:hover::before {
    opacity: 1 !important;
    animation: border-draw var(--animated-hover-speed) ease-in-out forwards;
}

/* Always animated mode - draws once then stays */
.elementor-section.animated-hover-mode-always.animated-hover-type-border-draw::before,
.elementor-container.animated-hover-mode-always.animated-hover-type-border-draw::before,
.animated-container-wrapper.animated-hover-mode-always.animated-hover-type-border-draw::before {
    opacity: 1 !important;
    animation: border-draw var(--animated-hover-speed) ease-in-out forwards;
}

@keyframes border-draw {
    0% {
        clip-path: inset(0 100% 100% 0);
    }
    25% {
        clip-path: inset(0 0 100% 0);
    }
    50% {
        clip-path: inset(0 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* ============================================
   GRADIENT ANIMATION (Gradient)
   ============================================ */
.elementor-section.animated-hover-type-gradient,
.elementor-container.animated-hover-type-gradient,
.animated-container-wrapper.animated-hover-type-gradient {
    border: var(--animated-hover-border-width) solid transparent;
    position: relative;
    background-clip: padding-box;
}

.elementor-section.animated-hover-type-gradient::before,
.elementor-container.animated-hover-type-gradient::before,
.animated-container-wrapper.animated-hover-type-gradient::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    border-radius: inherit;
    padding: var(--animated-hover-border-width);
    background: linear-gradient(
        45deg,
        var(--animated-hover-color),
        rgba(147, 51, 234, 0.5),
        var(--animated-hover-color),
        rgba(147, 51, 234, 0.5),
        var(--animated-hover-color)
    );
    background-size: 300% 300%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Hover mode */
.elementor-section.animated-hover-mode-hover.animated-hover-type-gradient:hover::before,
.elementor-container.animated-hover-mode-hover.animated-hover-type-gradient:hover::before,
.animated-container-wrapper.animated-hover-mode-hover.animated-hover-type-gradient:hover::before {
    opacity: 1 !important;
    animation: gradient-flow var(--animated-hover-speed) ease-in-out infinite;
}

/* Always animated mode */
.elementor-section.animated-hover-mode-always.animated-hover-type-gradient::before,
.elementor-container.animated-hover-mode-always.animated-hover-type-gradient::before,
.animated-container-wrapper.animated-hover-mode-always.animated-hover-type-gradient::before {
    opacity: 1 !important;
    animation: gradient-flow var(--animated-hover-speed) ease-in-out infinite;
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ============================================
   ENSURE CONTENT IS ABOVE ANIMATION
   ============================================ */
.elementor-section.animated-hover-enabled .elementor-container,
.elementor-section.animated-hover-enabled .elementor-widget-wrap,
.elementor-section.animated-hover-enabled .elementor-column,
.elementor-container.animated-hover-enabled .elementor-widget-wrap,
.elementor-container.animated-hover-enabled > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
/* Mobile adjustments can be added here if needed */

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .elementor-section.animated-hover-enabled::before,
    .elementor-section.animated-hover-enabled::after,
    .elementor-container.animated-hover-enabled::before,
    .elementor-container.animated-hover-enabled::after {
        animation: none !important;
    }
    
    .elementor-section.animated-hover-mode-hover.animated-hover-enabled:hover::before,
    .elementor-section.animated-hover-mode-hover.animated-hover-enabled:hover::after,
    .elementor-container.animated-hover-mode-hover.animated-hover-enabled:hover::before,
    .elementor-container.animated-hover-mode-hover.animated-hover-enabled:hover::after {
        opacity: 1;
    }
}