/*
 * `nomon/hero` — confetti graphic styles.
 *
 * Loads in editor + frontend (Blockstudio auto-enqueues `style.css`). Only the
 * confetti field lives here; the hero's typography/spacing is Tailwind utilities
 * applied in index.php. Rendered only when the block's "Confetti graphic" toggle
 * is on (`.nomon-hero--confetti`), which is the homepage hero.
 *
 * Design: handoff `design_handoff_hero_confetti`, option 2c. Six pieces — thick
 * rings (SVG) and solid discs — anchored to the hero's right edge in a 460px
 * field, each drifting on an ambient loop. Per-piece geometry/timing comes in
 * via inline custom properties (--size / --right / --top / --dur / --delay /
 * --color); this file owns the shared layout, keyframes, motion and responsive
 * behavior. Pure decoration: the field is aria-hidden and pointer-events-none,
 * and the hero copy sits above it (index.php gives InnerBlocks `relative z-10`).
 */

.nomon-hero--confetti {
	position: relative;
}

/*
 * The field: a 460px box anchored to the hero's right edge, spanning the hero
 * height, sitting behind the copy. Piece coordinates are measured from this
 * box's top/right edges, matching the handoff.
 *
 * The handoff drew the field inside an 860px demo card; the production hero is
 * ~1480px wide, so at 1:1 the field read small and distant from the headline.
 * `--confetti-scale` blows the whole composition up from the top-right corner
 * (staying pinned to the right edge, growing leftward toward the copy). It is
 * the one knob to tune the field's presence — adjust this single value.
 */
.nomon-hero__confetti {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 460px;
	max-width: 100%;
	pointer-events: none;
	transform: scale(var(--confetti-scale, 1.5));
	transform-origin: top right;
}

.nomon-hero__piece {
	position: absolute;
	top: var(--top);
	right: var(--right);
	width: var(--size);
	height: var(--size);
}

.nomon-hero__piece--ring {
	/* SVG ring: stroke color is set inline per piece via the <circle>. */
	display: block;
}

.nomon-hero__piece--disc {
	border-radius: 50%;
	background: var(--color);
}

/*
 * Ambient drift. Static unless the visitor accepts motion (WCAG 2.3.3 /
 * prefers-reduced-motion).
 */
@media (prefers-reduced-motion: no-preference) {
	.nomon-hero__piece {
		animation: nomon-hero-drift var(--dur) ease-in-out var(--delay) infinite;
	}

	@keyframes nomon-hero-drift {
		0%,
		100% {
			transform: translate(0, 0) rotate(0deg);
		}
		50% {
			transform: translate(0, -18px) rotate(8deg);
		}
	}
}

/*
 * Below ~1100px the hero copy needs the full width, so the field would start to
 * crowd the headline. Hide it entirely — it carries no content.
 */
@media (max-width: 1100px) {
	.nomon-hero__confetti {
		display: none;
	}
}