/**
 * Blur to Focus Animation Styles
 * Text starts blurred and gradually sharpens into focus
 */

/* Initial state - blurred and faded */
.blur-reveal-element {
    filter: blur(10px);
    opacity: 0.3;
    transform: translateY(20px);
    transition: filter var(--blur-duration, 1.2s) cubic-bezier(0.215, 0.610, 0.355, 1),
                opacity var(--blur-duration, 1.2s) cubic-bezier(0.215, 0.610, 0.355, 1),
                transform var(--blur-duration, 1.2s) cubic-bezier(0.215, 0.610, 0.355, 1);
    transition-delay: var(--blur-delay, 0s);
    will-change: filter, opacity, transform;
}

/* Revealed state - sharp and visible */
.blur-reveal-element.blur-revealed {
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0);
}

/* Remove will-change after animation completes for performance */
.blur-reveal-element.blur-revealed {
    animation: remove-will-change 0.1s forwards;
    animation-delay: calc(var(--blur-duration, 1.2s) + var(--blur-delay, 0s));
}

@keyframes remove-will-change {
    to {
        will-change: auto;
    }
}

/* Specific styling for About Me section */
.about-section .section-text.blur-reveal-element {
    line-height: 1.8;
}

/* Alternative: More dramatic blur */
.blur-reveal-element.blur-dramatic {
    filter: blur(20px);
    opacity: 0;
}

/* Alternative: Subtle blur */
.blur-reveal-element.blur-subtle {
    filter: blur(5px);
    opacity: 0.5;
    transform: translateY(10px);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .blur-reveal-element {
        filter: none !important;
        opacity: 0.3 !important;
        transform: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .blur-reveal-element.blur-revealed {
        opacity: 1 !important;
    }
}

/* Mobile optimizations - less blur for better performance */
@media (max-width: 768px) {
    .blur-reveal-element {
        filter: blur(8px);
    }

    .blur-reveal-element.blur-dramatic {
        filter: blur(15px);
    }
}

/* Print styles */
@media print {
    .blur-reveal-element {
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Theme-aware adjustments */
body[data-theme="light"] .blur-reveal-element {
    /* Light theme might need slightly different opacity */
    opacity: 0.2;
}

body[data-theme="light"] .blur-reveal-element.blur-revealed {
    opacity: 1;
}