/*==========================================================
    TECH PREVIEW — بخش اول صفحه اصلی
    این فایل فقط استایل‌های اختصاصی این بخش را دارد.
    متغیرهای رنگ/فاصله/تایپوگرافی و کلاس .container باید از
    variables.css و responsive.css پروژه لود شده باشند
    (این فایل باید بعد از آن دو فایل فراخوانی شود).
==========================================================*/

.tech-preview{
    position:relative;
    padding-block:var(--section-space);
    
    overflow:hidden;
}



/* --- ستون متن --- */
.tech-preview__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--primary);
    background:var(--surface-alt);
    border:1px solid var(--border);
    padding:7px 16px;
    border-radius:var(--radius-round);
    margin-bottom:var(--space-md);
}
.tech-preview__eyebrow .dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--accent-strong);
    box-shadow:0 0 0 4px rgba(var(--accent-strong-rgb),.18);
}

.tech-preview__title{
    font-family:var(--font-heading);
    font-weight:var(--title-weight);
    font-size:var(--h2-title-size);
    line-height:1.28;
    color:var(--text);
    max-width:15ch;
}
.tech-preview__title em{
    font-style:normal;
    color:var(--primary);
    
}

.tech-preview__subtitle{
    margin-top:var(--space-sm);
    font-family:var(--font-heading);
    font-weight:600;
    font-size:clamp(1.05rem, 1.6vw, 1.3rem);
    color:var(--secondary);
}

.tech-preview__lead{
    margin-top:var(--space-md);
    max-width:56ch;
    font-family:var(--font-body);
    font-size:1.03rem;
    line-height:2;
    color:var(--text-light);
}

/* دکمه‌ها (.btn, .btn-primary, .btn-secondary, .hero-buttons) از
   سیستم دکمه‌ی خود پروژه می‌آیند و اینجا بازتعریف نمی‌شوند.
   فقط فاصله‌ی این بخش تا پاراگراف بالادست و اندازه‌ی آیکن داخل
   دکمه (که در آن فایل تعریف نشده) اینجا اضافه می‌شود. */
.tech-preview__text .hero-buttons{
    margin-top:var(--space-lg);
    margin-bottom:0;
}
.btn svg{
    width:18px;
    height:18px;
    margin-inline-start:8px;
}

/* --- تصویر امضا: نمایشگر تعاملی هدایت نور به نواحی مغز ---
   .tech-visual__bg تصویر پس‌زمینه (نیمرخ سر — خودتان جایگزین
   می‌کنید) است؛ .tech-visual__svg فقط لایه‌ی متحرک (هاله +
   پرتو) و دکمه‌های .tech-visual__hotspot لایه‌ی تعاملی روی آن
   هستند. */
.tech-visual{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
    width:100%;
    max-width:380px;
}



/*==========================================================
  نسخه‌ی جدید (بدون اسکرول صفحه) — این بلوک جایگزین همه‌ی
  تغییرات مربوط به .tech-scrub / .tech-scrub__sticky میشه.
  یعنی می‌تونید تمام کلاس‌های .tech-scrub* که قبلا اضافه کرده
  بودیم رو حذف کنید و این‌ها رو جایگزین کنید.
==========================================================*/

/* .tech-preview__top به حالت اولیه‌ی ساده برمی‌گرده (دیگر به
   .tech-scrub نیازی نیست) */
.tech-preview__top{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:var(--gap-container);
    align-items:center;
}

.tech-visual{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
    width:100%;
    max-width:500px;
}

.tech-visual__frame{
    position:relative;
    width:100%;
    aspect-ratio:5/6;
    border-radius:var(--radius-xl);
    overflow:hidden;
    border:1px solid transparent;
    background:
        linear-gradient(var(--surface-alt), var(--surface-alt)) padding-box,
        linear-gradient(120deg, var(--border-blue), var(--border-yellow)) border-box;
        /* رنگ اول: آبی — رنگ دوم: زرد */
}


/*چرخش رنگی */
/*---------------------------
.tech-visual__frame{
    position:relative;
    width:100%;
    aspect-ratio:5/6;
    border-radius:var(--radius-xl);
    overflow:hidden;
    background:
        linear-gradient(var(--surface-alt), var(--surface-alt)) padding-box,
        linear-gradient(120deg, var(--border-blue),  var(--border-yellow),  var(--border-blue)) border-box;
    background-size:100% 100%, 200% 200%;
    border:2px solid transparent;
    animation:frameBorderShift 4s ease-in-out infinite;
}

@keyframes frameBorderShift{
    0%{background-position:0% 0%, 0% 50%;}
    50%{background-position:0% 0%, 100% 50%;}
    100%{background-position:0% 0%, 0% 50%;}
}

-----------------------*/

