/* =====================================================================
   فیزیک بیات — سیستم طراحی (روشن، شیشه‌ای، گرادینت ملایم)
   مسیر: public/css/site.css
   ===================================================================== */

:root {
    --brand-500: #22c55e;
    --brand-600: #16a34a;
    --brand-700: #15803d;
    --teal:      #14b8a6;
    --cyan:      #06b6d4;
    --gold:      #facc15;
    --ink:       #0f172a;
    --muted:     #64748b;

    --glass-bg:     rgba(255, 255, 255, .62);
    --glass-border: rgba(255, 255, 255, .78);
    --shadow-soft:  0 10px 40px -14px rgba(15, 23, 42, .14);
    --shadow-glow:  0 24px 56px -20px rgba(22, 163, 74, .38);
}

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body {
    font-family: 'Vazirmatn', system-ui, sans-serif;
    color: var(--ink);
    background: #f5f8fb;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

[x-cloak] { display: none !important; }

/* ---------- پس‌زمینه‌ی aurora و شبکه‌ی نقطه‌ای ---------- */
.bg-aurora {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(60rem 40rem at 92% -8%,  rgba(34, 197, 94, .20), transparent 60%),
        radial-gradient(50rem 36rem at 2% 8%,    rgba(6, 182, 212, .16), transparent 60%),
        radial-gradient(42rem 30rem at 62% 105%, rgba(250, 204, 21, .13), transparent 60%),
        #f5f8fb;
}
.bg-grid {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(15, 23, 42, .075) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}

/* ---------- شیشه ---------- */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
            backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}
.glass-strong { background: rgba(255, 255, 255, .86); }

/* حاشیه‌ی گرادینتی روی کارت */
.gradient-border { position: relative; }
.gradient-border::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(34, 197, 94, .55), rgba(6, 182, 212, .35), rgba(250, 204, 21, .45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none; opacity: .75; transition: opacity .3s;
}
.gradient-border:hover::before { opacity: 1; }

.card-lift { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.card-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); }

/* ---------- دکمه‌ها ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 800; font-size: .9rem; white-space: nowrap;
    padding: .8rem 1.4rem; border-radius: 1rem;
    transition: transform .2s, box-shadow .25s, background .2s, border-color .2s;
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: .55rem 1rem; font-size: .8rem; border-radius: .85rem; }

.btn-primary {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #16a34a, #14b8a6);
    box-shadow: 0 14px 30px -12px rgba(22, 163, 74, .65);
}
.btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
    transform: translateX(120%); transition: transform .8s;
}
.btn-primary:hover { box-shadow: 0 18px 38px -12px rgba(22, 163, 74, .75); }
.btn-primary:hover::after { transform: translateX(-120%); }

.btn-ghost {
    color: var(--ink); background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .09);
}
.btn-ghost:hover { background: #fff; border-color: rgba(22, 163, 74, .45); }

.btn-gold {
    color: #1c1917;
    background: linear-gradient(135deg, #fde047, #facc15 55%, #f59e0b);
    box-shadow: 0 12px 26px -12px rgba(234, 179, 8, .75);
}
.btn-gold:hover { box-shadow: 0 16px 32px -12px rgba(234, 179, 8, .9); }

/* ---------- متن و نشان‌ها ---------- */
.gradient-text {
    background: linear-gradient(120deg, #16a34a 0%, #0ea5a4 50%, #eab308 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 800; padding: .35rem .8rem; border-radius: 999px;
    color: #15803d; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .25);
}
.icon-tile {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 3rem; height: 3rem; border-radius: 1rem; font-size: 1.15rem; color: #fff;
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    box-shadow: 0 12px 24px -10px rgba(22, 163, 74, .6);
}
.icon-tile.gold { background: linear-gradient(135deg, #fde047, #f59e0b); color: #78350f; box-shadow: 0 12px 24px -10px rgba(234, 179, 8, .7); }
.icon-tile.cyan { background: linear-gradient(135deg, #22d3ee, #3b82f6); box-shadow: 0 12px 24px -10px rgba(14, 165, 233, .6); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- هدر ---------- */
.site-header { transition: box-shadow .3s, background .3s; }
.site-header.is-scrolled { box-shadow: 0 16px 40px -16px rgba(15, 23, 42, .22); background: rgba(255, 255, 255, .85); }

/* ---------- انیمیشن‌ها ---------- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 8s ease-in-out infinite; animation-delay: -2s; }

@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); } 100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); } }
.pulse-dot { width: .55rem; height: .55rem; border-radius: 999px; background: #22c55e; animation: pulse-ring 1.8s infinite; }

/* ظاهر شدن هنگام اسکرول (فقط وقتی JS فعال است) */
.js .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--d, 0ms);
}
.js .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .float, .float-slow, .pulse-dot { animation: none; }
    .card-lift, .btn { transition: none; }
}


/* =====================================================================
   پخش‌کننده‌ی امن ویدیو (بدون دکمه‌ی دانلود)
   ===================================================================== */
.sp { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; direction: ltr;
      -webkit-user-select: none; user-select: none; outline: none; }
.sp:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; }
.sp:-webkit-full-screen { aspect-ratio: auto; width: 100vw; height: 100vh; }
.sp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

.sp-wm { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; white-space: nowrap;
         color: rgba(255, 255, 255, .42); font-size: 12px; font-weight: 800; direction: rtl;
         text-shadow: 0 1px 3px rgba(0, 0, 0, .7); transition: transform 1.8s ease-in-out; }

.sp-big { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; }
.sp-big i { width: 4.5rem; height: 4.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
            background: rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
            color: #fff; font-size: 1.5rem; transition: transform .2s, opacity .2s; }
.sp.is-playing .sp-big i { opacity: 0; transform: scale(.8); }

.sp-error { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; text-align: center;
            padding: 1rem; color: #fff; font-size: .85rem; font-weight: 800; background: rgba(2, 6, 23, .85); direction: rtl; }
.sp-error[hidden] { display: none; }

.sp-bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .6rem;
          padding: 1.8rem .8rem .6rem; color: #fff; font-size: .75rem; font-weight: 700;
          background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent); transition: opacity .25s; }
.sp.sp-idle.is-playing .sp-bar { opacity: 0; pointer-events: none; }
.sp-bar button { color: #fff; background: transparent; border: 0; cursor: pointer; padding: .35rem .5rem; border-radius: .6rem; min-width: 2rem; }
.sp-bar button:hover { background: rgba(255, 255, 255, .15); }
.sp-time { white-space: nowrap; opacity: .9; font-variant-numeric: tabular-nums; }

.sp-bar input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 99px; cursor: pointer; outline: none;
    background: linear-gradient(to right, #22c55e var(--p, 0%), rgba(255, 255, 255, .3) var(--p, 0%)); }
.sp-bar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(34, 197, 94, .45); }
.sp-bar input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; }
.sp-seek { flex: 1; min-width: 0; }
.sp-vol { width: 4.5rem; }
@media (max-width: 640px) { .sp-vol, .sp-time-dur { display: none; } .sp-big i { width: 3.6rem; height: 3.6rem; font-size: 1.2rem; } }


/* =====================================================================
   نشان سایت (لوگو)
   ===================================================================== */
.logo-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: .9rem;
             background: linear-gradient(160deg, #ffffff, #eef7f3); border: 1px solid rgba(15, 23, 42, .07);
             box-shadow: 0 10px 22px -12px rgba(15, 23, 42, .45), inset 0 1px 0 #fff; }
.logo-mark img { width: 82%; height: 82%; object-fit: contain; display: block; }