/*
    eliteinaweek customisations — styles
    -------------------------------------
    Wiggle effect for elements with the class "wigglewiggle".
    Rotates the image left, back to centre, then right, but ONLY while
    the window is actively being scrolled AND the element is in view.
    It pauses as soon as scrolling stops, even if still on screen.

    Usage: wrap your image in a container with the class "wigglewiggle",
    e.g. <div class="wigglewiggle"><img src="your-image.jpg" alt=""></div>
    In Elementor, add the class via the widget's Advanced tab > CSS Classes.
*/

@keyframes wiggle {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-2deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

.wigglewiggle img {
    animation: wiggle 0.5s ease-in-out infinite;
    animation-play-state: paused;
}

/* Only runs when BOTH classes are present: in view and actively scrolling */
.wigglewiggle.in-view.is-scrolling img {
    animation-play-state: running;
}