/*==================================
        PRODUCTS SECTION
==================================*/

.products{

    position:relative;

}






/*==================================
        PRODUCTS GRID
==================================*/

.products-grid{

    width:100%;

    max-width:1280px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:28px;

}






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

.product-card{

    position:relative;

    border-radius:26px;

    overflow:hidden;

}






.product-link{

    position:relative;

    display:block;

    width:100%;

    aspect-ratio:1/1.15;

    overflow:hidden;

    border-radius:inherit;

    text-decoration:none;

}






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

.product-image{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:transform .6s cubic-bezier(.22,.61,.36,1);

}






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

.product-content{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    padding:18px;

}






/*==================================
        RESPONSIVE
==================================*/

@media (max-width:1200px){

    .products-grid{

        grid-template-columns:repeat(3,minmax(0,1fr));

        gap:24px;

    }

}






@media (max-width:768px){

    .products-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:16px;

    }

}






@media (max-width:480px){

    .products-grid{

        gap:12px;

    }



    .product-content{

        padding:12px;

    }

}
/*==================================
        PRODUCT NAME
==================================*/

.product-name{

    display:flex;

    align-items:center;

    max-width:70%;

    padding:12px 18px;

    border-radius:999px;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:

        0 12px 30px rgba(0,0,0,.28),

        inset 0 1px 0 rgba(255,255,255,.08);

    color:#fff;

    font-family:'IranYekan',sans-serif;

    font-size:15px;

    font-weight:700;

    line-height:1.4;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}






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

.product-action{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:

        0 12px 30px rgba(0,0,0,.28),

        inset 0 1px 0 rgba(255,255,255,.08);

    color:#ffffff;

    transition:.4s cubic-bezier(.22,.61,.36,1);

}






.product-action i{

    font-size:16px;

    transition:inherit;

}






/*==================================
        DARK GRADIENT
==================================*/

.product-link::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.60) 0%,

            rgba(0,0,0,.18) 35%,

            transparent 65%

        );

}
/*==================================
        PRODUCT TRANSITIONS
==================================*/

.product-card,
.product-name,
.product-action{

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s cubic-bezier(.22,.61,.36,1),
        background .45s ease,
        border-color .45s ease,
        opacity .45s ease;

}






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

.product-card:hover{

    transform:translateY(-10px);

}






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

.product-card:hover .product-image{

    transform:scale(1.08);

}






/*==================================
        NAME CAPSULE
==================================*/

.product-card:hover .product-name{

    transform:translateY(-6px);

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

    border-color:rgba(255,179,38,.28);

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.12);

}






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

.product-card:hover .product-action{

    transform:translateY(-6px) scale(1.08);

    background:linear-gradient(
        135deg,
        #ffb326,
        #ff8400
    );

    border-color:transparent;

    color:#111;

    box-shadow:
        0 16px 35px rgba(255,145,0,.35);

}






.product-card:hover .product-action i{

    transform:translateX(-3px);

}






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

.product-link::after{

    transition:opacity .45s ease;

}






.product-card:hover .product-link::after{

    opacity:1;

}






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

.product-card:active{

    transform:scale(.98);

}
/*==================================
        TABLET
==================================*/

@media (max-width:992px){

    .products-grid{

        gap:22px;

    }


    .product-link{

        aspect-ratio:1 / 1.18;

    }


    .product-content{

        padding:16px;

    }


    .product-name{

        padding:11px 15px;

        font-size:14px;

    }


    .product-action{

        width:46px;

        height:46px;

    }


    .product-action i{

        font-size:14px;

    }

}






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

@media (max-width:768px){

    .products-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:14px;

    }



    .product-link{

        aspect-ratio:1 / 1.25;

    }



    .product-content{

        padding:10px;

    }



    .product-name{

        max-width:75%;

        padding:9px 12px;

        border-radius:999px;

        font-size:12px;

    }



    .product-action{

        width:36px;

        height:36px;

    }



    .product-action i{

        font-size:12px;

    }

}






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

@media (max-width:420px){

    .products-grid{

        gap:10px;

    }



    .product-content{

        padding:8px;

    }



    .product-name{

        padding:8px 10px;

        font-size:11px;

    }



    .product-action{

        width:32px;

        height:32px;

    }



    .product-action i{

        font-size:11px;

    }

}






