/*==========================================================
    TECHNOLOGY — EFFECTS SECTION
    نتایج فعال‌سازی میتوکندری در بافت مغز (نوروژنز، آنژیوژنز، ...)

    از توکن‌های variables.css و responsive.css استفاده می‌کنه.
    breakpoint هایی که پایین استفاده شدن دقیقاً همون‌هایی هستن که
    در جدول مرجع responsive.css تعریف شدن:
    xl:1200 / lg:992 / md:768 / sm:576
==========================================================*/

:root{

    /* توکن‌های محلی این سکشن — روی همون منطق کامپوننت‌محور
       فایل‌های دیگه (مثل tech-visual-*) تعریف شدن */
    --effects-title-size:clamp(1.9rem,3.4vw,2.75rem);
    --effects-desc-size:clamp(.95rem,1.3vw,1.05rem);
    --effects-card-title-size:1.15rem;
    --effects-card-text-size:.92rem;

    --effects-media-ratio-wide:4 / 3;
    --effects-media-ratio-tall:3 / 4;
    --effects-media-ratio-square:1 / 1;

    --effects-grid-gap:var(--space-xs);
    --effects-row:clamp(190px,22vw,260px);
}


/*==========================================================
    SECTION SHELL
==========================================================*/

.effects{

    padding-block:var(--section-space);
    background:linear-gradient(180deg,var(--background) 0%,var(--surface) 100%);

}


/*==========================================================
    INTRO — منبع نور + عنوان + توضیح
==========================================================*/

.effects__intro{

    max-width:640px;
    margin-inline:auto;
    margin-bottom:var(--space-lg);
    text-align:center;

}

/* نقطه‌ی نورانی — استعاره‌ی همون نوری که به بافت نفوذ کرده و
   حالا اثرش داره پایین‌تر باز می‌شه */
.effects__signal{

    display:flex;
    justify-content:center;
    margin-bottom:var(--space-sm);

}

.effects__signal-dot{

    position:relative;
    width:10px;
    height:10px;
    border-radius:var(--radius-round);
    background:var(--accent-strong);
    box-shadow:0 0 0 6px rgba(var(--accent-strong-rgb),.14);

}

.effects__signal-dot::after{

    content:"";
    position:absolute;
    inset:-14px;
    border-radius:var(--radius-round);
    border:1px solid rgba(var(--accent-strong-rgb),.35);
    animation:effects-pulse 2.6s ease-out infinite;

}

.effects__title{

    font-family:var(--font-heading);
    font-size:var(--h2-title-size);
    font-weight:var(--title-weight);
    color:var(--text);
    line-height:1.3;
    margin-bottom:var(--space-2xs);

}

.effects__desc{

    font-family:var(--font-body);
    font-size:var(--effects-desc-size);
    font-weight:var(--body-weight);
    color:var(--text-light);
    line-height:1.85;

}


/*==========================================================
    GRID — چیدمان نامتقارن (bento) برای پنج کارت
    a: بزرگ / b: کوچک بالا-راست / c: کشیده‌ی راست
    d ، e: دو کارت پایین-چپ
==========================================================*/

.effects__grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,var(--effects-row));
    grid-template-areas:
        "a a b"
        "a a c"
        "d e c";
    gap:var(--effects-grid-gap);

}

.effect-card--a{ grid-area:a; }
.effect-card--b{ grid-area:b; }
.effect-card--c{ grid-area:c; }
.effect-card--d{ grid-area:d; }
.effect-card--e{ grid-area:e; }


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

.effect-card{

    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--background);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:border-color var(--transition),transform var(--transition);

}

.effect-card:hover{

    border-color:rgba(var(--primary-rgb),.35);
    transform:translateY(-3px);

}

.effect-card__media{

    position:relative;
    width:100%;
    aspect-ratio:var(--effects-media-ratio-square);
    background:
        radial-gradient(120% 140% at 30% 20%,rgba(var(--accent-rgb),.22),transparent 60%),
        var(--surface-alt);
    overflow:hidden;

}

.effect-card--a .effect-card__media{ aspect-ratio:var(--effects-media-ratio-wide); }
.effect-card--c .effect-card__media{ aspect-ratio:var(--effects-media-ratio-tall); height:100%; }

.effect-card--c{ flex-direction:column; }
.effect-card--c .effect-card__media{ flex:1; aspect-ratio:auto; }

.effect-card__media img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}

