/* Spray intro (template-parts/intro.php, assets/js/intro-spray.js), the
   landing page's intro since 2026-09-29; loaded on the landing page only.

   The logo portal masks the whole overlay, which cuts the logo's shape out
   in one step. Here the beige sheet is its own layer and carries the mask,
   while the logo and the hand lie on top of it unmasked: fading the logo
   turns exactly its shape into a window onto the hero, and the hand stays
   visible over the video while it leaves. */
.fw-intro--spray {
	--fw-hole: 0;
	background: none;
}

.fw-intro--spray.is-maskable {
	-webkit-mask-image: none;
	mask-image: none;
}

.fw-intro__sheet {
	position: absolute;
	inset: 0;
	background: var(--fw-surface);
}

/* The portal's logo-shaped hole (see .fw-intro.is-maskable in main.css),
   applied as soon as the logo file is decoded, with the hole closed — and
   made to fade in rather than open at once.

   Opening the full hole under the still opaque logo made the logo jump
   (owner, 2026-09-28): its antialiased edge pixels are semi-transparent,
   so the dark video showed through them at once and the outline looked
   bolder, like a second logo on top. So the overlay's alpha is
   1 − logo × --fw-hole: at 0 not one pixel changes when the spray starts,
   and intro-spray.js raises it with the logo's own fade.

   Two layers make that alpha. The sheet's mask is the plain hole, the full
   layer `exclude`ing the logo: 1 − a. Behind it an unmasked backing of the
   same cream at 1 − t fills the hole: (1 − a) + a × (1 − t) = 1 − a × t.
   The first version did it in one mask, with a third uniform layer and
   `intersect`; WebKit composites a layer only inside its own image box,
   so on iPhones the whole screen turned see-through around a cream
   rectangle behind the logo (2026-10-25). Every operator here has the
   full layer as its source, which WebKit and Chromium agree on. */
.fw-intro--spray::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--fw-surface);
	opacity: calc(1 - var(--fw-hole));
}

.fw-intro--spray.is-maskable .fw-intro__sheet {
	-webkit-mask-image: linear-gradient(#fff, #fff), url(../img/fruit-warrior-logo.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 100% 100%, 0 0;
	-webkit-mask-composite: xor;
	mask-image: linear-gradient(#fff, #fff), url(../img/fruit-warrior-logo.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 100% 100%, 0 0;
	mask-composite: exclude;
}

.fw-intro--spray > svg {
	position: relative;
	z-index: 1;
}

/* Placed and sized by intro-spray.js (transform, width, height from the
   logo's box); hidden until then so it never shows at the origin. */
.fw-intro__spray {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	visibility: hidden;
	pointer-events: none;
}

.fw-intro .fw-intro__spray svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fw-intro--spray .fw-intro__progress,
.fw-intro--spray .fw-intro__progress-value {
	z-index: 1;
}