/* ==========================================================
   Musclemania Hero Widget — hero-widget.css
   All colors use CSS custom properties so Elementor controls
   can override them per-instance via selectors.
========================================================== */

/* ---- Default palette (overridden by Elementor color pickers) ---- */
.mmh-hero {
	--mmh-bg-deep:  #0d0102;
	--mmh-bg-mid:   #2a0407;
	--mmh-bg-warm:  #6e0a12;
	--mmh-flame:    #c0102e;
	--mmh-amber:    #ff5a1f;
	--mmh-gold:     #ffc24a;
	--mmh-cream:    #fff6dd;
	--mmh-marquee-speed: 30s;

	--mmh-f-display: "Archivo Black", "Arial Black", sans-serif;
	--mmh-f-sans:    "Archivo", system-ui, sans-serif;
	--mmh-f-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* ---- Hero shell ---- */
.mmh-hero {
	position: relative;
	overflow: hidden;
	min-height: 92vh;
	color: #fff;
	background:
		radial-gradient(ellipse 80% 70% at 28% 50%, var(--mmh-bg-warm) 0%, var(--mmh-bg-mid) 45%, var(--mmh-bg-deep) 80%),
		radial-gradient(ellipse 60% 50% at 92% 30%, rgba(255, 90, 31, .18), transparent 65%),
		var(--mmh-bg-deep);
	padding: 40px 0 0;
	box-sizing: border-box;
	font-family: var(--mmh-f-sans);
	-webkit-font-smoothing: antialiased;
}

/* Moving golden grid */
.mmh-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 194, 74, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 194, 74, .05) 1px, transparent 1px);
	background-size: 80px 80px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	animation: mmh-grid-shift 30s linear infinite;
	pointer-events: none;
	z-index: 0;
}
.mmh-no-grid::before { display: none; }

/* Ember twinkle */
.mmh-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px   1px   at 12% 20%, rgba(255, 200, 140, .6), transparent),
		radial-gradient(1px   1px   at 28% 70%, rgba(255, 180,  74, .4), transparent),
		radial-gradient(1.5px 1.5px at 55% 18%, rgba(255, 220, 180, .6), transparent),
		radial-gradient(1px   1px   at 72% 45%, rgba(255,  90,  31, .5), transparent),
		radial-gradient(1px   1px   at 82% 80%, rgba(255, 255, 255, .4), transparent),
		radial-gradient(1px   1px   at 38% 88%, rgba(255, 180,  74, .4), transparent),
		radial-gradient(1.5px 1.5px at 95% 12%, rgba(255, 200, 140, .5), transparent);
	animation: mmh-ember 6s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}
.mmh-no-embers::after { display: none; }

/* ---- Particles ---- */
.mmh-particles {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}
.mmh-particles i {
	position: absolute;
	bottom: -20px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mmh-gold);
	box-shadow: 0 0 12px var(--mmh-gold), 0 0 24px rgba(255, 194, 74, .6);
	opacity: 0;
	animation: mmh-float-particle linear infinite;
	font-style: normal;
}
.mmh-particles i:nth-child(odd) {
	background: var(--mmh-amber);
	box-shadow: 0 0 12px var(--mmh-amber), 0 0 24px rgba(255, 90, 31, .6);
}
.mmh-particles i:nth-child(3n) {
	background: var(--mmh-cream);
	box-shadow: 0 0 10px var(--mmh-cream), 0 0 22px rgba(255, 246, 221, .5);
	width: 4px;
	height: 4px;
}
.mmh-particles i:nth-child(5n) {
	background: var(--mmh-flame);
	box-shadow: 0 0 14px var(--mmh-flame), 0 0 28px rgba(192, 16, 46, .7);
	width: 8px;
	height: 8px;
}
.mmh-particles i.orb {
	width: 14px;
	height: 14px;
	background: radial-gradient(circle, var(--mmh-gold), transparent 70%);
	box-shadow: 0 0 30px var(--mmh-gold), 0 0 60px rgba(255, 194, 74, .4);
	filter: blur(1px);
}

