:root {
	--green: #00DD00;
	--blue:  #7F87FF;
	--pink:  #E700FF;
}

html, body {
	height: 100%;
}

/* "screen reader only" should be visually hidden, not transparent text */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body {
	box-sizing: content-box;
	
	margin: 0;
	height: 100vh;

	/* base color under everything */
	background-color: var(--blue);

	/* dove stays constant = no snapping */
	background-image: url(/assets/images/dove-be-a-little-mysterious.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	/* optional breathing room */
	background-origin: content-box;
	padding: clamp(16px, 4vw, 64px);

	position: relative;
	overflow: hidden;
}

/* animated “aurora” overlay */
body::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	/* big soft gradients */
	background:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%),
		radial-gradient(circle at 80% 70%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%);

	mix-blend-mode: screen; /* optional: makes it feel “lighty” */
	opacity: 0.9;

	/* smooth motion: transform only */
	transform: translate3d(0,0,0) scale(1.15);
	animation: aurora-drift 20s ease-in-out infinite alternate;
}

/* slow color cycling on the base layer (background-color interpolates smoothly) */
body {
	animation: color-cycle 24s ease-in-out infinite;
}

@keyframes color-cycle {
	0%   { background-color: var(--blue); }
	33%  { background-color: var(--pink); }
	66%  { background-color: var(--green); }
	100% { background-color: var(--blue); }
}

@keyframes aurora-drift {
	0%   { transform: translate3d(-3%, -2%, 0) scale(1.15); }
	50%  { transform: translate3d( 2%,  3%, 0) scale(1.22); }
	100% { transform: translate3d( 4%, -1%, 0) scale(1.18); }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
	body, body::before { animation: none; }
}