/* =========================================================
   BIG THINGS — GLOBAL MOTION SYSTEM
   Elementor Free
   ========================================================= */


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

:root{

    --bt-black:#080808;
    --bt-white:#FBFBFB;

    --bt-green:#9BCF4B;
    --bt-red:#E95A5A;

    --bt-ease:cubic-bezier(.16,1,.3,1);

    --bt-duration:.8s;

}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

html{

    scroll-behavior:smooth;

}


body{

    overflow-x:hidden;

}


/* =========================================================
   SELECTION
   ========================================================= */

::selection{

    background:#080808;

    color:#fff;

}


/* =========================================================
   LINKS
   ========================================================= */

a{

    transition:
        color .3s ease,
        opacity .3s ease;

}


/* =========================================================
   ELEMENTOR
   ========================================================= */

.elementor-widget-container{

    overflow:visible;

}


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

.bt-reveal{

    opacity:0;

    transform:
        translateY(60px);

    transition:
        opacity .9s var(--bt-ease),
        transform .9s var(--bt-ease);

}


.bt-reveal.bt-visible{

    opacity:1;

    transform:
        translateY(0);

}


/* =========================================================
   REVEAL LEFT
   ========================================================= */

.bt-reveal-left{

    opacity:0;

    transform:
        translateX(-70px);

    transition:
        opacity .9s var(--bt-ease),
        transform .9s var(--bt-ease);

}


.bt-reveal-left.bt-visible{

    opacity:1;

    transform:
        translateX(0);

}


/* =========================================================
   REVEAL RIGHT
   ========================================================= */

.bt-reveal-right{

    opacity:0;

    transform:
        translateX(70px);

    transition:
        opacity .9s var(--bt-ease),
        transform .9s var(--bt-ease);

}


.bt-reveal-right.bt-visible{

    opacity:1;

    transform:
        translateX(0);

}


/* =========================================================
   SCALE REVEAL
   ========================================================= */

.bt-scale{

    opacity:0;

    transform:
        scale(.92);

    transition:
        opacity 1s var(--bt-ease),
        transform 1s var(--bt-ease);

}


.bt-scale.bt-visible{

    opacity:1;

    transform:
        scale(1);

}


/* =========================================================
   TEXT REVEAL
   ========================================================= */

.bt-text-reveal{

    opacity:0;

    transform:
        translateY(35px);

    clip-path:
        inset(100% 0 0 0);

    transition:
        opacity .7s ease,
        transform .9s var(--bt-ease),
        clip-path 1s var(--bt-ease);

}


.bt-text-reveal.bt-visible{

    opacity:1;

    transform:
        translateY(0);

    clip-path:
        inset(0 0 0 0);

}


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

.bt-stagger > *{

    opacity:0;

    transform:
        translateY(35px);

    transition:
        opacity .7s var(--bt-ease),
        transform .8s var(--bt-ease);

}


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

    transition-delay:.05s;

}


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

    transition-delay:.12s;

}


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

    transition-delay:.19s;

}


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

    transition-delay:.26s;

}


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

    transition-delay:.33s;

}


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

    transition-delay:.40s;

}


.bt-stagger.bt-visible > *{

    opacity:1;

    transform:
        translateY(0);

}


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

.bt-section-reveal{

    opacity:0;

    transform:
        translateY(50px);

    transition:
        opacity 1s var(--bt-ease),
        transform 1s var(--bt-ease);

}


.bt-section-reveal.bt-visible{

    opacity:1;

    transform:
        translateY(0);

}


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

.bt-image-reveal{

    overflow:hidden;

}


.bt-image-reveal img{

    display:block;

    width:100%;

    transform:
        scale(1.12);

    transition:
        transform 1.4s var(--bt-ease);

}


.bt-image-reveal.bt-visible img{

    transform:
        scale(1);

}


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

.bt-image-hover{

    overflow:hidden;

}


.bt-image-hover img{

    transition:
        transform 1s var(--bt-ease);

}


.bt-image-hover:hover img{

    transform:
        scale(1.06);

}


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

.bt-parallax{

    will-change:
        transform;

}


/* =========================================================
   GLOBAL CARDS
   ========================================================= */

.bt-card{

    transition:
        transform .6s var(--bt-ease),
        background .4s ease,
        color .4s ease;

}


.bt-card:hover{

    transform:
        translateY(-8px);

}


/* =========================================================
   LINKS / ARROWS
   ========================================================= */

.bt-arrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

}


