/* ========================================================================== دفتر حقوقی برزگر — Motion layer (GSAP) -------------------------------------------------------------------------- همه چیز زیر `html.anim` اسکوپ شده است. اگر جاوااسکریپت اجرا نشود، GSAP لود نشود، یا کاربر prefers-reduced-motion داشته باشد، کلاس `anim` روی نمی‌نشیند و این فایل عملاً بی‌اثر است؛ سایت دقیقاً مثل قبل کار می‌کند. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Boot — تا وقتی موتور انیمیشن آماده نشده، عناصرِ صحنه‌سازی مخفی می‌مانند -------------------------------------------------------------------------- */ /* ترنزیشن CSSی reveal با GSAP تداخل دارد؛ کنترل کامل به GSAP سپرده می‌شود */ html.anim [data-reveal] { transition: none !important; will-change: auto; } /* عناصر هیرو که تایم‌لاین ورودی دارند — پیش از شروع پنهان */ html.anim .hero-photo, html.anim .hero-rings { opacity: 0; } /* اینها انیمیشن CSSی روی transform/opacity دارند و بر inline style غلبه می‌کنند؛ زیر لایه GSAP خاموش می‌شوند و معادلشان با GSAP ساخته می‌شود */ html.anim .hero-orb { animation: none; opacity: 0; } html.anim .chip { animation: none; opacity: 0; } /* انیمیشن CSSی آکاردئون جای خود را به نسخه GSAP می‌دهد تا دوبار اجرا نشود */ html.anim .acc-item[open] .acc-body { animation: none; } /* خطوط تزئینی که با اسکرول «کشیده» می‌شوند */ html.anim .step-card::after { transform: scaleY(var(--step-p, 0)); transform-origin: top; } html.anim .timeline::before { transform: scaleY(var(--tl-p, 0)); transform-origin: top; } /* -------------------------------------------------------------------------- 1. Split text — واژه‌ها داخل ماسک بالا می‌آیند نکته مهم RTL: تقسیم فقط در سطح «کلمه» انجام می‌شود، نه حرف؛ شکستن حروف فارسی اتصال (chaining) خط را از بین می‌برد. -------------------------------------------------------------------------- */ html.anim .aw { display: inline-block; overflow: hidden; /* در inline-block با overflow:hidden، خطِ کرسی برابر لبه پایینی حاشیه می‌شود؛ این padding/margin قرینه آن را سر جای خودش برمی‌گرداند تا دنباله حروف فارسی («ج»، «چ»، «ی») بریده نشود. تراز عمودی روی baseline می‌ماند. */ padding-bottom: 0.18em; margin-bottom: -0.18em; } html.anim .awi { display: inline-block; will-change: transform; } /* -------------------------------------------------------------------------- 2. Preloader / پرده انتقال بین صفحات -------------------------------------------------------------------------- */ .preloader { display: none; } html.anim .preloader { display: block; position: fixed; inset: 0; z-index: 9998; pointer-events: none; } html.anim .preloader.is-active { pointer-events: auto; } .pre-slices { position: absolute; inset: 0; display: flex; } .pre-slices i { flex: 1 1 0; height: 100%; display: block; background: linear-gradient(168deg, #04372a 0%, #055240 46%, #022c22 100%); } .pre-slices i:nth-child(even) { background: linear-gradient(168deg, #055240 0%, #04372a 52%, #022c22 100%); } .pre-core { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; } .pre-mark { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 24px; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: #fff; background: linear-gradient(145deg, #10b981, #047857); box-shadow: 0 18px 44px -14px rgba(16, 185, 129, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .pre-name { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.92); } .pre-bar { width: 168px; height: 3px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.16); } .pre-bar i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: right; /* RTL */ border-radius: inherit; background: linear-gradient(90deg, #6ee7b7, #10b981); } /* -------------------------------------------------------------------------- 3. Tilt + glare روی کارت‌ها -------------------------------------------------------------------------- */ .tilt-glare { display: none; } html.anim .tilt-glare { display: block; position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; border-radius: inherit; background: radial-gradient( 16rem 16rem at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.55), rgba(167, 243, 208, 0.16) 38%, transparent 62% ); mix-blend-mode: soft-light; } /* -------------------------------------------------------------------------- 4. نور نقطه‌ای روی پنل‌های تیره -------------------------------------------------------------------------- */ .spotlight { display: none; } html.anim .spotlight { display: block; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; border-radius: inherit; background: radial-gradient( 26rem 20rem at var(--sx, 50%) var(--sy, 50%), rgba(52, 211, 153, 0.28), transparent 62% ); } html.anim .contact-shell, html.anim .stats-band, html.anim .practice-band { position: relative; } /* محتوای این پنل‌ها باید بالای نور بماند — ولی خودِ لایه‌های نور و سوییپ نباید در این قانون بیفتند، وگرنه position:absolute آنها بازنویسی می‌شود. */ html.anim .contact-shell > *:not(.spotlight):not(.band-sweep), html.anim .stats-band > *:not(.spotlight):not(.band-sweep), html.anim .practice-band > *:not(.spotlight):not(.band-sweep) { position: relative; z-index: 2; } /* سوییپ نور که هنگام ورود پنل رد می‌شود */ .band-sweep { display: none; } html.anim .band-sweep { display: block; position: absolute; top: 0; bottom: 0; width: 42%; z-index: 3; opacity: 0; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.30), transparent); filter: blur(6px); } /* -------------------------------------------------------------------------- 5. (حذف شد) هاله دنبال‌کننده ماوس نشانگر پیش‌فرض مرورگر/سیستم در همه حالت‌ها دست‌نخورده باقی می‌ماند. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 6. حلقه پیشرفت دور دکمه «بازگشت به بالا» -------------------------------------------------------------------------- */ .to-top-ring { display: none; } html.anim .to-top-ring { display: block; position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; overflow: visible; } /* دکمه در حالت پایه position:fixed است و خودش containing block حلقه می‌شود؛ بازنویسی آن با position:relative دکمه را به جریان صفحه برمی‌گرداند و به‌اندازه ارتفاع خودش زیر فوتر فضای خالی می‌سازد. */ html.anim .to-top { position: fixed; } html.anim .to-top-ring circle { fill: none; stroke: var(--em-500, #10b981); stroke-width: 2; stroke-linecap: round; } /* -------------------------------------------------------------------------- 7. کشیدن مسیر SVG (تیک‌ها) -------------------------------------------------------------------------- */ html.anim [data-draw] path { will-change: stroke-dashoffset; } /* -------------------------------------------------------------------------- 8. احترام کامل به کاهش حرکت -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .preloader, .tilt-glare, .spotlight, .band-sweep, .to-top-ring { display: none !important; } html.anim .hero-photo, html.anim .hero-rings, html.anim .hero-orb, html.anim .chip { opacity: 1 !important; } html.anim .step-card::after, html.anim .timeline::before { transform: none !important; } } /* -------------------------------------------------------------------------- 9. چاپ -------------------------------------------------------------------------- */ @media print { .preloader, .tilt-glare, .spotlight, .band-sweep { display: none !important; } html.anim .hero-photo, html.anim .hero-rings, html.anim .hero-orb, html.anim .chip { opacity: 1 !important; } }