.effect-card__body{

    padding:var(--space-sm) var(--space-xs);
    display:flex;
    flex-direction:column;
    gap:6px;

}

.effect-card__icon{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:var(--radius-md);
    background:rgba(var(--primary-rgb),.08);
    color:var(--primary);
    margin-bottom:4px;

}

.effect-card__icon svg{ width:20px; height:20px; }

.effect-card__title{

    font-family:var(--font-heading);
    font-size:var(--effects-card-title-size);
    font-weight:var(--heading-weight);
    color:var(--text);
    line-height:1.4;

}

.effect-card__text{

    font-family:var(--font-body);
    font-size:var(--effects-card-text-size);
    font-weight:var(--body-weight);
    color:var(--text-muted);
    line-height:1.8;

}

.effect-card--a .effect-card__title{ font-size:1.35rem; }
.effect-card--a .effect-card__body{ padding:var(--space-md) var(--space-sm); }


/*==========================================================
    OUTCOME — کارت نتیجه‌ی نهایی و تلفیقی
==========================================================*/

.effects__outcome{

    margin-top:var(--effects-grid-gap);
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:stretch;
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary) 60%,var(--secondary) 100%);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow:var(--shadow-lg);

}


.effects__outcome-text{

    padding:var(--space-lg) var(--space-md);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:var(--space-2xs);

}

.effects__outcome-title{

    font-family:var(--font-heading);
    font-size:clamp(1.4rem,2.6vw,1.9rem);
    font-weight:var(--title-weight);
    color:var(--background);
    line-height:1.45;

}

.effects__outcome-desc{

    font-family:var(--font-body);
    font-size:.98rem;
    font-weight:var(--body-weight);
    color:var(--text-inverse);
    line-height:1.9;
    max-width:46ch;

}

.effects__outcome-media{

    position:relative;
    min-height:260px;
    background:
        radial-gradient(120% 140% at 70% 30%,rgba(var(--white-rgb),.16),transparent 60%),
        rgba(var(--white-rgb),.06);

}

.effects__outcome-media img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}


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

@keyframes effects-pulse{

    0%{ opacity:.9; transform:scale(.6); }
    80%{ opacity:0; transform:scale(2.4); }
    100%{ opacity:0; transform:scale(2.4); }

}

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

    .effects__signal-dot::after{ animation:none; }
    .effect-card{ transition:none; }
    .effect-card:hover{ transform:none; }

}


/*==========================================================
    RESPONSIVE
    breakpoint های ثابت طبق جدول مرجع responsive.css
==========================================================*/

/* لپ‌تاپ (≤1200px) — بنتو کمی جمع‌وجورتر */
@media (max-width:1200px){

    .effects__grid{
        grid-template-rows:repeat(3,clamp(170px,24vw,230px));
    }

}

/* تبلت (≤992px) — bento به دو ستون تبدیل می‌شه */
@media (max-width:992px){

    .effects{ padding-block:var(--space-section-lg); }

    .effects__grid{
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:repeat(4,minmax(200px,auto));
        grid-template-areas:
            "a a"
            "b c"
            "d c"
            "e e";
    }

    .effect-card--c .effect-card__media{ aspect-ratio:var(--effects-media-ratio-square); flex:none; height:auto; }
    .effect-card--c{ flex-direction:column; }

    .effects__outcome{
        grid-template-columns:1fr;
    }

    .effects__outcome-media{ min-height:220px; order:-1; }

}

/* موبایل landscape (≤768px) — همه کارت‌ها تک‌ستونه */
@media (max-width:768px){

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

    .effects__grid{
        grid-template-columns:1fr;
        grid-template-rows:none;
        grid-template-areas:
            "a"
            "b"
            "c"
            "d"
            "e";
    }

    .effect-card--a .effect-card__media,
    .effect-card--b .effect-card__media,
    .effect-card--d .effect-card__media,
    .effect-card--e .effect-card__media{
        aspect-ratio:var(--effects-media-ratio-wide);
    }

    .effect-card--c .effect-card__media{ aspect-ratio:var(--effects-media-ratio-wide); }

    .effects__outcome-text{ padding:var(--space-md) var(--space-sm); }

}

/* موبایل (≤576px) */
@media (max-width:576px){

    .effects__intro{ margin-bottom:var(--space-md); }

    .effect-card__body{ padding:var(--space-xs) var(--space-2xs); }
    .effect-card--a .effect-card__body{ padding:var(--space-sm) var(--space-xs); }

    .effects__outcome-media{ min-height:180px; }

}