/*==================================================
            FALCON EFFECT SYSTEM v1.0
==================================================*/

:root{

    --effect-duration:.35s;

    --effect-ease:cubic-bezier(.22,.61,.36,1);

}


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

.fx{

    transition:

    all var(--effect-duration)

    var(--effect-ease);

}


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

.fx-card{

    transition:

    transform .4s var(--effect-ease),

    border-color .4s var(--effect-ease),

    background .4s var(--effect-ease),

    box-shadow .4s var(--effect-ease);

}

.fx-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,166,0,.18);

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

    box-shadow:

    0 18px 40px rgba(0,0,0,.28);

}


/*==================================================
            ICON
==================================================*/

.fx-icon{

    transition:

    transform .35s var(--effect-ease),

    box-shadow .35s var(--effect-ease),

    border-color .35s var(--effect-ease);

}

.fx-card:hover .fx-icon{

    transform:

    translateY(-3px)

    scale(1.05);

    border-color:

    rgba(255,166,0,.30);

    box-shadow:

    0 15px 30px

    rgba(255,145,0,.18);

}


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

.fx-title{

    transition:

    color .35s var(--effect-ease);

}

.fx-card:hover .fx-title{

    color:#ffb327;

}


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

.fx-text{

    transition:

    color .35s var(--effect-ease);

}

.fx-card:hover .fx-text{

    color:#dddddd;

}


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

.fx-button{

    transition:

    transform .35s,

    box-shadow .35s,

    background .35s,

    border-color .35s;

}

.fx-button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px

    rgba(255,145,0,.30);

}


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

.fx-glass{

    transition:

    all .35s;

}

.fx-glass:hover{

    background:

    rgba(255,145,0,.08);

    border-color:#ff9800;

}


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

.fx-image{

    overflow:hidden;

}

.fx-image img{

    transition:

    transform .7s var(--effect-ease);

}

.fx-image:hover img{

    transform:scale(1.08);

}


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

.fx-shine{

    position:relative;

    overflow:hidden;

}

.fx-shine::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.08),

        transparent

    );

    transform:translateX(-140%);

    transition:.9s;

}

.fx-shine:hover::after{

    transform:translateX(140%);

}


/*==================================================
            BORDER GLOW
==================================================*/

.fx-border{

    transition:

    border-color .35s,

    box-shadow .35s;

}

.fx-border:hover{

    border-color:

    rgba(255,166,0,.35);

    box-shadow:

    0 0 35px

    rgba(255,145,0,.10);

}


/*==================================================
            LINK
==================================================*/

.fx-link{

    position:relative;

    transition:.35s;

}

.fx-link::after{

    content:"";

    position:absolute;

    bottom:-6px;

    left:0;

    width:0;

    height:2px;

    background:#ff9800;

    transition:.35s;

}

.fx-link:hover{

    color:#ff9800;

}

.fx-link:hover::after{

    width:100%;

}


/*==================================================
            SOCIAL
==================================================*/

.fx-social{

    transition:.35s;

}

.fx-social:hover{

    transform:

    translateY(-4px)

    rotate(8deg);

}


/*==================================================
            PRODUCT
==================================================*/

.fx-product{

    transition:

    transform .45s,

    box-shadow .45s;

}

.fx-product:hover{

    transform:

    translateY(-10px)

    scale(1.02);

    box-shadow:

    0 30px 60px

    rgba(0,0,0,.30);

}