/** * 🎯 Bangalirhaat Auto-Scroll CSS Enhancements * ──────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────── Scroll Behavior (auto — smooth page-scroll বন্ধ,যাতে কোনো programmatic scroll animated glide হয়ে নিচে টেনে না নেয়;carousel-এর নিজস্ব smooth behavior আলাদা,অক্ষত থাকবে) ──────────────────────────────────────────────────────── */ html{scroll-behavior:auto}body{overflow-x:hidden}/* ──────────────────────────────────────────────────────── Auto-Scroll Carousel Styling ──────────────────────────────────────────────────────── */ [data-autoscroll="true"]{scroll-snap-type:x mandatory;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}[data-autoscroll="true"]::-webkit-scrollbar{display:none}[data-autoscroll="true"] > *{scroll-snap-align:start;flex-shrink:0}/* ──────────────────────────────────────────────────────── Scroll-Reveal Animations ──────────────────────────────────────────────────────── */ [data-scroll-reveal="true"]{opacity:0;transform:translateY(30px);transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),transform 0.6s cubic-bezier(0.4,0,0.2,1)}[data-scroll-reveal="true"].scroll-reveal{opacity:1;transform:translateY(0)}[data-scroll-reveal="true"]:nth-child(1){transition-delay:0s}[data-scroll-reveal="true"]:nth-child(2){transition-delay:0.1s}[data-scroll-reveal="true"]:nth-child(3){transition-delay:0.2s}[data-scroll-reveal="true"]:nth-child(4){transition-delay:0.3s}[data-scroll-reveal="true"]:nth-child(n+5){transition-delay:0.4s}/* ──────────────────────────────────────────────────────── Back-to-Top Button Enhancements ──────────────────────────────────────────────────────── */ #back-to-top{display:none;position:fixed;bottom:24px;right:24px;width:44px;height:44px;background:var(--primary,#8e1e3f);color:white;border:none;border-radius:12px;cursor:pointer;z-index:98;opacity:0;transform:translateY(10px) scale(0.9);transition:all 0.3s cubic-bezier(0.23,1,0.320,1);box-shadow:0 4px 12px rgba(0,0,0,0.15)}#back-to-top[style*="display:block"]{opacity:1;transform:translateY(0) scale(1)}#back-to-top:hover{background:var(--primary-dark,#6e1830);box-shadow:0 8px 20px rgba(0,0,0,0.25);transform:translateY(-2px) scale(1.05)}#back-to-top:active{transform:translateY(2px) scale(0.95)}@media (max-width:640px){#back-to-top{bottom:100px;right:12px;width:40px;height:40px;font-size:18px}}/* ──────────────────────────────────────────────────────── Scroll Progress Bar Enhancements ──────────────────────────────────────────────────────── */ .scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--primary,#8e1e3f) 0%,var(--accent,#c6a35a) 100%);width:0%;z-index:1000;transition:width 0.1s ease-out;box-shadow:0 0 8px rgba(198,163,90,0.4)}/* ──────────────────────────────────────────────────────── Carousel Controls ──────────────────────────────────────────────────────── */ .carousel-controls{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px;opacity:0.7;transition:opacity 0.2s ease-out}.carousel-container:hover .carousel-controls{opacity:1}.carousel-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border,#e0e0e0);background:var(--bg-secondary,white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease-out;color:var(--text,#333)}.carousel-btn:hover{border-color:var(--primary,#8e1e3f);background:var(--primary,#8e1e3f);color:white;transform:scale(1.05)}.carousel-btn:active{transform:scale(0.95)}/* ──────────────────────────────────────────────────────── Smooth Page Transitions ──────────────────────────────────────────────────────── */::selection{background:var(--primary-light,rgba(142,30,63,0.2));color:var(--text,inherit)}::-moz-selection{background:var(--primary-light,rgba(142,30,63,0.2));color:var(--text,inherit)}/* ──────────────────────────────────────────────────────── Fix:Scroll Anchor & Layout Stability ──────────────────────────────────────────────────────── */ html{overflow-anchor:auto}img{display:block;max-width:100%;height:auto}img[loading="lazy"],img[data-lazy]{background:var(--bg-secondary,#f5f5f5);min-height:120px}/* ──────────────────────────────────────────────────────── Dark Mode Support ──────────────────────────────────────────────────────── */ [data-theme="dark"] #back-to-top{background:var(--primary-dark,#c6a35a);box-shadow:0 4px 12px rgba(198,163,90,0.3)}[data-theme="dark"] #back-to-top:hover{background:var(--accent,#e8c674);box-shadow:0 8px 20px rgba(198,163,90,0.4)}[data-theme="dark"] .carousel-btn{border-color:var(--border-dark,#444);background:var(--bg-secondary-dark,#222)}[data-theme="dark"] .carousel-btn:hover{border-color:var(--primary,#c6a35a);background:var(--primary,#c6a35a);color:black}/* ──────────────────────────────────────────────────────── Accessibility:Reduced Motion Support ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-scroll-reveal="true"],#back-to-top,[data-autoscroll="true"],.carousel-btn{transition:none !important}[data-scroll-reveal="true"]{opacity:1;transform:none}}/* ──────────────────────────────────────────────────────── Performance:Will-change optimization ──────────────────────────────────────────────────────── */ [data-autoscroll="true"]{will-change:scroll-position}[data-autoscroll="true"]:not(:hover):not(:focus-visible){will-change:auto}/* ──────────────────────────────────────────────────────── Print Styles ──────────────────────────────────────────────────────── */ @media print{#back-to-top,.carousel-controls,[data-autoscroll="true"]{display:none !important}html{scroll-behavior:auto}}