/* ==========================================================================
   LIVING MUSIC GLASS — MusicHaven-owned ambient system.
   Sound traveling through polished glass: restrained iridescent rim light,
   organic breathing, translucent depth. CSS-first, GPU-safe (transform/opacity),
   deterministic phase via data-mh-phase, static under reduced motion.
   Hooks: data-mh-glass="off|subtle|standard|cinematic"
   Subtle is the default intensity. Never blur the official mark; never
   damage text contrast (content sits above the effect layers).
   ========================================================================== */

[data-mh-glass] { position: relative; isolation: isolate; }

/* Iridescent rim light — a conic gold→violet whisper along the module edge. */
[data-mh-glass]:not([data-mh-glass="off"])::before {
	content: "";
	position: absolute;
	inset: -1.5px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(
		from 210deg,
		rgba(228, 200, 120, 0.0) 0%,
		rgba(228, 200, 120, 0.55) 12%,
		rgba(140, 90, 196, 0.35) 34%,
		rgba(228, 200, 120, 0.0) 55%,
		rgba(107, 63, 160, 0.3) 78%,
		rgba(228, 200, 120, 0.45) 92%,
		rgba(228, 200, 120, 0.0) 100%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask-composite: exclude;
	opacity: 0.5;
	pointer-events: none;
	z-index: 2;
}

/* Translucent inner current — a slow-breathing radial glow under the content. */
[data-mh-glass]:not([data-mh-glass="off"])::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(60% 80% at 78% 12%, rgba(228, 200, 120, 0.12), transparent 60%),
		radial-gradient(70% 90% at 16% 96%, rgba(107, 63, 160, 0.10), transparent 62%);
	opacity: 0.7;
	pointer-events: none;
	z-index: 0;
	transform-origin: 60% 40%;
}

@media (prefers-reduced-motion: no-preference) {
	[data-mh-glass="subtle"]::after { animation: mh-glass-breath 7s ease-in-out infinite alternate; }
	[data-mh-glass="standard"]::after { animation: mh-glass-breath 5.5s ease-in-out infinite alternate; }
	[data-mh-glass="standard"]::before { animation: mh-glass-shimmer 9s linear infinite; }
	[data-mh-glass="cinematic"]::after { animation: mh-glass-breath 4.5s ease-in-out infinite alternate; }
	[data-mh-glass="cinematic"]::before { animation: mh-glass-shimmer 6.5s linear infinite; opacity: 0.7; }
	/* Deterministic per-instance phase — same module, same phase, every load. */
	[data-mh-phase="1"]::after { animation-delay: -1.4s; }
	[data-mh-phase="2"]::after { animation-delay: -2.8s; }
	[data-mh-phase="3"]::after { animation-delay: -4.2s; }
	[data-mh-phase="4"]::after { animation-delay: -5.6s; }
}

@keyframes mh-glass-breath {
	from { opacity: 0.55; transform: translate(var(--mh-tx, 0px), var(--mh-ty, 0px)) scale(1); }
	to { opacity: 0.85; transform: translate(var(--mh-tx, 0px), var(--mh-ty, 0px)) scale(1.012); }
}
@keyframes mh-glass-shimmer {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
/* Rim rotation needs a full-bleed conic; keep shimmer subtle by rotating hue travel, not the box. */
[data-mh-glass]::before { transform: none !important; }

@media (prefers-reduced-motion: no-preference) {
	[data-mh-glass="standard"]::before,
	[data-mh-glass="cinematic"]::before {
		animation-name: mh-glass-hue;
	}
}
@keyframes mh-glass-hue {
	from { filter: hue-rotate(0deg); }
	50% { filter: hue-rotate(14deg); }
	to { filter: hue-rotate(0deg); }
}

/* Content must sit above the current layer. */
[data-mh-glass] > * { position: relative; z-index: 1; }

/* Runtime hooks (assets/js/mh-glass.js): hidden-tab + offscreen pause, audio energy. */
html[data-mh-hidden] *, html[data-mh-hidden] *::before, html[data-mh-hidden] *::after { animation-play-state: paused !important; }
[data-mh-off]::before, [data-mh-off]::after { animation-play-state: paused; }
[data-mh-audio="live"]::before { opacity: calc(0.45 + var(--mh-energy, 0) * 0.4) !important; }
[data-mh-audio="live"]::after { opacity: calc(0.6 + var(--mh-energy, 0) * 0.35); }