/* ============================================================ book-animations.css | Movina Values Link in book.html AFTER escripts.css ============================================================ */ /* ── 1. Scroll-reveal — start VISIBLE, JS opts-in to hiding ── */ /* Elements begin visible so content shows even if JS is slow */ [data-reveal] { transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } /* JS adds .reveal-ready before hiding, preventing flash */ [data-reveal].reveal-ready { opacity: 0; transform: translateY(32px); } [data-reveal="left"].reveal-ready { opacity: 0; transform: translateX(-40px); } [data-reveal="right"].reveal-ready { opacity: 0; transform: translateX(40px); } [data-reveal].is-visible { opacity: 1 !important; transform: none !important; } [data-delay="150"] { transition-delay: 0.15s; } [data-delay="200"] { transition-delay: 0.20s; } [data-delay="300"] { transition-delay: 0.30s; } /* ── 2. Navbar scroll-shrink ── */ #navbar { transition: padding 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; } #navbar.scrolled { padding: 4px 0; box-shadow: 0 4px 24px rgba(0,0,0,0.08); background: rgba(255,255,255,0.97); } /* ── 3. Books page hero entrance (CSS-only, no JS dependency) ── */ .books-page .section-intro .brand-title { opacity: 0; animation: bk-slide-up 0.7s 0.2s cubic-bezier(0.22,1,0.36,1) forwards; } .books-page .section-intro .tagline { opacity: 0; animation: bk-slide-up 0.7s 0.38s cubic-bezier(0.22,1,0.36,1) forwards; } .books-page .section-intro .description { opacity: 0; animation: bk-slide-up 0.7s 0.54s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes bk-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* Animated yellow underline on tagline */ .books-page .section-intro .tagline { position: relative; display: inline-block; } .books-page .section-intro .tagline::after { content: ""; display: block; height: 4px; width: 0; background: #FAC60A; border-radius: 999px; margin: 10px auto 0; animation: bk-underline-in 0.9s 1s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes bk-underline-in { to { width: 65%; } } /* ── 4. Book card hover lift + image zoom ── */ .book-card { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease; } .book-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(74,94,122,0.13); } .book-img { overflow: hidden; border-radius: 8px; } .book-img img { display: block; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); } .book-card:hover .book-img img { transform: scale(1.06); } /* ── 5. Section-intro brand-title underline ── */ .section-intro .brand-title { position: relative; display: inline-block; } .section-intro .brand-title::after { content: ""; display: block; height: 3px; width: 0; background: #FAC60A; border-radius: 999px; margin: 8px auto 0; transition: width 0.8s cubic-bezier(0.22,1,0.36,1); } .section-intro.is-visible .brand-title::after { width: 60%; } /* ── 6. Footer stagger ── */ .footer-column { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .footer-column.is-visible { opacity: 1; transform: none; } /* ── 7. Ripple ── */ .ripple-btn { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: bk-ripple 0.55s linear; background: rgba(255,255,255,0.32); pointer-events: none; } @keyframes bk-ripple { to { transform: scale(4); opacity: 0; } } /* ════════════════════════════════════════════════════════════ SHARED GLASSMORPHISM MODAL SYSTEM ════════════════════════════════════════════════════════════ */ .glass-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 28, 48, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .glass-overlay.active { opacity: 1; pointer-events: auto; } .glass-dialog { position: relative; width: min(520px, 100%); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 28px; padding: 44px 40px 36px; box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.35); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); color: #ffffff; text-align: center; transform: translateY(20px) scale(0.97); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); } .glass-overlay.active .glass-dialog { transform: translateY(0) scale(1); } .glass-close { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; } .glass-close:hover { background: rgba(255,255,255,0.22); transform: rotate(10deg); } .glass-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FAC60A; background: rgba(250,198,10,0.15); border: 1px solid rgba(250,198,10,0.35); padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; } .glass-title { font-size: 1.55rem; font-weight: 800; color: #ffffff; margin: 0 0 4px; line-height: 1.2; } .glass-sub { font-size: 0.88rem; color: rgba(255,255,255,0.6); margin: 0 0 18px; } .glass-divider { width: 48px; height: 3px; background: #FAC60A; border-radius: 999px; margin: 0 auto 18px; } .glass-body { font-size: 0.95rem; color: rgba(255,255,255,0.78); line-height: 1.65; margin-bottom: 24px; } .glass-retailer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 22px; } .glass-retailer-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 10px; border-radius: 14px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); color: #ffffff; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .glass-retailer-btn:hover { background: rgba(255,255,255,0.20); border-color: rgba(250,198,10,0.55); transform: translateY(-3px); } .gr-icon { font-size: 1rem; } .glass-pay-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 24px; border-radius: 999px; background: #FAC60A; color: #1e293b; font-size: 1rem; font-weight: 800; text-decoration: none; border: none; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; margin-bottom: 10px; position: relative; overflow: hidden; } .glass-pay-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(250,198,10,0.35); } .glass-ghost-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 13px 24px; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.75); font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,0.22); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .glass-ghost-btn:hover { background: rgba(255,255,255,0.10); color: #fff; } .glass-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 28px; border-radius: 999px; background: rgba(37,211,102,0.18); border: 1px solid rgba(37,211,102,0.4); color: #aaf5c4; font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; margin-top: 4px; } .glass-whatsapp:hover { background: rgba(37,211,102,0.28); transform: translateY(-2px); } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } [data-reveal], [data-reveal].reveal-ready, .footer-column, .books-page .section-intro .brand-title, .books-page .section-intro .tagline, .books-page .section-intro .description { opacity: 1 !important; transform: none !important; } }