/*==================================
        TOUCH DEVICES
==================================*/

@media (hover:none){

    .product-card:hover{

        transform:none;

    }



    .product-card:hover .product-image{

        transform:none;

    }



    .product-card:hover .product-name{

        transform:none;

    }



    .product-card:hover .product-action{

        transform:none;

    }

}
/*==================================
        PRODUCTS FILTER
==================================*/

.products-filter{

    padding: 10px;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:60px;

}






/*==================================
        FILTER CONTAINER
==================================*/

.filter-container{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:max-content;

    max-width:100%;

    padding:8px;

}






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

.filter-btn{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:105px;

    height:48px;

    padding:0 24px;

    border:none;

    outline:none;

    cursor:pointer;

    background:transparent;

    color:rgba(255,255,255,.75);

    font-family:'IranYekan',sans-serif;

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

    border-radius:999px;

}
/*==================================
        FILTER GLASS
==================================*/

.filter-container{

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

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-radius:999px;

    box-shadow:

        0 15px 40px rgba(0,0,0,.28),

        inset 0 1px 0 rgba(255,255,255,.08);

}






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

.filter-btn{

    transition:

        color .35s ease,

        background .35s ease,

        border-color .35s ease,

        transform .35s ease,

        box-shadow .35s ease;

}






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

.filter-btn.active{

    color:#ffffff;

    background:

        linear-gradient(

            135deg,

            rgba(255,179,38,.22),

            rgba(255,132,0,.18)

        );

    border:1px solid rgba(255,179,38,.35);

    box-shadow:

        0 8px 25px rgba(255,145,0,.18),

        inset 0 1px 0 rgba(255,255,255,.12);

}






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

.filter-btn.active::after{

    content:"";

    position:absolute;

    bottom:7px;

    left:50%;

    width:28px;

    height:2px;

    border-radius:10px;

    transform:translateX(-50%);

    background:#ffb326;

}
/*==================================
        FILTER HOVER
==================================*/

.filter-btn:hover{

    color:#ffffff;

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

    transform:translateY(-3px);

}






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

.filter-btn.active:hover{

    background:

        linear-gradient(

            135deg,

            rgba(255,179,38,.28),

            rgba(255,132,0,.22)

        );

}






/*==================================
        CLICK EFFECT
==================================*/

.filter-btn:active{

    transform:scale(.95);

}






/*==================================
        ACTIVE LINE ANIMATION
==================================*/

.filter-btn::after{

    content:"";

    position:absolute;

    bottom:7px;

    left:50%;

    width:0;

    height:2px;

    border-radius:20px;

    background:#ffb326;

    transform:translateX(-50%);

    transition:

        width .35s ease,

        opacity .35s ease;

    opacity:0;

}






.filter-btn.active::after{

    width:28px;

    opacity:1;

}






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

.filter-btn span{

    transition:

        color .35s ease;

}
/*==================================
        TABLET
==================================*/

@media (max-width:992px){

    .products-filter{

        margin-bottom:45px;

    }


    .filter-container{

        gap:6px;

        padding:7px;

    }


    .filter-btn{

        min-width:95px;

        height:44px;

        padding:0 20px;

        font-size:14px;

    }

}






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

@media (max-width:768px){

    .products-filter{

        justify-content:flex-start;

        overflow:hidden;

        margin-bottom:35px;

    }


    .filter-container{

        width:100%;

        max-width:100%;

        justify-content:flex-start;

        overflow-x:auto;

        overflow-y:hidden;

        scroll-behavior:smooth;

        -webkit-overflow-scrolling:touch;

        padding:6px;

        gap:8px;

        scrollbar-width:none;

    }


    .filter-container::-webkit-scrollbar{

        display:none;

    }


    .filter-btn{

        flex:0 0 auto;

        min-width:auto;

        height:42px;

        padding:0 18px;

        font-size:13px;

    }


}






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

@media (max-width:420px){

    .filter-container{

        gap:6px;

        padding:5px;

    }


    .filter-btn{

        height:38px;

        padding:0 15px;

        font-size:12px;

    }


    .filter-btn.active::after{

        bottom:5px;

        width:22px;

    }

}






