/* Reduced Motion Support Added - 2025-07-23 */
/* Vendor Prefixes Added - 2025-07-23 */
/**
 * HVAC Community Events Animation Effects
 *
 * This stylesheet contains animations and transitions for UI elements
 * to create a more polished, responsive feel to the interface.
 */

/* Base transition properties */
:root {

    --hvac-transition-speed: 0.2s;

    --hvac-transition-timing: ease-out;
}

/* Scale-up animation for cards and important elements */
@keyframes scale-up {
    0% {

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    -ms-transform: scale(1);

    -ms-transform: scale(1);

    opacity: 0.95;
    }
    100% {

    -webkit-transform: scale(1.02);

    -ms-transform: scale(1.02);

    opacity: 1;
    }
}

/* Fade-in animation */
@keyframes fade-in {
    0% {

    opacity: 0;
    }
    100% {

    opacity: 1;
    }
}

/* Pulse animation for notices and alerts */
@keyframes pulse {
    0% {

    transform: scale(1);

    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
}
    70% {

    -webkit-transform: scale(1.01);

    -ms-transform: scale(1.01);

    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
    100% {

    transform: scale(1);

    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}

/* Slide-in animation */
@keyframes slide-in-right {
    0% {

    -webkit-transform: translateX(20px);

    -ms-transform: translateX(20px);

    opacity: 0;
    }
    100% {

    -webkit-transform: translateX(0);

    -ms-transform: translateX(0);

    -ms-transform: translateX(0);

    opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {

    -webkit-transform: translateX(-20px);

    -ms-transform: translateX(-20px);

    opacity: 0;
    }
    100% {

    transform: translateX(0);

    opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {

    -webkit-transform: translateY(20px);

    -ms-transform: translateY(20px);

    opacity: 0;
    }
    100% {

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    opacity: 1;
    }
}

/* Common element transitions */

/* Card hover animation */
.hvac-card {
    -webkit-transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing),
                box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
                border-color var(--hvac-transition-speed) var(--hvac-transition-timing);
    transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing),
                box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
                border-color var(--hvac-transition-speed) var(--hvac-transition-timing);
}

.hvac-card:hover {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--hvac-primary-light, #e6f3fb);
}

/* Stat cards animation */
.hvac-event-stat-card,
.hvac-stat-card {

    transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing),
                box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing);
}

.hvac-event-stat-card:hover,
.hvac-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Button hover animations */
.hvac-button,
.hvac-content .button,
.hvac-content button[type="submit"],
.hvac-content input[type="submit"] {
    -webkit-transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
                color var(--hvac-transition-speed) var(--hvac-transition-timing),
                transform var(--hvac-transition-speed) var(--hvac-transition-timing),
                box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing);
    transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
                color var(--hvac-transition-speed) var(--hvac-transition-timing),
                transform var(--hvac-transition-speed) var(--hvac-transition-timing),
                box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing);
}

/* Form field transitions */
.hvac-form-input,
.hvac-content input[type="text"],
.hvac-content input[type="email"],
.hvac-content input[type="password"],
.hvac-content input[type="url"],
.hvac-content textarea,
.hvac-content select {
    -webkit-transition: border-color var(--hvac-transition-speed) var(--hvac-transition-timing),
                box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
                background-color var(--hvac-transition-speed) var(--hvac-transition-timing);
    transition: border-color var(--hvac-transition-speed) var(--hvac-transition-timing),
                box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
                background-color var(--hvac-transition-speed) var(--hvac-transition-timing);
}

/* Table row hover transition */
.hvac-table tbody tr,
.events-table tbody tr,
.hvac-transactions-table tbody tr {

    transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing);
}

/* Link hover transition */
.hvac-content a {
    -webkit-transition: color var(--hvac-transition-speed) var(--hvac-transition-timing),
                text-decoration var(--hvac-transition-speed) var(--hvac-transition-timing);
    transition: color var(--hvac-transition-speed) var(--hvac-transition-timing),
                text-decoration var(--hvac-transition-speed) var(--hvac-transition-timing);
}

/* Alert/message transitions */
.hvac-alert,
.hvac-email-sent,
.hvac-email-error,
.login-error,
.hvac-errors,
.hvac-success {
    -webkit-transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
                transform var(--hvac-transition-speed) var(--hvac-transition-timing);
    transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
                transform var(--hvac-transition-speed) var(--hvac-transition-timing);
}

/* Animation classes that can be applied to elements */

/* Apply fade-in animation */
.hvac-animate-fade-in {
    -webkit-animation: fade-in 0.5s ease-out forwards;
    animation: fade-in 0.5s ease-out forwards;
}

