/* ==========================================================
   AURORA WEDDING WEBSITE
   ANIMATION.CSS
   Part 1 : Foundation
   Version : 1.0
========================================================== */



/* ==========================================================
   ANIMATION VARIABLES
========================================================== */

:root{

    --anim-fast:.35s;
    --anim-normal:.6s;
    --anim-slow:1s;
    --anim-xslow:1.6s;

    --ease-standard:cubic-bezier(.4,0,.2,1);
    --ease-soft:cubic-bezier(.25,.46,.45,.94);
    --ease-smooth:cubic-bezier(.22,1,.36,1);

}



/* ==========================================================
   PERFORMANCE
========================================================== */

.animate,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.blur-in,
.float{

    will-change:transform,opacity;

    backface-visibility:hidden;

    transform:translateZ(0);

}



/* ==========================================================
   INITIAL STATE
========================================================== */

.reveal{

    opacity:0;

    visibility:hidden;

}



/* ==========================================================
   ACTIVE STATE
========================================================== */

.reveal.active{

    opacity:1;

    visibility:visible;

}



/* ==========================================================
   FADE UP
========================================================== */

.fade-up.active{

    animation:fadeUp var(--anim-slow) var(--ease-smooth) forwards;

}



/* ==========================================================
   FADE DOWN
========================================================== */

.fade-down.active{

    animation:fadeDown var(--anim-slow) var(--ease-smooth) forwards;

}



/* ==========================================================
   FADE LEFT
========================================================== */

.fade-left.active{

    animation:fadeLeft var(--anim-slow) var(--ease-smooth) forwards;

}



/* ==========================================================
   FADE RIGHT
========================================================== */

.fade-right.active{

    animation:fadeRight var(--anim-slow) var(--ease-smooth) forwards;

}



/* ==========================================================
   ZOOM
========================================================== */

.zoom-in.active{

    animation:zoomIn var(--anim-normal) var(--ease-soft) forwards;

}



/* ==========================================================
   BLUR
========================================================== */

.blur-in.active{

    animation:blurReveal var(--anim-xslow) var(--ease-smooth) forwards;

}



/* ==========================================================
   FLOAT
========================================================== */

.float{

    animation:floating 6s ease-in-out infinite;

}



/* ==========================================================
   FADE UP
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ==========================================================
   FADE DOWN
========================================================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ==========================================================
   FADE LEFT
========================================================== */

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



/* ==========================================================
   FADE RIGHT
========================================================== */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



/* ==========================================================
   ZOOM IN
========================================================== */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/* ==========================================================
   BLUR REVEAL
========================================================== */

@keyframes blurReveal{

    from{

        opacity:0;

        filter:blur(12px);

        transform:translateY(24px);

    }

    to{

        opacity:1;

        filter:blur(0);

        transform:translateY(0);

    }

}



/* ==========================================================
   FLOATING
========================================================== */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}



/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}

/* ==========================================================
   LOADER ANIMATION
========================================================== */



/* ==========================================================
   LOADER CONTAINER
========================================================== */

.loader{

    animation:loaderAppear .8s var(--ease-smooth) forwards;

}



/* ==========================================================
   LOADER LOGO
========================================================== */

.loader-logo{

    animation:

        logoReveal 1.4s var(--ease-smooth),

        logoFloat 4s ease-in-out infinite 1.4s;

}



/* ==========================================================
   LOADER TITLE
========================================================== */

.loader-title{

    animation:

        fadeUp var(--anim-slow) var(--ease-smooth) .35s both;

}



/* ==========================================================
   LOADER SUBTITLE
========================================================== */

.loader-subtitle{

    animation:

        fadeUp var(--anim-slow) var(--ease-smooth) .55s both;

}



/* ==========================================================
   LOADER PROGRESS
========================================================== */

.loader-progress{

    overflow:hidden;

}

.loader-progress-bar{

    transform-origin:left center;

    animation:

        progressFill 2.8s linear forwards;

}



/* ==========================================================
   LOADER GLOW
========================================================== */

.loader-glow{

    animation:

        loaderGlow 3.5s ease-in-out infinite;

}



/* ==========================================================
   LOADER EXIT
========================================================== */

.loader.hide{

    animation:

        loaderFadeOut .9s var(--ease-standard) forwards;

}



/* ==========================================================
   LOGO REVEAL
========================================================== */

