/* ==========================================
   GLOBAL TRANSITIONS
========================================== */

*{

    transition:

        background-color .3s ease,

        border-color .3s ease,

        color .3s ease;

}

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

/* ==========================================
   Scroll animation
========================================== */

.reveal{

    opacity:1;

    transform:none;

}

.js .reveal{

    opacity:0;

    transform:translateY(32px);

    transition:
        opacity .7s ease,
        transform .7s ease;

    will-change:opacity, transform;

}

.js .reveal.is-visible{

    opacity:1;

    transform:translateY(0);

}

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

.delay-1{

    transition-delay:.1s;

}

.delay-2{

    transition-delay:.2s;

}

.delay-3{

    transition-delay:.3s;

}

.delay-4{

    transition-delay:.4s;

}

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

.hero__content{

    animation:

        heroText

        .9s ease;

}

.hero__photo{

    animation:

        heroPhoto

        1.1s ease;

}

@keyframes heroText{

    from{

        opacity:0;

        transform:

            translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes heroPhoto{

    from{

        opacity:0;

        transform:

            translateX(50px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

.stat-card,
.format-card,
.price-card,
.advantage,
.review-card,
.result-card{

    overflow:hidden;

}

.stat-card::after,
.format-card::after,
.price-card::after,
.advantage::after,
.review-card::after,
.result-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(37,99,235,.05),

            transparent 55%

        );

    opacity:0;

    transition:

        opacity .35s ease;

    pointer-events:none;

}

.stat-card:hover::after,
.format-card:hover::after,
.price-card:hover::after,
.advantage:hover::after,
.review-card:hover::after,
.result-card:hover::after{

    opacity:1;

}

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

.button{

    position:relative;

    overflow:hidden;

}

.button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transition:left .7s ease;

}

.button:hover::before{

    left:140%;

}

/* ==========================================
   HERO PHOTO
========================================== */

.photo-card{

    animation:

        floating

        6s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================
   BADGES
========================================== */

.photo-card__badge,
.format-card__badge,
.price-card__badge{

    animation:

        pulse

        3.5s ease-in-out infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

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

.faq__list details{

    transition:

        box-shadow .3s ease,

        border-color .3s ease,

        transform .3s ease;

}

.faq__list details:hover{

    transform:translateY(-2px);

}

/* ==========================================
   NAVIGATION
========================================== */

.navigation a{

    transition:

        color .25s ease;

}

/* ==========================================
   SCROLL BUTTON
========================================== */

.scroll-top{

    transition:

        opacity .35s ease,

        transform .35s ease,

        background .35s ease;

}

.scroll-top:hover{

    transform:

        translateY(-5px)

        scale(1.05);

}

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

.review-card img{

    transition:

        transform .35s ease;

}

.review-card:hover img{

    transform:scale(1.03);

}

/* ==========================================
   FORM
========================================== */

.contacts__form input,

.contacts__form textarea{

    transition:

        border-color .3s ease,

        box-shadow .3s ease,

        transform .3s ease;

}

.contacts__form input:focus,

.contacts__form textarea:focus{

    transform:translateY(-2px);

}

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

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

*,
*::before,
*::after{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}