/* Advanced Blur Effects and Animations */
/* Cool glassmorphism effects that enhance without sacrificing readability */

/* Animated background blur for hero section */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    /* Hero blur background disabled for better readability */
    display: none;
    /*
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at 25% 25%,
        rgba(0, 0, 0, 0.1) 0%,
        transparent 50%
    ), radial-gradient(
        circle at 75% 75%,
        rgba(77, 166, 255, 0.08) 0%,
        transparent 50%
    );
    animation: heroBlurFloat 20s ease-in-out infinite;
    filter: blur(40px);
    opacity: 0.6;
    */
}

@keyframes heroBlurFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(-20px, -20px) rotate(120deg);
    }
    66% {
        transform: translate(20px, -10px) rotate(240deg);
    }
}

/* Section transitions with blur */
.section-blur-transition {
    position: relative;
}

.section-blur-transition::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(26, 27, 35, 0.1) 50%,
        transparent 100%);
    backdrop-filter: blur(5px);
    pointer-events: none;
}

/* Interactive blur on hover for cards */
.interactive-blur {
    position: relative;
    transition: all 0.3s ease;
}

.interactive-blur::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 255, 255, 0.05) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.interactive-blur:hover::after {
    opacity: 1;
}

/* Glassmorphism modal backdrop */
.modal-backdrop-blur {
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    background: rgba(0, 0, 0, 0.4);
}

/* Text readability enhancement over blurred backgrounds */
.text-over-blur {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Subtle blur animation for loading states */
.blur-pulse {
    animation: blurPulse 2s ease-in-out infinite;
}

@keyframes blurPulse {
    0%, 100% {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    50% {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
}

/* Progressive blur for scroll effects */
.scroll-blur {
    transition: backdrop-filter 0.3s ease;
}

.scroll-blur.scrolled-light {
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.scroll-blur.scrolled-medium {
    backdrop-filter: blur(15px) saturate(140%);
    -webkit-backdrop-filter: blur(15px) saturate(140%);
}

.scroll-blur.scrolled-heavy {
    backdrop-filter: blur(25px) saturate(160%);
    -webkit-backdrop-filter: blur(25px) saturate(160%);
}

/* Focus blur - creates depth when focusing on content */
.focus-blur-parent {
    transition: filter 0.3s ease;
}

.focus-blur-parent.blur-background > *:not(.focus-target) {
    filter: blur(2px);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.focus-blur-parent.blur-background .focus-target {
    filter: none;
    opacity: 1;
    transform: scale(1.02);
    z-index: 10;
    position: relative;
}

/* Glassmorphism notification/toast */
.toast-blur {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Moving blur orbs - disabled for better readability */
.blur-orb {
    display: none;
    /*
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.3;
    pointer-events: none;
    animation: floatBlur 15s ease-in-out infinite;
    */
}

.blur-orb--primary {
    /* Red blur orb disabled for better readability */
    background: transparent;
    /* background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 0%, transparent 70%); */
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
    display: none;
}

.blur-orb--secondary {
    background: radial-gradient(circle, rgba(77, 166, 255, 0.3) 0%, transparent 70%);
    width: 150px;
    height: 150px;
    top: 60%;
    right: 20%;
    animation-delay: -7s;
}

.blur-orb--accent {
    background: radial-gradient(circle, rgba(255, 193, 7, 0.2) 0%, transparent 70%);
    width: 180px;
    height: 180px;
    bottom: 20%;
    left: 60%;
    animation-delay: -3s;
}

@keyframes floatBlur {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(50px, -30px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 40px) scale(0.9);
    }
    75% {
        transform: translate(-40px, -20px) scale(1.05);
    }
}

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .blur-orb,
    .blur-pulse {
        animation: none;
    }
    
    .interactive-blur::after {
        display: none;
    }
}

/* Reduce blur intensity on mobile for better performance */
@media (max-width: 768px) {
    .glass-card,
    .location__card,
    .modal-backdrop-blur {
        backdrop-filter: blur(8px) saturate(150%);
        -webkit-backdrop-filter: blur(8px) saturate(150%);
    }
    
    .blur-orb {
        filter: blur(20px);
        opacity: 0.2;
    }
    
    .programm::before {
        backdrop-filter: blur(8px) saturate(130%);
        -webkit-backdrop-filter: blur(8px) saturate(130%);
    }
    
    .programm::after {
        backdrop-filter: blur(5px) saturate(120%);
        -webkit-backdrop-filter: blur(5px) saturate(120%);
    }
}

/* High contrast mode - disable blur effects for accessibility */
@media (prefers-contrast: high) {
    .glass-card,
    .location__card,
    .modal-backdrop-blur,
    .text-over-blur,
    .toast-blur {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(20, 20, 20, 0.95);
        border: 2px solid #ffffff;
    }
    
    .programm::before,
    .programm::after,
    .section-blur-transition::before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(26, 27, 35, 0.8);
    }
    
    .blur-orb {
        display: none;
    }
}