@keyframes logoReveal{

    0%{

        opacity:0;

        transform:scale(.75) rotate(-8deg);

        filter:blur(12px);

    }

    60%{

        opacity:1;

        transform:scale(1.05);

        filter:blur(0);

    }

    100%{

        opacity:1;

        transform:scale(1);

        filter:blur(0);

    }

}



/* ==========================================================
   LOGO FLOAT
========================================================== */

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}



/* ==========================================================
   LOADER APPEAR
========================================================== */

@keyframes loaderAppear{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ==========================================================
   LOADER FADE OUT
========================================================== */

@keyframes loaderFadeOut{

    0%{

        opacity:1;

        visibility:visible;

    }

    100%{

        opacity:0;

        visibility:hidden;

        pointer-events:none;

    }

}



/* ==========================================================
   PROGRESS FILL
========================================================== */

@keyframes progressFill{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

}



/* ==========================================================
   LOADER GLOW
========================================================== */

@keyframes loaderGlow{

    0%{

        opacity:.25;

        transform:scale(.95);

    }

    50%{

        opacity:.8;

        transform:scale(1.05);

    }

    100%{

        opacity:.25;

        transform:scale(.95);

    }

}



/* ==========================================================
   BODY AFTER LOADER
========================================================== */

body.loaded #hero{

    animation:

        fadeUp 1s var(--ease-smooth);

}



/* ==========================================================
   BODY READY
========================================================== */

body.loaded .section{

    animation:

        sectionReveal .9s var(--ease-soft);

}



/* ==========================================================
   SECTION REVEAL
========================================================== */

@keyframes sectionReveal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ==========================================================
   HERO ANIMATION
========================================================== */



/* ==========================================================
   HERO CONTAINER
========================================================== */

.hero-container{

    animation:

        heroReveal 1.2s var(--ease-smooth);

}



/* ==========================================================
   HERO OVERLINE
========================================================== */

.hero-overline{

    animation:

        fadeDown .9s var(--ease-smooth) .2s both;

}



/* ==========================================================
   HERO TITLE
========================================================== */

.hero-title{

    animation:

        titleReveal 1.4s var(--ease-smooth) .35s both;

}



/* ==========================================================
   HERO DESCRIPTION
========================================================== */

.hero-description{

    animation:

        fadeUp 1s var(--ease-smooth) .55s both;

}



/* ==========================================================
   HERO DATE
========================================================== */

.hero-date,
.hero-wedding-date{

    animation:

        fadeUp 1s var(--ease-smooth) .75s both;

}



/* ==========================================================
   HERO BUTTON
========================================================== */

.hero-action{

    animation:

        fadeUp 1s var(--ease-smooth) .95s both;

}



/* ==========================================================
   HERO IMAGE
========================================================== */

.hero-image{

    animation:

        imageReveal 1.6s var(--ease-smooth) .4s both;

}



/* ==========================================================
   HERO IMAGE FLOAT
========================================================== */

.hero-image img{

    animation:

        heroFloat 8s ease-in-out infinite;

}



/* ==========================================================
   HERO GLOW
========================================================== */

.hero-image::before{

    animation:

        heroGlow 6s ease-in-out infinite;

}



/* ==========================================================
   HERO SCROLL INDICATOR
========================================================== */

.scroll-indicator{

    animation:

        scrollFade 1.5s var(--ease-soft) 1.4s both,

        scrollBounce 2.4s ease-in-out infinite 2s;

}



/* ==========================================================
   HERO REVEAL
========================================================== */

@keyframes heroReveal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ==========================================================
   TITLE REVEAL
========================================================== */

@keyframes titleReveal{

    0%{

        opacity:0;

        transform:translateY(40px);

        letter-spacing:6px;

        filter:blur(10px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

        letter-spacing:normal;

        filter:blur(0);

    }

}



/* ==========================================================
   IMAGE REVEAL
========================================================== */

@keyframes imageReveal{

    0%{

        opacity:0;

        transform:scale(.88);

        filter:blur(14px);

    }

    100%{

        opacity:1;

        transform:scale(1);

        filter:blur(0);

    }

}



/* ==========================================================
   HERO FLOAT
========================================================== */

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    25%{

        transform:translateY(-8px);

    }

    50%{

        transform:translateY(-14px);

    }

    75%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}



/* ==========================================================
   HERO GLOW
========================================================== */

@keyframes heroGlow{

    0%{

        opacity:.30;

        transform:scale(.96);

    }

    50%{

        opacity:.75;

        transform:scale(1.05);

    }

    100%{

        opacity:.30;

        transform:scale(.96);

    }

}



