/* =========================================
   REAL WATER GOO STREAM
========================================= */

#machine-water-goo-filter {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.machine-water-layer {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	filter: url("#machine-water-goo");
	opacity: 0.94;
}

.machine-water-drop {
	position: absolute;
	width: var(--water-w, calc(var(--water-r, 7px) * 3));
	height: var(--water-h, calc(var(--water-r, 7px) * 1.6));
	border-radius: 999px;
	background: rgba(31, 151, 201, 0.88);
	pointer-events: none;
	will-change: transform;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
	.machine-water-layer {
		opacity: 0.86;
	}
}

/* =========================================
   TOP RED PIPE LAYER
========================================= */

#scroll-container > .machine-red-pipe {
	position: absolute;
	display: block;
	z-index: 12;
	pointer-events: none;
}


/* =========================================
   FAKE SECTION 3 POOL - PHASE 1
========================================= */

.machine-pool {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 420ms ease;
	mix-blend-mode: normal;
}

body.machine-triggered .machine-pool {
	opacity: 1;
}

body.is-section-four .machine-pool,
body.section-4-active .machine-pool {
	display: none;
}

.machine-pool__canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0.7;
}

.machine-pool__fish-layer {
	position: absolute;
	inset: 0;
	z-index: 4;
	overflow: hidden;
	pointer-events: none;
	contain: layout paint;
}

.machine-pool__fish {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: center;
	will-change: transform;
}

.machine-pool__fish-sprite {
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-image: var(--fish-asset, url("../assets/svg/fish-optimized.svg"));
	background-size: 400% 400%;
	background-position: var(--fish-sprite-x, 0%) var(--fish-sprite-y, 0%);
	background-repeat: no-repeat;
	opacity: var(--fish-opacity, 0.68);
	filter:
		blur(var(--fish-blur, 0.8px))
		brightness(0)
		saturate(100%)
		invert(47%)
		sepia(57%)
		saturate(522%)
		hue-rotate(143deg)
		brightness(92%);
	transform: scaleX(var(--fish-flip, 1));
	transform-origin: center;
}

.machine-pool__glass {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 0;
	height: 65%;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 18%),
		linear-gradient(90deg, rgba(31, 151, 201, 0.08), rgba(39, 199, 212, 0.17), rgba(31, 151, 201, 0.08));
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 520ms ease,
		transform 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.machine-pool-active .machine-pool__glass {
	opacity: 0.48;
	transform: translateY(0);
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
	.machine-pool__canvas {
		opacity: 0.82;
	}
}


/* =========================================
   PATCH 117 POOL AS REAL MASK LAYER
========================================= */

.machine-pool {
	z-index: 8;
	mix-blend-mode: normal;
}

.machine-pool canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

body.is-section-four .machine-pool {
	display: none;
}


/* =========================================
   IPHONE / TOUCH POOL STABILITY
   Keep fish visible and remove GPU-heavy SVG filtering on phones.
========================================= */

@media (hover: none) and (pointer: coarse), (max-width: 540px) {
	.machine-water-layer {
		filter: none;
		opacity: 0.82;
	}

	.machine-pool__canvas {
		opacity: 0.9;
	}

	.machine-pool__fish-layer {
		z-index: 5;
		mix-blend-mode: normal;
	}

	.machine-pool__fish {
		opacity: 1;
		transform: translateZ(0);
	}

	.machine-pool__fish-sprite {
		background-color: rgba(39, 199, 212, 0.92);
		background-blend-mode: screen;
		opacity: var(--fish-opacity, 0.92);
		filter: drop-shadow(0 0 5px rgba(224, 255, 255, 0.46));
	}
}

@supports (-webkit-touch-callout: none) {
	.machine-pool__fish-sprite {
		-webkit-mask-image: var(--fish-asset, url("../assets/svg/fish-optimized.svg"));
		mask-image: var(--fish-asset, url("../assets/svg/fish-optimized.svg"));
		-webkit-mask-size: 400% 400%;
		mask-size: 400% 400%;
		-webkit-mask-position: var(--fish-sprite-x, 0%) var(--fish-sprite-y, 0%);
		mask-position: var(--fish-sprite-x, 0%) var(--fish-sprite-y, 0%);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		background-color: rgba(39, 199, 212, 0.95);
		filter: drop-shadow(0 0 5px rgba(224, 255, 255, 0.5));
	}
}

/* =========================================
   IPHONE / TOUCH POOL BACKDROP BLUR
   Use Safari's prefixed backdrop-filter on the water glass only.
   Keep the blur small so the pool does not become a heat source.
========================================= */

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	@media (hover: none) and (pointer: coarse), (max-width: 540px) {
		body.machine-pool-active .machine-pool__glass {
			opacity: 0.56;
			background:
				linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 18%),
				linear-gradient(90deg, rgba(31, 151, 201, 0.10), rgba(39, 199, 212, 0.22), rgba(31, 151, 201, 0.10));
			-webkit-backdrop-filter: blur(3.5px) saturate(1.18) contrast(0.96);
			backdrop-filter: blur(3.5px) saturate(1.18) contrast(0.96);
			transform: translate3d(0, 0, 0);
		}
	}
}

@supports (-webkit-touch-callout: none) {
	body.machine-pool-active .machine-pool__glass {
		-webkit-backdrop-filter: blur(3px) saturate(1.16) contrast(0.96);
		backdrop-filter: blur(3px) saturate(1.16) contrast(0.96);
	}
}