/* Carried over from styles/animation.css. Agreed fix applied:
   The .pulser keyframes were rewritten as valid CSS. The original used SCSS
   @include transform(...) lines pasted into plain CSS (invalid, ignored by browsers)
   and only declared -webkit- keyframes. They now use real transform: scale() and
   provide both prefixed and standard keyframes, keeping the box-shadow pulse and the
   intended scale. .btnPulsate was likewise made valid; its undefined --box-shadow-color
   was replaced with the same concrete cyan glow as .pulser. */

@-webkit-keyframes clockwise {
 0 { -webkit-transform: rotate(0); transform: rotate(0); }
 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes clockwise {
 0 { -webkit-transform: rotate(0); transform: rotate(0); }
 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes donut-rotate {
 0 { -webkit-transform: rotate(0); transform: rotate(0); }
 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); }
 100% { -webkit-transform: rotate(0); transform: rotate(0); }
}

@keyframes donut-rotate {
 0 { -webkit-transform: rotate(0); transform: rotate(0); }
 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); }
 100% { -webkit-transform: rotate(0); transform: rotate(0); }
}

/*Animation*/
#btnSaveSub { transition: .3s all ease-in-out; }
.pulser { -webkit-animation: pulse 1.35s infinite; animation: pulse 1.35s infinite; box-shadow: 0 0 0 0 #00C1E2; }

@-webkit-keyframes pulse {
 0% { -webkit-transform: scale(1); transform: scale(1); }
 70% { -webkit-transform: scale(1); transform: scale(1); box-shadow: 0 0 2px 6px rgba(0, 193, 226, .43); }
 100% { -webkit-transform: scale(.9); transform: scale(.9); box-shadow: 0 0 0 0px rgba(0, 193, 225, 0); }
}

@keyframes pulse {
 0% { -webkit-transform: scale(1); transform: scale(1); }
 70% { -webkit-transform: scale(1); transform: scale(1); box-shadow: 0 0 2px 6px rgba(0, 193, 226, .43); }
 100% { -webkit-transform: scale(.9); transform: scale(.9); box-shadow: 0 0 0 0px rgba(0, 193, 225, 0); }
}

.btnPulsate { -webkit-animation: btnPulsate 1.35s infinite; animation: btnPulsate 1.35s infinite; }

@-webkit-keyframes btnPulsate {
 0% { -webkit-transform: scale(1); transform: scale(1); }
 70% { -webkit-transform: scale(1); transform: scale(1); box-shadow: 0 0 5px 6px rgba(0, 193, 226, .43); }
 100% { -webkit-transform: scale(.8); transform: scale(.8); box-shadow: 0 0 0 0px rgba(0, 193, 226, 0); }
}

@keyframes btnPulsate {
 0% { -webkit-transform: scale(1); transform: scale(1); }
 70% { -webkit-transform: scale(1); transform: scale(1); box-shadow: 0 0 5px 6px rgba(0, 193, 226, .43); }
 100% { -webkit-transform: scale(.8); transform: scale(.8); box-shadow: 0 0 0 0px rgba(0, 193, 226, 0); }
}

/*----------------------------------------------------------------------------
    SCROLL FADE-IN — .sbm-block
    All page builder blocks fade up into view as they enter the viewport.
    JS (site.js sbmBlockFade) uses IntersectionObserver to add .sbm-block--visible
    when a block crosses the threshold.

    Excluded: .sbm-block--banner — the hero is above the fold and should
    appear immediately without animation.

    The initial opacity:0 also masks the brief flash from the JS colour
    sampler on the news block before the image background-color is applied.
-----------------------------------------------------------------------------*/
.sbm-block:not(.sbm-block--banner) {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.sbm-block--banner {
    /* Banner always visible — no fade */
    opacity: 1;
    transform: none;
}

.sbm-block--visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}