/* ================================================================
   ACTION PAINTING, a Pollock layer over the original site.
   Everything in main.css stays as it was; paint is added around it.
   Canvases come from assets/js/pollock.js. Words always sit above paint.
   ================================================================ */

.drip { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }

/* the splash: a raw canvas poured while the count runs */
.splash { background: #cfc2a6; }
.splash .drip-splash { z-index: 0; }
.splash h1, .splash .counter { position: relative; z-index: 1; }

/* the entrance: paint crosses both houses and the seam between them */
.gateway { position: relative; }
.gateway > .drip-gate { z-index: 3; }
.gate-half .copy { z-index: 4; }

/* heroes, product heroes and banners: paint over the photograph, under the words */
.hero > .drip-hero, .pdp-hero > .drip-hero { z-index: 1; }
.hero .copy, .hero .dots, .pdp-hero .copy { z-index: 2; }
.banner > .drip-banner { z-index: 1; }
.banner .copy { z-index: 2; }
/* touch pours with a horizontal drag; vertical drags still scroll the page */
.gateway, .hero, .pdp-hero { touch-action: pan-y; }

/* tiles take a splash the first time a hand passes over */
.tile > .drip-tile { z-index: 1; }
.tile .label, .tile .plus { z-index: 2; }

/* cream panels carry their own scatter of drips, kept off the text */
.panel.cream { position: relative; overflow: hidden; }
.panel.cream > .drip-panel { z-index: 0; }
.panel.cream > :not(.drip) { position: relative; z-index: 1; }

/* a flick of paint beneath each title, below the descenders, never moving the layout */
.flicked { position: relative; }
.flicked::after {
  content: ""; position: absolute; left: 0; top: calc(100% + 2px);
  width: min(300px, 80%); height: 16px; pointer-events: none;
  background: var(--flick) left center / contain no-repeat;
}

/* the footer opens with a poured band, in the house's own colours */
.site-footer::before {
  content: ""; display: block; height: clamp(90px, 11vw, 170px);
  background: var(--drip-band) center / cover no-repeat;
}