/*
 * Domain Free Addons - Animated Border Effects
 * Ücretsiz eklentiler bölümü için hareketli kenarlık efektleri
 */

/* Animated Border Card */
.feature-card.animated-border {
    position: relative;
    border: 2px solid transparent !important;
    background: white;
    background-clip: padding-box;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Animated Gradient Border */
.feature-card.animated-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        60deg,
        #667eea,
        #764ba2,
        #f093fb,
        #4facfe,
        #43e97b,
        #667eea
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
    animation: animatedBorder 4s ease-in-out infinite;
}

/* Different animation speeds for variety */
.feature-card.animated-border:nth-child(2)::before {
    animation-duration: 5s;
    animation-delay: 0.5s;
}

.feature-card.animated-border:nth-child(3)::before {
    animation-duration: 4.5s;
    animation-delay: 1s;
}

.feature-card.animated-border:nth-child(4)::before {
    animation-duration: 5.5s;
    animation-delay: 0.3s;
}

.feature-card.animated-border:nth-child(5)::before {
    animation-duration: 4.8s;
    animation-delay: 0.8s;
}

.feature-card.animated-border:nth-child(6)::before {
    animation-duration: 5.2s;
    animation-delay: 0.2s;
}

/* Border Animation Keyframes */
@keyframes animatedBorder {
    0%, 100% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 0%;
    }
}

/* Hover Effect */
.feature-card.animated-border:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
}

.feature-card.animated-border:hover::before {
    animation-duration: 2s !important;
}

/* Card Body */
.feature-card.animated-border .card-body {
    position: relative;
    z-index: 1;
}

/* Icon Animation on Hover */
.feature-card.animated-border:hover .addons i {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.3s ease;
}

/* Alternative: Rotating Conic Gradient Border (more dramatic effect) */
.feature-card.rotating-border {
    position: relative;
    border: 2px solid transparent !important;
    background: white;
    background-clip: padding-box;
    transition: all 0.3s ease;
    overflow: visible;
}

.feature-card.rotating-border::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        #667eea,
        #764ba2,
        #f093fb,
        #4facfe,
        #43e97b,
        #667eea
    );
    z-index: -1;
    animation: rotateBorder 3s linear infinite;
}

.feature-card.rotating-border::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border-radius: inherit;
    z-index: -1;
}

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

/* Card Body for Rotating Border */
.feature-card.rotating-border .card-body {
    position: relative;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 991px) {
    .feature-card.animated-border,
    .feature-card.rotating-border {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 767px) {
    .feature-card.animated-border::before,
    .feature-card.rotating-border::before {
        padding: 2px;
    }
}