/* ============================================================================
   The DoC — "The Wash": signature hero motion, one per service.
   A single premium cleaning animation plays ONCE on load, over already-visible
   hero content (JS injects it; if absent or reduced-motion, the hero is simply
   clean — content is never gated on the animation).
   Materials: mask, backdrop-filter blur, transform, opacity — compositor-friendly.
   Selected per hero via [data-wash="window|gutter|roof|driveway"].
   ============================================================================ */

.hero { position: relative; }
.hero > .container { position: relative; z-index: 2; }

.wash-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.wash-fx > span { position: absolute; display: block; }

/* ---------- WINDOWS (default): squeegee wipe through frosted glass ---------- */
.wash-frost {
  inset: 0;
  background:
    radial-gradient(2px 2px at 20% 28%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(3px 3px at 68% 52%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(2px 2px at 44% 76%, rgba(255,255,255,.17), transparent 60%),
    radial-gradient(2.5px 2.5px at 82% 22%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,.10), rgba(190,214,238,.05));
  -webkit-backdrop-filter: blur(9px) saturate(.85);
          backdrop-filter: blur(9px) saturate(.85);
  -webkit-mask-image: linear-gradient(115deg, #000 0 46%, transparent 56% 100%);
          mask-image: linear-gradient(115deg, #000 0 46%, transparent 56% 100%);
  -webkit-mask-size: 230% 100%; mask-size: 230% 100%;
  -webkit-mask-position: 0% 0;  mask-position: 0% 0;
}
.wash-fx.play .wash-frost { animation: doc-squeegee 1.7s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes doc-squeegee { to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }

.wash-streak {
  top: -20%; bottom: -20%; width: 13%; left: -25%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.92), transparent);
  filter: blur(2px); transform: skewX(-12deg); opacity: 0;
}
.wash-fx.play .wash-streak { animation: doc-streak 1.7s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes doc-streak {
  0% { left: -25%; opacity: 0; } 12% { opacity: .95; }
  88% { opacity: .95; } 100% { left: 115%; opacity: 0; }
}

/* ---------- DRIVEWAY / PATIO: pressure-wash arc reveals a clean stripe ------ */
[data-wash="driveway"] .wash-frost {
  background: linear-gradient(120deg, rgba(16,38,68,.34), rgba(16,38,68,.16));
  -webkit-backdrop-filter: blur(2px) brightness(.82) saturate(.72);
          backdrop-filter: blur(2px) brightness(.82) saturate(.72);
  -webkit-mask-image: linear-gradient(104deg, #000 0 42%, transparent 53% 100%);
          mask-image: linear-gradient(104deg, #000 0 42%, transparent 53% 100%);
}
[data-wash="driveway"] .wash-fx.play .wash-frost { animation-duration: 1.4s; }
[data-wash="driveway"] .wash-streak {
  width: 22%;
  background: linear-gradient(104deg, transparent, rgba(180,225,255,.95), rgba(255,255,255,.6), transparent);
}
[data-wash="driveway"] .wash-fx.play .wash-streak { animation-duration: 1.4s; }

/* ---------- GUTTERS: a sheet of water cascades down and drains off ---------- */
.wash-sheet {
  left: -5%; right: -5%; top: -45%; height: 45%;
  background: linear-gradient(180deg, rgba(120,184,243,0), rgba(120,184,243,.20) 55%, rgba(255,255,255,.34));
  filter: blur(3px); opacity: 0;
}
.wash-fx.play .wash-sheet { animation: doc-sheet 1.9s cubic-bezier(.45,0,.2,1) forwards; }
@keyframes doc-sheet {
  0% { transform: translateY(0); opacity: 0; } 12% { opacity: .95; }
  100% { transform: translateY(330%); opacity: 0; }
}

/* ---------- ROOF: soft-wash mist sweeps across and dissipates --------------- */
.wash-mist {
  inset: -15%;
  background: radial-gradient(55% 75% at 35% 45%, rgba(255,255,255,.30), transparent 70%);
  filter: blur(16px); opacity: 0;
}
.wash-fx.play .wash-mist { animation: doc-mist 2.5s ease-out forwards; }
@keyframes doc-mist {
  0% { transform: translateX(-25%) scale(1.12); opacity: 0; } 35% { opacity: .95; }
  100% { transform: translateX(25%) scale(1); opacity: 0; }
}

/* ---------- Wet-shine gleam on primary CTAs (hover, intentional) ------------ */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::after {
    content: ''; position: absolute; top: 0; left: -160%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-18deg); pointer-events: none;
  }
  .btn-primary:hover::after { animation: doc-shine .9s cubic-bezier(.22,1,.36,1); }
  @keyframes doc-shine { to { left: 170%; } }
}

/* ---------- Respect reduced motion: no wash at all -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wash-fx { display: none !important; }
}