/* ==========================================================================
   "The noise": torn scraps that hover above the page and move with the hand.
   Used by concept 16 (hero-16.html) and around the marbled "ne"; wow-scraps.js drives them.
   Without the script they sit at rest where this file puts them.

   The markup contract
   - a field: any element with data-scraps (and class "noise" for the defaults below).
     It fills its positioned parent unless you give it another box; scraps may sit partly outside.
       data-scraps-avoid=".a, .b"  what the scraps must never cover, looked up in the hero
                                   (default: .wow-kicker, .wow-title, .wow-cta, .wow-hint)
       data-scraps-idle            touch screens also breathe slowly (continuous motion: keep a
                                   .wow-pause button in the hero; one marked data-scraps-pause
                                   is run by the script and stays hidden until it is needed)
       data-scraps-delay="0.6"     seconds before they drop in (default .15)
       data-scraps-wait="v3:open"  don't drop in before this window event (the site's loader
                                   lifting); a fail-safe drops them anyway after 9s
     Cursor and scroll are read from the closest [data-scraps-root], else .wow-hero.
   - a scrap: <img class="noise__scrap" src="assets/elements/scrap-*.webp" width height alt="">
       --x, --y   top left corner, in % of the field (unitless; negative or past 100 is fine)
       --w        width, in % of the field's width (unitless)
       --r        rest rotation, in degrees (unitless)
       --d        height above the page, 0 to 1: about .3 far, .6 mid, 1 near.
                  Sets parallax, shadow and stacking.
       --fx: -1   mirror it, to reuse a scrap without it reading as a copy
       --mx, --my, --mw   the same three on phones (they fall back to --x, --y, --w)
       noise__scrap--plate   Violet and Flame: they print in multiply, so they overprint
       noise__scrap--desk    not on phones
   The script moves each scrap into a sleeve, .noise__item, that takes its place, so a page that
   overrides placement styles both: .my-page .noise > .noise__scrap, .my-page .noise__item { ... }
   ========================================================================== */

.noise { position: absolute; inset: 0; pointer-events: none; isolation: isolate; }
/* a scrap at rest; the script slips each one into a sleeve (.noise__item) that takes its place */
.noise > .noise__scrap, .noise__item {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%);
}
.noise__scrap { display: block; height: auto; max-width: none; transform: rotate(calc(var(--r) * 1deg)) scaleX(var(--fx, 1)); }
.noise__item { display: block; will-change: transform; }
.noise__item > .noise__scrap { position: relative; width: 100%; }
/* Violet and Flame are inks: where one crosses the other they make Overprint */
.noise > .noise__scrap--plate, .noise__item--plate { mix-blend-mode: multiply; }
/* the shadow lies on the page under its scrap: further down and softer the higher the scrap floats.
   Its resting place here matches what the script draws at rest. */
.noise__shade {
  position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none;
  filter: brightness(0) blur(calc(2px + var(--d) * 9px)); opacity: calc(.32 - var(--d) * .1);
  transform: translate(calc(var(--d) * 5px), calc(4px + var(--d) * 14px)) rotate(calc(var(--r) * 1deg)) scaleX(var(--fx, 1));
  will-change: transform;
}
/* no script: a plain drop shadow instead */
.noise > .noise__scrap { filter: drop-shadow(0 calc(4px + var(--d) * 12px) calc(3px + var(--d) * 8px) rgba(35, 31, 32, .24)); }
/* with motion on, the script drops them in; if it never runs, show them anyway */
.js:not(.ho-static) .noise:not(.is-live) .noise__scrap { opacity: 0; animation: noise-show .4s 2.5s forwards; }
@keyframes noise-show { to { opacity: 1; } }

.wow-pause[hidden] { display: none; }

@media (max-width: 760px) {
  .noise > .noise__scrap, .noise__item { left: calc(var(--mx, var(--x)) * 1%); top: calc(var(--my, var(--y)) * 1%); width: calc(var(--mw, var(--w)) * 1%); }
  .noise > .noise__scrap--desk, .noise__item--desk { display: none; }
}

/* ==========================================================================
   Concept 16, "The noise clears": the message in the middle, the noise all around it,
   and a page to scroll on to, so the noise has somewhere to clear for.
   ========================================================================== */
body.wow--16 { height: auto; }

.wow--16 .wow-copy {
  left: 0; right: 0; top: var(--head-h); bottom: 0; width: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--gutter) 7vh; text-align: center;
}
.wow--16 .wow-title { max-width: 10em; text-wrap: balance; }
.wow--16 .wow-cta { justify-content: center; }
/* short wide screens shrink the scraps, so the bands above and below the copy still hold them */
@media (min-width: 761px) {
  .wow--16 .noise > .noise__scrap, .wow--16 .noise__item { width: min(calc(var(--w) * 1%), calc(var(--w) * 1.9svh)); }
}
/* the hint talks about a mouse, and about motion */
@media not ((hover: hover) and (pointer: fine)) { .wow--16 .wow-hint { display: none; } }
.ho-static .wow--16 .wow-hint { display: none; }

/* after the hero: the statement the noise clears for, pasted over it like the next sheet */
.clear16 {
  --bg: var(--f-screen); z-index: 1;
  display: flex; align-items: center; min-height: 78svh; padding-block: clamp(96px, 12vw, 180px) clamp(120px, 14vw, 200px);
}
.clear16__title { font-size: clamp(2.5rem, 6vw, 6rem); max-width: 11em; }
.clear16__body { margin-top: clamp(22px, 2.6vw, 34px); max-width: 30em; font-size: clamp(1.125rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--pencil); }

@media (max-width: 760px) {
  .wow--16 .wow-copy { padding: 0 var(--gutter) 9vh; }
  .wow--16 .wow-cta .btn { padding-inline: 20px; }
}