/*=========================================================
NOZOMIC PILLOWCASE
ANIMATION.CSS
PART 1
=========================================================*/

/* =========================
   Base Transition
========================= */

*{

    transition:
    color .3s ease,
    background-color .3s ease,
    border-color .3s ease,
    transform .35s ease,
    opacity .35s ease,
    box-shadow .35s ease;

}

/* =========================
   Loader
========================= */

.page-loader{

    animation:loaderFade .8s ease forwards;

    animation-delay:1.2s;

}

.loader-logo{

    animation:loaderPulse 1.8s infinite ease-in-out;

}

/* =========================
   Hero
========================= */

.badge{

    animation:fadeDown .8s ease both;

}

.hero h1{

    animation:fadeUp .9s ease both;

    animation-delay:.15s;

}

.hero p{

    animation:fadeUp .9s ease both;

    animation-delay:.35s;

}

.hero-rating{

    animation:fadeUp .9s ease both;

    animation-delay:.55s;

}

.hero-buttons{

    animation:fadeUp .9s ease both;

    animation-delay:.75s;

}

.hero-icons{

    animation:fadeUp 1s ease both;

    animation-delay:.95s;

}

.hero-image{

    animation:zoomIn 1.2s ease both;

    animation-delay:.3s;

}

/* =========================
   Floating Cards
========================= */

.card-1{

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

}

.card-2{

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

}

/* =========================
   Scroll Indicator
========================= */

.scroll-indicator{

    animation:fadeUp 1s ease both;

    animation-delay:1.5s;

}

.scroll-indicator span::before{

    animation:scrollWheel 2s infinite;

}

/* =========================
   Hover Effects
========================= */

.btn:hover{

    transform:translateY(-5px);

}

.hero-image img:hover{

    transform:scale(1.02);

}

.problem-image img:hover{

    transform:scale(1.03);

}

.material-image img:hover{

    transform:scale(1.03);

}

.review-card:hover{

    transform:translateY(-10px);

}

.collection-card:hover{

    transform:translateY(-12px);

}

.color-item:hover span{

    transform:scale(1.12);

}

.benefit-card:hover{

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.problem-card:hover{

    box-shadow:0 25px 60px rgba(0,0,0,.10);

}

/* =========================
   Fade Classes
========================= */

.fade-up{

    opacity:0;

    transform:translateY(60px);

}

.fade-down{

    opacity:0;

    transform:translateY(-60px);

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

}

.zoom-in{

    opacity:0;

    transform:scale(.92);

}

.rotate-in{

    opacity:0;

    transform:rotate(5deg) scale(.95);

}

/* =========================
   Active
========================= */

.fade-up.active,

.fade-down.active,

.fade-left.active,

.fade-right.active,

.zoom-in.active,

.rotate-in.active{

    opacity:1;

    transform:none;

}

/* =========================
   Navigation
========================= */

.header.scrolled{

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

    box-shadow:0 12px 40px rgba(0,0,0,.06);

}

.nav a{

    position:relative;

}

.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.nav a:hover::after{

    width:100%;

}

/*=========================================================
ANIMATION.CSS
PART 2
=========================================================*/

/* =========================
   Keyframes
========================= */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-50px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(50px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;
        transform:scale(.88);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes loaderPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes loaderFade{

    to{

        opacity:0;
        visibility:hidden;

    }

}

@keyframes floatCardOne{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatCardTwo{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(14px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatingImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes scrollWheel{

    0%{

        opacity:0;

        top:8px;

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        top:28px;

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes shine{

    0%{

        left:-120%;

    }

    100%{

        left:120%;

    }

}

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes blurIn{

    from{

        filter:blur(10px);

        opacity:0;

    }

    to{

        filter:blur(0);

        opacity:1;

    }

}

@keyframes scaleBounce{

    0%{

        transform:scale(.85);

    }

    60%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/* =========================
   Hero Image Floating
========================= */

.hero-image img{

    animation:floatingImage 10s ease-in-out infinite;

}

/* =========================
   Button Shine
========================= */

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60px;

    height:100%;

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

    transform:skewX(-25deg);

}

.btn-primary:hover::before{

    animation:shine .8s linear;

}

/* =========================
   Trust Items
========================= */

.trust-item{

    animation:fadeUp .8s ease both;

}

.trust-item:nth-child(2){

    animation-delay:.15s;

}

.trust-item:nth-child(3){

    animation-delay:.3s;

}

.trust-item:nth-child(4){

    animation-delay:.45s;

}

/* =========================
   Benefit Cards
========================= */

.benefit-card{

    animation:fadeUp .8s ease both;

}

.benefit-card:nth-child(2){

    animation-delay:.1s;

}

.benefit-card:nth-child(3){

    animation-delay:.2s;

}

.benefit-card:nth-child(4){

    animation-delay:.3s;

}

.benefit-card:nth-child(5){

    animation-delay:.4s;

}

.benefit-card:nth-child(6){

    animation-delay:.5s;

}

/*=========================================================
ANIMATION.CSS
PART 3
=========================================================*/

/* =========================
   Collection Cards
========================= */

.collection-card{

    animation:fadeUp .9s ease both;

}

.collection-card:nth-child(2){

    animation-delay:.15s;

}

.collection-card:nth-child(3){

    animation-delay:.30s;

}

/* =========================
   Gallery
========================= */

.gallery-grid div{

    overflow:hidden;

}

.gallery-grid img{

    transition:
    transform .8s ease,
    filter .4s ease;

}

.gallery-grid div:hover img{

    transform:scale(1.08);

    filter:brightness(.92);

}

/* =========================
   Review Cards
========================= */

.review-card{

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.review-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

/* =========================
   FAQ
========================= */

.faq-item{

    transition:
    transform .3s ease,
    box-shadow .3s ease;

}

.faq-item:hover{

    transform:translateY(-3px);

}

.faq-question{

    transition:background .3s ease;

}

.faq-item.active .faq-question{

    background:#FAFAFA;

}

/* =========================
   CTA
========================= */

.cta-box{

    animation:fadeUp 1s ease both;

}

.cta-box .btn-primary{

    animation:pulse 2.5s infinite;

}

/* =========================
   Footer
========================= */

.footer a{

    transition:
    color .3s ease,
    padding-left .3s ease;

}

/* =========================
   Mobile Buy Bar
========================= */

.mobile-buy-bar{

    animation:slideUpBar .5s ease;

}

@keyframes slideUpBar{

    from{

        transform:translateY(100%);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

/* =========================
   Generic Reveal Delay Helpers
========================= */

.delay-100{

    animation-delay:.1s!important;

}

.delay-200{

    animation-delay:.2s!important;

}

.delay-300{

    animation-delay:.3s!important;

}

.delay-400{

    animation-delay:.4s!important;

}

.delay-500{

    animation-delay:.5s!important;

}

.delay-600{

    animation-delay:.6s!important;

}

.delay-700{

    animation-delay:.7s!important;

}

.delay-800{

    animation-delay:.8s!important;

}

/* =========================
   Reduced Motion Accessibility
========================= */

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

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==========================
END OF ANIMATION.CSS
==========================*/