/* ==========================================================================
   SHAHAZ.COM — Performance Optimization Layer CSS
   ফাইল: assets/css/performance.css

   এই ফাইল সাইট-ওয়াইড লোড হয় (শুধু হোমপেজে না) — Lighthouse 95+
   টার্গেট বজায় রাখতে CLS (Cumulative Layout Shift), LCP (Largest
   Contentful Paint), এবং accessibility-বান্ধব motion নিয়ন্ত্রণ করে।
   ========================================================================== */




/*************************************************************
 * FEATURE NAME: Global CLS Prevention
 * Purpose: ছবি/আইফ্রেমের জন্য ডিফল্ট সাইজিং আচরণ নিশ্চিত করা, যাতে
 *          ছবি লোড হওয়ার আগে-পরে পেজ "লাফিয়ে" না ওঠে (Layout Shift)।
 * Files: None
 * Dependencies: None
 * ⚠️ Isolation বাগ-ফিক্স (২০২৬-০৮-১৭, ব্যবহারকারীর নির্দেশে): এই
 *          রুলটা আগে সাইট-জোড়া সব svg/img-কে (Global Mobile Header/
 *          Footer Navigation-এর নিজস্ব আইকনসহ) স্পর্শ করত। ব্যবহারকারীর
 *          স্পষ্ট নির্দেশ: Header/Footer Navigation-এর জন্য কোনো
 *          "leak-প্রবণ" global selector ব্যবহার করা যাবে না, এবং
 *          অন্য কোনো global CSS Header/Footer-এর ভেতরের UI-তে প্রভাব
 *          ফেলতে পারবে না। তাই :not(#shahaz-header *):not(#shahaz-cnav *)
 *          দিয়ে Header (#shahaz-header) ও Footer Mobile Navigation
 *          (#shahaz-cnav) — দুটোর ভেতরের সব svg/img/video/iframe
 *          এই গ্লোবাল রুলের বাইরে রাখা হলো। Profile avatar-এর মতো
 *          component-owned image sizing-ও এই fallback-এর বাইরে রাখা হয়,
 *          যাতে global height:auto কখনো component-এর fixed box ভেঙে না দেয়।
 *          Header/Footer-এর নিজস্ব
 *          icon-সাইজিং এখন সম্পূর্ণ shahaz-header.css/shahaz-footer.css-
 *          এর নিজস্ব, higher-specificity রুলেই নির্ধারিত হয় — কোনো
 *          বাইরের global CSS আর সেটা override করতে পারবে না।
 * Future Customization Notes: নির্দিষ্ট কম্পোনেন্টের aspect-ratio
 *          ইতিমধ্যে সেই কম্পোনেন্টের নিজস্ব CSS ফাইলে সেট করা আছে
 *          (যেমন .shahaz-p-card-media { aspect-ratio: 1/1 })। এই
 *          ব্লক শুধু গ্লোবাল ফলব্যাক নিরাপত্তা হিসেবে কাজ করে।
 *************************************************************/
