/*==========================================================
    TECHNOLOGY HERO
    Neuray Design System
    (این فایل به variables.css و responsive.css نیاز داره —
     حتماً قبل از این فایل، لینک بشن)
==========================================================*/

/* HERO */

.technology-hero{

    position: relative;
    /* فاصله از هدر */

    padding-top: calc(var(--header-height) + var(--space-header-gap));
    padding-bottom: var(--space-2xl);

    padding-inline: var(--space-inline);

    /* ارتفاع */
    min-height: calc(100svh - var(--header-height));

    direction:rtl;

    display:flex;

    align-items:center;

    overflow:hidden;

}


/* تصویر اصلی */

.tech-hero-image {


    position:absolute;

    inset:0;


    background-image:url("/static/images/technology/technology-hero-bg.jpg");

    background-size:cover;

    background-position:left center;


    z-index:-3;


    /*
    تصویر از اینجا شروع به محو شدن می‌کند
    */

    mask-image:linear-gradient(
        to right,
        black 0%,
        black 45%,
        transparent 85%
    );


    -webkit-mask-image:linear-gradient(
        to right,
        black 0%,
        black 45%,
        transparent 85%
    );


}






/*
لایه گرادیان برای ترکیب تصویر با پس زمینه
*/

.tech-hero-overlay {


    position:absolute;

    inset:0;


    background:
    linear-gradient(
        90deg,
        rgba(var(--white-rgb),0) 0%,
        rgba(var(--white-rgb),.35) 55%,
        rgba(var(--white-rgb),1) 90%
    );


    z-index:-2;


}






/* container */

.technology-container{


    width:min(var(--container-md),92%);

    margin:auto;


    display:grid;


    grid-template-columns:

    minmax(300px,0.9fr)
    minmax(350px,1.1fr);


    gap:var(--gap-container);


    align-items:center;

}



/* CONTENT */


.technology-content{

    max-width:576px;

}





.technology-content h1{

    font-family:var(--font-heading);

    font-size:var(--hero-title-size-s);

    font-weight:var(--title-weight);

    line-height:1.18;

    color:var(--text);

    letter-spacing:-1px;

    margin-bottom:25px;

}


.technology-content p{

    font-family:var(--font-body);

    font-size:var(--hero-desc-size);

    font-weight:var(--body-weight);

    line-height:2;

    color:var(--text-light);

    max-width:576px;

}




.technology-actions{


    display:flex;


    gap:15px;


    margin-top:35px;


    flex-wrap:wrap;


}



/* VISUAL */


.technology-visual{


    position:relative;


    min-height:var(--tech-visual-min-height);


}





/* Device */


.device-image{


    position:absolute;


    width:var(--tech-device-width);


    right:0;


    bottom:5%;


    z-index:2;


    filter:
    drop-shadow(
    0 30px 40px rgba(var(--black-rgb),.15)
    );


}




/* Brain */

.brain-model{


    position:absolute;


    width:var(--tech-brain-width);


    left:0;


    top:10%;


}



.brain-model img{


    width:100%;


    opacity:.9;


}



/* نور عبوری */


.light-beam{


    position:absolute;


    width:8px;


    height:120px;


    background:
    linear-gradient(
    to bottom,
    transparent,
    var(--accent),
    transparent
    );


    top:35%;


    left:48%;


    filter:
    blur(3px);


    animation:
    pulseLight 2.5s infinite;


}





@keyframes pulseLight{


    0%{

        opacity:.2;

        transform:
        translateY(-40px);

    }


    50%{

        opacity:1;

    }


    100%{

        opacity:.2;

        transform:
        translateY(40px);

    }

}





/* Responsive */

@media(max-width:992px){


    .technology-container{


        grid-template-columns:1fr;


        text-align:center;


    }


    .technology-content{


        margin:auto;


    }



    .technology-content p{


        margin:auto;


    }



    .technology-actions{


        justify-content:center;


    }



    .technology-visual{


        min-height:var(--tech-visual-min-height-tablet);


    }



}



@media(max-width:576px){


    .technology-hero{


        padding-bottom:var(--gap-sm);

    }



    .technology-visual{


        min-height:var(--tech-visual-min-height-mobile);

    }



    .device-image{


        width:var(--tech-device-width-mobile);

    }



    .brain-model{


        width:var(--tech-brain-width-mobile);

    }


}