/** * Krivedha Festive Animations * * Ambient decoration only — no banners, no badges, no text of any kind is * added to the site. Just an overlay carrying the marigold fall, the fireworks * and the hanging bells. * * Palette note: the store's brand is herbal green (#6f972b on the homepage, * #8bc34a as the Astra theme colour) on a warm cream ground (#f8f6f3). The * festive layer sits on top in marigold, saffron and temple gold, which reads * as deliberate against the greens. */ /* --------------------------------------------------------------------------- Overlay --------------------------------------------------------------------------- */ /** * The overlay is a direct child of so that position:fixed resolves * against the viewport. Elementor puts overflow and transform on its * containers, and a transformed ancestor becomes the containing block for * fixed children — which would clip the canvas to the hero section. * * pointer-events:none is load-bearing, not cosmetic. Without it this layer * swallows every click on the site, including add-to-cart and the whole * checkout form. */ .krivedha-festival-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; } .krivedha-festival-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* --------------------------------------------------------------------------- Hanging bells --------------------------------------------------------------------------- */ .krivedha-festival-bells { position: absolute; top: -18px; pointer-events: none; opacity: 0.92; filter: drop-shadow(0 6px 10px rgba(74, 29, 5, 0.22)); } .krivedha-festival-bells--left { left: clamp(8px, 3vw, 56px); } .krivedha-festival-bells--right { right: clamp(8px, 3vw, 56px); } /** * Pivot from the top of the chain, not the centre of the box, so the bell * swings like a pendulum instead of spinning about its own middle. */ .krivedha-festival-bell-swing { transform-origin: 30px 0; animation: kf-swing 3.4s ease-in-out infinite; } /* Offset the second bell so the pair never swings in lockstep. */ .krivedha-festival-bells--right .krivedha-festival-bell-swing { animation-duration: 3.9s; animation-delay: -1.2s; } @keyframes kf-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } } /* --------------------------------------------------------------------------- Responsive --------------------------------------------------------------------------- */ @media (max-width: 1024px) { .krivedha-festival-bells svg { width: 44px; height: 139px; } } /* Bells would crowd a phone header. Petals and fireworks still run. */ @media (max-width: 767px) { .krivedha-festival-bells { display: none; } } /* --------------------------------------------------------------------------- Reduced motion --------------------------------------------------------------------------- */ /** * Honour the OS setting: no movement at all. The JS makes the matching call * and never starts the particle loop, so the canvas stays blank. */ @media (prefers-reduced-motion: reduce) { .krivedha-festival-canvas { display: none; } .krivedha-festival-bell-swing { animation: none; } } /* Printing a receipt or an order should not carry the decoration. */ @media print { .krivedha-festival-overlay { display: none !important; } }