/* Decorative only: fixed overlay reserves no layout space; CSS is a second fail-open. */
.site-loader { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #050706; color: #fff; pointer-events: none; --ecosafe-loader-ready: 1; opacity: 0; visibility: hidden; }
.site-loader[hidden] { display: none; }
.site-loader-art { width: min(86vw, 480px); text-align: center; }
.site-loader-art svg { display: block; width: 100%; height: auto; overflow: hidden; }
.site-loader-art p { font-size: 1.25rem; letter-spacing: .12em; margin: .25rem 0; }
.site-loader-skip { position: absolute; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); pointer-events: auto; min-height: 44px; border: 1px solid #fff; background: #050706; color: #fff; }
.site-loader-skip:focus-visible { outline: 3px solid #24b45a; outline-offset: 5px; }
.intro-home { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.site-loader.is-visible .intro-protection { fill: none; stroke: #24b45a; stroke-width: 3; opacity: 0; animation: intro-protect 800ms ease forwards; }
.site-loader.is-visible .intro-pest { color: #c8d2cc; animation: intro-flight 750ms cubic-bezier(.4,0,.65,1) forwards; }
.intro-pest-2 { animation-delay: 40ms; }
.intro-pest-3 { animation-delay: 40ms; }
.intro-pest-4 { animation-delay: 40ms; }
.site-loader.is-visible .intro-leaf { animation: intro-leaf 800ms cubic-bezier(.4,0,.3,1) forwards; }
.site-loader.is-visible .intro-air { fill: none; stroke: #24b45a; stroke-width: 1.5; opacity: 0; animation: intro-air 800ms ease forwards; }
@keyframes intro-flight { 0%, 28% { transform: translate(0,0); opacity: 1; } 100% { transform: translate(330px,-28px); opacity: 0; } }
@keyframes intro-leaf { 0%, 12% { transform: translate(44px,195px) rotate(-15deg); } 74% { transform: translate(382px,170px) rotate(15deg); } 100% { transform: translate(402px,246px) rotate(0); } }
@keyframes intro-air { 22% { opacity: 0; } 45% { opacity: .7; } 95%, 100% { opacity: 0; transform: translateX(40px); } }
@keyframes intro-protect { 65% { opacity: 0; } 100% { opacity: .8; } }
@keyframes intro-dismiss { 0%, 88% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
 .site-loader.is-visible .intro-pest, .site-loader.is-visible .intro-leaf,
 .site-loader.is-visible .intro-air, .site-loader.is-visible .intro-protection { animation: none !important; }
 .intro-leaf { transform: translate(402px,246px); }
 .site-loader.is-visible { animation-duration: 350ms; }
}

.site-loader.is-visible { opacity: 1; visibility: visible; animation: intro-dismiss 1200ms linear forwards; }
.site-loader.is-complete { animation: none; opacity: 0; visibility: visible; transition: opacity 150ms ease; }
/* Keep the reserved scrollbar gutter dark without changing its width or layout. */
html:has(body.ecosafe-intro-active) { background: #050706; }
body.ecosafe-intro-active { overflow: hidden; animation: intro-scroll-release 1200ms step-end forwards; }
@keyframes intro-scroll-release { to { overflow: visible; } }
body.admin-bar .site-loader { top: 32px; }
@media(max-width:782px) { body.admin-bar .site-loader { top:46px; } }

/* Both directions have independent CSS recovery if scripting is interrupted. */
html.ecosafe-page-leaving body { animation: ecosafe-page-out 1100ms linear forwards; }
html.ecosafe-page-entering body { animation: ecosafe-page-in 250ms ease both; }
@keyframes ecosafe-page-out { 0% { opacity: 1; } 16%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ecosafe-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
 html.ecosafe-page-leaving body { animation: none; }
 html.ecosafe-page-entering body { animation-duration: 100ms; }
}