/* STREAMING_CHUNK:Defining global variables and typography... /
/ ==========================================================================

تعریف فونت‌ها و متغیرهای سراسری (Fonts & Global Variables)
========================================================================== */
@font-face {
font-family: 'Inter';
src: url('../fonts/inter.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: 'Shabnam';
src: url('../fonts/Shabnam-FD.woff2') format('woff2');
font-display: swap;
}

:root {
--transition-premium: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
--transition-smooth: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
--transition-fast: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
--vip-gold: #fbbf24;
--brand-blue: #3b82f6;
--brand-purple: #a855f7;
--dark-bg: #020408;
--card-border: rgba(255, 255, 255, 0.05);
--glow-opacity: 0.35;
}

/* STREAMING_CHUNK:Configuring base styling and scroll-snapping... /
/ ==========================================================================
2. استایل‌های پایه و ریست‌های واکنشی (Base, Reset & Responsive Normalization)
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-rendering: optimizeSpeed;
}

/* فعال‌سازی سیستم اسکرول مرحله‌ای (Scroll Snapping) روان و پیوسته در تمام دسکتاپ و موبایل */
html {
scroll-behavior: smooth;
overflow-x: hidden;
width: 100%;
scroll-snap-type: y proximity;
}

/* تگ‌های سکشن که باید با اسکرول قفل شوند */
.snap-section {
scroll-snap-align: start;
scroll-snap-stop: always;
}

body {
font-family: 'Shabnam', 'Inter', sans-serif;
background-color: var(--dark-bg);
color: #f3f4f6;
overflow-x: hidden;
width: 100%;
position: relative;
z-index: 0;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* STREAMING_CHUNK:Applying GPU acceleration and custom scrollbars... /
/ افکت لمسی سه‌بعدی بهینه‌شده برای درگیر کردن GPU */
button:active,
a:active,
.premium-hover-card:active,
.brand-logo:active,
.story-card:active {
transform: scale3d(0.96, 0.96, 1) !important;
transition: var(--transition-fast) !important;
}

/* هاله‌های نوری شناور پس‌زمینه با فعال‌ساز کارت گرافیک برای جلوگیری از خستگی سی‌پی‌یو */
body::before,
body::after {
content: '';
position: fixed;
width: 55vw;
height: 55vw;
border-radius: 50%;
filter: blur(140px);
z-index: -1;
pointer-events: none;
opacity: var(--glow-opacity);
animation: ambientPulse 15s infinite alternate ease-in-out;
will-change: transform;
transform: translate3d(0, 0, 0);
}

body::before {
top: -12%;
left: -12%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.22), transparent 70%);
}

body::after {
bottom: -12%;
right: -12%;
background: radial-gradient(circle, rgba(168, 85, 247, 0.18), transparent 70%);
animation-delay: -7.5s;
}

@keyframes ambientPulse {
0% { transform: translate3d(0, 0, 0) scale3d(0.9, 0.9, 1); }
100% { transform: translate3d(5%, 5%, 0) scale3d(1.12, 1.12, 1); }
}

/* اسکرول بار باریک و مدرن متناسب با تم تاریک */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(59, 130, 246, 0.4);
}

/* STREAMING_CHUNK:Styling premium glass-panels and visual effects... /
/ ==========================================================================
3. ابزارها و جلوه‌های پیشرفته بصری (Premium Effects & Utilities)
========================================================================== */
.bg-noise {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.012;
background-image: url('../images/noise.png');
transform: translate3d(0, 0, 0);
}

