/** * Shrichakra Theme - Motion * Page entrance, scroll reveals, and shared easing. Everything here is opt-out * safe: prefers-reduced-motion disables it in responsive.css, and a page with * JavaScript disabled shows all content immediately (see .no-js rules). */ :root { --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --reveal-distance: 18px; --reveal-duration: 0.55s; } /* ========================================================================== Page entrance / exit ========================================================================== */ @keyframes page-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes content-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* CRITICAL: never put a transform (or a transform keyframe with fill-mode) on . A computed transform - even the identity matrix an "animation ... both" leaves behind - makes the containing block for every position:fixed descendant, so the WhatsApp bubble, back-to-top, notifications popup, sticky mobile bar and off-canvas drawer all anchor to the bottom of the document instead of the viewport. Body fades opacity only; the slide happens on
, which holds no fixed elements. Deliberately NOT scoped to .js-motion: this stylesheet is render-blocking in , so the rule is live before the first paint. Gating it on a class that JavaScript adds at the end of made the whole page flash. */ body { animation: page-enter 0.35s var(--ease-out-soft) both; } main { animation: content-rise 0.45s var(--ease-out-soft) both; } /* Applied just before an internal navigation commits, so the outgoing page fades rather than snapping to white. Opacity only, for the same reason. */ .is-leaving body { opacity: 0; transition: opacity 0.22s ease; animation: none; } /* ========================================================================== Scroll reveal ========================================================================== */ .js-motion [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-duration) var(--ease-out-soft), transform var(--reveal-duration) var(--ease-out-soft); transition-delay: var(--reveal-delay, 0ms); } .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; } .js-motion [data-reveal="left"] { transform: translateX(calc(var(--reveal-distance) * -1.4)); } .js-motion [data-reveal="right"] { transform: translateX(calc(var(--reveal-distance) * 1.4)); } .js-motion [data-reveal="zoom"] { transform: scale(0.965); } .js-motion [data-reveal="left"].is-revealed, .js-motion [data-reveal="right"].is-revealed, .js-motion [data-reveal="zoom"].is-revealed { transform: none; } /* Children of a [data-reveal-group] cascade in sequence */ .js-motion [data-reveal-group] > * { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-duration) var(--ease-out-soft), transform var(--reveal-duration) var(--ease-out-soft); } .js-motion [data-reveal-group].is-revealed > * { opacity: 1; transform: none; } .js-motion [data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: 0ms; } .js-motion [data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: 70ms; } .js-motion [data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: 140ms; } .js-motion [data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: 210ms; } .js-motion [data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: 280ms; } .js-motion [data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: 350ms; } .js-motion [data-reveal-group].is-revealed > *:nth-child(7) { transition-delay: 420ms; } .js-motion [data-reveal-group].is-revealed > *:nth-child(n + 8) { transition-delay: 490ms; } /* ========================================================================== Header behaviour on scroll ========================================================================== */ .site-header { transition: box-shadow var(--transition-normal), background-color var(--transition-normal); } .site-header.is-stuck { box-shadow: 0 6px 22px rgba(36, 26, 22, 0.10); } /* ========================================================================== Shared interaction polish ========================================================================== */ .card, .quick-nav-item, .quick-card-ref, .rashi-card, .seva-card, .gallery-item { transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast); } .btn { transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), background-image var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .btn:active { transform: translateY(0) scale(0.985); } /* Back-to-top control */ .back-to-top { position: fixed; left: 16px; /* Stacks above the notification launcher in the bottom-left corner */ bottom: 80px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 18px; line-height: 1; border: 1px solid var(--color-border-gold); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast), background-color var(--transition-fast); z-index: var(--z-header); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background: var(--color-primary-dark); } @media (max-width: 768px) { .back-to-top { bottom: 130px; left: 12px; width: 38px; height: 38px; font-size: 16px; } }