/* ==========================================================================
   Motion: the three moments, and nothing else.

   1. The hero keyhole forms from particles; the hero reacts to the cursor.
   2. A line weaves down the page with scroll and draws the keyhole in the footer.
   3. Section content fades and rises into view (the industries tiles in a stagger).

   Every animation sits inside prefers-reduced-motion: no-preference. With
   reduced motion, or without JavaScript, everything is simply visible.
   ========================================================================== */

/* 1. Hero particles
   One canvas behind the whole hero: the keyhole in yellow particles plus a
   faint white field. The static <img> keyhole is the fallback: it shows under
   reduced motion, without JavaScript, or if the canvas fails.
   keyhole-particles.js adds .is-particles once the canvas is running.
   ========================================================================== */

.hero__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hero__mark.is-particles img {
	visibility: hidden;
}

/* Above the pinwheel pattern (z-index -1), below the text (z-index 1).
   max-width: none overrides the reset's max-width: 100%. */
.hero__particles {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	pointer-events: none;
}

.hero > .container {
	position: relative;
	z-index: 1;
}

/* 2. Scroll line
   Spans from the bottom of the hero to the bottom of the footer. Section
   content and the footer content sit above it, so it passes behind text.
   ========================================================================== */

.site-main {
	position: relative;
}

.scroll-line {
	position: absolute;
	left: 0;
	z-index: 1;
	display: none;
	overflow: hidden; /* clips the footer keyhole where it bleeds off the right edge */
	pointer-events: none;
}

.scroll-line.is-ready {
	display: block;
}

.scroll-line use {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Thin and yellow through light sections. */
.scroll-line__light {
	stroke: var(--accent-yellow);
	stroke-width: 1.5;
}

/* Thick and white through blue sections. */
.scroll-line__dark {
	stroke: var(--on-blue);
	stroke-width: 3;
}

/* In the footer the keyhole runs behind links and contact details, so it is
   softened: still white and thick, but at 40% so the text always reads first. */
.scroll-line__foot {
	stroke-opacity: 0.4;
}

.site-main > section > .container,
.site-footer > .container {
	position: relative;
	z-index: 2;
}

/* 3. Section reveal
   motion.js adds .reveal only to content still below the fold, and only when
   motion is allowed, so nothing already on screen ever flickers.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(1rem);
		transition:
			opacity 0.6s ease-out,
			transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.reveal.is-revealed {
		opacity: 1;
		transform: none;
	}

	/* Industries tiles: a staggered version of the same reveal. Each tile waits
	   70ms per position (set as --i in the markup), then fades in and rises 8px,
	   in reading order. Keyed off the section's own reveal, so it runs once. */
	.reveal .industries__grid > li {
		opacity: 0;
		transform: translateY(0.5rem);
		transition:
			opacity 0.4s ease-out,
			transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(var(--i, 0) * 70ms);
	}

	.reveal.is-revealed .industries__grid > li {
		opacity: 1;
		transform: none;
	}
}