/* ════════════════════════════════════════════════
   animefa-shared.css  —  tokens & base
   ════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg:          #080811;
  --bg-card:     #0e0e1a;
  --bg-hover:    #13131f;
  --bg-input:    #111120;
  --border:      rgba(139,92,246,.18);
  --border-glow: rgba(139,92,246,.5);
  --primary:     #8b5cf6;
  --primary-dim: #6d28d9;
  --accent:      #06b6d4;
  --accent2:     #f472b6;
  --text:        #f1f0ff;
  --text-sub:    #a09ec0;
  --text-muted:  #5c5a7a;
  --red:         #ef4444;
  --green:       #22c55e;
  --gold:        #fbbf24;
  --radius:      12px;
  --radius-lg:   18px;
  --transition:  all .22s cubic-bezier(.4,0,.2,1);
  --shadow:      0 8px 32px rgba(0,0,0,.4);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Vazirmatn',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; direction:rtl; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--primary-dim); border-radius:3px; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 20px; border-radius:10px; font-size:.88rem; font-weight:600; border:none; cursor:pointer; transition:var(--transition); text-decoration:none; white-space:nowrap; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-dim)); color:#fff; box-shadow:0 4px 20px rgba(139,92,246,.3); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 28px rgba(139,92,246,.5); }
.btn-ghost { background:transparent; color:var(--text-sub); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--text); border-color:var(--border-glow); background:rgba(139,92,246,.08); }
.btn-danger { background:rgba(239,68,68,.15); color:var(--red); border:1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background:rgba(239,68,68,.25); }
.btn-success { background:rgba(34,197,94,.15); color:var(--green); border:1px solid rgba(34,197,94,.3); }
.btn-success:hover { background:rgba(34,197,94,.25); }
.btn-sm { padding:6px 14px; font-size:.8rem; border-radius:8px; }
.btn-lg { padding:13px 28px; font-size:1rem; border-radius:12px; }

/* ── BADGES ── */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:5px; font-size:.65rem; font-weight:700; letter-spacing:.4px; }
.badge-sub  { background:rgba(139,92,246,.8); color:#fff; }
.badge-new  { background:rgba(6,182,212,.8); color:#fff; }
.badge-hot  { background:rgba(244,114,182,.8); color:#fff; }
.badge-dl   { background:rgba(251,191,36,.8); color:#000; }
.badge-done { background:rgba(34,197,94,.8); color:#fff; }

/* ── FORM ── */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:.83rem; font-weight:600; color:var(--text-sub); }
.form-input { background:var(--bg-input); border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:.9rem; outline:none; transition:var(--transition); width:100%; }
.form-input:focus { border-color:var(--border-glow); box-shadow:0 0 0 3px rgba(139,92,246,.12); }
.form-input::placeholder { color:var(--text-muted); }
select.form-input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c5a7a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 12px center; padding-left:32px; }
textarea.form-input { resize:vertical; min-height:100px; }

/* ── CARD ── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; }
.card:hover { border-color:var(--border-glow); }

/* ── SHARED NAV ── */
.navbar { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:20px; padding:0 32px; height:64px; background:rgba(8,8,17,.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.nav-logo { display:flex; align-items:center; gap:10px; font-size:1.3rem; font-weight:900; flex-shrink:0; }
.nav-logo-icon { width:32px; height:32px; background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:8px; display:grid; place-items:center; }
.logo-fa { color:var(--primary); }

/* ── TOAST ── */
#toast-container { position:fixed; bottom:24px; left:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast { display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; background:var(--bg-card); border:1px solid var(--border); box-shadow:var(--shadow); font-size:.88rem; font-weight:500; animation:toastIn .3s ease; min-width:240px; }
.toast.success { border-color:rgba(34,197,94,.4); color:var(--green); }
.toast.error   { border-color:rgba(239,68,68,.4); color:var(--red); }
.toast.info    { border-color:rgba(139,92,246,.4); color:var(--primary); }
@keyframes toastIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .2s; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:32px; width:100%; max-width:500px; position:relative; transform:scale(.95); transition:transform .2s; }
.modal-overlay.open .modal { transform:scale(1); }
.modal-close { position:absolute; top:16px; left:16px; background:none; border:none; color:var(--text-muted); font-size:1.3rem; cursor:pointer; width:32px; height:32px; display:grid; place-items:center; border-radius:8px; transition:var(--transition); }
.modal-close:hover { background:rgba(255,255,255,.06); color:var(--text); }
.modal-title { font-size:1.1rem; font-weight:800; margin-bottom:20px; }

/* ── LOADING ── */
.spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.page-loading { display:flex; align-items:center; justify-content:center; min-height:300px; }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .5s ease,transform .5s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE HELPERS ── */
@media(max-width:768px){
  .navbar { padding:0 16px; }
  .hide-mobile { display:none !important; }
}

/* ════════════════════════════════════════════════
   COMPONENT & ANIMATION LIBRARY  (v2)
   ════════════════════════════════════════════════ */

.container { max-width:1320px; margin:0 auto; padding:0 32px; }
@media(max-width:768px){ .container { padding:0 16px; } }

/* ── animated gradient headline text ── */
.gradient-text {
  background:linear-gradient(110deg,var(--primary),var(--accent),var(--accent2),var(--primary));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:gradShift 8s linear infinite;
}
@keyframes gradShift { to { background-position:300% 0; } }

/* ── section header ── */
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section-title { font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:900; letter-spacing:-.3px; display:flex; align-items:center; gap:12px; }
.section-title::before { content:''; width:5px; height:1.1em; border-radius:3px; background:linear-gradient(var(--primary),var(--accent)); box-shadow:0 0 14px rgba(139,92,246,.6); }
.section-link { font-size:.82rem; font-weight:700; color:var(--text-sub); display:inline-flex; align-items:center; gap:5px; transition:var(--transition); }
.section-link:hover { color:var(--primary); gap:9px; }

/* ── ANIME CARD ── */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:20px 18px; }
@media(max-width:540px){ .card-grid { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:16px 12px; } }

.anime-card { position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-card); border:1px solid var(--border); cursor:pointer; display:block; color:inherit; transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s; will-change:transform; }
.anime-card:hover { transform:translateY(-8px); border-color:var(--border-glow); box-shadow:0 18px 44px -12px rgba(139,92,246,.55); }
.anime-card .poster-wrap { position:relative; aspect-ratio:2/3; overflow:hidden; background:linear-gradient(135deg,#15102b,#0a1622); }
.anime-card .poster { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.anime-card:hover .poster { transform:scale(1.08); }
.anime-card .poster-grad { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,8,17,.92) 4%,rgba(8,8,17,.25) 40%,transparent 70%); opacity:.85; transition:opacity .35s; }
.anime-card:hover .poster-grad { opacity:1; }
.card-badges { position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:5px; align-items:flex-end; z-index:2; }
.card-score { position:absolute; top:8px; left:8px; z-index:2; display:inline-flex; align-items:center; gap:3px; padding:3px 7px; border-radius:7px; background:rgba(8,8,17,.7); backdrop-filter:blur(6px); color:var(--gold); font-size:.72rem; font-weight:800; border:1px solid rgba(251,191,36,.25); }
.card-body { position:absolute; bottom:0; left:0; right:0; padding:10px 12px 12px; z-index:2; }
.card-title { font-size:.85rem; font-weight:800; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-sub { font-size:.68rem; color:var(--text-sub); margin-top:3px; display:flex; gap:7px; align-items:center; }
.card-play { position:absolute; inset:0; display:grid; place-items:center; z-index:1; opacity:0; transition:opacity .3s; }
.anime-card:hover .card-play { opacity:1; }
.card-play span { width:52px; height:52px; border-radius:50%; background:rgba(139,92,246,.92); display:grid; place-items:center; box-shadow:0 8px 28px rgba(139,92,246,.6); transform:scale(.7); transition:transform .3s; }
.anime-card:hover .card-play span { transform:scale(1); }
.card-play svg { margin-right:-3px; }

/* ── HORIZONTAL ROW SCROLLER ── */
.row-scroller { position:relative; }
.row-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.row-track::-webkit-scrollbar { display:none; }
.row-track > * { scroll-snap-align:start; flex:0 0 176px; }
@media(max-width:540px){ .row-track > * { flex:0 0 138px; } }
.row-arrow { position:absolute; top:calc(50% - 18px); transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:rgba(14,14,26,.9); border:1px solid var(--border); color:var(--text); display:grid; place-items:center; cursor:pointer; z-index:5; backdrop-filter:blur(8px); transition:var(--transition); opacity:0; }
.row-scroller:hover .row-arrow { opacity:1; }
.row-arrow:hover { background:var(--primary); border-color:var(--primary); transform:translateY(-50%) scale(1.08); }
.row-arrow.left { left:-8px; } .row-arrow.right { right:-8px; }
@media(max-width:768px){ .row-arrow { display:none; } }

/* ── SKELETON SHIMMER ── */
.skeleton { position:relative; overflow:hidden; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.skeleton::after { content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(139,92,246,.10),transparent); animation:shimmer 1.5s infinite; }
.skeleton-card { aspect-ratio:2/3; border-radius:var(--radius-lg); }
@keyframes shimmer { 100% { transform:translateX(100%); } }

/* ── HERO CAROUSEL ── */
.hero { position:relative; height:clamp(420px,62vh,620px); overflow:hidden; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; pointer-events:none; }
.hero-slide.active { opacity:1; pointer-events:auto; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); transition:transform 7s ease; }
.hero-slide.active .hero-bg { transform:scale(1); }
.hero-grad { position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 2%,rgba(8,8,17,.55) 45%,rgba(8,8,17,.35) 100%),linear-gradient(to left,transparent 35%,rgba(8,8,17,.85) 100%); }
.hero-inner { position:relative; z-index:2; height:100%; max-width:1320px; margin:0 auto; padding:0 40px 64px; display:flex; flex-direction:column; justify-content:flex-end; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800; color:var(--accent); margin-bottom:12px; letter-spacing:.5px; }
.hero-title { font-size:clamp(2rem,5vw,4rem); font-weight:900; line-height:1.05; letter-spacing:-1px; max-width:760px; text-shadow:0 4px 30px rgba(0,0,0,.5); }
.hero-meta { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.hero-syn { font-size:.95rem; color:var(--text-sub); max-width:600px; line-height:1.75; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:22px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-dots { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.hero-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:var(--transition); }
.hero-dot.active { background:var(--primary); width:26px; border-radius:5px; box-shadow:0 0 12px var(--primary); }
@media(max-width:768px){ .hero-inner { padding:0 18px 54px; } }

/* ── CHIPS ── */
.chip-row { display:flex; gap:10px; flex-wrap:wrap; }
.chip { padding:8px 16px; border-radius:100px; font-size:.83rem; font-weight:700; background:var(--bg-card); border:1px solid var(--border); color:var(--text-sub); cursor:pointer; transition:var(--transition); white-space:nowrap; }
.chip:hover { color:var(--text); border-color:var(--border-glow); transform:translateY(-2px); }
.chip.active { background:linear-gradient(135deg,var(--primary),var(--primary-dim)); color:#fff; border-color:transparent; box-shadow:0 4px 18px rgba(139,92,246,.4); }

/* ── lazy image fade ── */
img.lazy-img { opacity:0; transition:opacity .5s ease; }
img.lazy-img.loaded { opacity:1; }

/* ── animated background orbs (reusable) ── */
.bg-orbs { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.10; }
.orb-1 { width:520px; height:520px; background:radial-gradient(circle,#8b5cf6,transparent); top:-160px; right:-120px; animation:orbFloat 14s ease-in-out infinite; }
.orb-2 { width:420px; height:420px; background:radial-gradient(circle,#06b6d4,transparent); bottom:-120px; left:-100px; animation:orbFloat 11s ease-in-out infinite reverse; }
.orb-3 { width:340px; height:340px; background:radial-gradient(circle,#f472b6,transparent); top:40%; left:50%; animation:orbFloat 16s ease-in-out infinite; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-40px)} }

/* ── footer ── */
.site-footer { border-top:1px solid var(--border); margin-top:72px; padding:44px 0 32px; background:linear-gradient(to bottom,transparent,rgba(139,92,246,.03)); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.footer-col h4 { font-size:.95rem; font-weight:800; margin-bottom:14px; }
.footer-col a { display:block; font-size:.85rem; color:var(--text-sub); padding:5px 0; transition:var(--transition); }
.footer-col a:hover { color:var(--primary); padding-right:5px; }
.footer-bottom { text-align:center; color:var(--text-muted); font-size:.8rem; margin-top:32px; padding-top:24px; border-top:1px solid var(--border); }
@media(max-width:680px){ .footer-grid { grid-template-columns:1fr 1fr; gap:24px; } }

/* ── entrance animation ── */
.fade-up { animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.stagger > * { animation:fadeUp .55s cubic-bezier(.2,.7,.2,1) both; }
.stagger > *:nth-child(1){animation-delay:.04s}.stagger > *:nth-child(2){animation-delay:.08s}.stagger > *:nth-child(3){animation-delay:.12s}.stagger > *:nth-child(4){animation-delay:.16s}.stagger > *:nth-child(5){animation-delay:.2s}.stagger > *:nth-child(6){animation-delay:.24s}.stagger > *:nth-child(7){animation-delay:.28s}.stagger > *:nth-child(8){animation-delay:.32s}

/* ── empty state ── */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state svg { opacity:.4; margin:0 auto 14px; }

/* ── ACCESSIBILITY: respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero-bg { transform:none !important; }
}

/* ── focus visibility (a11y) ── */
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }

/* ── PAYWALL overlay ── */
.paywall-host { position:relative; }
.paywall {
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:20px; text-align:center;
  background:radial-gradient(circle at 50% 40%, rgba(20,12,40,.82), rgba(8,8,17,.94));
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); border-radius:inherit;
  animation:pwIn .35s ease;
}
@keyframes pwIn { from { opacity:0; } to { opacity:1; } }
.paywall-card { max-width:380px; }
.paywall-icon {
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.35);
  box-shadow:0 0 30px rgba(251,191,36,.15);
}
.paywall-card h3 { font-size:1.15rem; font-weight:800; margin-bottom:8px; }
.paywall-card p { font-size:.86rem; color:var(--text-sub); margin-bottom:18px; line-height:1.7; }
.paywall-cta { display:flex; flex-direction:column; gap:10px; align-items:center; }

/* ── subscription page ── */
.plan-card {
  background:linear-gradient(160deg, rgba(139,92,246,.14), rgba(6,182,212,.06));
  border:1px solid var(--border-glow); border-radius:var(--radius-lg); padding:30px; text-align:center;
  position:relative; overflow:hidden;
}
.plan-card::before {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(139,92,246,.12), transparent 60%); pointer-events:none;
}
.plan-price { font-size:2.6rem; font-weight:900; color:var(--text); position:relative; }
.plan-price span { font-size:1rem; font-weight:600; color:var(--text-sub); }
.plan-feat { display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--text-sub); padding:7px 0; }
.plan-feat svg { color:var(--green); flex-shrink:0; }
.sub-status-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px; font-size:.85rem; font-weight:700; }
.sub-on  { background:rgba(34,197,94,.14); color:var(--green); border:1px solid rgba(34,197,94,.3); }
.sub-off { background:rgba(239,68,68,.12); color:var(--red); border:1px solid rgba(239,68,68,.3); }