/* ==========================================================================
   MusicHaven system refinements — premium depth + Living Music Glass everywhere.
   Loads LAST. Applies to canonical module classes so the homepage/UI kit, all
   component cards and all seven feature templates inherit automatically via
   styles.css. Reduced-motion safety comes from the global kill-switch in
   tokens.css; deterministic phase comes from :nth-child, never randomness.
   ========================================================================== */

/* ----- 1. Contrast + editorial rhythm on cream ----------------------------- */
:root {
	--mh-muted: #564A67;                 /* one step darker; still AA on bg + panels */
	--mh-line: rgba(26, 14, 36, 0.18);   /* firmer hairlines */
}
/* Warm washes kill the cream deserts without leaving the approved field. */
body {
	background-image:
		radial-gradient(90rem 44rem at 82% -6rem, rgba(200, 164, 77, 0.07), transparent 60%),
		radial-gradient(70rem 40rem at -10% 30rem, rgba(107, 63, 160, 0.045), transparent 60%),
		radial-gradient(80rem 50rem at 110% 80rem, rgba(200, 164, 77, 0.05), transparent 60%);
	background-attachment: fixed;
}
.mh-section { margin-block: clamp(30px, 5.5vw, 60px); }
.mh-wrap > .mh-section + .mh-section::before { opacity: 0.7; width: 76px; }

