/* ============================================================
   home-anim.css — انیمیشن ورود و پس‌زمینه‌ی مدرن صفحه‌ی اصلی
   (فقط روی index.php لود می‌شه؛ اگه جاوااسکریپت خاموش باشه چیزی مخفی نمی‌مونه)
   ============================================================ */

/* ---------- پس‌زمینه‌ی مدرن کل صفحه: مش گرادیانت + شبکه‌ی محو ---------- */
body:has(.hero-center)::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 50% at 12% 8%, rgba(63,143,47,.16), transparent 70%),
        radial-gradient(50% 45% at 92% 18%, rgba(201,155,46,.15), transparent 70%),
        radial-gradient(55% 55% at 70% 95%, rgba(47,168,255,.11), transparent 70%),
        radial-gradient(45% 40% at 5% 85%, rgba(139,92,246,.09), transparent 70%);
}
body:has(.hero-center)::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background-image: linear-gradient(rgba(63,143,47,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(63,143,47,.07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 25%, transparent 80%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 25%, transparent 80%);
}
[data-theme="dark"] body:has(.hero-center)::before {
    background:
        radial-gradient(60% 50% at 12% 8%, rgba(98,201,74,.20), transparent 70%),
        radial-gradient(50% 45% at 92% 18%, rgba(216,179,74,.16), transparent 70%),
        radial-gradient(55% 55% at 70% 95%, rgba(47,168,255,.16), transparent 70%),
        radial-gradient(45% 40% at 5% 85%, rgba(139,92,246,.14), transparent 70%);
}
[data-theme="dark"] body:has(.hero-center)::after {
    background-image: linear-gradient(rgba(98,201,74,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(98,201,74,.08) 1px, transparent 1px);
}

/* ---------- لایه‌های هیرو ---------- */
.ha-aurora, .ha-canvas, .ha-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ha-aurora { overflow: hidden; }
.ha-aurora i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .32; mix-blend-mode: normal; will-change: transform; }
.ha-aurora i:nth-child(1) { background: radial-gradient(circle, #56a83f, transparent 65%); top: -22vmax; right: -12vmax; animation: haDrift1 16s ease-in-out infinite; }
.ha-aurora i:nth-child(2) { background: radial-gradient(circle, #d8b34a, transparent 65%); bottom: -24vmax; left: -14vmax; animation: haDrift2 19s ease-in-out infinite; }
.ha-aurora i:nth-child(3) { background: radial-gradient(circle, #2fa8ff, transparent 65%); top: 18%; left: 32%; width: 30vmax; height: 30vmax; opacity: .16; animation: haDrift3 23s ease-in-out infinite; }
[data-theme="dark"] .ha-aurora i { opacity: .28; }
@keyframes haDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-9vmax, 7vmax) scale(1.15); } }
@keyframes haDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(10vmax, -8vmax) scale(1.1); } }
@keyframes haDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vmax, -5vmax) scale(1.25); } }
.ha-spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.22), transparent 60%); opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light; }
.hero-center:hover .ha-spot { opacity: 1; }
[data-theme="dark"] .ha-spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(98,201,74,.22), transparent 60%); mix-blend-mode: screen; }

/* نوار بارگذاری بالای صفحه (یک‌بار موقع باز شدن) */
.ha-loader { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none;
    background: linear-gradient(90deg, #56a83f, #d8b34a, #2fa8ff); transform-origin: right; animation: haLoad 1.3s cubic-bezier(.6,.05,.2,1) forwards; }
@keyframes haLoad { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- انیمیشن ورود هیرو (پله‌ای) ---------- */
@keyframes haIn { from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes haPop { 0% { opacity: 0; transform: scale(.4) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.08) rotate(3deg); } 100% { opacity: 1; transform: none; } }
html.js-anim .hero-center__logo img,
html.js-anim .hero-center__logo-fallback { animation: haPop .9s cubic-bezier(.34,1.56,.64,1) .15s both; }
html.js-anim .hero-center__title-line1 { animation: haIn .8s cubic-bezier(.2,.8,.2,1) .4s both; }
html.js-anim .hero-center__rotate-wrap { animation: haIn .8s cubic-bezier(.2,.8,.2,1) .58s both; }
html.js-anim .hero-center__sub { animation: haIn .8s cubic-bezier(.2,.8,.2,1) .76s both; }
html.js-anim .hero-center__actions { animation: haIn .8s cubic-bezier(.2,.8,.2,1) .94s both; }
html.js-anim .site-header { animation: haHeader .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes haHeader { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* درخشش عبوری روی تیتر متحرک و دکمه‌ها */
.hero-center__btn { position: relative; overflow: hidden; }
.hero-center__btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transition: left .7s ease; }
.hero-center__btn:hover::after { left: 130%; }
.hero-center__btn--primary { animation: haPulse 2.8s ease-in-out 2s infinite; }
@keyframes haPulse { 0%,100% { box-shadow: 0 8px 22px rgba(63,143,47,.30); } 50% { box-shadow: 0 8px 34px rgba(63,143,47,.55), 0 0 0 7px rgba(63,143,47,.10); } }

/* ---------- ظاهر شدن بخش‌ها با اسکرول ---------- */
html.js-anim .ha-reveal { opacity: 0; transform: translateY(30px) scale(.985); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
html.js-anim .ha-reveal.is-in { opacity: 1; transform: none; }
.product-grid > *, .category-card { transition: transform .3s ease, box-shadow .3s ease; }
.product-grid > *:hover { transform: translateY(-6px); }
.trust-chip { transition: transform .25s ease; } .trust-chip:hover { transform: translateY(-3px) scale(1.04); }
.section-title h2 { position: relative; display: inline-block; }
.section-title h2::after { content: ""; position: absolute; right: 0; bottom: -6px; height: 3px; width: 0; border-radius: 3px; background: var(--accent-gradient); transition: width .8s .2s cubic-bezier(.2,.8,.2,1); }
.section-title.is-in h2::after { width: 100%; }

@media (max-width: 768px) { .ha-aurora i { filter: blur(50px); } .ha-spot { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .ha-aurora i, .ha-loader, .hero-center__btn--primary { animation: none !important; }
    html.js-anim .hero-center *, html.js-anim .site-header { animation: none !important; }
    html.js-anim .ha-reveal { opacity: 1; transform: none; transition: none; }
}