/*==================================
        TOUCH DEVICES
==================================*/

@media (hover:none){

    .filter-btn:hover{

        transform:none;

    }


    .filter-btn:active{

        transform:scale(.96);

    }

}
/*==================================
        FALCON TRANSITION
==================================*/

.falcon-transition{

    position:relative;

    width:100%;

    height:110px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}






/*==================================
        GLASS LAYER
==================================*/

.transition-glass{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            transparent,

            rgba(255,255,255,.03),

            transparent

        );

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    opacity:.6;

}






/*==================================
        BASE LINE
==================================*/

.transition-blade{

    position:relative;

    width:70%;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,179,38,.25),

            transparent

        );

}






/*==================================
        BLADE POINT
==================================*/

.transition-blade span{

    position:absolute;

    top:50%;

    left:50%;

    width:8px;

    height:8px;

    transform:

        translate(-50%,-50%)

        rotate(45deg);

    background:#ffb326;

    box-shadow:

        0 0 20px rgba(255,179,38,.7);

}
/*==================================
        MOVING BLADE EFFECT
==================================*/

.transition-blade::before{

    content:"";

    position:absolute;

    top:50%;

    left:-20%;

    width:120px;

    height:2px;

    transform:translateY(-50%);

    background:

        linear-gradient(

            90deg,

            transparent,

            #ffb326,

            transparent

        );

    filter:

        drop-shadow(

            0 0 12px rgba(255,179,38,.8)

        );

    animation:

        bladeMove 3.5s ease-in-out infinite;

}






/*==================================
        BLADE ANIMATION
==================================*/

@keyframes bladeMove{


    0%{

        left:-20%;

        opacity:0;

    }


    15%{

        opacity:1;

    }


    50%{

        opacity:1;

    }


    85%{

        opacity:1;

    }


    100%{

        left:120%;

        opacity:0;

    }

}






/*==================================
        CENTER CUT GLOW
==================================*/

.transition-blade span{

    animation:

        bladePulse 2s ease-in-out infinite;

}






@keyframes bladePulse{


    0%{

        transform:

        translate(-50%,-50%)

        rotate(45deg)

        scale(1);

    }


    50%{

        box-shadow:

        0 0 35px rgba(255,179,38,.9);

        transform:

        translate(-50%,-50%)

        rotate(45deg)

        scale(1.5);

    }


    100%{

        transform:

        translate(-50%,-50%)

        rotate(45deg)

        scale(1);

    }

}

/*==================================
        FALCON CUT TRANSITION
==================================*/

.falcon-transition{

    position:relative;

    width:100%;

    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}





/*==================================
        CUT AREA
==================================*/

.transition-cut{

    position:relative;

    width:80%;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

}





/*==================================
        CENTER CUT LINE
==================================*/

.transition-cut::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:2px;

    height:0;

    transform:

        translate(-50%,-50%);

    background:#ffb326;

    box-shadow:

        0 0 20px rgba(255,179,38,.8);

    animation:

        cutBlade 3s ease-in-out infinite;

}





/*==================================
        TWO SIDES
==================================*/

.transition-cut span,
.transition-cut span::before{

    position:absolute;

    top:50%;

    width:50%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,179,38,.55)

        );

}





.transition-cut span{

    left:0;

    transform-origin:right center;

    transform:scaleX(1);

}





.transition-cut span::before{

    content:"";

    right:0;

    transform-origin:left center;

    background:

        linear-gradient(

            90deg,

            rgba(255,179,38,.55),

            transparent

        );

}
/*==================================
        REAL CUT OPENING
==================================*/


.transition-cut span{

    animation:

        openLeft 3s ease-in-out infinite;

}





.transition-cut span::before{

    animation:

        openRight 3s ease-in-out infinite;

}






/*==================================
        LEFT SIDE OPEN
==================================*/

@keyframes openLeft{


    0%,
    35%{

        transform:

            scaleX(1)

            translateX(0);

    }


    50%{

        transform:

            scaleX(.75)

            translateX(-35px);

    }


    70%,
    100%{

        transform:

            scaleX(1)

            translateX(0);

    }

}






