/* =========================================================
   روزشمار — home-effects.css
   ⚠️ بعد از base.css لود شود
   ========================================================= */

/* ---------- 1) ورود صفحه + اسکرول‌بار ---------- */
@keyframes pageIn{ from{ opacity:0 } }
body{ animation:pageIn .6s ease both }

html{ scrollbar-color:#a8821a #0a0e1a; scrollbar-width:thin }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:#0a0e1a }
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#a8821a,#e2b857);
    border-radius:10px; border:2px solid #0a0e1a;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#e2b857,#f0d080) }

/* ---------- 2) هدر بعد از اسکرول ---------- */
.site-header{ transition:background .35s, box-shadow .35s, border-color .35s }
.site-header.scrolled{
    background:rgba(8,9,15,.95);
    box-shadow:0 12px 40px rgba(0,0,0,.45), 0 1px 0 rgba(226,184,87,.15);
    border-bottom-color:rgba(226,184,87,.18);
}

/* ---------- 3) هیرو: اورورا + شبکه + ذرات ---------- */
.home-hero::before{
    content:''; position:absolute; inset:-30% -15%;
    z-index:-1; pointer-events:none;
    background:
        radial-gradient(38% 45% at 28% 38%, rgba(226,184,87,.13), transparent 70%),
        radial-gradient(34% 42% at 72% 62%, rgba(155,126,232,.11), transparent 70%),
        radial-gradient(26% 34% at 55% 25%, rgba(62,200,189,.07), transparent 70%);
    filter:blur(34px);
    animation:heroAurora 16s ease-in-out infinite alternate;
}
@keyframes heroAurora{
    0%  { transform:translate(0,0) scale(1) rotate(0deg) }
    50% { transform:translate(-2.5%,2%) scale(1.07) rotate(1.5deg) }
    100%{ transform:translate(2.5%,-2%) scale(1.03) rotate(-1deg) }
}

/* شبکه‌ی محو طلایی */
.home-hero::after{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:
        linear-gradient(rgba(226,184,87,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226,184,87,.045) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 75%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 75%);
}

/* ذرات — عناصر با JS ساخته می‌شوند */
.hero-particles{
    position:absolute; inset:0; z-index:-1;
    overflow:hidden; pointer-events:none;
}
.hero-particles span{
    position:absolute; bottom:-12px; left:var(--x,50%);
    width:var(--s,3px); height:var(--s,3px);
    border-radius:50%; background:var(--gold);
    box-shadow:0 0 10px var(--gold);
    opacity:var(--o,.35);
    animation:particleRise var(--d,10s) linear infinite;
}
@keyframes particleRise{
    0%  { transform:translate(0,0); opacity:0 }
    8%  { opacity:var(--o,.35) }
    85% { opacity:var(--o,.35) }
    100%{ transform:translate(var(--dx,0),-46vh); opacity:0 }
}

/* ورود پلکانی عناصر هیرو */
.home-hero > :not(.hero-particles){
    animation:heroIn .9s cubic-bezier(.22,1,.36,1) backwards;
}
.home-hero > :nth-child(1){ animation-delay:.05s }
.home-hero > :nth-child(2){ animation-delay:.15s }
.home-hero > :nth-child(3){ animation-delay:.25s }
.home-hero > :nth-child(4){ animation-delay:.35s }
.home-hero > :nth-child(5){ animation-delay:.45s }
.home-hero > :nth-child(6){ animation-delay:.55s }
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px) } }

/* عنوان هیرو: ورود + شاین باهم */
.home-hero h1{
    animation:heroIn .9s cubic-bezier(.22,1,.36,1) .15s backwards,
              shine 5s linear infinite;
}

/* درخشش عبوری روی بج */
.home-hero-badge{ position:relative; overflow:hidden }
.home-hero-badge::after{
    content:''; position:absolute; top:0; bottom:0; width:40%;
    left:-60%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),transparent);
    transform:skewX(-18deg);
    animation:badgeShine 4.5s ease-in-out infinite;
}
@keyframes badgeShine{ 0%,55%{ left:-60% } 100%{ left:135% } }

/* هاور آمار هیرو */
.hero-stat{
    padding:6px 12px; border-radius:14px;
    transition:transform .3s;
}
.hero-stat:hover{ transform:translateY(-4px) }
.hero-stat strong{
    text-shadow:0 0 24px rgba(226,184,87,.35);
    transition:text-shadow .3s;
}
.hero-stat:hover strong{ text-shadow:0 0 38px rgba(226,184,87,.65) }

