/* ==========================================================================
   Avalon Technology Group — Scroll Animation Styles
   Approach: CSS transitions triggered by JS adding .avalon-visible class
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE HIDDEN STATES
   Elements start invisible and translated down. JS adds .avalon-visible
   when they enter the viewport via IntersectionObserver.
   -------------------------------------------------------------------------- */

/* Sections (skip the first/hero section on each page) */
.breakdance-section.avalon-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Columns inside grids */
.breakdance-column.avalon-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Headings inside content sections */
.avalon-animate-heading {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Icon boxes */
.bde-icon-box.avalon-animate {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Posts loop items (case studies, testimonials, compliance cards) */
.ee-post.avalon-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Buttons */
.bde-button.avalon-animate {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* Logo list */
.bde-logo-list.avalon-animate {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

/* Text blocks */
.bde-text.avalon-animate {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Heading elements */
.bde-heading.avalon-animate {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Image elements */
.bde-image.avalon-animate {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Contact forms */
.breakdance-form.avalon-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Footer section — disabled to prevent white space */

/* 404 heading special zoom */
.avalon-zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* --------------------------------------------------------------------------
   2. VISIBLE STATE — triggered by IntersectionObserver
   -------------------------------------------------------------------------- */

.avalon-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* --------------------------------------------------------------------------
   3. HERO PARALLAX — subtle background movement
   -------------------------------------------------------------------------- */

.avalon-parallax-hero {
    will-change: transform;
    transition: none; /* Parallax is continuous, no transition needed */
}

/* --------------------------------------------------------------------------
   4. ACCESSIBILITY — respect reduced motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .avalon-animate,
    .avalon-animate-heading,
    .avalon-zoom-in,
    .breakdance-section.avalon-animate,
    .breakdance-column.avalon-animate,
    .bde-icon-box.avalon-animate,
    .ee-post.avalon-animate,
    .bde-button.avalon-animate,
    .bde-logo-list.avalon-animate,
    .bde-text.avalon-animate,
    .bde-heading.avalon-animate,
    .bde-image.avalon-animate,
    .breakdance-form.avalon-animate,
    .bde-footer.avalon-animate,
    footer.avalon-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .avalon-parallax-hero {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   5. MOBILE — disable all animations below 768px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .avalon-animate,
    .avalon-animate-heading,
    .avalon-zoom-in,
    .breakdance-section.avalon-animate,
    .breakdance-column.avalon-animate,
    .bde-icon-box.avalon-animate,
    .ee-post.avalon-animate,
    .bde-button.avalon-animate,
    .bde-logo-list.avalon-animate,
    .bde-text.avalon-animate,
    .bde-heading.avalon-animate,
    .bde-image.avalon-animate,
    .breakdance-form.avalon-animate,
    .bde-footer.avalon-animate,
    footer.avalon-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .avalon-parallax-hero {
        transform: none !important;
    }
}


/* --------------------------------------------------------------------------
   6. POPUP FIX — prevent hidden popups from taking up document flow space
   -------------------------------------------------------------------------- */

.breakdance .bde-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}