/* ===================================================================== Bugan Villas — enhancement layer. Pure polish: motion, micro-interactions, focus states, perceived depth. Deliberately changes NO type, colour, or layout. Every element is fully visible and correctly positioned at rest; the additions only apply on interaction (hover/focus) or as an entrance once JS + the user's motion preference both allow. Loaded last so it never overrides the design. ===================================================================== */ /* ---- Smooth interaction transitions (no visual change at rest) ---- */ .elementor-button, .elementor-nav-menu .elementor-item, .elementor-icon-list-item, .elementor-swiper-button, .elementor-menu-toggle { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s cubic-bezier(.22, 1, .36, 1); } /* ---- Button tactility: lift + soft shadow (colour untouched) ---- */ .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35); } .elementor-button:active { transform: translateY(0); box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .35); } /* ---- Nav links: whisper of a lift on hover ---- */ .elementor-nav-menu .elementor-item:hover { transform: translateY(-1px); } /* ---- Slider arrows: grow slightly on hover/focus ---- */ .elementor-swiper-button:hover, .elementor-swiper-button:focus-visible { transform: scale(1.12); } /* ---- Amenity rows: gentle indent for tactility ---- */ .elementor-icon-list-item { transition: transform .25s cubic-bezier(.22, 1, .36, 1); } .elementor-icon-list-item:hover { transform: translateX(3px); } /* ---- Keyboard focus ring: uses the element's own colour, so no new hue enters the palette. Only shows for keyboard users, never on mouse. ---- */ a:focus-visible, .elementor-button:focus-visible, .elementor-menu-toggle:focus-visible, .elementor-swiper-button:focus-visible, .wpcf7-form input:focus-visible, .wpcf7-form textarea:focus-visible, .wpcf7-form select:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } /* ---- Anchor landing comfort: a little breathing room above a section when reached from the nav (no sticky header, so this only softens the stop). ---- */ .elementor-menu-anchor { scroll-margin-top: 28px; } /* ---- Scroll reveal ------------------------------------------------------ The resting state is fully visible. Elements only start hidden — and then animate in — when JS has added `js-reveal` to AND the user has not asked to reduce motion. No-JS renders, headless crawlers, and reduced-motion users all get the finished page immediately with nothing hidden. */ @media (prefers-reduced-motion: no-preference) { html.js-reveal .bugan-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } html.js-reveal .bugan-reveal.bugan-reveal--img { transform: translateY(18px) scale(.985); } html.js-reveal .bugan-reveal.is-visible { opacity: 1; transform: none; } }