/* Apply scale-up animation */
.hvac-animate-scale-up {
    -webkit-animation: scale-up 0.3s ease-out forwards;
    animation: scale-up 0.3s ease-out forwards;
}

/* Apply pulse animation */
.hvac-animate-pulse {
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}

/* Apply slide-in animations */
.hvac-animate-slide-in-right {
    -webkit-animation: slide-in-right 0.3s ease-out forwards;
    animation: slide-in-right 0.3s ease-out forwards;
}

.hvac-animate-slide-in-left {
    -webkit-animation: slide-in-left 0.3s ease-out forwards;
    animation: slide-in-left 0.3s ease-out forwards;
}

.hvac-animate-slide-in-bottom {
    -webkit-animation: slide-in-bottom 0.3s ease-out forwards;
    animation: slide-in-bottom 0.3s ease-out forwards;
}

/* Apply animations to specific elements */
.hvac-dashboard-stats .hvac-stat-card:nth-child(1) {
    -webkit-animation: slide-in-bottom 0.3s ease-out 0.1s both;

    animation: slide-in-bottom 0.3s ease-out 0.1s both;
}

.hvac-dashboard-stats .hvac-stat-card:nth-child(2) {
    -webkit-animation: slide-in-bottom 0.3s ease-out 0.2s both;

    animation: slide-in-bottom 0.3s ease-out 0.2s both;
}

.hvac-dashboard-stats .hvac-stat-card:nth-child(3) {
    -webkit-animation: slide-in-bottom 0.3s ease-out 0.3s both;

    animation: slide-in-bottom 0.3s ease-out 0.3s both;
}

.hvac-dashboard-stats .hvac-stat-card:nth-child(4) {
    -webkit-animation: slide-in-bottom 0.3s ease-out 0.4s both;
    animation: slide-in-bottom 0.3s ease-out 0.4s both;
}

/* Event summary stats sequence */
.hvac-event-summary-stats .hvac-event-stat-card:nth-child(1) {
    animation: slide-in-bottom 0.3s ease-out 0.1s both;
}

.hvac-event-summary-stats .hvac-event-stat-card:nth-child(2) {
    animation: slide-in-bottom 0.3s ease-out 0.2s both;
}

.hvac-event-summary-stats .hvac-event-stat-card:nth-child(3) {
    animation: slide-in-bottom 0.3s ease-out 0.3s both;
}

/* Initial loading state for animated elements - only on HVAC pages */
.hvac-content .hvac-animate-fade-in,
.hvac-content .hvac-animate-scale-up,
.hvac-content .hvac-animate-slide-in-right,
.hvac-content .hvac-animate-slide-in-left,
.hvac-content .hvac-animate-slide-in-bottom,
.hvac-content .hvac-dashboard-stats .hvac-stat-card,
.hvac-content .hvac-event-summary-stats .hvac-event-stat-card {

    opacity: 0;
}

/* Focus Animation Styles */
/* Smooth transitions for focus indicators */
.hvac-content *:focus {
    -webkit-transition: outline 0.2s ease-out,
                box-shadow 0.2s ease-out,
                background-color 0.2s ease-out;
    transition: outline 0.2s ease-out,
                box-shadow 0.2s ease-out,
                background-color 0.2s ease-out;
}

/* Focus indicator animation for better visibility */
@keyframes focus-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
        box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
    }
    50% {
        -webkit-box-shadow: 0 0 0 5px rgba(0, 95, 204, 0.2);
        box-shadow: 0 0 0 5px rgba(0, 95, 204, 0.2);
    }
    100% {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
        box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
    }
}

/* Apply focus pulse to critical interactive elements */
.hvac-button:focus,
.hvac-email-submit:focus,
.hvac-content button[type="submit"]:focus {
    -webkit-animation: focus-pulse 2s ease-in-out infinite;
    animation: focus-pulse 2s ease-in-out infinite;
}

/* Disable focus animations for reduced motion users */

/* Reduced Motion Support Added - WCAG 2.1 Accessibility */
/* Respects user preference for reduced motion to prevent vestibular disorders */

