/** * Ambient motion for decorative 3D Elementor images (sphere / torus / cone). * * User recipe: ONE combined keyframe (circular drift + scale pulse + rotate), * linear infinite alternate - not separate float/rotate/scale animations. * * Speed presets via * (set by tiny boot from ?motion= - not an animation loop). * * Perf: transform + opacity only; no permanent will-change; layout untouched. */ /* Combined orbital arc. Alternate reverses = organic closed path, no jump. */ @keyframes devoq-ambient-orbit { 0% { transform: translate3d(-9px, 6px, 0) rotate(-8deg) scale(0.97); opacity: 0.72; } 100% { transform: translate3d(11px, -12px, 0) rotate(10deg) scale(1.04); opacity: 0.88; } } /* Shared decoration rules */ img[src*='img_element_01'], img[src*='img_element_02'], img[src*='img_element_03'], img[src*='img_dd_torus'] { transform-origin: center center; backface-visibility: hidden; pointer-events: none; animation-name: devoq-ambient-orbit; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both; } /* Absolute image widgets that only host these decorations never steal clicks */ .elementor-absolute.elementor-widget-image:has(img[src*='img_element_01']), .elementor-absolute.elementor-widget-image:has(img[src*='img_element_02']), .elementor-absolute.elementor-widget-image:has(img[src*='img_element_03']), .elementor-absolute.elementor-widget-image:has(img[src*='img_dd_torus']) { pointer-events: none; } /* * Default = fast: 5 / 6.5 / 8 / 9.5s (staggered so shapes never move in unison). * Works without boot script. Override via ?motion= → html[data-devoq-motion]. */ img[src*='img_element_01'] { animation-duration: 5s; animation-delay: -1.1s; } img[src*='img_element_02'] { animation-duration: 6.5s; animation-delay: -3.4s; } img[src*='img_element_03'] { animation-duration: 8s; animation-delay: -5.2s; } img[src*='img_dd_torus'] { animation-duration: 9.5s; animation-delay: -2s; } /* Slow — atmospheric */ html[data-devoq-motion='slow'] img[src*='img_element_01'] { animation-duration: 12s; } html[data-devoq-motion='slow'] img[src*='img_element_02'] { animation-duration: 14s; } html[data-devoq-motion='slow'] img[src*='img_element_03'] { animation-duration: 16s; } html[data-devoq-motion='slow'] img[src*='img_dd_torus'] { animation-duration: 18s; } /* Medium */ html[data-devoq-motion='med'] img[src*='img_element_01'] { animation-duration: 8s; } html[data-devoq-motion='med'] img[src*='img_element_02'] { animation-duration: 10s; } html[data-devoq-motion='med'] img[src*='img_element_03'] { animation-duration: 12s; } html[data-devoq-motion='med'] img[src*='img_dd_torus'] { animation-duration: 14s; } /* Fast — explicit (matches CSS default) */ html[data-devoq-motion='fast'] img[src*='img_element_01'] { animation-duration: 5s; } html[data-devoq-motion='fast'] img[src*='img_element_02'] { animation-duration: 6.5s; } html[data-devoq-motion='fast'] img[src*='img_element_03'] { animation-duration: 8s; } html[data-devoq-motion='fast'] img[src*='img_dd_torus'] { animation-duration: 9.5s; } @media (prefers-reduced-motion: reduce) { img[src*='img_element_01'], img[src*='img_element_02'], img[src*='img_element_03'], img[src*='img_dd_torus'] { animation: none !important; transform: none !important; opacity: 1 !important; } }