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


/*==================================
Hero Wrapper
==================================*/
.hero{
    position: relative;
    isolation: isolate;
    overflow: hidden;

    box-sizing: border-box;

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

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

    min-height: 100svh;

    display: flex;
    align-items: center;

    /* بک‌گراند پایه (زیر عکس) برای زمانی که عکس هنوز لود نشده یا cover نمی‌کنه */
    background: linear-gradient(
        135deg,
        var(--surface-faint) 0%,
        var(--surface-soft) 40%,
        var(--surface-alt) 100%);
}


/*==================================
Background Image
==================================*/
.hero-bg-image{
    position:absolute;
    inset:0;
    z-index:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


/*==================================
Fade Overlay
    محو کردن سمت متن (راست) روی عکس بک‌گراند
    تا خوانایی متن تضمین بشه
==================================*/
.hero-bg-fade{
    position:absolute;
    inset:0;
    z-index:1;

    background: linear-gradient(
        to right,
        rgba(var(--surface-soft-rgb),0) 0%,
        rgba(var(--surface-soft-rgb),0) 50%,
        rgba(var(--surface-soft-rgb),.6) 68%,
        rgba(var(--surface-soft-rgb),.92) 85%,
        var(--surface-soft) 100%);

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

    mask-image: linear-gradient(to right, transparent 0%, transparent 50%, black 75%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 50%, black 75%);
}

/*==================================
Container
==================================*/

.hero-container{

    width:min(var(--container),100%);
    margin-inline:auto;
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:center;
    gap:var(--gap-container);
    direction:ltr;

    position:relative;
    z-index:2;
}


/*==================================
Image Column
==================================*/

.hero-image{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    align-self:start;
    position:relative;
    z-index:15;

    animation:float 6s ease-in-out infinite;
}


.hero-image img{
    width:min(100%,34vw);
    max-width:576px;
    height:auto;
    object-fit:contain;
    filter:
        drop-shadow(
        0 35px 70px
        rgba(var(--primary-rgb),.18));
}


/*==================================
Floating Circle
==================================*/

.hero-image::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:var(--hero-circle-size);
    aspect-ratio:1;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(var(--accent-rgb),.22),
        rgba(var(--accent-rgb),.06),
        transparent 70%);
    filter:blur(var(--blur-lg));
    z-index:-1;
}


/*==================================
Content
==================================*/

.hero-content{
    direction:rtl;
    text-align:right;
    flex:1;
    max-width:var(--content-width);
    position:relative;
    z-index:var(--z-content);
    font-family:var(--font-heading);
}


/*==========================================================
    Hero Title
==========================================================*/

.hero-title{
    margin-bottom:var(--space-xs);
    font-size:var(--hero-title-size-s);
    font-weight:var(--title-weight);
    line-height:1.18;
    color:var(--text);
    letter-spacing:-1px;

    animation:fadeUp .9s ease;
}


.hero-title span{
    color:var(--secondary-dark);
}



/*==========================================================
    Description
==========================================================*/

.hero-description{
    max-width:var(--content-width);
    margin-bottom:calc(var(--space-md) * 3);
    font-size:var(--hero-desc-size*1.5);
    line-height:2.05;
    color:var(--text-dark);

    animation:fadeUp 1.1s ease;
}



/*==========================================================
    FEATURES
    زیر متن توضیحات و بالای دکمه‌ها، داخل hero-content
==========================================================*/

.hero-features{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:10px;

    margin-bottom:calc(var(--space-md) * 1);

    animation:fadeUp 1.3s ease;
}


/*==========================================================
    Feature Card
==========================================================*/

.feature-item{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
    height:45px;
    border-radius:calc(var(--radius-round) / 2);
    background:var(--glass-bg);
    backdrop-filter:blur(var(--blur-sm));
    -webkit-backdrop-filter:blur(var(--blur-sm));
    border:1px solid var(--glass-border);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
    overflow:hidden;
}


.feature-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top right,
            rgba(var(--accent-rgb),.15),
            transparent 60%
        );
    opacity:0;
    transition:var(--transition);
}


.feature-item:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--secondary-rgb),.18);
    box-shadow:
        0 10px 22px rgba(var(--primary-rgb),.12);
}