/*==================================
        RIGHT SIDE OPEN
==================================*/

@keyframes openRight{


    0%,
    35%{

        transform:

            scaleX(1)

            translateX(0);

    }


    50%{

        transform:

            scaleX(.75)

            translateX(35px);

    }


    70%,
    100%{

        transform:

            scaleX(1)

            translateX(0);

    }

}






/*==================================
        CUTTING BLADE FLASH
==================================*/

.transition-cut::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:3px;

    height:0;

    transform:

        translate(-50%,-50%);



    animation:

        bladeStrike 3s ease-in-out infinite;

}






@keyframes bladeStrike{


    0%,
    38%{

        height:0;

        opacity:0;

    }



    50%{

        height:70px;

        opacity:1;

    }



    60%{

        height:45px;

        opacity:.6;

    }



    75%,
    100%{

        height:0;

        opacity:0;

    }

}
/*==================================
        BLADE EDGE DEPTH
==================================*/


.transition-cut span::after{

    content:"";


    position:absolute;

    right:-8px;

    top:50%;

    width:14px;

    height:14px;

    transform:

        translateY(-50%)

        rotate(45deg);


    opacity:0;
    



    animation:

        bladePoint 3s ease-in-out infinite;

}






.transition-cut span::before{

    content:"";

    position:absolute;

    left:-8px;

    top:50%;

    width:14px;

    height:14px;

    transform:

        translateY(-50%)

        rotate(45deg);


    opacity:0;



}






/*==================================
        CUTTING POINT
==================================*/

@keyframes bladePoint{


    0%,
    40%{

        opacity:0;

        scale:.5;

    }


    50%{

        opacity:1;

        scale:1;

    }


    65%{

        opacity:.4;

        scale:.7;

    }


    100%{

        opacity:0;

        scale:.5;

    }

}






/*==================================
        EDGE SHADOW
==================================*/

.transition-cut span{

    filter:

        drop-shadow(

            0 6px 8px rgba(0,0,0,.45)

        );

}





.transition-cut span::before{

    filter:

        drop-shadow(

            0 6px 10px rgba(0,0,0,.45)

        );

}






/*==================================
        CUT IMPACT
==================================*/

.transition-cut{

    animation:

        cutImpact 3s ease-in-out infinite;

}






@keyframes cutImpact{


    0%,
    40%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.02);

    }


    65%{

        transform:scale(1);

    }

}
/*==================================
        SOFT GLASS CONNECTION
==================================*/


.falcon-transition::before{

    content:"";

    position:absolute;

    inset:0;


    opacity:.7;

    pointer-events:none;

}






/*==================================
        CENTER ENERGY GLOW
==================================*/


.transition-cut::marker{

    display:none;

}







/*==================================
        DESKTOP FINISH
==================================*/


@media (min-width:1200px){


    .falcon-transition{

        height:130px;

    }


    .transition-cut{

        width:75%;

    }


}






/*==================================
        TABLET
==================================*/


@media (max-width:992px){


    .falcon-transition{

        height:90px;

    }


    .transition-cut{

        width:82%;

    }


    .transition-cut span::after,
    .transition-cut span::before{

        width:10px;

        height:10px;

    }


}






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


@media (max-width:768px){


    .falcon-transition{

        height:60px;

    }



    .transition-cut{

        width:88%;

    }



    .transition-cut span,
    .transition-cut span::before{

        height:1px;

    }



    .transition-cut::after{

        animation-duration:3.5s;

    }



    .transition-cut span::after,
    .transition-cut span::before{

        width:8px;

        height:8px;

    }


}






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


@media (max-width:420px){


    .falcon-transition{

        height:45px;

    }



    .transition-cut{

        width:90%;

    }



    .transition-cut span::after,
    .transition-cut span::before{

        display:none;

    }


}






/*==================================
        REDUCE MOTION
==================================*/


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


    .transition-cut,
    .transition-cut span,
    .transition-cut::before,
    .transition-cut::after{


        animation:none !important;


    }


    .transition-cut::before{


        height:40px;

        opacity:.8;


    }


}