/* Particle positions */
.mmh-particles i:nth-child(1)       { left:  4%; animation-duration: 14s; animation-delay: 0s;   }
.mmh-particles i:nth-child(2)       { left: 11%; animation-duration: 18s; animation-delay: 2s;   }
.mmh-particles i:nth-child(3)       { left: 17%; animation-duration: 12s; animation-delay: 4s;   }
.mmh-particles i:nth-child(4)       { left: 24%; animation-duration: 22s; animation-delay: 1s;   }
.mmh-particles i:nth-child(5)       { left: 32%; animation-duration: 16s; animation-delay: 6s;   }
.mmh-particles i:nth-child(6)       { left: 38%; animation-duration: 13s; animation-delay: 3s;   }
.mmh-particles i:nth-child(7)       { left: 45%; animation-duration: 19s; animation-delay: 7s;   }
.mmh-particles i:nth-child(8)       { left: 52%; animation-duration: 15s; animation-delay: 5s;   }
.mmh-particles i:nth-child(9)       { left: 58%; animation-duration: 21s; animation-delay: 9s;   }
.mmh-particles i:nth-child(10)      { left: 64%; animation-duration: 17s; animation-delay: 2.5s; }
.mmh-particles i:nth-child(11)      { left: 71%; animation-duration: 14s; animation-delay: 8s;   }
.mmh-particles i:nth-child(12)      { left: 78%; animation-duration: 20s; animation-delay: 4.5s; }
.mmh-particles i:nth-child(13)      { left: 84%; animation-duration: 12s; animation-delay: 6.5s; }
.mmh-particles i:nth-child(14)      { left: 89%; animation-duration: 18s; animation-delay: 1.5s; }
.mmh-particles i:nth-child(15)      { left: 95%; animation-duration: 15s; animation-delay: 7.5s; }
.mmh-particles i.orb:nth-child(16)  { left: 15%; animation-duration: 26s; animation-delay: 1s;   }
.mmh-particles i.orb:nth-child(17)  { left: 48%; animation-duration: 30s; animation-delay: 5s;   }
.mmh-particles i.orb:nth-child(18)  { left: 82%; animation-duration: 28s; animation-delay: 9s;   }

/* ---- Marquee tape ---- */
.mmh-tape {
	position: relative;
	z-index: 5;
	overflow: hidden;
	padding: 10px 0;
	border-top: 1px solid rgba(255, 194, 74, .18);
	border-bottom: 1px solid rgba(255, 194, 74, .18);
	background: rgba(255, 194, 74, .04);
	margin-bottom: 24px;
}
.mmh-tape-track {
	display: inline-flex;
	gap: 28px;
	white-space: nowrap;
	animation: mmh-marquee var(--mmh-marquee-speed, 30s) linear infinite;
}
.mmh-tape-track span {
	font-family: var(--mmh-f-mono);
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 194, 74, .7);
}
.mmh-tape-track .mmh-dot {
	color: rgba(255, 194, 74, .35);
}

/* ---- Inner container ---- */
.mmh-inner {
	position: relative;
	z-index: 4;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
	min-height: calc(92vh - 70px);
	justify-content: center;
}
.mmh-inner > * { min-width: 0; }

/* ---- Eyebrow ---- */
.mmh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--mmh-f-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
	animation: mmh-fade-down 1s cubic-bezier(.2, .8, .2, 1);
}
.mmh-eyebrow .mmh-sep { color: rgba(255, 194, 74, .4); }
.mmh-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--mmh-gold);
	border: 1px solid rgba(255, 194, 74, .4);
	background: rgba(255, 194, 74, .08);
	padding: 8px 12px;
}
.mmh-pulse {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mmh-gold);
	box-shadow: 0 0 0 0 var(--mmh-gold);
	animation: mmh-pulse 2s infinite;
}

