/*
|--------------------------------------------------------------------------
| Scroll Reveal System
|--------------------------------------------------------------------------
*/

html.js-enabled [data-reveal] {
    opacity: 0;
    will-change: opacity, transform, filter;
    transition:
        opacity 700ms ease,
        transform 700ms ease,
        filter 700ms ease;
}

html.js-enabled [data-reveal="fade-up"] {
    transform: translateY(42px);
}

html.js-enabled [data-reveal="fade-down"] {
    transform: translateY(-42px);
}

html.js-enabled [data-reveal="fade-left"] {
    transform: translateX(48px);
}

html.js-enabled [data-reveal="fade-right"] {
    transform: translateX(-48px);
}

html.js-enabled [data-reveal="zoom-in"] {
    transform: scale(0.92);
}

html.js-enabled [data-reveal="blur-in"] {
    filter: blur(12px);
    transform: translateY(24px);
}

html.js-enabled [data-reveal].is-revealed {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

/*
|--------------------------------------------------------------------------
| Reveal Delay Utilities
|--------------------------------------------------------------------------
*/

[data-reveal-delay="100"] {
    transition-delay: 100ms !important;
}

[data-reveal-delay="200"] {
    transition-delay: 200ms !important;
}

[data-reveal-delay="300"] {
    transition-delay: 300ms !important;
}

[data-reveal-delay="400"] {
    transition-delay: 400ms !important;
}

[data-reveal-delay="500"] {
    transition-delay: 500ms !important;
}

[data-reveal-delay="600"] {
    transition-delay: 600ms !important;
}

/*
|--------------------------------------------------------------------------
| Staggered Grids
|--------------------------------------------------------------------------
*/

html.js-enabled [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 650ms ease,
        transform 650ms ease;
}

html.js-enabled [data-reveal-group].is-revealed > * {
    opacity: 1;
    transform: none;
}

html.js-enabled [data-reveal-group].is-revealed > *:nth-child(1) {
    transition-delay: 0ms;
}

html.js-enabled [data-reveal-group].is-revealed > *:nth-child(2) {
    transition-delay: 90ms;
}

html.js-enabled [data-reveal-group].is-revealed > *:nth-child(3) {
    transition-delay: 180ms;
}

html.js-enabled [data-reveal-group].is-revealed > *:nth-child(4) {
    transition-delay: 270ms;
}

html.js-enabled [data-reveal-group].is-revealed > *:nth-child(5) {
    transition-delay: 360ms;
}

html.js-enabled [data-reveal-group].is-revealed > *:nth-child(6) {
    transition-delay: 450ms;
}

html.js-enabled [data-reveal-group].is-revealed > *:nth-child(n + 7) {
    transition-delay: 540ms;
}

/*
|--------------------------------------------------------------------------
| Subtle Floating Animation
|--------------------------------------------------------------------------
*/

[data-float-animation] {
    animation: vabcoreFloat 5.5s ease-in-out infinite;
}

[data-float-animation="slow"] {
    animation-duration: 7.5s;
}

[data-float-animation="reverse"] {
    animation-direction: reverse;
    animation-duration: 6.5s;
}

@keyframes vabcoreFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    html.js-enabled [data-reveal],
    html.js-enabled [data-reveal-group] > * {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }

    [data-float-animation] {
        animation: none;
    }
}