.tech-visual__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}



/* پنل caption — بدون تغییر */
.tech-visual__caption{
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--background);
}
.tech-visual__caption-tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.06em;
    color:var(--secondary);
    background:var(--surface-alt);
    border:1px solid var(--border);
    padding:3px 9px;
    border-radius:var(--radius-sm);
    margin-bottom:10px;
}
.tech-visual__caption-title{
    display:block;
    font-family:var(--font-heading);
    font-size:1.05rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:6px;
}
.tech-visual__caption-desc{
    font-family:var(--font-body);
    font-size:.88rem;
    line-height:1.9;
    color:var(--text-muted);
    margin:0;
}

@media (max-width:992px){
    .tech-preview__top{ grid-template-columns:1fr; }
    .tech-visual{ order:-1; max-width:380px; margin-inline:auto; }
}

/* پنل توضیح ناحیه‌ی فعال */
.tech-visual__caption{
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--background);
}
.tech-visual__caption-tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.06em;
    color:var(--secondary);
    background:var(--surface-alt);
    border:1px solid var(--border);
    padding:3px 9px;
    border-radius:var(--radius-sm);
    margin-bottom:10px;
}
.tech-visual__caption-title{
    display:block;
    font-family:var(--font-heading);
    font-size:1.05rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:6px;
}
.tech-visual__caption-desc{
    font-family:var(--font-body);
    font-size:.88rem;
    line-height:1.9;
    color:var(--text-muted);
    margin:0;
}

/* ==========================================================
   شبکه ماژول‌ها (سه زیربخش)
   ========================================================== */
.tech-preview__grid{
    margin-top:var(--section-space);
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-lg);
}

.tech-card{
    position:relative;
    background:var(--background);
    border:2px solid var(--border);
    border-radius:var(--radius-lg);
    padding:var(--space-lg) var(--space-md) var(--space-md);
    transition:var(--transition);
}
.tech-card:hover{
    border-color:var(--border-blue);
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
}

.tech-card__code{
    display:inline-block;
    font-family:var(--font-body);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.06em;
    color:var(--secondary);
    background:var(--surface-alt);
    border:1px solid var(--border);
    padding:4px 10px;
    border-radius:var(--radius-sm);
    margin-bottom:var(--space-sm);
}

.tech-card__title{
    font-family:var(--font-heading);
    font-weight:var(--heading-weight);
    font-size:1.22rem;
    line-height:1.5;
    color:var(--text);
    margin-bottom:12px;
}

.tech-card__desc{
    font-family:var(--font-body);
    font-size:.95rem;
    line-height:1.95;
    color:var(--text-light);
    margin-bottom:var(--space-sm);
}

.tech-card__tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:var(--space-md);
}
.tech-card__tags span{
    font-family:var(--font-body);
    font-size:.72rem;
    color:var(--text-muted);
    background:var(--surface);
    border:1px solid var(--border);
    padding:3px 9px;
    border-radius:var(--radius-sm);
}

.tech-card__link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-heading);
    font-weight:600;
    font-size:.9rem;
    color:var(--primary);
    text-decoration:none;
}
.tech-card__link svg{ width:16px; height:16px; transition:var(--transition); }
.tech-card__link:hover svg{ transform:translateX(-4px); }

/* ==========================================================
   ریسپانسیو — دقیقاً با breakpoint های responsive.css پروژه
   ========================================================== */
@media (max-width:1200px){
    .tech-preview{ padding-block:var(--space-section-lg); }
}

@media (max-width:992px){
    .tech-preview__top{ grid-template-columns:1fr; }
    .tech-visual{ order:-1; max-width:380px; margin-inline:auto; }
    .tech-preview__title, .tech-preview__lead{ max-width:100%; }
    .tech-preview__grid{ grid-template-columns:1fr 1fr; gap:var(--gap-md); }
}

@media (max-width:768px){
    .tech-preview{ padding-block:var(--space-section-md); }
    .tech-preview__grid{ grid-template-columns:1fr; gap:var(--gap-sm); }
}

@media (max-width:576px){
    .tech-preview{ padding-block:var(--space-section-sm); }
    .tech-preview__eyebrow{ font-size:.7rem; }
}

/* ==========================================================
   Reveal on scroll — حالت اولیه توسط tech-preview.js کنترل می‌شود
   ========================================================== */
.js-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease;
}
.js-reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
    .js-reveal{ opacity:1; transform:none; transition:none; }
}