/**
 * FSO "Symphonic Flashbang" promo ad (/1812/) — styles for assets/js/flashbang.js.
 * Hex values mirror the Base44 FlashbangAd.jsx source (GOLD/NAVY/PARCHMENT) exactly
 * rather than deriving from presets, so the ad matches frame-for-frame on the bare
 * page-1812 template regardless of which theme styles that template loads.
 */
#fso-flashbang {
	--fb-gold: #C5A059;
	--fb-navy: #050A18;
	--fb-parchment: #F4F1EA;
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--fb-navy);
	font-family: 'Public Sans', system-ui, sans-serif;
}

/* Hidden YouTube players — 1px, clipped, silent visually. */
#fso-flashbang .fb-yt {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}
#fso-flashbang .fb-yt iframe { max-width: 1px !important; max-height: 1px !important; }

/* ---- Start screen ------------------------------------------------------- */
#fso-flashbang .fb-start {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	min-height: 100vh;
	text-align: center;
}
#fso-flashbang.is-playing .fb-start { display: none; }
#fso-flashbang .fb-start__inner { max-width: 42rem; }
#fso-flashbang .fb-start__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--fb-gold);
	margin: 0 0 1rem;
}
#fso-flashbang .fb-start__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	color: var(--fb-parchment);
	font-size: clamp(2.5rem, 7vw, 5.5rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 1rem;
}
#fso-flashbang .fb-start__rule { width: 4rem; height: 1px; margin: 0 auto 1.5rem; background: var(--fb-gold); }
#fso-flashbang .fb-start__lede {
	font-size: clamp(0.9rem, 1.6vw, 1rem);
	line-height: 1.7;
	color: rgba(244, 241, 234, 0.7);
	margin: 0 0 2rem;
}
#fso-flashbang .fb-detonate {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 2.5rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	background: var(--fb-gold);
	color: var(--fb-navy);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#fso-flashbang .fb-detonate:hover { box-shadow: 0 0 40px rgba(197, 160, 89, 0.6); transform: scale(1.05); }
#fso-flashbang .fb-detonate svg { width: 18px; height: 18px; fill: var(--fb-navy); }
#fso-flashbang .fb-start__hint {
	margin: 1rem 0 0;
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, 0.4);
}

/* ---- Playing stage ------------------------------------------------------ */
#fso-flashbang .fb-stage {
	position: fixed;
	inset: 0;
	z-index: 40;
	overflow: hidden;
	background: var(--fb-navy);
	display: none;
}
#fso-flashbang.is-playing .fb-stage { display: block; }

#fso-flashbang .fb-bg-layers { position: absolute; inset: 0; }
#fso-flashbang .fb-bg-layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}
#fso-flashbang .fb-bg-layer img,
#fso-flashbang .fb-bg-layer video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
#fso-flashbang .fb-bg-layer--black { background: #000; }
#fso-flashbang .fb-bg-layer--gold { background: var(--fb-gold); }
#fso-flashbang .fb-scrim {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
	background: linear-gradient(to bottom, rgba(5, 10, 24, 0.6) 0%, rgba(5, 10, 24, 0.8) 100%);
}

#fso-flashbang .fb-content {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	text-align: center;
}
#fso-flashbang .fb-scene { max-width: 48rem; }

/* Progress bar */
#fso-flashbang .fb-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	z-index: 20;
	background: rgba(197, 160, 89, 0.2);
}
#fso-flashbang .fb-progress-fill { height: 100%; width: 0; background: var(--fb-gold); transition: width 0.1s linear; }

/* Logo, top-right during playback (mirrors PageLogo placement) */
#fso-flashbang .fb-logo { position: fixed; top: 0; right: 0; z-index: 50; padding: 0.75rem 1.5rem; }
#fso-flashbang .fb-logo img { height: 34px; width: auto; display: block; }

/* Back button on the start screen only */
#fso-flashbang .fb-back {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.75rem 1.5rem;
	padding: 6px 12px;
	font-size: 0.6875rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--fb-gold);
	text-decoration: none;
	border: 1px solid rgba(197, 160, 89, 0.5);
}
#fso-flashbang.is-playing .fb-back { display: none; }

/* ---- Line typography (Base44 getLineStyle) ------------------------------ */
#fso-flashbang .fb-line {
	margin: 0 0 0.5rem;
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
#fso-flashbang .fb-line.is-in { opacity: 1; transform: translateY(0); }

