/* ===================================================================== =============== BOOKMART MOTION SYSTEM (one cohesive layer) ======= Loaded on every page via common.css. All keyframes are namespaced with a "bm" prefix to avoid clashing with existing animations. Scroll-reveal only hides content when JS has added html.anim-ready, so the site degrades gracefully if JavaScript is disabled. ===================================================================== */ /* ---------- Keyframes ---------- */ @keyframes bmFadeUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } } @keyframes bmFadeDown { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } } @keyframes bmFadeLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } } @keyframes bmFadeRight{ from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } @keyframes bmPop { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: scale(1); } } @keyframes bmZoomIn { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } } @keyframes bmBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } } @keyframes bmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @keyframes bmSpin { to { transform: rotate(360deg); } } @keyframes bmGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes bmShine { 0% { left: -140%; } 60%, 100% { left: 140%; } } @keyframes bmDrift { 0% { transform: translateY(0) translateX(0) rotate(0); } 50% { transform: translateY(-40px) translateX(20px) rotate(180deg); } 100% { transform: translateY(0) translateX(0) rotate(360deg); } } @keyframes bmRipple { to { transform: scale(4); opacity: 0; } } @keyframes bmGlowPulse{ 0%, 100% { box-shadow: 0 0 0 0 rgba(244,185,66,.5); } 50% { box-shadow: 0 0 0 10px rgba(244,185,66,0); } } @keyframes bmSheen { to { background-position: 200% 0; } } /* ---------- Page load: gentle fade for the whole document ---------- Opacity-only on purpose: a transform on would create a containing block and misplace the fixed decor/progress elements. */ @keyframes bmPageIn { from { opacity: 0; } to { opacity: 1; } } .anim-ready body { animation: bmPageIn .5s ease both; } /* ---------- Scroll reveal (JS toggles .in-view) ---------- */ .anim-ready .reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; } .anim-ready .reveal.reveal-left { transform: translateX(-42px); } .anim-ready .reveal.reveal-right { transform: translateX(42px); } .anim-ready .reveal.reveal-zoom { transform: scale(.9); } .anim-ready .reveal.in-view { opacity: 1; transform: none; } /* ---------- Header: shrink + glass blur once scrolled ---------- */ .header { transition: box-shadow .35s ease, background .35s ease; } .header-main { transition: padding .35s ease; } .header.scrolled { background: rgba(7, 17, 31, 0.82); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .header.scrolled .header-main { padding: 8px 0; } /* Logo life + nav polish */ .logo-icon { display: inline-block; animation: bmBob 3.2s ease-in-out infinite; transform-origin: 50% 70%; } .logo:hover .logo-icon { animation: bmPulse .6s ease; } .nav-links > li > a { transition: color .25s ease, transform .25s ease; } .nav-links > li > a:hover { transform: translateY(-2px); } /* ---------- Logged-in user dropdown ---------- */ .nav-user { position: relative; } .nav-user-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .nav-user-caret { font-size: .7em; transition: transform .25s ease; } .nav-user.open .nav-user-caret { transform: rotate(180deg); } .nav-user-menu { position: absolute; top: calc(100% + 14px); right: 0; min-width: 230px; background: rgba(13, 27, 42, 0.75); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 1200; } .nav-user.open .nav-user-menu { opacity: 1; visibility: visible; transform: none; } .nav-user-menu::before { content: ''; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: var(--bg-primary); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } .nav-user-info { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border-light); font-size: .78rem; color: var(--text-secondary); } .nav-user-info strong { font-size: .92rem; color: var(--text-primary); word-break: break-all; } .nav-user-logout { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--accent); font-weight: 600; cursor: pointer; transition: background .2s ease, transform .15s ease; } .nav-user-logout:hover { background: var(--bg-accent); transform: none; } /* Mobile: render the menu inline within the collapsed nav */ @media (max-width: 768px) { .nav-user-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; min-width: 0; padding: 4px 0 4px 14px; } .nav-user.open .nav-user-menu { display: block; } .nav-user-menu::before { display: none; } } /* Cart badge pops when it changes (JS toggles .bump) */ .cart-count { transition: transform .2s ease; } .cart-count.bump { animation: bmPulse .45s ease; } .cart-link:hover { animation: bmBob 1s ease; } /* ---------- Buttons: sheen sweep + ripple + spring ---------- */ .btn { position: relative; overflow: hidden; isolation: isolate; } .btn::before { content: ''; position: absolute; top: 0; left: -140%; width: 70%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); z-index: 1; } .btn:hover::before { animation: bmShine .8s ease; } .btn:active { transform: scale(.96); } .btn .bm-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transform: scale(0); animation: bmRipple .6s ease-out; pointer-events: none; z-index: 0; } .btn-primary:hover { animation: bmGlowPulse 1.4s ease infinite; } /* ---------- Animated gradient on hero & page banners ---------- */ .hero, .page-banner { background-size: 220% 220% !important; animation: bmGradient 14s ease infinite; } .hero-content h1 { animation: bmFadeLeft .8s ease both; } .hero-content p { animation: bmFadeLeft .8s ease .15s both; } .hero-buttons { animation: bmFadeUp .8s ease .3s both; } .hero-image { animation: bmZoomIn 1s ease .2s both; } .page-banner h1 { animation: bmFadeDown .7s ease both; } .page-banner p { animation: bmFadeUp .7s ease .15s both; } /* Section titles draw their underline in */ .section-title::after { transition: width .6s ease .2s; } .anim-ready .section-title:not(.in-view)::after { width: 0; } /* ---------- Book cards: pop-in on render + richer hover ---------- */ .book-card { animation: bmPop .55s cubic-bezier(.22,.61,.36,1) both; transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; } .book-card:hover { transform: translateY(-10px) scale(1.015); box-shadow: var(--shadow-hover); } .book-card .badge { animation: bmPop .5s ease .1s both; } .book-card .badge.bestseller { animation: bmPop .5s ease .1s both, bmGlowPulse 2s ease 1s infinite; } .book-card-image img { transition: transform .5s ease; } .book-card:hover .book-card-image img { transform: scale(1.08); } .add-to-cart, .book-card-body .add-to-cart { transition: transform .2s ease, background .25s ease; } .add-to-cart:active { transform: scale(.94); } /* Category cards lift + tilt */ .category-card { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; } .category-card:hover { transform: translateY(-8px) scale(1.03); } /* Generic cards / tiles get a friendly lift if present */ .stat-card, .feature-card, .event-card, .value-card, .team-card, .membership-card, .resource-card, .info-card { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; } .stat-card:hover, .feature-card:hover, .event-card:hover, .value-card:hover, .team-card:hover, .resource-card:hover, .info-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } /* Footer links slide on hover; social icons spin-pop */ .footer-section ul li a { transition: color .25s ease, transform .25s ease, padding-left .25s ease; } .footer-section ul li a:hover { transform: translateX(6px); padding-left: 4px; } .social-links a { display: inline-block; transition: transform .3s ease; } .social-links a:hover { transform: translateY(-4px) rotate(-8deg) scale(1.15); } /* Form fields glow softly on focus */ input, textarea, select { transition: box-shadow .25s ease, border-color .25s ease, transform .15s ease; } input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(231, 76, 60, .12); } /* ---------- Floating decorative graphics (injected by JS) ---------- */ .bm-decor { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .bm-decor span { position: absolute; font-size: 2.2rem; opacity: .07; animation: bmDrift linear infinite; will-change: transform; } /* Scroll progress bar (injected by JS) */ .bm-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: linear-gradient(90deg, var(--accent), var(--secondary), var(--accent-light)); background-size: 200% 100%; animation: bmSheen 3s linear infinite; transition: width .1s linear; } /* Back-to-top button (injected by JS) */ .bm-top { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.2rem; display: grid; place-items: center; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(20px) scale(.8); transition: opacity .3s ease, transform .3s ease, background .3s ease; z-index: 1500; cursor: pointer; } .bm-top.show { opacity: 1; transform: none; } .bm-top:hover { background: var(--accent-dark); transform: translateY(-3px); } /* Keep real content above the decorative layer. NOTE: .header is intentionally excluded so its position: sticky is preserved (its own z-index:1000 already sits above the decor). */ main, section, footer, .breadcrumb { position: relative; z-index: 1; } /* ---------- Respect users who prefer less motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .anim-ready .reveal { opacity: 1 !important; transform: none !important; } .bm-decor { display: none; } } /* ===================================================================== ============ PREMIUM GLASS & MOTION ENHANCEMENTS ================== Extra transparency + animation applied site-wide. All motion here is automatically neutralized by the prefers-reduced-motion block above (its universal !important rules win regardless of source order). ===================================================================== */ @keyframes bmLogoGlow { 0%,100% { text-shadow: 0 0 10px rgba(244,185,66,0.25); } 50% { text-shadow: 0 0 22px rgba(244,185,66,0.6); } } @keyframes bmFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes bmAurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ---- Animated glowing line under the sticky header ---- */ .header { position: relative; } .header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,185,66,0.55), rgba(78,168,222,0.55), transparent); background-size: 200% 100%; animation: bmSheen 6s linear infinite; pointer-events: none; } /* ---- Navigation: animated glass pill + glow on hover/active ---- */ .nav-links > li > a { transition: color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease; } .nav-links > li > a:hover, .nav-links > li > a.active { background: var(--glass-background-light); box-shadow: inset 0 0 0 1px var(--border-soft), 0 6px 20px rgba(78, 168, 222, 0.2); transform: translateY(-2px); } /* ---- Logo: gold glow pulse + lift ---- */ .logo span { transition: text-shadow .3s ease; } .logo:hover span { animation: bmLogoGlow 1.6s ease-in-out infinite; } /* ---- Book cards: glass sheen sweep on hover ---- */ .book-card::before { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: skewX(-18deg); transition: left .8s ease; z-index: 3; pointer-events: none; } .book-card:hover::before { left: 140%; } /* ---- Primary buttons: slow gold shimmer ---- */ .btn-primary { background: linear-gradient(120deg, var(--color-gold), var(--color-gold-hover), var(--color-gold)); background-size: 220% 100%; animation: bmSheen 5s linear infinite; } .btn-primary:hover { animation: bmSheen 2.2s linear infinite, bmGlowPulse 1.4s ease infinite; } /* ---- Glass panels & surface cards: interactive glow ---- */ .glass-panel, .glass-panel-light, .surface-card { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; } .glass-panel:hover, .glass-panel-light:hover, .surface-card:hover { border-color: rgba(78, 168, 222, 0.4); box-shadow: var(--shadow-md), var(--shadow-glow); } /* ---- Header action icons: soft glow on hover ---- */ .header-actions a { transition: color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease; } .header-actions a:hover { box-shadow: 0 0 18px rgba(78, 168, 222, 0.35); transform: translateY(-2px); } /* ---- Page banners: gentle animated aurora wash ---- */ .page-banner { background: linear-gradient(135deg, rgba(19,34,56,0.9), rgba(28,48,72,0.9)), radial-gradient(120% 140% at 0% 0%, rgba(244,185,66,0.14), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(78,168,222,0.16), transparent 55%); background-size: 200% 200%, 200% 200%, 200% 200% !important; animation: bmAurora 16s ease infinite; } /* ---- Footer social icons already spin; add a gentle idle float to the brand ---- */ .footer-section:first-child h3 { display: inline-block; animation: bmFloatY 5s ease-in-out infinite; }