/* ---- Date strip ---- */
.mmh-date-strip {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 194, 74, .2);
	border-bottom: 1px solid rgba(255, 194, 74, .2);
	margin: 0;
	animation: mmh-fade-up 1s cubic-bezier(.2, .8, .2, 1) .15s both;
}
.mmh-d-num {
	font-family: var(--mmh-f-display);
	font-size: clamp(72px, 8vw, 120px);
	line-height: .86;
	letter-spacing: -.04em;
	background: linear-gradient(180deg, var(--mmh-cream) 0%, var(--mmh-gold) 55%, var(--mmh-amber) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.mmh-d-mo {
	display: flex;
	flex-direction: column;
	font-family: var(--mmh-f-display);
	font-size: 22px;
	line-height: .95;
	letter-spacing: .01em;
}
.mmh-d-mo small,
.mmh-d-city small {
	font-family: var(--mmh-f-mono);
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--mmh-gold);
	margin-bottom: 4px;
}
.mmh-sep-tall {
	display: inline-block;
	width: 1px;
	height: 56px;
	background: linear-gradient(180deg, transparent, rgba(255, 194, 74, .5), transparent);
}
.mmh-d-city {
	display: flex;
	flex-direction: column;
	font-family: var(--mmh-f-display);
	font-size: 24px;
	line-height: .95;
	letter-spacing: -.005em;
}

/* ---- Title stack ---- */
.mmh-title-stack {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 4px 0;
}

.mmh-poster-title {
	margin: 0;
	font-family: var(--mmh-f-display);
	font-size: clamp(80px, 13vw, 200px);
	line-height: .85;
	letter-spacing: -.045em;
	text-transform: uppercase;
	text-align: center;
	background: linear-gradient(
		180deg,
		var(--mmh-flame)  0%,
		var(--mmh-amber)  22%,
		var(--mmh-gold)   40%,
		var(--mmh-cream)  52%,
		var(--mmh-gold)   62%,
		var(--mmh-amber)  80%,
		var(--mmh-flame)  100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(0 8px 30px rgba(192, 16, 46, .5));
	animation: mmh-title-in 1.4s cubic-bezier(.2, .8, .2, 1) both;
}

.mmh-line-back  { position: relative; z-index: 3; }
.mmh-line-front { position: relative; z-index: 3; margin-top: -.18em; }

/* ---- Athlete column ---- */
.mmh-athlete-col {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	pointer-events: none;
	width: clamp(300px, 36vw, 500px);
	aspect-ratio: 540 / 778;
	animation: mmh-float-athlete 9s ease-in-out infinite alternate;
}

/* Red glow behind athlete */
.mmh-athlete-col::before {
	content: '';
	position: absolute;
	left: -15%;
	top: 0;
	width: 130%;
	height: 100%;
	background: radial-gradient(ellipse at 50% 45%, rgba(255, 90, 31, .65) 0%, rgba(200, 16, 46, .32) 35%, transparent 70%);
	filter: blur(50px);
	animation: mmh-glow-pulse 6s ease-in-out infinite alternate;
	z-index: 1;
}

.mmh-athlete-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 540 / 778;
	z-index: 2;
}
.mmh-athlete-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: contrast(1.2) saturate(1.35) brightness(1.02) drop-shadow(0 30px 60px rgba(120, 0, 10, .6));
	-webkit-mask-image: radial-gradient(ellipse 26% 52% at 50% 46%, #000 48%, rgba(0, 0, 0, .5) 66%, transparent 84%);
	mask-image: radial-gradient(ellipse 26% 52% at 50% 46%, #000 48%, rgba(0, 0, 0, .5) 66%, transparent 84%);
}

/* Optional athlete nameplate */
.mmh-athlete-plate {
	position: absolute;
	left: 0;
	bottom: 60px;
	z-index: 3;
	padding: 14px 24px;
	border: 1px solid rgba(255, 194, 74, .5);
	background: rgba(10, 1, 2, .55);
	backdrop-filter: blur(6px);
	border-radius: 999px;
	animation: mmh-fade-up 1s cubic-bezier(.2, .8, .2, 1) .6s both;
}
.mmh-aname {
	font-family: var(--mmh-f-display);
	font-size: 22px;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1;
	-webkit-text-fill-color: #fff;
	color: #fff;
}
.mmh-atitle {
	margin-top: 4px;
	font-family: var(--mmh-f-sans);
	font-style: italic;
	font-size: 12px;
	color: var(--mmh-gold);
}

/* No athlete — simplify stack */
.mmh-no-athlete .mmh-title-stack {
	gap: 0;
}
.mmh-no-athlete .mmh-line-front {
	margin-top: .04em;
}

/* ---- Tagline ---- */
.mmh-tagline {
	font-family: var(--mmh-f-sans);
	font-size: 18px;
	color: rgba(255, 235, 210, .85);
	line-height: 1.55;
	max-width: 580px;
	margin: 8px auto 0;
	text-align: center;
	animation: mmh-fade-up 1s cubic-bezier(.2, .8, .2, 1) .45s both;
}

/* ---- Bottom bar ---- */
.mmh-bottom-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
	border-top: 1px solid rgba(255, 194, 74, .18);
	padding-top: 24px;
	animation: mmh-fade-up 1s cubic-bezier(.2, .8, .2, 1) .6s both;
}
.mmh-facts {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	justify-content: center;
}
.mmh-f-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}
.mmh-l {
	font-family: var(--mmh-f-mono);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mmh-gold);
}
.mmh-v {
	font-family: var(--mmh-f-display);
	font-size: 18px;
	letter-spacing: -.005em;
	color: #fff;
	text-transform: uppercase;
}
.mmh-v.mmh-amber {
	background: linear-gradient(180deg, var(--mmh-cream), var(--mmh-amber));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---- CTA button ---- */
.mmh-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, var(--mmh-flame) 0%, var(--mmh-amber) 100%);
	color: #fff;
	padding: 16px 28px;
	font-family: var(--mmh-f-display);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background .2s, transform .2s, box-shadow .2s;
	box-shadow: 0 6px 24px rgba(200, 16, 46, .45);
}
.mmh-cta:hover {
	background: #fff;
	color: var(--mmh-flame);
	transform: translateY(-1px);
	box-shadow: 0 10px 32px rgba(255, 90, 31, .6);
}
.mmh-cta span { transition: transform .2s; }
.mmh-cta:hover span { transform: translateX(6px); }

