/* ===== DRAG-UP ANIMATIONS ===== */
@keyframes dragUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ===== INITIAL HERO/CONTACT CTA ANIMATIONS - AUTO PLAY ===== */
.contact-cta-content {
    animation: dragUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.contact-cta-content h2 {
    animation: dragUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

.contact-cta-content p {
    animation: dragUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
}

.contact-cta-btn {
    animation: dragUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

/* ===== SCROLL-TRIGGERED ANIMATIONS ===== */
/* These will be triggered by JavaScript */
.contact-main .container {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact-form-container {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
}

.form-title {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}

.contact-info-container {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}

.info-title {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}

.contact-hero-content {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact-hero-title {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
}

.contact-hero-subtitle {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}

.footer-container {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-bottom {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}

/* Staggered animations for child elements */
.contact-form .form-group,
.contact-form .form-row {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.submit-button {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact-method {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.business-hours {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.emergency-contact {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-container > div {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ===== VISIBLE STATE ===== */
/* When element enters viewport */
.element-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Staggered delays for child elements when parent is visible */
.contact-form-container.element-visible .form-row:nth-child(1) {
    transition-delay: 0.1s;
}

.contact-form-container.element-visible .form-row:nth-child(2) {
    transition-delay: 0.2s;
}

.contact-form-container.element-visible .form-group:nth-child(3) {
    transition-delay: 0.3s;
}

.contact-form-container.element-visible .form-group:nth-child(4) {
    transition-delay: 0.4s;
}

.contact-form-container.element-visible .submit-button {
    transition-delay: 0.5s;
}

.contact-info-container.element-visible .contact-method:nth-child(1) {
    transition-delay: 0.1s;
}

.contact-info-container.element-visible .contact-method:nth-child(2) {
    transition-delay: 0.2s;
}

.contact-info-container.element-visible .contact-method:nth-child(3) {
    transition-delay: 0.3s;
}

.contact-info-container.element-visible .business-hours {
    transition-delay: 0.4s;
}

.contact-info-container.element-visible .emergency-contact {
    transition-delay: 0.5s;
}

.footer-container.element-visible > div:nth-child(1) {
    transition-delay: 0.1s;
}

.footer-container.element-visible > div:nth-child(2) {
    transition-delay: 0.2s;
}

.footer-container.element-visible > div:nth-child(3) {
    transition-delay: 0.3s;
}

/* ===== 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;
    }
    
    /* Show everything immediately for reduced motion */
    .contact-cta-content,
    .contact-cta-content h2,
    .contact-cta-content p,
    .contact-cta-btn,
    .contact-main .container,
    .contact-form-container,
    .form-title,
    .contact-info-container,
    .info-title,
    .contact-hero-content,
    .contact-hero-title,
    .contact-hero-subtitle,
    .footer-container,
    .footer-bottom,
    .contact-form .form-group,
    .contact-form .form-row,
    .submit-button,
    .contact-method,
    .business-hours,
    .emergency-contact,
    .footer-container > div {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* Add this - Footer element itself needs animation */
footer {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Footer visible state */
footer.element-visible {
    opacity: 1;
    transform: translateY(0);
}