@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions globally */
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    /* Remove specific transform animations */
    .hvac-animate-fade-in,
    .hvac-animate-scale-up,
    .hvac-animate-pulse,
    .hvac-animate-slide-in-right,
    .hvac-animate-slide-in-left,
    .hvac-animate-slide-in-bottom {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable hover transformations */
    .hvac-card:hover,
    .hvac-stat-card:hover,
    .hvac-event-stat-card:hover,
    .hvac-button:hover,
    .hvac-email-submit:hover {
        transform: none !important;
        animation: none !important;
    }

    /* Keep essential visual feedback but remove motion */
    .hvac-card:hover,
    .hvac-stat-card:hover,
    .hvac-event-stat-card:hover {
        border-color: var(--hvac-primary, #0274be) !important;
        box-shadow: 0 0 0 2px rgba(2, 116, 190, 0.2) !important;
    }

    /* Disable loading spinner animation but keep visibility */
    .hvac-loading::after {
        animation: none !important;
        border-radius: 50% !important;
        border: 2px solid rgba(0, 0, 0, 0.2) !important;
        border-top-color: #333 !important;
    }

    /* Disable focus pulse animation */
    .hvac-button:focus,
.hvac-email-submit:focus,
    .hvac-content button[type="submit"]:focus {
        animation: none !important;
    }

    /* Ensure smooth scrolling is disabled */
    html {
        scroll-behavior: auto !important;
    }

    /* Disable CSS Grid/Flexbox animations if any */
    .hvac-dashboard-stats .hvac-stat-card:nth-child(n),
    .hvac-event-summary-stats .hvac-event-stat-card:nth-child(n) {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* Provide alternative visual feedback for reduced motion users */
@media (prefers-reduced-motion: reduce) {
    /* Enhanced border feedback instead of transform */
    .hvac-content button:hover,
    .hvac-content input[type="submit"]:hover,
    .hvac-content a:hover {
        outline: 2px solid var(--hvac-primary, #0274be) !important;
        outline-offset: 2px !important;
    }

    /* Enhanced color changes for interactive elements */
    .hvac-attendee-item:hover {
        background-color: var(--hvac-primary-light, #e6f3fb) !important;
        border-left: 4px solid var(--hvac-primary, #0274be) !important;
    }

    /* Static loading indicator */
    .hvac-loading {
        opacity: 0.7 !important;
    }

    .hvac-loading::after {
        content: "Loading..." !important;
        display: inline-block !important;
        font-size: 12px !important;
        color: #666 !important;
        border: none !important;
        background: none !important;
        border-radius: 0 !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
        margin-left: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hvac-content *:focus {
        -webkit-transition: none;
        -webkit-animation: none;
        transition: none;
        animation: none;
    }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-delay: 0s !important;
        transition-duration: 0.001s !important;
    }

    .hvac-content .hvac-animate-fade-in,
    .hvac-content .hvac-animate-scale-up,
    .hvac-content .hvac-animate-slide-in-right,
    .hvac-content .hvac-animate-slide-in-left,
    .hvac-content .hvac-animate-slide-in-bottom,
    .hvac-content .hvac-dashboard-stats .hvac-stat-card,
    .hvac-content .hvac-event-summary-stats .hvac-event-stat-card {
        opacity: 1;
    }
}

/* Focus Management Styles - WCAG 2.1 Compliance */
/* Added for keyboard accessibility and screen reader support */

/* Button Focus Styles */
.hvac-button:focus,
.hvac-content .button:focus,
.hvac-content button:focus,
.hvac-content input[type="submit"]:focus,
.hvac-email-submit:focus,
.hvac-filter-submit:focus,
.hvac-certificate-actions button:focus,
.hvac-certificate-actions a:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/* Input Focus Styles */
.hvac-form-input:focus,
.hvac-content input[type="text"]:focus,
.hvac-content input[type="email"]:focus,
.hvac-content input[type="password"]:focus,
.hvac-content input[type="url"]:focus,
.hvac-content textarea:focus,
.hvac-content select:focus,
.hvac-email-form-row input:focus,
.hvac-email-form-row textarea:focus,
.hvac-filter-group input:focus,
.hvac-filter-group select:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    border-color: #005fcc;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
}

/* Link Focus Styles */
.hvac-content a:focus,
.hvac-event-link:focus,
.hvac-certificate-link:focus,
.hvac-attendee-profile-icon:focus,
.hvac-dashboard-nav a:focus,
.hvac-email-navigation a:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    text-decoration: underline;
    background-color: rgba(0, 95, 204, 0.1);
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

/* Interactive Element Focus Styles */
.hvac-attendee-checkbox:focus,
.hvac-select-all-container input[type="checkbox"]:focus,
.hvac-modal-close:focus,
.hvac-certificate-table tr:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .hvac-content *:focus {
        outline: 3px solid #000000;
        outline-offset: 2px;
        background-color: #ffff00;
        color: #000000;
    }
}

/* Focus-visible polyfill support */

/* Reset focus for mouse users while preserving keyboard accessibility */
.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Ensure focus is visible for keyboard users */
.js-focus-visible .focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

/* Feature Detection Support */
@supports not (display: flex) {
    .hvac-content [class*="flex"] {
        display: table-cell;
        vertical-align: middle;
    }
}

@supports not (display: grid) {
    .hvac-content [class*="grid"] {
        display: block;
        overflow: hidden;
    }

    .hvac-content [class*="grid"] > * {
        float: left;
        width: 50%;
    }
}