/* Case study template page styles. Loaded by work/*.php.
   Everything reusable across pages lives in components/ or css/mm-utilities.css.
   This file holds ONLY what is structural to the case-study template:
   hero treatment, alternating section bands, and section-level type overrides. */

.mm-case-hero {
	background:
		radial-gradient(ellipse at 20% 0%, rgba(0, 180, 255, 0.10) 0%, rgba(0, 0, 0, 0) 50%),
		radial-gradient(ellipse at 100% 100%, rgba(0, 180, 255, 0.06) 0%, rgba(0, 0, 0, 0) 60%),
		#050507;
	padding: 130px 0 140px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mm-case-section { padding: 130px 0; background: #050507; border-bottom: 1px solid rgba(255, 255, 255, 0.06); content-visibility: auto; contain-intrinsic-size: auto 800px; }

/* Alt band: slightly lighter base + a subtle two-stop blue radial gradient
   (less intense than the hero) for a touch more depth. */
.mm-case-section.alt {
	background:
		radial-gradient(ellipse at 80% 0%, rgba(0, 180, 255, 0.07) 0%, rgba(0, 0, 0, 0) 55%),
		radial-gradient(ellipse at 0% 100%, rgba(0, 180, 255, 0.05) 0%, rgba(0, 0, 0, 0) 60%),
		#0c0c10;
}
/* Section h2 + lede sizes now come from the .mm-h2-lg and .mm-lede-lg helpers
   on the markup (matches the home page). Color stays site-default. */

/* Case hero lede sits between body-text and hero-text size. */
.mm-case-hero .mm-lede { font-size: 26px !important; }

/* Push videos down 20px inside their columns. */
.mm-case-section .mm-video-frame { margin-top: 25px; }

/* Breathing room under the video caption text. */
.mm-case-section .mm-video-caption { margin-bottom: 25px; }

/* Per-page background themes. Each work page can opt into its own subtle
   gradient palette via a body class. Backgrounds only, never buttons/chips. */
.mm-theme-magenta .mm-case-hero {
	background:
		radial-gradient(ellipse at 20% 0%, rgba(216, 27, 156, 0.18) 0%, rgba(0, 0, 0, 0) 55%),
		radial-gradient(ellipse at 100% 100%, rgba(216, 27, 156, 0.11) 0%, rgba(0, 0, 0, 0) 65%),
		#070407;
}
.mm-theme-magenta .mm-case-section.alt {
	background:
		radial-gradient(ellipse at 80% 0%, rgba(216, 27, 156, 0.13) 0%, rgba(0, 0, 0, 0) 60%),
		radial-gradient(ellipse at 0% 100%, rgba(216, 27, 156, 0.09) 0%, rgba(0, 0, 0, 0) 65%),
		#0d0810;
}

/* Brushed-metal control surface. Scoped to #controls only. Stays dark to
   match the alternating-black sections; no color gradient. Layers: fine
   horizontal grain + soft top/bottom bevel sheen over the dark base, with
   a radial vignette that fades to pure black at all four edges so the
   metal only reads near the knobs in the middle of the section. */
.mm-theme-magenta #controls.mm-case-section,
#controls.mm-case-section {
	position: relative;
	background:
		radial-gradient(ellipse 60% 65% at 50% 60%,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0) 35%,
			rgba(0, 0, 0, 0.55) 70%,
			rgba(0, 0, 0, 0.95) 100%
		),
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.05) 0px,
			rgba(255, 255, 255, 0.05) 1px,
			rgba(0, 0, 0, 0.12) 1px,
			rgba(0, 0, 0, 0.12) 2px
		),
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.10) 0%,
			rgba(255, 255, 255, 0) 18%,
			rgba(0, 0, 0, 0) 82%,
			rgba(0, 0, 0, 0.55) 100%
		),
		#0a0a0e !important;
}

/* Offscreen: collapse the multi-layer brushed vignette to a flat color so
   the compositor isn't re-blending gradient stops on every frame. */
.mm-offscreen#controls.mm-case-section,
.mm-theme-magenta .mm-offscreen#controls.mm-case-section {
	background: #050507 !important;
}

/* Console section. Background lit just enough that button drop shadows
   have somewhere visible to fall, with a subtle radial vignette so the
   surface reads as curved/lit rather than flat. */
.mm-case-section.mm-section-console,
.mm-theme-magenta .mm-case-section.mm-section-console {
	background:
		radial-gradient(ellipse 90% 80% at 50% 35%,
			rgba(255, 255, 255, 0.025) 0%,
			rgba(255, 255, 255, 0.00) 50%,
			rgba(0, 0, 0, 0.20) 100%),
		#16181c !important;
}

/* Tablet responsive overrides live in /css/mm-responsive.css. */