/* ==========================================================
   SCROLL FADE
========================================================== */

@keyframes scrollFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ==========================================================
   SCROLL BOUNCE
========================================================== */

@keyframes scrollBounce{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================================
   SCROLL REVEAL ANIMATION
========================================================== */



/* ==========================================================
   DEFAULT REVEAL
========================================================== */

.reveal{

    opacity:0;

    visibility:hidden;

    transition:

        opacity .35s ease,

        visibility .35s ease;

}



/* ==========================================================
   ACTIVE
========================================================== */

.reveal.active{

    opacity:1;

    visibility:visible;

}



/* ==========================================================
   DELAY UTILITIES
========================================================== */

.delay-1{

    animation-delay:.15s !important;

}

.delay-2{

    animation-delay:.3s !important;

}

.delay-3{

    animation-delay:.45s !important;

}

.delay-4{

    animation-delay:.6s !important;

}

.delay-5{

    animation-delay:.75s !important;

}



/* ==========================================================
   SECTION TITLE
========================================================== */

.section-title.reveal.active{

    animation:

        titleReveal 1s var(--ease-smooth) forwards;

}



/* ==========================================================
   SECTION SUBTITLE
========================================================== */

.section-subtitle.reveal.active{

    animation:

        fadeDown .9s var(--ease-soft) forwards;

}



/* ==========================================================
   SECTION DESCRIPTION
========================================================== */

.section-description.reveal.active{

    animation:

        fadeUp 1s var(--ease-smooth) forwards;

}



/* ==========================================================
   CARD REVEAL
========================================================== */

.story-card.reveal.active,
.event-card.reveal.active,
.gallery-item.reveal.active,
.wish-card.reveal.active,
.gift-card.reveal.active,
.count-box.reveal.active{

    animation:

        cardReveal .9s var(--ease-smooth) forwards;

}



/* ==========================================================
   RSVP
========================================================== */

#laso-rsvp.reveal.active{

    animation:

        zoomSoft 1s var(--ease-smooth) forwards;

}



/* ==========================================================
   IMAGE REVEAL
========================================================== */

.gallery-item img{

    transform:scale(1.04);

}

.gallery-item.reveal.active img{

    animation:

        imageSoftReveal 1.2s var(--ease-smooth) forwards;

}



/* ==========================================================
   CARD REVEAL
========================================================== */

@keyframes cardReveal{

    from{

        opacity:0;

        transform:translateY(40px) scale(.96);

        filter:blur(8px);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

        filter:blur(0);

    }

}



/* ==========================================================
   ZOOM SOFT
========================================================== */

