/* ==========================================
   NRCube V1 Animation System
   ========================================== */

/* Pedestal Glow */

@keyframes pedestalGlow {

    0% {
        opacity: .55;
        transform: scaleX(1);
    }

    50% {
        opacity: .85;
        transform: scaleX(1.08);
    }

    100% {
        opacity: .55;
        transform: scaleX(1);
    }
}

.hero-pedestal {

    animation:
        pedestalGlow
        8s
        ease-in-out
        infinite;
}

/* Gold Glow */

@keyframes goldPulse {

    0% {
        opacity: .4;
    }

    50% {
        opacity: .8;
    }

    100% {
        opacity: .4;
    }
}

.hero-glow-gold {

    animation:
        goldPulse
        10s
        ease-in-out
        infinite;
}

/* Teal Glow */

@keyframes tealPulse {

    0% {
        opacity: .3;
    }

    50% {
        opacity: .65;
    }

    100% {
        opacity: .3;
    }
}

.hero-glow-teal {

    animation:
        tealPulse
        12s
        ease-in-out
        infinite;
}

/* Optical Trails */

@keyframes opticalFlow {

    from {
        transform:
            translateX(-100%);
    }

    to {
        transform:
            translateX(100%);
    }
}

.optical-trails::before {

    animation:
        opticalFlow
        14s
        linear
        infinite;
}

/* Product Cards */

@keyframes cardFloat {

    0% {
        transform:
            translateY(0);
    }

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

    100% {
        transform:
            translateY(0);
    }
}

.product-card:hover {

    animation:
        cardFloat
        2s
        ease-in-out
        infinite;
}

/* Scroll Indicator */

@keyframes scrollBounce {

    0% {
        transform:
            translate(-50%,0);
    }

    50% {
        transform:
            translate(-50%,10px);
    }

    100% {
        transform:
            translate(-50%,0);
    }
}

.hero-scroll {

    animation:
        scrollBounce
        2s
        infinite;
}

/* Navbar */

.site-header {

    transition:
        background 0.4s ease,
        box-shadow 0.4s ease;
}

.site-header.scrolled {

    box-shadow:
        0 10px 24px rgba(0,0,0,.3);
}