/*
Theme Name: Landing Page Partner: WM1
Description: This is a landing page for a partner
Author: XPS
Template: flatsome
Version: 1.0
*/

/*** === HERO === ***/
/* Hero scoped layout: H1 sits at the top, typing area below */
.heroWM1 {
	width: 100%;
	padding: 6rem 2rem 4rem;
	text-align: center;
	position: relative;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: stretch; /* allow h1 to be full width */
	justify-content: flex-start;
	background: linear-gradient(135deg, #1a1a1a 0%, #363636 100%);
	color: #ffffff;
	font-family: sans-serif;
	box-sizing: border-box;
	/* spacing variables scoped to this hero so copying into Flatsome works */
	--wm1-gap: 1.2rem;
	--wm1-line-h: 6px;
}
.heroWM1 h1 {
	width: 100%;
	text-align: center;
	font-family: 'Playfair Display', serif;
	font-size: clamp(2rem, 5vw, 5rem);
	font-weight: 700;
	line-height: 1.5;
	margin: 0 auto 1.2rem;
	padding: 0.5rem 1.5rem;
	color: #FFD85A;
	-webkit-text-stroke: 1px rgba(0,0,0,0.18);
	text-shadow: 0 12px 32px rgba(0,0,0,0.65), 0 3px 8px rgba(0,0,0,0.35);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	position: relative;
	transform: translateZ(0);
	animation: fadeIn 1s ease-out both;
	display: block;
}
.heroWM1 h1 span { display: block; opacity: 0; animation: slideUp 0.5s ease forwards; }
.heroWM1 h1 span:nth-child(1) { animation-delay: 0.1s; font-size: clamp(1rem,2.6vw,1.6rem); font-weight:500; }
.heroWM1 h1 span:nth-child(2) { animation-delay: 0.3s; font-size: clamp(2rem,6vw,4.2rem); font-weight:800; }
.heroWM1 h1 span:nth-child(3) { animation-delay: 0.5s; font-size: clamp(1.25rem,3.5vw,2.2rem); font-weight:500; }
.heroWM1 h1 span:nth-child(4) { animation-delay: 0.7s; font-size: clamp(1rem,2.8vw,1.6rem); font-weight:400; color: rgba(255,255,255,0.95); text-transform: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.heroWM1::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255,215,0,0.04) 0%, transparent 60%); pointer-events: none; mix-blend-mode: lighten; }

/* Accent bar moved to the punch line so it's scoped to the H1 */
.heroWM1 h1.wm1-punchLine {
	/* reserve space inside H1 for the visual gap + line height */
	padding-bottom: calc(var(--wm1-gap) + var(--wm1-line-h));
}
.heroWM1 h1.wm1-punchLine::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(100% + var(--wm1-gap)); /* gap between H1 bottom and line */
	width: 60%;
	height: var(--wm1-line-h);
	background: linear-gradient(90deg, rgba(255,200,0,0.95), rgba(255,140,0,0.9));
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(255,165,0,0.12);
	opacity: 0.95;
	pointer-events: none;
}

/* Typing area (placed below the hero's accent line) */
.wm1-typing {
	width: 100%;
	max-width: 980px;
	/* place typing below the accent line with the same gap as above */
	margin: calc(var(--wm1-gap) + var(--wm1-line-h)) auto 0;
	padding-top: 2.2rem; /* extra spacing so typing doesn't touch the accent line */
	text-align: center;
	font-size: 1rem;
	color: rgba(255,255,255,0.95);
	pointer-events: none;
}
.typed-line {
	font-size: clamp(1rem, 2.4vw, 1.15rem);
	line-height: 1.5;
	margin: 0.5rem 0;
	min-height: 1.6em; /* reserve height during typing */
	white-space: pre-wrap;
	overflow: hidden;
	opacity: 0;
	transition: opacity 220ms ease;
}
.typed-line.visible { opacity: 1; }

/* caret element while typing (inline) */
.caret { display:inline-block; width:0.08em; background:#fff; margin-left:0.12em; animation: blink 0.9s steps(1) infinite; vertical-align:bottom; height:1.1em; }
@keyframes blink { 0%,49%{opacity:1;}50%,100%{opacity:0;} }

/* arrow icon that appears last and bounces (scoped) */
.wm1-icArrow { display:inline-block; margin-top:1rem; font-size:1.6rem; opacity:0; transform:translateY(0); color: var(--brand); }
.wm1-icArrow.visible { opacity:1; animation: bounce 1.2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);} }