#fso-flashbang .fb-eyebrow { font-size: clamp(0.6rem, 1.8vw, 0.85rem); letter-spacing: 0.35em; text-transform: uppercase; font-weight: 600; color: var(--fb-gold); }
#fso-flashbang .fb-title-gold,
#fso-flashbang .fb-title-white {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: clamp(2.5rem, 9vw, 6rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}
#fso-flashbang .fb-title-gold { color: var(--fb-gold); text-shadow: 0 0 40px rgba(197, 160, 89, 0.4); }
#fso-flashbang .fb-title-white { color: var(--fb-parchment); text-shadow: 0 0 40px rgba(255, 255, 255, 0.2); }
#fso-flashbang .fb-date { font-size: clamp(1rem, 3vw, 1.5rem); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; color: var(--fb-parchment); margin-top: 0.5rem; }
#fso-flashbang .fb-sub { font-size: clamp(1rem, 2.5vw, 1.5rem); color: rgba(244, 241, 234, 0.85); margin-top: 1rem; font-style: italic; }
#fso-flashbang .fb-serif { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.5rem, 5vw, 3rem); color: var(--fb-parchment); line-height: 1.2; letter-spacing: -0.01em; }
#fso-flashbang .fb-program-line { font-size: clamp(1rem, 3vw, 1.75rem); font-weight: 600; color: var(--fb-gold); letter-spacing: 0.03em; margin-top: 0.75rem; text-shadow: 0 0 20px rgba(197, 160, 89, 0.3); }
#fso-flashbang .fb-serif-large { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.75rem, 5.5vw, 3.5rem); color: var(--fb-parchment); line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); }
#fso-flashbang .fb-on-sale-title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(2rem, 7vw, 4rem); color: var(--fb-navy); letter-spacing: -0.02em; margin-bottom: 1.5rem; }
#fso-flashbang .fb-on-sale-line { font-size: clamp(1rem, 3vw, 1.5rem); font-weight: 600; color: var(--fb-navy); letter-spacing: 0.05em; margin-top: 0.5rem; }
#fso-flashbang .fb-on-sale-sub { font-size: clamp(0.85rem, 2vw, 1.1rem); color: var(--fb-navy); font-style: italic; margin-top: 1.25rem; max-width: 80%; margin-left: auto; margin-right: auto; }

/* Tagline (final scene) */
#fso-flashbang .fb-tagline {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	color: var(--fb-parchment);
	font-size: clamp(0.95rem, 2.6vw, 1.5rem);
	line-height: 1.4;
	letter-spacing: 0.01em;
	max-width: 44rem;
	margin: 1.5rem auto 0;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
#fso-flashbang .fb-tagline.is-in { opacity: 1; transform: translateY(0); }

/* Musician scene */
#fso-flashbang .fb-scene--musician { opacity: 0; transform: translateY(15px); transition: opacity 0.5s ease, transform 0.5s ease; }
#fso-flashbang .fb-scene--musician.is-in { opacity: 1; transform: translateY(0); }
#fso-flashbang .fb-mus-head { margin-bottom: 1.5rem; }
#fso-flashbang .fb-role { font-size: 0.625rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fb-gold); margin: 0 0 0.25rem; opacity: 1; transform: none; }
#fso-flashbang .fb-mus-name { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.5rem, 3vw, 1.875rem); color: var(--fb-parchment); letter-spacing: -0.01em; margin: 0; }
#fso-flashbang .fb-mus-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; line-height: 1.15; color: var(--fb-parchment); font-size: clamp(1.5rem, 4vw, 2.75rem); letter-spacing: -0.01em; margin: 0; }

/* ---- Finished overlay --------------------------------------------------- */
#fso-flashbang .fb-finished {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(5, 10, 24, 0.92);
	text-align: center;
}
#fso-flashbang.is-finished .fb-finished { display: flex; }
#fso-flashbang .fb-finished__inner { max-width: 36rem; padding: 1.5rem; }
#fso-flashbang .fb-finished__eyebrow { font-size: 0.625rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--fb-gold); margin: 0 0 0.75rem; }
#fso-flashbang .fb-finished__title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(2rem, 5vw, 3.5rem); color: var(--fb-parchment); letter-spacing: -0.02em; margin: 0 0 1rem; }
#fso-flashbang .fb-finished__sub { font-size: clamp(0.9rem, 2vw, 1rem); color: rgba(244, 241, 234, 0.8); margin: 0 0 2rem; }
#fso-flashbang .fb-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
#fso-flashbang .fb-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid rgba(197, 160, 89, 0.6);
	background: transparent;
	color: var(--fb-gold);
	transition: box-shadow 0.3s ease, background 0.3s ease;
}
#fso-flashbang .fb-btn--gold { background: var(--fb-gold); color: var(--fb-navy); border-color: var(--fb-gold); }
#fso-flashbang .fb-btn--gold:hover { box-shadow: 0 0 30px rgba(197, 160, 89, 0.5); }
#fso-flashbang .fb-btn:hover { background: rgba(197, 160, 89, 0.1); }
#fso-flashbang .fb-btn svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
	#fso-flashbang .fb-line,
	#fso-flashbang .fb-tagline,
	#fso-flashbang .fb-scene--musician,
	#fso-flashbang .fb-bg-layer,
	#fso-flashbang .fb-scrim { transition-duration: 0.01ms; }
}