/* Sparkleaners — photos + animated cleaning effects */

/* ---------- Photos ---------- */
.hero { isolation: isolate; }
.hero.has-photo .hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero.has-photo .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero.has-photo .hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 42%, color-mix(in srgb, var(--bg) 35%, transparent) 75%, transparent 100%); }
@media (max-width: 860px) { .hero.has-photo .hero-bg::after { background: color-mix(in srgb, var(--bg) 86%, transparent); } }

.service.has-photo { padding-top: 0; overflow: hidden; }
.service-photo { width: calc(100% + 3.2rem); max-width: none; margin: 0 -1.6rem .4rem; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.service.has-photo .ico { margin-top: -2.6rem; position: relative; background: var(--bg); box-shadow: 0 6px 16px -8px rgba(17, 23, 63, .4); }

.page-hero.with-photo .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.page-hero-copy { display: grid; gap: 1rem; min-width: 0; }
.page-hero-photo, .about-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; display: block; }
@media (max-width: 860px) { .page-hero.with-photo .wrap { grid-template-columns: 1fr; } }

/* ---------- Effect 1: grime + squeegee over the home hero ---------- */
.fx-grime { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: auto; cursor: pointer; transition: opacity .5s ease; }
.fx-grime.done { opacity: 0; pointer-events: none; }
.fx-drops { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; transition: opacity 1.2s ease; }
.fx-drops.done { opacity: 0; }
.fx-squeegee { position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; height: 0; transform-origin: 50% 0; will-change: transform; }
.fx-squeegee > span { position: absolute; display: block; }
.fx-squeegee .blade { left: 0; right: 0; top: -5px; height: 10px; border-radius: 4px; background: linear-gradient(180deg, #2a2f45, #0d1020); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.fx-squeegee .channel { left: 4%; right: 4%; top: 4px; height: 15px; border-radius: 2px 2px 5px 5px;
  background: linear-gradient(180deg, #f4f6fa, #b9c0cf 45%, #8a93a7); box-shadow: 0 6px 12px -4px rgba(0,0,0,.55); }
.fx-squeegee .neck { left: 50%; top: 17px; width: 26px; height: 13px; margin-left: -13px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #1f3784, #3a5bc4 50%, #1f3784); }
.fx-squeegee .handle { left: 50%; top: 28px; width: 22px; height: var(--sq-handle, 90px); margin-left: -11px; border-radius: 4px 4px 11px 11px;
  background: linear-gradient(90deg, #1f3784, #3a5bc4 45%, #2b48a4 60%, #1a2f72); box-shadow: 0 10px 16px -6px rgba(0,0,0,.5); }
.fx-squeegee .grip { left: 3px; right: 3px; top: 30%; bottom: 10%; border-radius: 5px;
  background: repeating-linear-gradient(180deg, #f5c400 0 6px, #d9ad00 6px 8px); }
.fx-skip { position: absolute; z-index: 8; right: var(--gutter); bottom: 1rem; font: 600 .8rem/1 var(--font-body); color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .5rem .9rem; cursor: pointer; transition: opacity .3s; }
.fx-skip.done { opacity: 0; pointer-events: none; }

/* ---------- Effect 2: spray bottle + sparkle on calls to action ---------- */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 45; }
.fx-bottle { position: fixed; left: 0; top: 0; width: 66px; z-index: 46; pointer-events: none;
  transform-origin: 50% 60%; filter: drop-shadow(0 10px 14px rgba(17, 23, 63, .28)); opacity: 0; transition: opacity .4s; }
.fx-bottle.on { opacity: 1; }
.fx-bottle.on.away { opacity: 0; }
.fx-bottle svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .fx-bottle { width: 44px; } }
[data-spray] { position: relative; }
.btn.fx-sparkled, .spray-target.fx-sparkled { animation: fx-glow 1.6s ease-out 1; }
.spray-target { border-radius: 8px; padding-inline: .1em; }
@keyframes fx-glow {
  0% { box-shadow: 0 0 0 0 rgba(245, 196, 0, .0); }
  25% { box-shadow: 0 0 0 6px rgba(245, 196, 0, .55), 0 0 28px 6px rgba(43, 72, 164, .45); }
  100% { box-shadow: 0 0 0 14px rgba(245, 196, 0, 0), 0 0 0 0 rgba(43, 72, 164, 0); }
}
.btn.fx-sparkled::after, .spray-target.fx-sparkled::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 66%) -150% 0 / 250% 100% no-repeat; animation: fx-shine 1s .15s ease-out 1; }
@keyframes fx-shine { to { background-position: 150% 0; } }

/* ---------- Effect 3: spinning bucket between sections ---------- */
.fx-bucket-stage { height: 0; position: relative; z-index: 3; }
.fx-bucket { position: absolute; left: 50%; top: -75px; margin-left: -75px; width: 150px; height: 150px; will-change: transform; filter: drop-shadow(0 14px 18px rgba(17, 23, 63, .22)); }
.fx-bucket svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .fx-bucket { width: 110px; height: 110px; top: -55px; margin-left: -55px; } }

/* ---------- Effect 4: dish sponge at the end of the page ---------- */
.fx-sponge-stage { position: relative; height: 150px; overflow: hidden; touch-action: pan-y; }
.fx-bubbles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-sponge { position: absolute; left: 0; bottom: 6px; width: 120px; height: 84px; cursor: grab; will-change: transform; touch-action: none; }
.fx-sponge:active { cursor: grabbing; }
.fx-sponge svg { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.fx-sponge.squish svg, .fx-sponge:hover svg { transform: scale(1.1, .82); }

@media (prefers-reduced-motion: reduce) {
  .fx-grime, .fx-drops, .fx-squeegee, .fx-skip, .fx-bottle, .fx-canvas { display: none !important; }
  .fx-bucket { transform: none !important; }
}

/* Cover the hero with the dark film before the script draws it, so there is no flash of the clean hero */
.fx-js:not(.fx-ready) .fx-hero::after { content: ""; position: absolute; inset: 0; z-index: 6; background: rgba(7, 10, 30, .62); }
@media (prefers-reduced-motion: reduce) { .fx-js:not(.fx-ready) .fx-hero::after { display: none; } }

/* Real 3D bottle + bucket (WebGL canvases replace the flat SVGs once three.js has loaded) */
.fx-3d { display: block; }
.fx-bottle.is-3d { width: 130px; height: 150px; }
.fx-bucket-stage:has(.is-3d) { height: 130px; }
.fx-bucket.is-3d { width: 200px; height: 210px; top: -40px; margin-left: -100px; }
@media (max-width: 640px) {
  .fx-bottle.is-3d { width: 88px; height: 102px; }
  .fx-bucket-stage:has(.is-3d) { height: 96px; }
  .fx-bucket.is-3d { width: 150px; height: 158px; top: -31px; margin-left: -75px; }
}

/* 3D sponge */
.fx-sponge.is-3d { width: 200px; height: 140px; bottom: 0; }
.fx-sponge-stage:has(.is-3d) { height: 170px; }
.fx-sponge.is-3d::before { content: ""; position: absolute; left: 16%; right: 16%; bottom: 14px; height: 16px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(17, 23, 63, .28), transparent); pointer-events: none; }
.fx-sponge.is-3d .fx-3d { position: relative; }
@media (max-width: 640px) { .fx-sponge.is-3d { width: 150px; height: 105px; } }

/* ---------- Hero video (home) ---------- */
.hero.has-video { background: #0b0f28; color: #e6eaf7; }
.hero-video { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0b0f28 center / cover no-repeat; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* dark brand-navy wash: strongest behind the text (left), lighter on the right so the video still shows */
.hero-video::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 15, 40, .88) 0%, rgba(11, 15, 40, .78) 38%, rgba(11, 15, 40, .45) 70%, rgba(11, 15, 40, .3) 100%),
    linear-gradient(0deg, rgba(11, 15, 40, .55) 0%, rgba(11, 15, 40, 0) 35%); }
@media (max-width: 860px) { .hero-video::after { background: rgba(11, 15, 40, .74); } }
.hero.has-video h1 { color: #ffffff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero.has-video .eyebrow { color: #f5c400; }
.hero.has-video .lede { color: #dfe5f7; }
.hero.has-video .mark { background: linear-gradient(transparent 62%, rgba(245, 196, 0, .7) 62%, rgba(245, 196, 0, .7) 90%, transparent 90%); color: #ffffff; }
.hero.has-video .trust { color: #c9d1ee; }
.hero.has-video .trust svg { color: #f5c400; }
.hero.has-video .btn-primary { background: #f5c400; color: #11173f; }
.hero.has-video .btn-primary:hover { background: #ffd633; color: #11173f; }
.hero.has-video .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, .45); }
.hero.has-video .btn-ghost:hover { color: #f5c400; border-color: #f5c400; }
.hero.has-video .visit { box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .7); }
.hero.has-video .visit::before { background: #f5c400; opacity: .9; }
.hero.has-video .fx-skip { background: rgba(0, 0, 0, .35); }

/* While the page pauses so a visitor can watch the spray on a button */
html.fx-hold { overflow: hidden; }
html.fx-hold body { position: fixed; left: 0; right: 0; width: 100%; }
html.fx-hold .site-header { position: fixed; top: 0; left: 0; right: 0; }