.bt-arrow span{

    display:inline-block;

    transition:
        transform .4s var(--bt-ease);

}


.bt-arrow:hover span{

    transform:
        translateX(8px);

}


/* =========================================================
   UNDERLINE ANIMATION
   ========================================================= */

.bt-link{

    position:relative;

    text-decoration:none;

}


.bt-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:100%;

    height:1px;

    background:currentColor;

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform .5s var(--bt-ease);

}


.bt-link:hover::after{

    transform:
        scaleX(1);

    transform-origin:
        left;

}


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

.bt-button{

    position:relative;

    overflow:hidden;

    transition:
        color .35s ease,
        background .35s ease;

}


.bt-button::before{

    content:"";

    position:absolute;

    inset:0;

    background:#080808;

    transform:
        translateY(100%);

    transition:
        transform .45s var(--bt-ease);

    z-index:0;

}


.bt-button:hover::before{

    transform:
        translateY(0);

}


.bt-button > *{

    position:relative;

    z-index:1;

}


/* =========================================================
   HORIZONTAL LINE
   ========================================================= */

.bt-line{

    width:100%;

    height:1px;

    background:#111;

    transform:
        scaleX(0);

    transform-origin:left;

    transition:
        transform 1s var(--bt-ease);

}


.bt-line.bt-visible{

    transform:
        scaleX(1);

}


/* =========================================================
   BIG TYPOGRAPHY HOVER
   ========================================================= */

.bt-big-hover{

    transition:
        letter-spacing .6s var(--bt-ease),
        transform .6s var(--bt-ease);

}


.bt-big-hover:hover{

    letter-spacing:-.04em;

    transform:
        translateX(8px);

}


/* =========================================================
   MARQUEE
   ========================================================= */

.bt-marquee{

    overflow:hidden;

    white-space:nowrap;

}


.bt-marquee-track{

    display:inline-flex;

    width:max-content;

    animation:
        btMarquee 25s linear infinite;

}


@keyframes btMarquee{

    from{

        transform:
            translateX(0);

    }

    to{

        transform:
            translateX(-50%);

    }

}


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

.bt-float{

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

}


@keyframes btFloat{

    0%,
    100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-10px);

    }

}


/* =========================================================
   ROTATION
   ========================================================= */

.bt-rotate{

    animation:
        btRotate 18s linear infinite;

}


@keyframes btRotate{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   CURSOR HOVER SCALE
   ========================================================= */

.bt-cursor-scale{

    transition:
        transform .4s var(--bt-ease);

}


.bt-cursor-scale:hover{

    transform:
        scale(1.03);

}


/* =========================================================
   HEADER MOTION
   ========================================================= */

#bt-header{

    transition:
        transform .45s var(--bt-ease),
        background .35s ease;

}


/* HEADER SCROLLED */

#bt-header.bt-scrolled{

    background:
        rgba(247,247,245,.94);

    backdrop-filter:
        blur(12px);

}


/* =========================================================
   SERVICES CARDS
   ========================================================= */

.bt-service-card{

    transition:
        transform .5s var(--bt-ease),
        background .4s ease,
        color .4s ease,
        padding .5s var(--bt-ease);

}


.bt-service-card:hover{

    transform:
        translateY(-4px);

}


/* =========================================================
   WORK ITEMS
   ========================================================= */

.bt-work-item{

    overflow:hidden;

}


.bt-work-item img{

    transition:
        transform 1.2s var(--bt-ease);

}


.bt-work-item:hover img{

    transform:
        scale(1.07);

}


.bt-work-item .bt-work-title{

    transition:
        transform .5s var(--bt-ease);

}


.bt-work-item:hover .bt-work-title{

    transform:
        translateX(10px);

}


/* =========================================================
   NEWS ITEMS
   ========================================================= */

.bt-news-item{

    transition:
        padding-left .5s var(--bt-ease),
        background .4s ease;

}


.bt-news-item:hover{

    padding-left:20px;

}


/* =========================================================
   SMOOTH BODY
   ========================================================= */

body{

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

    .bt-reveal{

        transform:
            translateY(35px);

    }


    .bt-reveal-left,
    .bt-reveal-right{

        transform:
            translateY(35px);

    }


    .bt-parallax{

        transform:none !important;

    }


    .bt-float{

        animation:none;

    }


    .bt-service-card:hover{

        transform:none;

    }


    .bt-work-item:hover img{

        transform:none;

    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    html{

        scroll-behavior:auto;

    }


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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}