@keyframes zoomSoft{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/* ==========================================================
   IMAGE SOFT REVEAL
========================================================== */

@keyframes imageSoftReveal{

    from{

        opacity:0;

        transform:scale(1.08);

        filter:blur(8px);

    }

    to{

        opacity:1;

        transform:scale(1);

        filter:blur(0);

    }

}



/* ==========================================================
   STAGGER SUPPORT
========================================================== */

.stagger>*{

    opacity:0;

}



.stagger.active>*{

    animation:

        fadeUp .9s var(--ease-smooth) forwards;

}



.stagger.active>*:nth-child(1){

    animation-delay:.1s;

}



.stagger.active>*:nth-child(2){

    animation-delay:.2s;

}



.stagger.active>*:nth-child(3){

    animation-delay:.3s;

}



.stagger.active>*:nth-child(4){

    animation-delay:.4s;

}



.stagger.active>*:nth-child(5){

    animation-delay:.5s;

}



.stagger.active>*:nth-child(6){

    animation-delay:.6s;

}



/* ==========================================================
   PARALLAX READY
========================================================== */

.parallax-ready{

    transform:translateY(0);

    transition:

        transform .2s linear;

}

/* ==========================================================
   GALLERY ANIMATION
========================================================== */



/* ==========================================================
   GALLERY ITEM
========================================================== */

.gallery-item{

    transition:

        transform .55s var(--ease-smooth),

        box-shadow .55s var(--ease-smooth),

        border-color .55s var(--ease-smooth);

}



/* ==========================================================
   GALLERY IMAGE
========================================================== */

.gallery-item img{

    transition:

        transform .9s var(--ease-smooth),

        filter .9s var(--ease-smooth),

        opacity .6s ease;

}



/* ==========================================================
   GALLERY OVERLAY
========================================================== */

.gallery-item::before{

    transition:

        opacity .6s ease,

        backdrop-filter .6s ease;

}



/* ==========================================================
   GALLERY SHINE
========================================================== */

.gallery-item::after{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:60%;

    height:100%;

    pointer-events:none;

    background:

        linear-gradient(

            110deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transform:skewX(-18deg);

}



/* ==========================================================
   HOVER
========================================================== */

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 60px rgba(0,0,0,.28);

}



/* ==========================================================
   IMAGE HOVER
========================================================== */

.gallery-item:hover img{

    transform:scale(1.08);

    filter:brightness(1.05);

}



/* ==========================================================
   OVERLAY HOVER
========================================================== */

.gallery-item:hover::before{

    opacity:1;

    backdrop-filter:blur(2px);

}



/* ==========================================================
   SHINE HOVER
========================================================== */

.gallery-item:hover::after{

    animation:

        galleryShine 1.2s ease;

}



/* ==========================================================
   GALLERY OPEN
========================================================== */

.gallery-opening{

    animation:

        galleryOpen .45s var(--ease-smooth);

}



/* ==========================================================
   GALLERY CLOSE
========================================================== */

.gallery-closing{

    animation:

        galleryClose .35s var(--ease-standard);

}



/* ==========================================================
   LIGHTBOX IMAGE
========================================================== */

.lightbox-image{

    animation:

        lightboxZoom .5s var(--ease-smooth);

}



/* ==========================================================
   GALLERY SHINE
========================================================== */

@keyframes galleryShine{

    from{

        left:-140%;

    }

    to{

        left:170%;

    }

}



/* ==========================================================
   GALLERY OPEN
========================================================== */

@keyframes galleryOpen{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/* ==========================================================
   GALLERY CLOSE
========================================================== */

@keyframes galleryClose{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}



/* ==========================================================
   LIGHTBOX ZOOM
========================================================== */

@keyframes lightboxZoom{

    from{

        opacity:0;

        transform:scale(.9);

        filter:blur(10px);

    }

    to{

        opacity:1;

        transform:scale(1);

        filter:blur(0);

    }

}



/* ==========================================================
   LIGHTBOX BACKDROP
========================================================== */

@keyframes lightboxBackdrop{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ==========================================================
   LIGHTBOX EXIT
========================================================== */

@keyframes lightboxExit{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

/* ==========================================================
   INTERACTIVE ANIMATION
========================================================== */



/* ==========================================================
   BUTTON TRANSITION
========================================================== */

.btn-primary,
.btn-secondary,
.btn-outline{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s var(--ease-smooth),
        box-shadow .35s var(--ease-smooth),
        background .35s ease,
        color .35s ease;

}



/* ==========================================================
   BUTTON HOVER
========================================================== */

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover{

    transform:translateY(-3px);

}



/* ==========================================================
   BUTTON ACTIVE
========================================================== */

.btn-primary:active,
.btn-secondary:active,
.btn-outline:active{

    transform:scale(.97);

}



/* ==========================================================
   RIPPLE EFFECT
========================================================== */

.btn-ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    pointer-events:none;

    background:rgba(255,255,255,.35);

    animation:rippleEffect .7s ease-out forwards;

}



/* ==========================================================
   MUSIC BUTTON
========================================================== */

.music-button{

    transition:
        transform .35s var(--ease-smooth),
        box-shadow .35s var(--ease-smooth);

}



/* ==========================================================
   MUSIC PLAYING
========================================================== */

.music-button.playing{

    animation:
        musicRotate 6s linear infinite,
        musicPulse 2.5s ease-in-out infinite;

}



/* ==========================================================
   COUNTDOWN UPDATE
========================================================== */

.count-box.update{

    animation:
        countdownPulse .45s var(--ease-smooth);

}



/* ==========================================================
   CARD HOVER
========================================================== */

.story-card,
.event-card,
.gift-card,
.wish-card{

    transition:
        transform .4s var(--ease-smooth),
        box-shadow .4s var(--ease-smooth);

}



/* ==========================================================
   CARD FLOAT
========================================================== */

.card-float{

    animation:
        cardFloat 7s ease-in-out infinite;

}



/* ==========================================================
   SOFT GLOW
========================================================== */

.glow-soft{

    animation:
        glowSoft 4s ease-in-out infinite;

}



/* ==========================================================
   RIPPLE
========================================================== */

@keyframes rippleEffect{

    from{

        opacity:.6;

        transform:scale(0);

    }

    to{

        opacity:0;

        transform:scale(5);

    }

}



/* ==========================================================
   MUSIC ROTATE
========================================================== */

@keyframes musicRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/* ==========================================================
   MUSIC PULSE
========================================================== */

@keyframes musicPulse{

    0%{

        box-shadow:0 0 0 0 rgba(214,179,106,.35);

    }

    70%{

        box-shadow:0 0 0 16px rgba(214,179,106,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(214,179,106,0);

    }

}



/* ==========================================================
   COUNTDOWN PULSE
========================================================== */

@keyframes countdownPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}



/* ==========================================================
   CARD FLOAT
========================================================== */

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}



/* ==========================================================
   SOFT GLOW
========================================================== */

@keyframes glowSoft{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.08);

    }

    100%{

        filter:brightness(1);

    }

}

