/* =====================================================================
   معماری امیر — انیمیشن ورود با اسکرول + کارت آمار
   این فایل در همه‌ی صفحات (بعد از app.css) لود می‌شود.
   همه‌ی کلاس‌ها با پیشوند ma- شروع می‌شوند تا با بقیه‌ی قالب تداخل نکنند.

   ۱) .ma-reveal  → همان انیمیشن تمیزِ صفحه‌ی «درباره ما»
   ۲) .ma-stats   → همان کارت آمار صفحه‌ی «درباره ما» (جایگزین hero-metrics-card)
   ===================================================================== */

:root {
    --ma-gold: #c69a46;
    --ma-gold-2: #e2c08d;
    --ma-gold-grad: linear-gradient(135deg, #f3d7a8 0%, #b88e4c 100%);
    --ma-green-2: #08251b;
    --ma-green-3: #0f3d2e;
    --ma-ease: cubic-bezier(.16, 1, .3, 1);
    --ma-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%231b4d3e' stroke-width='1.2' opacity='0.4'%3E%3Cpath d='M70 0 C40 30 10 40 0 70 C10 100 40 110 70 140 C100 110 130 100 140 70 C130 40 100 30 70 0Z'/%3E%3Cpath d='M70 20 C50 40 25 50 15 70 C25 90 50 100 70 120 C90 100 115 90 125 70 C115 50 90 40 70 20Z' stroke-width='0.9' opacity='0.6'/%3E%3Ccircle cx='70' cy='70' r='15' stroke-width='0.8'/%3E%3Cpath d='M0 0 C30 12 40 35 70 35 C100 35 110 12 140 0' stroke-width='0.9'/%3E%3Cpath d='M0 140 C30 128 40 105 70 105 C100 105 110 128 140 140' stroke-width='0.9'/%3E%3C/g%3E%3C/svg%3E");
}

/* =====================================================================
   ۱. ظاهر شدن با اسکرول
   کلاس ma-js روی <html> گذاشته می‌شود؛ اگر جاوااسکریپت نبود،
   محتوا به‌صورت عادی و کاملاً قابل دیدن باقی می‌ماند.
   ===================================================================== */
.ma-js .ma-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s var(--ma-ease), transform .9s var(--ma-ease);
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
}

.ma-js .ma-reveal.is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* حالت‌های جایگزین — برای تنوع در سکشن‌های مختلف */
.ma-js .ma-reveal--up    { transform: translateY(54px); }
.ma-js .ma-reveal--right { transform: translateX(46px); }
.ma-js .ma-reveal--left  { transform: translateX(-46px); }
.ma-js .ma-reveal--zoom  { transform: scale(.94); }
.ma-js .ma-reveal--fade  { transform: none; }

.ma-js .ma-reveal--up.is-in,
.ma-js .ma-reveal--right.is-in,
.ma-js .ma-reveal--left.is-in,
.ma-js .ma-reveal--zoom.is-in { transform: none; }

/* =====================================================================
   ۲. کارت آمار (همان نسخه‌ی صفحه‌ی «درباره ما»)
   ===================================================================== */
.ma-stats-wrap {
    position: relative;
    z-index: 10;
    margin-top: -120px;
}

.ma-stats {
    position: relative;
    direction: rtl;
    padding: 46px 16px;
    border-radius: 26px;
    border: 1px solid rgba(198, 154, 70, .55);
    background:
        var(--ma-motif) 0 0 / 140px 140px repeat,
        radial-gradient(circle at 50% 0, var(--ma-green-3) 0, var(--ma-green-2) 100%);
    box-shadow:
        0 34px 60px -18px rgba(15, 3, 7, .5),
        inset 0 0 0 6px rgba(7, 23, 18, .55),
        inset 0 0 0 7px rgba(198, 154, 70, .2);
}

.ma-stats::before,
.ma-stats::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid var(--ma-gold);
    pointer-events: none;
}

.ma-stats::before {
    top: 12px;
    right: 12px;
    border-width: 2px 2px 0 0;
    border-top-right-radius: 14px;
}

.ma-stats::after {
    bottom: 12px;
    left: 12px;
    border-width: 0 0 2px 2px;
    border-bottom-left-radius: 14px;
}

.ma-stats-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ma-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    text-align: center;
}

.ma-stat + .ma-stat::before {
    content: '';
    position: absolute;
    inset-block: 6%;
    inset-inline-start: 0;
    width: 1px;
    background: linear-gradient(transparent, rgba(198, 154, 70, .45), transparent);
}

.ma-stat + .ma-stat::after {
    content: '✦';
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    transform: translate(50%, -50%);
    font-size: .5rem;
    color: var(--ma-gold);
    opacity: .7;
}

.ma-stat-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    color: var(--ma-gold-2);
    border: 1px solid rgba(198, 154, 70, .5);
    border-radius: 50%;
    background: rgba(198, 154, 70, .07);
    transition: transform .5s var(--ma-ease), background .4s, box-shadow .4s;
}

.ma-stat-icon svg { display: block; }

.ma-stat:hover .ma-stat-icon {
    transform: translateY(-4px) rotate(-6deg);
    background: rgba(198, 154, 70, .16);
    box-shadow: 0 8px 22px rgba(198, 154, 70, .25);
}

.ma-stat strong {
    direction: ltr;
    unicode-bidi: isolate;
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    background: var(--ma-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.ma-stat small {
    font-size: .88rem;
    color: #a5c0b8;
    line-height: 1.6;
}

/* وقتی کارت داخل هیروی صفحه‌ی اصلی است، دقیقاً همان جای قبلی بنشیند */
.hero-home .ma-stats-wrap { margin-top: -130px; }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 1024px) {
    .ma-stats-wrap { margin-top: -92px; }
    .hero-home .ma-stats-wrap { margin-top: -5px; }
}

@media (max-width: 768px) {
    .ma-stats-wrap { margin-top: -40px; }
    .hero-home .ma-stats-wrap { margin-top: -20px; }

    .ma-stats {
        padding: 34px 10px;
        border-radius: 22px;
    }

    .ma-stats-list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 26px;
    }

    .ma-stat + .ma-stat::after { display: none; }
    .ma-stat:nth-child(odd)::before { display: none; }
    .ma-stat-icon { width: 46px; height: 46px; }
}

@media (max-width: 480px) {
    .ma-stats-wrap { margin-top: -24px; }
    .hero-home .ma-stats-wrap { margin-top: -5px; }
    .ma-stat strong { font-size: 1.8rem; }
    .ma-stat small { font-size: .78rem; }
    .ma-stat-icon { width: 42px; height: 42px; }
}

/* ---------- احترام به تنظیم کاهش انیمیشن سیستم کاربر ---------- */
@media (prefers-reduced-motion: reduce) {
    .ma-js .ma-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ma-stat-icon { transition: none; }
}