.text-gradient-animated {
background: linear-gradient(to right, #60a5fa, #a855f7, #fbbf24, #60a5fa);
background-size: 200% auto;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
animation: text-shimmer 4s linear infinite;
will-change: background-position;
}

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

.magnetic-wrap {
display: inline-block;
}

/* پنل گلس‌مورفیسم اپل استایل با شتاب‌دهی رندر سخت‌افزاری */
.glass-panel {
background: rgba(255, 255, 255, 0.015) !important;
border: 1px solid var(--card-border) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: var(--transition-smooth);
transform: translate3d(0, 0, 0);
}

.glass-panel:hover {
background: rgba(255, 255, 255, 0.035) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

/* STREAMING_CHUNK:Configuring the 3D Hero Slider container and positions... /
/ ==========================================================================
4. اسلایدر سه‌بعدی ترکیبی هیرو (Hero Hybrid 3D Slider)
========================================================================== */
.hero-slider-stage {
position: relative;
width: 100%;
max-width: 320px;
aspect-ratio: 9 / 16;
margin: 0 auto;
perspective: 1500px;
transform-style: preserve-3d;
}

#hero-hybrid-slider {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
}

/* تعریف موقعیت‌های سه‌بعدی کارت‌های هیرو هماهنگ با کدهای اصلی جاوااسکریپت */
.auto-card {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 2.25rem;
background: rgba(255, 255, 255, 0.01);
border: 1px solid var(--card-border);
box-shadow: 0 25px 65px rgba(0, 0, 0, 0.7);
overflow: hidden;
pointer-events: none;
z-index: 10;
will-change: transform, opacity, filter;
transform-style: preserve-3d;
transform: translate3d(0, 0, -300px) scale3d(0.7, 0.7, 1);
opacity: 0;
}

/* STREAMING_CHUNK:Styling active and blurry left/right card states... */
.auto-card.layer-active {
opacity: 1;
z-index: 30;
pointer-events: auto;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 45px 85px rgba(0, 0, 0, 0.9), 0 0 50px rgba(59, 130, 246, 0.18);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

.auto-card.layer-left {
opacity: 0.35;
z-index: 20;
filter: blur(5px);
-webkit-filter: blur(5px);
transform: translate3d(-40%, 0, -150px) scale3d(0.85, 0.85, 1) rotateY(20deg);
}

.auto-card.layer-right {
opacity: 0.35;
z-index: 20;
filter: blur(5px);
-webkit-filter: blur(5px);
transform: translate3d(40%, 0, -150px) scale3d(0.85, 0.85, 1) rotateY(-20deg);
}

.auto-card.layer-hidden {
opacity: 0;
z-index: 10;
filter: blur(12px);
-webkit-filter: blur(12px);
transform: translate3d(0, 0, -300px) scale3d(0.7, 0.7, 1);
}

.auto-card-media, .story-card-media {
width: 100%;
height: 100%;
object-fit: cover !important;
}

/* STREAMING_CHUNK:Designing floating badges and micro-interactions... /
/ ==========================================================================
5. نشان‌های شناور و آیکون‌ها (Floating Badges & Brand Badges)
========================================================================== */
.floating-badge {
position: absolute;
background: rgba(4, 7, 16, 0.65) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 9999px;
padding: 8px 18px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
z-index: 50;
white-space: nowrap;
transition: var(--transition-smooth);
pointer-events: auto;
will-change: transform;
transform: translate3d(0, 0, 0);
}

.floating-badge:hover {
transform: scale3d(1.05, 1.05, 1) translate3d(0, -5px, 8px);
border-color: rgba(96, 165, 250, 0.4) !important;
box-shadow: 0 25px 45px rgba(59, 130, 246, 0.28);
}

/* هماهنگ‌سازی محل قرارگیری تگ‌های شناور */
.badge-pos-1 { top: 6%; right: -25%; }
.badge-pos-2 { top: 46%; left: -28%; }
.badge-pos-3 { bottom: 10%; right: -22%; }

.adobe-floating-badge {
position: absolute;
z-index: 55;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 9999px;
background: rgba(10, 15, 30, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 11px;
font-weight: 700;
transition: var(--transition-smooth);
pointer-events: auto;
transform: translate3d(0, 0, 0);
}

.adobe-floating-badge:hover {
transform: scale3d(1.06, 1.06, 1) translate3d(0, -2px, 0);
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.25);
}

.badge-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.15);
border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-icon.gold {
background: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-icon.emerald {
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.3);
}

/* STREAMING_CHUNK:Styling bento grid brand cards and interactive glows... /
/ ==========================================================================
6. گرید بنتو برندها و همکاران تجاری (Premium Brands Bento Grid)
========================================================================== */
.bento-brand-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
width: 100%;
}

.premium-brand-card {
position: relative;
background: rgba(255, 255, 255, 0.01) !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 18px !important;
height: 72px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 18px;
gap: 14px;
overflow: hidden;
transition: var(--transition-smooth);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transform: translate3d(0, 0, 0);
will-change: transform;
}

/* افکت نور تابشی هوشمند ماوس (Mouse Gradient Highlight) */
.premium-brand-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(100px circle at var(--x, 50%) var(--y, 50%), rgba(168, 85, 247, 0.15), transparent 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
pointer-events: none;
}

.premium-brand-card:hover::before {
opacity: 1;
}

.premium-brand-card:hover {
transform: translate3d(0, -4px, 0);
border-color: rgba(59, 130, 246, 0.3) !important;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.brand-vector-box {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
color: #94a3b8;
transition: all 0.3s ease;
z-index: 2;
flex-shrink: 0;
}

.premium-brand-card:hover .brand-vector-box {
color: #3b82f6;
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.25);
transform: scale3d(1.08, 1.08, 1);
}