.feature-item:hover::before{
    opacity:1;
}


/*==========================================================
    Feature Text
==========================================================*/

.feature-item p{
    font-family:var(--font-body);
    font-size:calc(var(--font-size-p) /1.2);
    line-height:1.6;
    color:var(--text);
    text-align:center;
}


/*==========================================================
    Buttons
==========================================================*/

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;

    animation:fadeUp 1.5s ease;
}


/*==========================================================
    Floating Animation (فقط عکس دستگاه)
==========================================================*/

@keyframes float{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-12px); }
    100%{ transform:translateY(0); }
}


/*==========================================================
    Fade-Up Animation
==========================================================*/

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


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


/*==========================================================
    Large Desktop — 1400px  (--bp-xxl)
==========================================================*/

@media (max-width:1400px){
    .hero-container{
        gap:var(--gap-lg);
    }
}


/*==========================================================
    Laptop — 1200px  (--bp-xl)
==========================================================*/

@media (max-width:1200px){
    .hero-container{
        gap:var(--space-md);
        padding-block:var(--space-lg);
    }
    .hero-title{
        font-size:var(--hero-title-size-laptop);
    }
    .hero-description{
        font-size:var(--hero-desc-size-laptop);
    }
    .hero-image img{
        max-width:380px;
    }
}


/*==========================================================
    Tablet — 992px  (--bp-lg)
    از این breakpoint به پایین محتوا زیر عکس قرار می‌گیره،
    پس محو تصویر رو از سمت راست به سمت پایین تغییر می‌دیم.
==========================================================*/

@media (max-width:992px){

    .hero{
        min-height:auto;
        padding-block:var(--space-section-lg);
    }

    .hero-bg-fade{
        background: linear-gradient(
            to bottom,
            rgba(var(--surface-soft-rgb),0) 0%,
            rgba(var(--surface-soft-rgb),0) 50%,
            rgba(var(--surface-soft-rgb),.65) 70%,
            var(--surface-soft) 90%);

        mask-image: linear-gradient(to bottom, transparent 0%, transparent 50%, black 75%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 50%, black 75%);
    }

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:var(--gap-md);
    }

    .hero-image{
        order:1;
    }

    .hero-content{
        order:2;
        max-width:768px;
        margin-inline:auto;
    }

    .hero-description{
        margin-inline:auto;
    }

    .hero-features{
        grid-template-columns:1fr;
        max-width:576px;
        margin-inline:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-image img{
        width:min(65%,420px);
    }
}


/*==========================================================
    Mobile Landscape — 768px  (--bp-md)
==========================================================*/

@media (max-width:768px){

    .hero{
        padding-block:var(--space-section-md);
    }

    .hero-title{
        font-size:2.5rem;
        line-height:1.3;
    }

    .hero-description{
        font-size:1rem;
        line-height:1.9;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .hero-buttons .btn{
        width:260px;
        border-radius:var(--radius-button);
    }

    .hero-image img{
        width:min(75%,360px);
    }
}


/*==========================================================
    Mobile — 576px  (--bp-sm)
==========================================================*/

@media (max-width:576px){

    .hero{
        padding-block:var(--space-section-sm);
    }

    .hero-container{
        gap:var(--gap-sm);
        padding-block:var(--gap-sm);
    }

    .hero-title{
        font-size:2rem;
    }

    .hero-description{
        font-size:.95rem;
    }

    .hero-image img{
        width:min(85%,300px);
    }

    .hero-buttons .btn{
        width:100%;
        max-width:380px;
    }

    .hero-features{
        gap:8px;
    }

    .feature-item{
        padding:9px;
    }
}


/*==========================================================
    Small Mobile — 380px  (--bp-xs)
==========================================================*/

@media (max-width:380px){

    .hero-title{
        font-size:1.75rem;
    }

    .hero-description{
        font-size:.9rem;
    }

    .hero-buttons .btn{
        height:52px;
        font-size:.95rem;
    }
}


/*==========================================================
    ACCESSIBILITY
    Reduced Motion
==========================================================*/

@media(prefers-reduced-motion:reduce){
    .hero *,
    .hero *::before,
    .hero *::after{
        animation:none !important;
        transition:none !important;
    }
}