/* ---------- 4) دکمه‌ها (برای hero-actions یا هرجا خواستی) ---------- */
.btn{
    position:relative; display:inline-flex; align-items:center; gap:8px;
    padding:13px 28px; border-radius:14px;
    font-weight:800; font-size:.92rem;
    overflow:hidden;
    transition:transform .3s, box-shadow .3s, background .3s, color .3s, border-color .3s;
}
.btn:hover{ transform:translateY(-3px) }
.btn:active{ transform:translateY(-1px) }
.btn::after{
    content:''; position:absolute; top:0; bottom:0; width:45%;
    left:-70%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-18deg);
    transition:left .55s ease;
}
.btn:hover::after{ left:135% }
.btn-gold{
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    color:#0a0e1a;
    box-shadow:0 8px 26px rgba(226,184,87,.35);
}
.btn-gold:hover{ box-shadow:0 14px 36px rgba(226,184,87,.5) }
.btn-ghost{
    background:rgba(255,255,255,.05);
    border:1.5px solid rgba(255,255,255,.14);
    color:var(--text);
    backdrop-filter:blur(8px);
}
.btn-ghost:hover{
    border-color:var(--gold); color:var(--gold);
    background:rgba(226,184,87,.08);
}

/* ---------- 5) کارت‌ها: اسپات‌لایت + تیلت + شاین ---------- */
.home-card{
    background:
        radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),
            rgba(255,255,255,.055), transparent 45%),
        linear-gradient(145deg, rgba(17,24,39,.9), rgba(26,35,50,.95));
    will-change:transform;
}
@media (hover:hover) and (pointer:fine){
    .home-card{
        transform:perspective(900px)
                  rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
                  translateY(var(--ty,0px));
        transition:transform .18s ease-out, border-color .35s, box-shadow .35s;
    }
    .home-card:hover{
        --ty:-6px;
        border-color:var(--accent,var(--gold));
        box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 40px rgba(226,184,87,.15);
    }
}

/* درخشش عبوری روی کارت */
.home-card::after{
    content:''; position:absolute; top:-20%; bottom:-20%; width:34%;
    left:-45%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.09),transparent);
    transform:skewX(-18deg);
    transition:left .65s ease;
    pointer-events:none;
}
.home-card:hover::after{ left:120% }

/* آیکون شناور در حالت عادی (هاور به تیلت خودش می‌رسه) */
.home-card:not(:hover) .home-card-icon{
    animation:iconFloat 6s ease-in-out infinite;
}
@keyframes iconFloat{
    0%,100%{ transform:translateY(0) }
    50%{ transform:translateY(-5px) }
}
.home-card:hover .home-card-meta{ border-top-color:rgba(226,184,87,.3) }

/* ---------- 6) عنوان بخش‌ها — خط متحرک ---------- */
.home-section-title .ico{
    display:inline-grid; place-items:center;
    animation:icoBounce 3.5s ease-in-out infinite;
}
@keyframes icoBounce{
    0%,100%{ transform:translateY(0) }
    50%{ transform:translateY(-5px) }
}
/* خط طلایی با ورود به دید — فقط وقتی JS فعاله (body.fx) */
body.fx .home-section-title::after{ width:0 }
body.fx .home-section-title.in::after{ width:80px }

/* ---------- 7) آیتم‌های رویداد ---------- */
.home-event-item{ position:relative; overflow:hidden }
.home-event-item::after{
    content:'←';
    position:absolute; left:16px; top:50%;
    color:var(--accent,var(--gold)); font-weight:800;
    opacity:0; transform:translate(10px,-50%);
    transition:opacity .3s, transform .3s;
}
.home-event-item:hover::after{ opacity:1; transform:translate(0,-50%) }
.home-event-icon{ transition:transform .3s }
.home-event-item:hover .home-event-icon{
    transform:scale(1.08) rotate(-4deg);
}

/* ---------- 8) ریویل با اسکرول (کلاس‌ها با JS اضافه می‌شوند) ---------- */
.reveal{ opacity:0 }
.reveal.in{
    opacity:1;
    animation:riseIn .8s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay:var(--rd,0s);
}
@keyframes riseIn{
    from{ opacity:0; transform:translateY(28px) }
    to  { opacity:1; transform:translateY(0) }
}

/* ---------- 9) بازگشت به بالا ---------- */
.rs-top{
    position:fixed; bottom:26px; left:26px; z-index:900;
    width:48px; height:48px; border-radius:14px;
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    color:#0a0e1a; font-size:1.2rem; font-weight:900;
    display:grid; place-items:center; cursor:pointer; padding:0;
    box-shadow:0 10px 30px rgba(0,0,0,.4), 0 0 24px rgba(226,184,87,.3);
    opacity:0; visibility:hidden; transform:translateY(16px);
    transition:all .35s;
}
.rs-top.show{ opacity:1; visibility:visible; transform:none }
.rs-top:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 34px rgba(226,184,87,.5);
}

/* ---------- 10) کاهش حرکت ---------- */
@media (prefers-reduced-motion:reduce){
    body, .home-hero > :not(.hero-particles){ animation:none !important }
    .home-hero::before,
    .home-hero-badge::after,
    .home-card:not(:hover) .home-card-icon,
    .home-section-title .ico{ animation:none !important }
    .reveal{ opacity:1 !important }
    .reveal.in{ animation:none !important }
    body.fx .home-section-title::after{ width:80px }
}