/* ==========================================================
   KEYFRAMES
========================================================== */
@keyframes mmh-grid-shift {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 80px 80px, 0 0; }
}
@keyframes mmh-ember {
	0%   { opacity: .55; }
	100% { opacity: 1; }
}
@keyframes mmh-float-particle {
	0%   { transform: translateY(0) translateX(0);   opacity: 0; }
	10%  { opacity: .9; }
	50%  { transform: translateY(-50vh) translateX(20px); opacity: .8; }
	90%  { opacity: .4; }
	100% { transform: translateY(-110vh) translateX(-15px); opacity: 0; }
}
@keyframes mmh-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes mmh-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(255, 194, 74, .7); }
	70%  { box-shadow: 0 0 0 12px rgba(255, 194, 74, 0); }
	100% { box-shadow: 0 0 0 0   rgba(255, 194, 74, 0); }
}
@keyframes mmh-glow-pulse {
	0%   { opacity: .55; transform: scale(1); }
	100% { opacity: 1;   transform: scale(1.07); }
}
@keyframes mmh-float-athlete {
	0%   { transform: translate(-50%, -50%); }
	100% { transform: translate(-50%, -54%); }
}
@keyframes mmh-title-in {
	from { opacity: 0; filter: blur(10px) drop-shadow(0 8px 30px rgba(192, 16, 46, .5)); }
	to   { opacity: 1; filter: blur(0)    drop-shadow(0 8px 30px rgba(192, 16, 46, .5)); }
}
@keyframes mmh-fade-down {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mmh-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width: 980px) {
	.mmh-inner {
		padding: 0 24px;
		gap: 18px;
	}
	.mmh-athlete-col {
		aspect-ratio: 540 / 700;
	}
	.mmh-athlete-photo {
		aspect-ratio: 540 / 700;
	}
	.mmh-bottom-bar {
		gap: 18px;
	}
	.mmh-facts {
		gap: 20px;
	}
}
@media (max-width: 600px) {
	.mmh-date-strip {
		flex-wrap: wrap;
		gap: 12px;
		justify-content: center;
	}
	.mmh-sep-tall {
		display: none;
	}
	.mmh-tagline {
		font-size: 15px;
	}
}

/* Elementor editor — prevent hero from overflowing the canvas */
.elementor-editor-active .mmh-hero {
	min-height: 600px;
}