/* ----- 2. Stronger dimensional gold edge + richer plum depth --------------- */
.mh-edge-gold { border-color: rgba(228, 200, 120, 0.85); }
.mh-card {
	border-color: rgba(200, 164, 77, 0.34);
	box-shadow: 0 16px 34px rgba(43, 21, 61, 0.14), 0 2px 0 rgba(82, 39, 111, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.mh-card:not(.mh-skinned):hover { border-color: rgba(200, 164, 77, 0.7); }
.mh-zonebar--plum { background: linear-gradient(100deg, #3A1F4D 0%, #251032 60%, #1C0D28 100%); }
.mh-zonebar--grape { background: linear-gradient(100deg, #4A2A5C 0%, #2E1A40 62%, #1C0D28 100%); }
.mh-join {
	background:
		radial-gradient(110% 160% at 85% -20%, rgba(200, 164, 77, 0.24), transparent 55%),
		radial-gradient(90% 140% at 5% 120%, rgba(107, 63, 160, 0.34), transparent 55%),
		linear-gradient(160deg, #2B1A3E 0%, #241733 55%, #1C1128 100%);
}
.mh-signal { box-shadow: 0 18px 44px rgba(23, 17, 31, 0.42), 0 3px 0 rgba(82, 39, 111, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.mh-lt { border-color: rgba(200, 164, 77, 0.3); box-shadow: 0 12px 26px rgba(43, 21, 61, 0.12), 0 2px 0 rgba(82, 39, 111, 0.14); }
.mh-flipcard__face { border-color: rgba(228, 200, 120, 0.62); box-shadow: 0 16px 34px rgba(43, 21, 61, 0.2), 0 3px 0 rgba(82, 39, 111, 0.22); }
.mh-pfh { border-color: rgba(200, 164, 77, 0.28); box-shadow: 0 20px 44px rgba(43, 21, 61, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
/* Honest media slots read as art-directed atmospheres, not placeholder gradients. */
.mh-card__media--slot, .mh-slide__media-slot {
	background-image:
		radial-gradient(120% 130% at 80% -10%, var(--sk-glow), transparent 55%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 9px),
		var(--sk-grad);
}

/* ----- 3. Living Music Glass on every major module ------------------------- */
/* Rim light (::before) + breathing inner current (::after, z-index:-1 so text
   is never touched). Applied by class — no per-template opt-in required. */
.mh-card, .mh-zonebar, .mh-signal, .mh-radio__card, .mh-lt, .mh-merch-card,
.mh-posterband, .mh-join, .mh-artist-haven, .mh-pfh, .mh-trackrow {
	position: relative;
	isolation: isolate;
}
/* Flip faces must stay absolutely overlaid (feature-templates.css owns that);
   they only need the isolation for the sheen layer. */
.mh-flipcard__face { isolation: isolate; }
.mh-card::before, .mh-zonebar::after, .mh-signal::before, .mh-radio__card::before,
.mh-lt::before, .mh-merch-card::before, .mh-posterband::before, .mh-join::before,
.mh-artist-haven::before, .mh-pfh::before, .mh-trackrow.is-active::before,
.mh-flipcard__face::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(
		from 210deg,
		rgba(228, 200, 120, 0) 0%,
		rgba(228, 200, 120, 0.5) 12%,
		rgba(140, 90, 196, 0.32) 34%,
		rgba(228, 200, 120, 0) 55%,
		rgba(107, 63, 160, 0.26) 78%,
		rgba(228, 200, 120, 0.4) 92%,
		rgba(228, 200, 120, 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.4;
	pointer-events: none;
	z-index: 3;
	transition: opacity 0.25s ease;
}
.mh-card::after, .mh-signal::after, .mh-radio__card::after, .mh-lt::after,
.mh-merch-card::after, .mh-posterband::after, .mh-join::after,
.mh-artist-haven::after, .mh-pfh::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(60% 80% at 78% 8%, rgba(228, 200, 120, 0.1), transparent 60%),
		radial-gradient(70% 90% at 14% 98%, rgba(107, 63, 160, 0.08), transparent 62%);
	opacity: 0.65;
	pointer-events: none;
	z-index: -1;
	transform-origin: 62% 36%;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.mh-card::after, .mh-signal::after, .mh-radio__card::after, .mh-lt::after,
	.mh-merch-card::after, .mh-posterband::after, .mh-join::after,
	.mh-artist-haven::after, .mh-pfh::after {
		animation: mh-glass-breath 7s ease-in-out infinite alternate;
	}
	/* Deterministic phase: position in the document, never randomness. */
	:nth-child(4n + 1 of .mh-card)::after { animation-delay: -1.4s; }
	:nth-child(4n + 2 of .mh-card)::after { animation-delay: -2.8s; }
	:nth-child(4n + 3 of .mh-card)::after { animation-delay: -4.2s; }
	.mh-lt:nth-child(even)::after { animation-delay: -2.8s; }
	.mh-lt:nth-child(3n)::after { animation-delay: -4.2s; }
}
/* Soft pointer current on fine-pointer devices: the light leans toward the hand. */
@media (hover: hover) and (pointer: fine) {
	.mh-card:hover::before, .mh-zonebar:hover::after, .mh-lt:hover::before,
	.mh-flipcard__face:hover::before, .mh-pfh:hover::before, .mh-signal:hover::before { opacity: 0.72; }
	.mh-card:hover::after, .mh-lt:hover::after, .mh-pfh:hover::after {
		opacity: 0.95;
		transform: translate(-4px, -3px) scale(1.015);
	}
}
/* ----- 4. System typography + state corrections ----------------------------- */
/* tokens.css paints all h1–h4 --mh-ink (cream-surface default). Dark skinned
   panels must re-declare heading color explicitly (inline or class). */
.mh-flipcard__title { color: var(--sk-text, var(--mh-ink)); }
h1, h2, h3, .mh-zone-head__title, .mh-slide__title, .mh-card__title { hyphens: none; overflow-wrap: normal; text-wrap: balance; min-width: 0; }
.mh-grid > *, .mh-zonebars__list > * { min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
:focus-visible { outline: 3px solid #C8A44D; outline-offset: 2px; border-radius: 4px; }
.mh-on-dark :focus-visible, .mh-skinned :focus-visible { outline-color: #E4C878; }
button:disabled, .mh-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; filter: saturate(0.6); }
.is-loading { position: relative; pointer-events: none; opacity: 0.75; }
.is-loading::after { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.5em; vertical-align: -0.1em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: mh-spin 0.7s linear infinite; }
@keyframes mh-spin { to { transform: rotate(360deg); } }
.is-success::before { content: "✓ "; font-weight: 900; color: #7A6125; }
.mh-on-dark .is-success::before, .mh-skinned .is-success::before { color: #E4C878; }
.mh-btn--gold { box-shadow: 0 3px 0 #7A6125, 0 10px 22px rgba(122, 97, 37, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.mh-btn--gold:active { transform: translateY(2px); box-shadow: 0 1px 0 #7A6125, 0 5px 12px rgba(122, 97, 37, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45); }

.mh-zonebar::after {
	background: conic-gradient(
		from 210deg,
		rgba(228, 200, 120, 0) 0%, rgba(228, 200, 120, 0.55) 14%,
		rgba(140, 90, 196, 0.3) 38%, rgba(228, 200, 120, 0) 60%,
		rgba(228, 200, 120, 0.35) 90%, rgba(228, 200, 120, 0) 100%
	);
	inset: 0; border-radius: inherit; padding: 1.5px; content: "";
	-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.45; pointer-events: none; position: absolute; z-index: 3;
	transition: opacity 0.25s ease;
}

/* Functionality pass: real semantics without visual change */
.mh-nav__linkbtn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.mh-nav__linkbtn:hover{text-decoration:underline}
button.mh-utilpill,button.mh-drawer__chip{font:inherit;cursor:pointer}
/* Awaiting an official profile URL. Kept legible (opacity .55 failed AA) — the
   not-yet-linked state is carried by the absent underline and the default
   cursor, not by dimming the label into illegibility. */
.mh-footer__social-pending{display:inline-flex;align-items:center;gap:inherit;cursor:default;color:var(--mh-night-muted,#B9AEC6)}
.mh-footer__social-pending .mh-footer__social-logo{opacity:.72}