/**
 * Professional Animated Backgrounds - B2MKT
 * Clean, elegant animations inspired by Linktree and modern link-in-bio platforms
 */

/* ==========================================
   BASE KEYFRAMES
   ========================================== */

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes gentleFloat {

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

    50% {
        transform: translateY(-8px);
    }
}

@keyframes subtlePulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes slowRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes shimmerSlide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes softBreathe {

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

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* ==========================================
   PROFESSIONAL GRADIENT ANIMATIONS
   ========================================== */

/* 1. Sunset Glow - Warm elegant transition */
.bg-anim-sunset {
    background: linear-gradient(-45deg,
            #ee7752, #e73c7e, #23a6d5, #23d5ab, #ee7752);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
}

/* 2. Ocean Breeze - Cool calming flow */
.bg-anim-ocean {
    background: linear-gradient(-45deg,
            #667eea, #764ba2, #6B8DD6, #8E37D7, #667eea);
    background-size: 400% 400%;
    animation: gradientFlow 20s ease infinite;
}

/* 3. Rose Gold - Elegant and romantic */
.bg-anim-rosegold {
    background: linear-gradient(-45deg,
            #b76e79, #E8CCD7, #D4A574, #f5d0c5, #b76e79);
    background-size: 400% 400%;
    animation: gradientFlow 18s ease infinite;
}

/* 4. Aurora - Northern lights effect */
.bg-anim-aurora {
    position: relative;
    background: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    overflow: hidden;
}

.bg-anim-aurora::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0, 255, 170, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(200, 100, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 30%, rgba(100, 200, 255, 0.1) 0%, transparent 50%);
    animation: slowRotate 60s linear infinite;
    pointer-events: none;
}

/* 5. Galaxy - Deep space with subtle stars */
.bg-anim-galaxy {
    position: relative;
    background: radial-gradient(ellipse at bottom, #1B2838 0%, #090a0f 100%);
    overflow: hidden;
}

.bg-anim-galaxy::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 30% 40%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 50% 10%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 70% 60%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 90% 30%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 20% 80%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 60% 90%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 80% 15%, rgba(255, 255, 255, 0.5), transparent);
    animation: starTwinkle 4s ease-in-out infinite;
    pointer-events: none;
}

/* 6. Soft Pink - Gentle romantic */
.bg-anim-softpink {
    background: linear-gradient(-45deg,
            #ffecd2, #fcb69f, #ff9a9e, #fad0c4, #ffecd2);
    background-size: 400% 400%;
    animation: gradientFlow 20s ease infinite;
}

/* 7. Deep Blue - Professional elegant */
.bg-anim-deepblue {
    background: linear-gradient(-45deg,
            #0c3483, #1e5799, #2989d8, #1e5799, #0c3483);
    background-size: 400% 400%;
    animation: gradientFlow 16s ease infinite;
}

/* 8. Gold Luxury - Shimmer effect */
.bg-anim-gold {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    overflow: hidden;
}

.bg-anim-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(110deg,
            transparent 20%,
            rgba(212, 175, 55, 0.1) 40%,
            rgba(212, 175, 55, 0.2) 50%,
            rgba(212, 175, 55, 0.1) 60%,
            transparent 80%);
    animation: shimmerSlide 3s ease-in-out infinite;
    pointer-events: none;
}

/* 9. Starry Night - Elegant with twinkling */
.bg-anim-starry {
    position: relative;
    background: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    overflow: hidden;
}

.bg-anim-starry::before,
.bg-anim-starry::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bg-anim-starry::before {
    background-image:
        radial-gradient(1px 1px at 15% 25%, #fff, transparent),
        radial-gradient(2px 2px at 35% 55%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 55% 15%, #fff, transparent),
        radial-gradient(2px 2px at 75% 75%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 25% 85%, #fff, transparent),
        radial-gradient(2px 2px at 85% 35%, rgba(255, 255, 255, 0.9), transparent);
    animation: starTwinkle 3s ease-in-out infinite;
}

.bg-anim-starry::after {
    background-image:
        radial-gradient(1px 1px at 45% 45%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 65% 25%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 5% 65%, #fff, transparent),
        radial-gradient(2px 2px at 95% 85%, rgba(255, 255, 255, 0.7), transparent);
    animation: starTwinkle 4s ease-in-out infinite 1.5s;
}

/* 10. Vintage - Elegant muted tones */
.bg-anim-vintage {
    background: linear-gradient(-45deg,
            #c9b99a, #d4bfa0, #ded4c5, #c9b99a);
    background-size: 400% 400%;
    animation: gradientFlow 22s ease infinite;
}

/* 11. Mint Fresh - Clean and modern */
.bg-anim-mint {
    background: linear-gradient(-45deg,
            #56ab91, #b2d3c2, #89c4b5, #14746f, #56ab91);
    background-size: 400% 400%;
    animation: gradientFlow 18s ease infinite;
}

/* 12. Hearts - Romantic with glow */
.bg-anim-hearts {
    position: relative;
    background: linear-gradient(-45deg,
            #ee9ca7, #ffdde1, #f3a4b5, #ee9ca7);
    background-size: 400% 400%;
    animation: gradientFlow 14s ease infinite;
    overflow: hidden;
}

.bg-anim-hearts::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 100, 150, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(255, 100, 150, 0.2) 0%, transparent 30%);
    animation: softBreathe 4s ease-in-out infinite;
    pointer-events: none;
}

/* 13. Champagne - Elegant bubbles */
.bg-anim-champagne {
    position: relative;
    background: linear-gradient(180deg, #2d2419 0%, #4a3f2f 50%, #2d2419 100%);
    overflow: hidden;
}

.bg-anim-champagne::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 70% 30%, rgba(212, 175, 55, 0.1) 0%, transparent 40%);
    animation: softBreathe 6s ease-in-out infinite;
    pointer-events: none;
}

/* 14. Black Gold - Premium luxury */
.bg-anim-blackgold {
    position: relative;
    background: #0a0a0a;
    overflow: hidden;
}

.bg-anim-blackgold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(110deg, transparent 30%, rgba(212, 175, 55, 0.05) 50%, transparent 70%);
    animation: shimmerSlide 4s ease-in-out infinite;
    pointer-events: none;
}

/* 15. Elegant White - Clean shimmer */
.bg-anim-elegant {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #e8e8e8 50%, #f5f5f5 100%);
    overflow: hidden;
}

.bg-anim-elegant::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.8) 40%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0.8) 60%,
            transparent 80%);
    animation: shimmerSlide 5s ease-in-out infinite;
    pointer-events: none;
}

/* 16. Tropical - Fresh and vibrant */
.bg-anim-tropical {
    background: linear-gradient(-45deg,
            #134e5e, #71b280, #0f3443, #134e5e);
    background-size: 400% 400%;
    animation: gradientFlow 16s ease infinite;
}

/* 17. Cosmic Purple - Deep and mystical */
.bg-anim-cosmic {
    background: linear-gradient(-45deg,
            #667eea, #764ba2, #a855f7, #667eea);
    background-size: 400% 400%;
    animation: gradientFlow 14s ease infinite;
}

/* 18. Fire - Warm and energetic */
.bg-anim-fire {
    background: linear-gradient(-45deg,
            #eb3349, #f45c43, #eb3349, #f45c43);
    background-size: 400% 400%;
    animation: gradientFlow 10s ease infinite;
}

/* 19. Neon - Modern glow effect */
.bg-anim-neon {
    position: relative;
    background: #0a0a0a;
    overflow: hidden;
}

.bg-anim-neon::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(from 0deg,
            rgba(255, 0, 255, 0.1),
            rgba(0, 255, 255, 0.1),
            rgba(255, 255, 0, 0.1),
            rgba(255, 0, 255, 0.1));
    animation: slowRotate 15s linear infinite;
    pointer-events: none;
}

/* 20. Matrix - Tech inspired */
.bg-anim-matrix {
    position: relative;
    background: #000;
    overflow: hidden;
}

.bg-anim-matrix::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 255, 65, 0.02) 2px,
            rgba(0, 255, 65, 0.02) 4px);
    pointer-events: none;
}

.bg-anim-matrix::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
            rgba(0, 255, 65, 0.05) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 255, 65, 0.05) 100%);
    animation: subtlePulse 3s ease-in-out infinite;
    pointer-events: none;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

.profile-container {
    position: relative !important;
    z-index: 1 !important;
}