/* ============================================= Bianca — Luxe shared layer Reveal-on-scroll system, back-to-top button and base keyframes shared by the luxe page layers. ============================================= */ @keyframes luxeRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes luxeShimmer { 0%, 45% { background-position: 130% 0; } 100% { background-position: -130% 0; } } /* --------------------------------------------- Reveal-on-scroll (hidden state only applies once JS tags ) --------------------------------------------- */ .luxe-js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .luxe-js [data-reveal="left"] { transform: translateX(-36px); } .luxe-js [data-reveal="right"] { transform: translateX(36px); } .luxe-js [data-reveal].is-revealed { opacity: 1; transform: none; } /* --------------------------------------------- Back to top --------------------------------------------- */ .back-to-top { position: fixed; z-index: 120; inset-inline-end: 22px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(196, 149, 106, 0.6); background: rgba(253, 249, 243, 0.92); color: var(--maroon); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(44, 24, 16, 0.16); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background: var(--maroon); border-color: var(--maroon); color: var(--cream); } @media (max-width: 768px) { .back-to-top { width: 42px; height: 42px; inset-inline-end: 14px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } } /* --------------------------------------------- Reduced motion --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .luxe-js [data-reveal] { opacity: 1; transform: none; transition: none; } .back-to-top { transition: none; } }