/* ============================================
   متدها و جلوه‌های ویژه ۲۰۲۶
   - شناور (Float)
   - محو (Fade/Blur)
   - رقصنده (Dance/Sway)
   - ژله‌ای (Jelly/Elastic)
   - مبتنی بر موس (Mouse Tracker)
   ============================================ */

/* ----------------------------------------------
   ۱. انیمیشن‌های پایه (همه المان‌ها)
   ---------------------------------------------- */
:root {
    --glow-color: rgba(217, 70, 239, 0.6);
    --glow-spread: 150px;
    --transition-speed: 0.6s;
    --jelly-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
    scroll-behavior: smooth;
}

/* ----------------------------------------------
   ۲. افکت شناور (Float) - برای کارت‌ها و محصولات
   ---------------------------------------------- */
.float-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(0.5deg); }
}

.float-animation-delay-1 { animation-delay: 0s; }
.float-animation-delay-2 { animation-delay: 1.5s; }
.float-animation-delay-3 { animation-delay: 3s; }

/* ----------------------------------------------
   ۳. افکت محو و شیشه‌ای (Glassmorphism)
   ---------------------------------------------- */
.glass-effect {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.glass-effect-dark {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------------
   ۴. افکت رقصنده (Sway/Dance) - برای هدر و بنرها
   ---------------------------------------------- */
.dance-animation {
    animation: dance 3s ease-in-out infinite;
}

@keyframes dance {
    0%, 100% { transform: rotate(-1deg) scale(1); }
    25% { transform: rotate(1deg) scale(1.01); }
    50% { transform: rotate(-1.5deg) scale(0.99); }
    75% { transform: rotate(1.5deg) scale(1.01); }
}

/* ----------------------------------------------
   ۵. افکت ژله‌ای (Jelly/Elastic) - برای دکمه‌ها
   ---------------------------------------------- */
.jelly-effect {
    transition: all 0.3s var(--jelly-timing);
}

.jelly-effect:hover {
    transform: scale(1.1);
    animation: jelly 0.8s var(--jelly-timing);
}

@keyframes jelly {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.2, 0.8); }
    50% { transform: scale(0.9, 1.1); }
    70% { transform: scale(1.05, 0.95); }
}

/* ----------------------------------------------
   ۶. افکت نورانی (Glow) - برای دکمه‌ها و بنرها
   ---------------------------------------------- */
.glow-effect {
    position: relative;
    transition: all 0.4s ease;
}

.glow-effect::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #D946EF, #22D3EE, #F1BF0A, #D946EF);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: glow-rotate 4s linear infinite;
}

.glow-effect:hover::before {
    opacity: 1;
}

@keyframes glow-rotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ----------------------------------------------
   ۷. افکت ردیابی موس (Mouse Tracker) - برای هدر و بنر
   ---------------------------------------------- */
.mouse-tracker {
    position: relative;
    overflow: hidden;
}

.mouse-tracker::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.mouse-tracker:hover::after {
    opacity: 1;
}

/* ----------------------------------------------
   ۸. افکت پارالاکس (Parallax) - برای بنر اصلی
   ---------------------------------------------- */
.parallax-section {
    position: relative;
    overflow: hidden;
    perspective: 1000px;
}

.parallax-layer {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* ----------------------------------------------
   ۹. افکت اسکرول محو (Scroll Fade)
   ---------------------------------------------- */
.scroll-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-fade-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-fade-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.scroll-fade-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-fade-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ----------------------------------------------
   ۱۰. افکت بارگذاری (Loading Shimmer)
   ---------------------------------------------- */
.shimmer-effect {
    background: linear-gradient(
        110deg,
        #f0f0f1 30%,
        #e5e5e7 50%,
        #f0f0f1 70%
    );
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------------
   ۱۱. افکت متن تایپ (Typewriter)
   ---------------------------------------------- */
.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-left: 3px solid var(--primary, #D946EF);
    padding-left: 8px;
    animation: typewriter 2s steps(30) 0.5s forwards, blink 0.8s step-end infinite;
    width: 0;
}

@keyframes typewriter {
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

/* ----------------------------------------------
   ۱۲. افکت حرکت پس‌زمینه (Animated Background)
   ---------------------------------------------- */
.animated-bg {
    position: relative;
    overflow: hidden;
}

.animated-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(217,70,239,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(34,211,238,0.05) 0%, transparent 50%);
    animation: bg-pulse 8s ease-in-out infinite alternate;
    z-index: -1;
}

@keyframes bg-pulse {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.2) rotate(3deg); }
}

/* ----------------------------------------------
   ۱۳. افکت شبکه (Grid) روی پس‌زمینه
   ---------------------------------------------- */
.grid-bg {
    position: relative;
}

.grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(217,70,239,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217,70,239,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
}

/* ----------------------------------------------
   ۱۴. افکت هولوگرام (Hologram)
   ---------------------------------------------- */