img:not(#shahaz-header img):not(#shahaz-cnav img):not(.shahaz-profile-avatar),
svg:not(#shahaz-header svg):not(#shahaz-cnav svg),
video:not(#shahaz-header video):not(#shahaz-cnav video),
iframe:not(#shahaz-header iframe):not(#shahaz-cnav iframe) {
	max-width: 100%;
	height: auto;
}

img:not([width]):not([height]) {
	aspect-ratio: attr( width ) / attr( height );
}




/*************************************************************
 * FEATURE NAME: Reduced Motion Support
 * Purpose: ইউজারের অপারেটিং সিস্টেম/ব্রাউজারে "Reduce Motion" চালু
 *          থাকলে সাইটজুড়ে সব CSS অ্যানিমেশন/ট্রানজিশন প্রায়-তাৎক্ষণিক
 *          করে দেওয়া হয় — Accessibility (WCAG 2.1 SC 2.3.3) এবং
 *          কম-শক্তিশালী ডিভাইসে পারফরম্যান্সের জন্যও ভালো।
 * Files: None (সব কম্পোনেন্ট CSS ফাইলের অ্যানিমেশন এখানে override হয়)
 * Dependencies: None
 * Future Customization Notes: কোনো নির্দিষ্ট অ্যানিমেশন এই গ্লোবাল
 *          রুলের বাইরে রাখতে চাইলে সেই সিলেক্টরে বেশি স্পেসিফিসিটি
 *          দিয়ে override করুন, এই ফাইলে exception যোগ করবেন না।
 *************************************************************/
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}




/*************************************************************
 * FEATURE NAME: Below-the-Fold Rendering Deferral
 * Purpose: হোমপেজের নিচের দিকের সেকশনগুলোতে content-visibility:auto
 *          প্রয়োগ করা হয়েছে — ব্রাউজার শুরুতে এই এলিমেন্টগুলোর
 *          ভেতরের রেন্ডারিং/লেআউট/পেইন্ট কাজ স্কিপ করে, যতক্ষণ না
 *          ভিউপোর্টের কাছাকাছি আসে (Native Browser Lazy Rendering,
 *          কোনো JavaScript ছাড়াই — LCP/TBT-তে সরাসরি উন্নতি করে)।
 * Files: template-parts/home/*.php (এই সেকশনগুলোর wrapper class)
 * Dependencies: contain-intrinsic-size (আনুমানিক উচ্চতা, যাতে
 *          placeholder স্ক্রল-বার সাইজ হঠাৎ না বদলায়)
 * Future Customization Notes: নতুন কোনো "নিচের দিকের" সেকশন যোগ
 *          হলে তার ক্লাসও এই সিলেক্টর-লিস্টে যোগ করুন। হিরো/ক্যাটাগরি/
 *          ফ্ল্যাশ সেলের মতো "above-the-fold" সেকশনে কখনো
 *          content-visibility ব্যবহার করবেন না (LCP খারাপ হয়ে যায়)।
 *************************************************************/
.shahaz-vendor-spotlight,
.shahaz-top-brands,
.shahaz-recently-viewed {
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}




/*************************************************************
 * FEATURE NAME: GPU-Accelerated Animation Hints
 * Purpose: ঘন ঘন অ্যানিমেটেড এলিমেন্টে will-change দিয়ে ব্রাউজারকে
 *          আগেভাগে জানানো যে এগুলো transform/opacity বদলাবে —
 *          ব্রাউজার এগুলোকে আলাদা GPU লেয়ারে রাখে, মূল থ্রেড কম
 *          কাজ করে (Smooth 60fps অ্যানিমেশন, বিশেষ করে মোবাইলে)।
 * Files: None
 * Dependencies: None
 * Future Customization Notes: will-change খুব বেশি এলিমেন্টে ব্যবহার
 *          করলে মেমোরি বেড়ে গিয়ে উল্টো পারফরম্যান্স খারাপ হতে পারে —
 *          শুধু সত্যিই ঘন ঘন অ্যানিমেটেড এলিমেন্টেই সীমাবদ্ধ রাখা
 *          হয়েছে (কার্ড হোভার, স্লাইডার, স্টিকি ন্যাভ রিপল)।
 *************************************************************/
.shahaz-p-card,
.shahaz-hero-track,
.shahaz-cnav-ripple,
.shahaz-live-popup {
	will-change: transform;
}




/*************************************************************
 * FEATURE NAME: Skeleton Loading Utility
 * Purpose: সাইটজুড়ে যেকোনো জায়গায় পুনঃব্যবহারযোগ্য একটা জেনেরিক
 *          স্কেলিটন-শিমার ক্লাস — প্রোডাক্ট কার্ড নিজস্ব স্কেলিটন
 *          ব্যবহার করে (assets/css/signature-product-card.css), কিন্তু
 *          ভবিষ্যতে অন্য কোনো কম্পোনেন্টেও (যেমন Product Page গ্যালারি)
 *          একই প্যাটার্ন দরকার হলে এই ইউটিলিটি ক্লাস ব্যবহার করা যাবে,
 *          নতুন করে শিমার অ্যানিমেশন লেখার দরকার নেই।
 * Files: None
 * Dependencies: None
 * Future Customization Notes: `class="shahaz-skeleton"` যেকোনো
 *          এলিমেন্টে বসালেই কাজ করবে।
 *************************************************************/
.shahaz-skeleton {
	background: linear-gradient(100deg, var(--shahaz-softpink) 30%, #fff 50%, var(--shahaz-softpink) 70%);
	background-size: 200% 100%;
	animation: shahaz-skeleton-shimmer 1.4s ease-in-out infinite;
}

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




/*************************************************************
 * FEATURE NAME: Scroll Performance
 * Purpose: হরাইজন্টাল স্ক্রলযোগ্য এলাকা (Stories, Voucher Track,
 *          Brand Slider) স্মুথ টাচ স্ক্রলিং + GPU-composited
 *          scrolling পায়, মোবাইলে জ্যাঙ্ক এড়ানো যায়। (Benefits
 *          Strip এখন আর হরাইজন্টাল-স্ক্রল না — wrap-grid, তাই এই
 *          লিস্ট থেকে সরানো হয়েছে।)
 * Files: None
 * Dependencies: None
 * Future Customization Notes: নতুন কোনো হরাইজন্টাল-স্ক্রল সেকশন
 *          যোগ হলে তার ক্লাসও এখানে যোগ করুন।
 *************************************************************/
.shahaz-stories-track,
.shahaz-voucher-track,
.shahaz-brand-slider-track {
	-webkit-overflow-scrolling: touch;
	transform: translateZ(0);
}