/* ==========================================================
   PREMIUM EFFECTS
========================================================== */



/* ==========================================================
   AURORA BACKGROUND
========================================================== */

.aurora-flow{

    animation:
        auroraFlow 18s ease-in-out infinite alternate;

}



/* ==========================================================
   GLASS REFLECTION
========================================================== */

.glass-reflection{

    position:relative;

    overflow:hidden;

}

.glass-reflection::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    pointer-events:none;

    background:

        linear-gradient(

            105deg,

            transparent,

            rgba(255,255,255,.10),

            transparent

        );

    transform:skewX(-22deg);

    animation:
        glassReflection 9s ease-in-out infinite;

}



/* ==========================================================
   GOLD GLOW
========================================================== */

.gold-glow{

    animation:
        goldGlow 5s ease-in-out infinite;

}



/* ==========================================================
   SOFT LIGHT
========================================================== */

.soft-light{

    animation:
        softLight 8s ease-in-out infinite;

}



/* ==========================================================
   FLOATING PARTICLE
========================================================== */

.particle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    animation:
        particleFloat 16s linear infinite;

}



/* ==========================================================
   GRADIENT SHIFT
========================================================== */

.gradient-shift{

    background-size:200% 200%;

    animation:
        gradientShift 14s ease infinite;

}



/* ==========================================================
   AURORA FLOW
========================================================== */

@keyframes auroraFlow{

    0%{

        transform:translate3d(0,0,0) scale(1);

    }

    50%{

        transform:translate3d(-2%,1%,0) scale(1.03);

    }

    100%{

        transform:translate3d(2%,-1%,0) scale(1);

    }

}



/* ==========================================================
   GLASS REFLECTION
========================================================== */

@keyframes glassReflection{

    0%{

        left:-140%;

    }

    100%{

        left:180%;

    }

}



/* ==========================================================
   GOLD GLOW
========================================================== */

@keyframes goldGlow{

    0%{

        box-shadow:0 0 0 rgba(214,179,106,0);

    }

    50%{

        box-shadow:0 0 26px rgba(214,179,106,.22);

    }

    100%{

        box-shadow:0 0 0 rgba(214,179,106,0);

    }

}



/* ==========================================================
   SOFT LIGHT
========================================================== */

@keyframes softLight{

    0%{

        opacity:.85;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.85;

    }

}



/* ==========================================================
   PARTICLE FLOAT
========================================================== */

@keyframes particleFloat{

    0%{

        transform:
            translateY(20px)
            translateX(0)
            scale(.8);

        opacity:0;

    }

    20%{

        opacity:.45;

    }

    80%{

        opacity:.45;

    }

    100%{

        transform:
            translateY(-120px)
            translateX(24px)
            scale(1.2);

        opacity:0;

    }

}



/* ==========================================================
   GRADIENT SHIFT
========================================================== */

@keyframes gradientShift{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}



/* ==========================================================
   GPU OPTIMIZATION
========================================================== */

.aurora-flow,
.glass-reflection::before,
.gold-glow,
.soft-light,
.particle,
.gradient-shift{

    will-change:
        transform,
        opacity,
        background-position;

    transform:translateZ(0);

}



/* ==========================================================
   REDUCED MOTION SUPPORT
========================================================== */

@media (prefers-reduced-motion:reduce){

    .aurora-flow,
    .glass-reflection::before,
    .gold-glow,
    .soft-light,
    .particle,
    .gradient-shift{

        animation:none !important;

    }

}