/**
* ADVANCED UX STYLES
* High-level UX enhancement styles
* - Reduced motion support
* - Focus indicators
* - Animation styles
* - Accessibility improvements
*/

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Skip to Main Content Link */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 9999;
    padding: 1em;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.skip-to-main:focus {
    position: fixed;
    top: 0;
    left: 0;
    left: 0;
}

/* Enhanced Focus Indicators */
*:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Scroll-triggered Animations */
.animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Validation Styles */
.invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.error-message {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Loading States */
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #0d6efd;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Micro-interactions */
button,
.btn,
a.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled),
a.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

button:active:not(:disabled),
.btn:active:not(:disabled),
a.btn:active {
    transform: translateY(0);
}

/* Card Hover Effects */
.project-card-animated,
.blog-card-animated,
.resource-card-animated,
.contact-item-animated {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card-animated:hover,
.blog-card-animated:hover,
.resource-card-animated:hover,
.contact-item-animated:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }

    button,
    .btn {
        border: 2px solid currentColor;
    }
}

/* Print Styles */
@media print {
    .skip-to-main,
    button,
    .btn,
    nav,
    .sidebar {
        display: none !important;
    }

    * {
        background: white !important;
        color: black !important;
    }
}