.premium-brand-text {
font-family: 'Shabnam', 'Inter', sans-serif;
font-size: 13.5px;
font-weight: 700;
background: linear-gradient(to bottom, #ffffff, #94a3b8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.75;
transition: all 0.3s ease;
z-index: 2;
}

.premium-brand-card:hover .premium-brand-text {
opacity: 1;
background: linear-gradient(to bottom, #ffffff, #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* STREAMING_CHUNK:Configuring the Instagram-style 3D Story Deck layout... /
/ ==========================================================================
7. دک استوری‌های سه‌بعدی اینستاگرامی (Instagram-Style 3D Story Deck)
========================================================================== */
.story-deck-wrapper {
perspective: 1800px;
width: 100%;
max-width: 820px;
height: 540px;
position: relative;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}

.story-deck-container {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
}

/* استایل سه‌بعدی کارت‌های استوری */
.story-card {
position: absolute;
width: 280px;
height: 490px;
border-radius: 2rem;
overflow: hidden;
cursor: grab;
user-select: none;
background: rgba(10, 15, 26, 0.4);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
will-change: transform, filter, opacity;
transform-style: preserve-3d;
transform: translate3d(0, 0, -300px) scale3d(0.5, 0.5, 1);
opacity: 0;
}

.story-card:active {
cursor: grabbing;
}

/* STREAMING_CHUNK:Applying smooth transitions and active glow states for story cards... */
.story-card.layer-active {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateY(0deg);
z-index: 30;
opacity: 1;
filter: blur(0px) brightness(1);
border-color: rgba(168, 85, 247, 0.35);
box-shadow: 0 25px 50px -10px rgba(168, 85, 247, 0.3),
inset 0 1px 2px rgba(255, 255, 255, 0.2);
animation: activeGlowPulse 4s infinite alternate ease-in-out;
}

@keyframes activeGlowPulse {
0% { box-shadow: 0 25px 50px -10px rgba(168, 85, 247, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2); }
100% { box-shadow: 0 30px 60px -5px rgba(59, 130, 246, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.35); }
}

.story-card.layer-right {
transform: translate3d(240px, 0, -180px) scale3d(0.8, 0.8, 1) rotateY(-25deg);
z-index: 20;
opacity: 0.55;
filter: blur(5px) brightness(0.5);
pointer-events: none;
}

.story-card.layer-left {
transform: translate3d(-240px, 0, -180px) scale3d(0.8, 0.8, 1) rotateY(25deg);
z-index: 20;
opacity: 0.55;
filter: blur(5px) brightness(0.5);
pointer-events: none;
}

.story-card.layer-hidden {
transform: translate3d(0, 0, -350px) scale3d(0.5, 0.5, 1);
z-index: 10;
opacity: 0;
filter: blur(12px);
pointer-events: none;
}

/* ==========================================================================
8. انیمیشن‌های کلی پلتفرم (Keyframes System)
========================================================================== */
@keyframes floating-masterpiece {
0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
100% { transform: translate3d(0, -12px, 0) rotateX(2deg) rotateY(1deg); }
}

/* STREAMING_CHUNK:Optimizing responsive breaks and disabling heavy filters on small devices... /
/ ==========================================================================
9. واکنش‌گرایی صفحه در نمایشگرهای کوچک (Responsive Optimization)
========================================================================== */
@media (max-width: 1280px) {
.badge-pos-1 { right: -15%; }
.badge-pos-2 { left: -16%; }
.badge-pos-3 { right: -14%; }
}

@media (max-width: 1024px) {
.badge-pos-1 { right: -2%; top: 6%; transform: scale3d(0.85, 0.85, 1); }
.badge-pos-2 { left: -3%; top: 46%; transform: scale3d(0.85, 0.85, 1); }
.badge-pos-3 { right: -2%; bottom: 8%; transform: scale3d(0.85, 0.85, 1); }

.story-card.layer-right {
    transform: translate3d(180px, 0, -140px) scale3d(0.8, 0.8, 1) rotateY(-20deg);
}
.story-card.layer-left {
    transform: translate3d(-180px, 0, -140px) scale3d(0.8, 0.8, 1) rotateY(20deg);
}


}

@media (max-width: 768px) {
/* کاهش فیلتر بلر برای اجرای فوق‌العاده روان ۶۰ فریم بر ثانیه در گوشی‌های ضعیف‌تر */
.glass-panel {
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}

body::before, body::after {
    width: 75vw;
    height: 75vw;
    filter: blur(80px);
}

.story-deck-wrapper {
    height: 440px;
}
.story-card {
    width: 220px;
    height: 380px;
    border-radius: 1.5rem;
}
.story-card.layer-right {
    transform: translate3d(130px, 0, -100px) scale3d(0.8, 0.8, 1) rotateY(-15deg);
}
.story-card.layer-left {
    transform: translate3d(-130px, 0, -100px) scale3d(0.8, 0.8, 1) rotateY(15deg);
}


}

@media (max-width: 480px) {
.story-deck-wrapper {
height: 380px;
}
.story-card {
width: 180px;
height: 320px;
}
.story-card.layer-right {
transform: translate3d(90px, 0, -80px) scale3d(0.8, 0.8, 1) rotateY(-12deg);
}
.story-card.layer-left {
transform: translate3d(-90px, 0, -80px) scale3d(0.8, 0.8, 1) rotateY(12deg);
}
.floating-badge {
padding: 6px 12px;
font-size: 10px;
}
.badge-pos-1 { right: -1%; top: 4%; transform: scale3d(0.75, 0.75, 1); }
.badge-pos-2 { left: -2%; top: 48%; transform: scale3d(0.75, 0.75, 1); }
.badge-pos-3 { right: -1%; bottom: 4%; transform: scale3d(0.75, 0.75, 1); }
}