/**
 * 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% {
        transform: scale(1);
        opacity: 0.95;
    }
    100% {
        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);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    }
    70% {
        transform: scale(1.01);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* Slide-in animation */
@keyframes slide-in-right {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Common element transitions */

/* Card hover animation */
.hvac-card {
    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 {
    transform: translateY(-3px);
    box-shadow: var(--hvac-shadow-lg);
    border-color: var(--hvac-primary-light);
}

/* 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: var(--hvac-shadow-lg);
}

/* Button hover animations */
.hvac-button,
.hvac-content .button,
.hvac-content button[type="submit"],
.hvac-content input[type="submit"] {
    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 {
    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 {
    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 {
    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 {
    animation: fade-in 0.5s ease-out forwards;
}

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

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

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

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

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

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

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

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

.hvac-dashboard-stats .hvac-stat-card:nth-child(4) {
    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;
}

/* 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;
    }
}