/* Scroll-following brand droplet: a trail that wraps every section it passes.
   The overlay is fixed and viewport-sized on purpose — a document-tall SVG would repaint
   thousands of pixels per frame. The scene inside it is moved by a transform instead. */

.owala-trail-host {
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
}

.owala-trail {
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s ease-out;
	overflow: visible;
}
.owala-trail.is-ready { opacity: 1; }

.owala-trail__camera { will-change: transform; }

.owala-trail__ghost {
	fill: none;
	stroke: var(--mint, #A8CFBE);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: .22;
	stroke-dasharray: 2 10;
}

/* fake glow: a wide translucent stroke under the line, so no SVG filter has to re-rasterise */
.owala-trail__glow {
	fill: none;
	stroke: var(--mint, #A8CFBE);
	stroke-width: 11;
	stroke-linecap: round;
	opacity: .18;
}

.owala-trail__line {
	fill: none;
	stroke: url(#owala-trail-gradient);
	stroke-width: 3.5;
	stroke-linecap: round;
}

.owala-drop { will-change: transform; }
.owala-drop__halo { opacity: .28; transform-origin: center; animation: owala-pulse 3.4s ease-in-out infinite; }

/* the bottle is a link, so it is the one part of the overlay that takes pointer events */
.owala-bottle {
	pointer-events: auto;
	cursor: pointer;
	will-change: transform;
	/* Chrome draws a default focus ring around an SVG anchor's whole bounding box, which shows up
	   as a big black rectangle on click. The keyboard ring below replaces it. */
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.owala-bottle:focus { outline: none; }
.owala-bottle__ring { opacity: 0; transition: opacity .15s ease-out; }
.owala-bottle:focus-visible .owala-bottle__ring { opacity: 1; }
/* A slow breath so the bottle keeps drawing the eye while it rides the trail.
   Both scaling groups grow around 0,0 — the point that sits on the line — because the artwork
   inside them is centred there. Scaling around the box centre instead made the bottle drift off
   the trail every time it grew. */
.owala-bottle__art { transform-origin: 0 0; transform-box: view-box; animation: owala-breathe 2.8s ease-in-out infinite; }
/* Only the invisible hit circle takes pointer events. If the breathing artwork did, its own
   scaling would move its edges under the cursor and flip hover on and off. */
.owala-bottle__hover,
.owala-bottle__ring { pointer-events: none; }
.owala-bottle__hover { transition: transform .25s ease-out; transform-origin: 0 0; transform-box: view-box; }
.owala-bottle:hover .owala-bottle__hover,
.owala-bottle:focus-visible .owala-bottle__hover { transform: scale(1.12); }

@keyframes owala-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.13); }
}
.owala-bottle:focus-visible .owala-bottle__halo { opacity: .55; }
.owala-bottle__halo { opacity: .24; transform-origin: 0 0; transform-box: view-box; animation: owala-pulse 2.8s ease-in-out infinite; }
.owala-bottle__body,
.owala-bottle__loop,
.owala-bottle__halo { transition: fill .5s ease-out, stroke .5s ease-out; }

@keyframes owala-pulse {
	0%, 100% { transform: scale(1); opacity: .3; }
	50%      { transform: scale(1.16); opacity: .12; }
}

/* The header mark hands the droplet over on the first scroll. */
.brand-mark { transition: opacity .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
	.owala-drop__halo,
	.owala-bottle__halo,
	.owala-bottle__art { animation: none; }
	.owala-bottle__hover { transition: none; }
	.owala-trail { transition: none; }
}