.hologram-effect {
    position: relative;
    color: transparent;
    background: linear-gradient(135deg, #D946EF, #22D3EE, #F1BF0A, #D946EF);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: hologram-shift 4s linear infinite;
}

@keyframes hologram-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ----------------------------------------------
   ۱۵. افکت ماوس (Custom Cursor)
   ---------------------------------------------- */
.custom-cursor {
    cursor: none;
}

.custom-cursor-dot {
    width: 8px;
    height: 8px;
    background: #D946EF;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.2s;
}

.custom-cursor-ring {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(217,70,239,0.4);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s, border-color 0.4s;
}

/* ----------------------------------------------
   ۱۶. افکت دکمه‌های ویژه (Floating Buttons)
   ---------------------------------------------- */
.floating-btn {
    position: relative;
    padding: 14px 32px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #D946EF, #C026D3);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s var(--jelly-timing);
    box-shadow: 0 8px 30px rgba(217,70,239,0.35);
    overflow: hidden;
    z-index: 1;
}

.floating-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #22D3EE, #D946EF);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.floating-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(217,70,239,0.5);
}

.floating-btn:hover::before {
    opacity: 1;
}

.floating-btn:active {
    transform: scale(0.95);
}

/* ----------------------------------------------
   ۱۷. افکت کارت‌های ۳D (3D Tilt)
   ---------------------------------------------- */
.tilt-3d {
    transform-style: preserve-3d;
    transform: perspective(1000px);
    transition: transform 0.1s ease;
}

/* ----------------------------------------------
   ۱۸. افکت دود/مه (Smoke/Fog)
   ---------------------------------------------- */
.fog-overlay {
    position: relative;
    overflow: hidden;
}

.fog-overlay::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: 
        radial-gradient(ellipse at 30% 50%, rgba(217,70,239,0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(34,211,238,0.04) 0%, transparent 60%);
    animation: fog-move 20s ease-in-out infinite alternate;
    z-index: -1;
}

@keyframes fog-move {
    0% { transform: translateX(-10%) scale(1); opacity: 0.6; }
    100% { transform: translateX(10%) scale(1.2); opacity: 1; }
}

/* ----------------------------------------------
   ۱۹. افکت دایره‌های چرخان (Spinning Orbs)
   ---------------------------------------------- */
.spinning-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: orb-spin 20s linear infinite;
}

.orb:nth-child(1) {
    width: 300px;
    height: 300px;
    background: #D946EF;
    top: -50px;
    right: -50px;
    animation-delay: 0s;
}
.orb:nth-child(2) {
    width: 200px;
    height: 200px;
    background: #22D3EE;
    bottom: -50px;
    left: -50px;
    animation-delay: -7s;
    animation-duration: 25s;
}
.orb:nth-child(3) {
    width: 250px;
    height: 250px;
    background: #F1BF0A;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -14s;
    animation-duration: 30s;
}

@keyframes orb-spin {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(50px, -30px) scale(1.1) rotate(90deg); }
    50% { transform: translate(-20px, 50px) scale(0.9) rotate(180deg); }
    75% { transform: translate(30px, 20px) scale(1.05) rotate(270deg); }
    100% { transform: translate(0, 0) scale(1) rotate(360deg); }
}

/* ----------------------------------------------
   ۲۰. افکت اسنپ اسکرول (Snap Scroll)
   ---------------------------------------------- */
.snap-scroll {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.snap-section {
    scroll-snap-align: start;
    min-height: 100vh;
}

/* ============================================
   پاسخگو و بهینه‌سازی برای موبایل
   ============================================ */
@media (max-width: 768px) {
    .typewriter {
        white-space: normal;
        border-left: none;
        animation: none;
        width: 100%;
    }
    
    .orb {
        filter: blur(40px);
        opacity: 0.15;
    }
    
    .custom-cursor-dot,
    .custom-cursor-ring {
        display: none;
    }
}

/* ============================================================
   اسکرول‌بار سفارشی سبز شناور (شبیه اسلایدر گرد با فلش‌های کوچک بالا/پایین)
   سراسر سایت - از جمله پنل چت دستیار هوش مصنوعی
   ============================================================ */
html { scrollbar-width: thin; scrollbar-color: #34D399 transparent; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: #34D399;
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: padding-box;
    min-height: 42px;
}
*::-webkit-scrollbar-thumb:hover { background-color: #10B981; }

/* توجه: قبلاً اینجا فلش‌های بالا/پایین روی اسکرول‌بار با ::-webkit-scrollbar-button
   و سلکتور سراسری «*» ساخته می‌شد. این ترکیب یک باگ شناخته‌شده‌ی Chromium/Blink را
   فعال می‌کند: با display:block روی ::-webkit-scrollbar-button با سلکتور سراسری،
   مرورگر یک ناحیه‌ی هیت‌تست «دکمه‌ی اسکرول‌بار» را در کل صفحه لحاظ می‌کند که
   رویدادهای wheel (چرخ ماوس) و touch scroll (اسکرول لمسی موبایل) را در همه‌جای
   صفحه می‌قاپد؛ فقط کشیدن دستیِ thumb با ماوس یا کلیک سالم می‌ماند - دقیقاً همان
   رفتاری که باعث «اسکرول نکردن با چرخ موس/تاچ موبایل ولی کارکردن کلیک و درگ» می‌شد.
   برای همین این دکمه‌ها را کاملاً غیرفعال (none) نگه می‌داریم و دیگر برنمی‌گردانیم. */
*::-webkit-scrollbar-button {
    display: none;
}