/* EWB Courses — shared effect utilities.
 *
 * Single source of truth for `.glass`, `.glass-light` (alias `.glass--light`),
 * `.aurora`, `.aurora__blob` (+ variants), `.iridescent`, and `.grain-overlay`.
 *
 * Loaded site-wide via `inc/enqueue.php` (handle `ewb-effects`) as a dependency
 * of every page-level stylesheet so the utilities are always present.
 *
 * --- Reconciliation notes (front-page.css is the canonical source) ---
 *
 *  - `.glass` background: variants of `rgba(16,26,64,0.40 / 0.42 / 0.55)` existed
 *    across the 6 files. We adopt front-page.css's `0.55` because it was tuned
 *    for hero readability on top of aurora blobs.
 *  - `.glass` border: variants `rgba(0,184,255, 0.15 / 0.18)`. We adopt `0.18`
 *    from front-page.css (matches the page-* files; only course/archive used 0.15).
 *  - Aurora keyframes: each file had its own `@keyframes` (about-aurora-1,
 *    contact-aurora-1, demo-aurora-1/2/3, ewb-aurora, ewb-aurora-1/2). We keep
 *    front-page.css's `ewb-aurora-1` + `ewb-aurora-2` pair as the canonical
 *    organic-drift pair and drop the per-page duplicates.
 *  - `.glass--light` (BEM modifier) is kept as an alias for `.glass-light`
 *    because two course template-parts hardcode `glass glass--light` in markup
 *    (section-who.php, section-outcomes.php).
 *  - Grain SVG: front-page uses `width=200/baseFrequency=0.85/opacity=1`; page-*
 *    files use `width=160/baseFrequency=0.85/opacity=0.55`. We keep front-page's
 *    200×200 sprite (denser, less obvious tiling) but expose `.grain-overlay--light`
 *    at opacity 0.04 so beige sections retain their original feel.
 *  - Mobile readability boost (≤768px raise opacity): moved in unchanged from
 *    front-page.css; previously only the homepage had it.
 *
 * All colours come from `tokens.css` custom properties. No raw hex literals.
 */

/* =========================================================================
   Glass — dark variant (over navy backgrounds)
   ========================================================================= */
.glass {
	background: rgba(16, 26, 64, 0.55);
	border: 1px solid rgba(0, 184, 255, 0.18);
	border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.glass { background: var(--navy-light); }
}

/* =========================================================================
   Glass — light variant (over beige / white backgrounds)
   `.glass--light` is an alias kept for templates that use the BEM modifier.
   ========================================================================= */
.glass-light,
.glass--light {
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(31, 35, 40, 0.08);
	border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	color: var(--grey-dark);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.glass-light,
	.glass--light { background: rgba(255, 255, 255, 0.92); }
}

/* =========================================================================
   Aurora — wrapper + blob primitives
   ========================================================================= */
.aurora {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--navy-deep);
	pointer-events: none;
	z-index: 0;
}

.aurora__blob {
	position: absolute;
	width: 60vmax;
	height: 60vmax;
	border-radius: 50%;
	filter: blur(120px);
	opacity: 0.55;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.aurora__blob--cyan {
	top: -25%;
	left: -15%;
	background: radial-gradient(circle at center, var(--cyan) 0%, transparent 65%);
}

.aurora__blob--lime {
	bottom: -30%;
	right: -20%;
	background: radial-gradient(circle at center, var(--lime) 0%, transparent 60%);
	opacity: 0.35;
}

.aurora__blob--navy {
	top: 30%;
	left: 40%;
	width: 40vmax;
	height: 40vmax;
	background: radial-gradient(circle at center, var(--navy-light) 0%, transparent 70%);
	opacity: 0.8;
}

/* Variant for demo page — a second cyan blob and a tuned modifier. */
.aurora__blob--cyan2 {
	bottom: -25%;
	right: -20%;
	background: radial-gradient(circle at center, var(--cyan) 0%, transparent 60%);
	opacity: 0.45;
}

.aurora--cyan .aurora__blob--cyan { opacity: 0.7; }
.aurora--strong .aurora__blob--cyan { opacity: 0.7; }
.aurora--strong .aurora__blob--lime { opacity: 0.45; }
.aurora--cyan-strong .aurora__blob--cyan  { opacity: 0.7; }
.aurora--cyan-strong .aurora__blob--cyan2 { opacity: 0.55; }

@media (prefers-reduced-motion: no-preference) {
	@keyframes ewb-aurora-1 {
		0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
		50%  { transform: translate3d(4%, -3%, 0) rotate(180deg) scale(1.18); }
		100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
	}
	@keyframes ewb-aurora-2 {
		0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.05); }
		50%  { transform: translate3d(-5%, 4%, 0) rotate(-180deg) scale(0.9); }
		100% { transform: translate3d(0, 0, 0) rotate(-360deg) scale(1.05); }
	}
	.aurora__blob--cyan  { animation: ewb-aurora-1 38s ease-in-out infinite; }
	.aurora__blob--lime  { animation: ewb-aurora-2 44s ease-in-out infinite; }
	.aurora__blob--cyan2 { animation: ewb-aurora-2 34s ease-in-out infinite reverse; }
}

/* =========================================================================
   Grain overlay — SVG turbulence rendered inline via data URI
   ========================================================================= */
.grain-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.03;
	mix-blend-mode: overlay;
	z-index: 1;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
}

.grain-overlay--light { opacity: 0.04; }

/* =========================================================================
   Iridescent — slow-rotating accent shape utility
   ========================================================================= */
.iridescent {
	mix-blend-mode: screen;
	filter: drop-shadow(0 30px 80px rgba(0, 184, 255, 0.25));
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes ewb-irid-spin {
		0%   { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	.iridescent { animation: ewb-irid-spin 60s linear infinite; }
}

/* =========================================================================
   Mobile readability boost — raise glass opacity below 768px so text on
   aurora-backed sections stays legible.
   ========================================================================= */
@media (max-width: 767px) {
	.glass        { background: rgba(16, 26, 64, 0.78); }
	.glass-light,
	.glass--light { background: rgba(255, 255, 255, 0.85); }
	.aurora__blob { opacity: 0.4; }
	.iridescent   { mix-blend-mode: normal; }
}