.hjw-event-intro {
	--hjw-gold: #f5c846;
	--hjw-amber: #ffaa2d;
	--hjw-champagne: #fff0cd;
	--hjw-ink: #0f172a;
	--hjw-stroke: rgba(15, 23, 42, .10);
	--hjw-card-a: rgba(255, 255, 255, .96);
	--hjw-card-b: rgba(255, 250, 240, .93);

	font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	padding: clamp(12px, 2vw, 22px);
	box-sizing: border-box;
}

.hjw-event-intro *,
.hjw-event-intro *::before,
.hjw-event-intro *::after {
	box-sizing: border-box;
	min-width: 0;
}

.hjw-event-intro__shell {
	width: min(1120px, 100%);
	margin: 0 auto;
	border-radius: 22px;
	overflow: hidden;
	position: relative;
	border: 1px solid var(--hjw-stroke);
	background:
		radial-gradient(1200px 520px at 14% 34%, color-mix(in srgb, var(--hjw-gold) 26%, transparent), transparent 56%),
		radial-gradient(980px 520px at 86% 72%, color-mix(in srgb, var(--hjw-amber) 18%, transparent), transparent 58%),
		radial-gradient(820px 420px at 62% 6%, color-mix(in srgb, var(--hjw-gold) 16%, transparent), transparent 62%),
		linear-gradient(180deg, var(--hjw-card-a), var(--hjw-card-b));
	box-shadow:
		0 26px 96px rgba(2, 6, 23, .14),
		0 0 0 1px rgba(255, 255, 255, .62) inset;
}

.hjw-event-intro__shell::before {
	content: "";
	position: absolute;
	inset: -2px;
	background: linear-gradient(115deg,
		color-mix(in srgb, var(--hjw-champagne) 0%, transparent) 0%,
		color-mix(in srgb, var(--hjw-champagne) 26%, transparent) 18%,
		color-mix(in srgb, var(--hjw-champagne) 0%, transparent) 38%,
		color-mix(in srgb, var(--hjw-champagne) 18%, transparent) 58%,
		color-mix(in srgb, var(--hjw-champagne) 0%, transparent) 78%
	);
	opacity: .42;
	pointer-events: none;
	mix-blend-mode: screen;
}

.hjw-event-intro__shell::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(2px 2px at 8% 18%, rgba(255, 255, 255, .65), transparent 70%),
		radial-gradient(1.5px 1.5px at 14% 62%, rgba(255, 255, 255, .38), transparent 72%),
		radial-gradient(2px 2px at 30% 78%, rgba(255, 255, 255, .58), transparent 70%),
		radial-gradient(1.5px 1.5px at 52% 64%, rgba(255, 255, 255, .40), transparent 72%),
		radial-gradient(2px 2px at 74% 76%, rgba(255, 255, 255, .62), transparent 70%),
		radial-gradient(2px 2px at 92% 56%, rgba(255, 255, 255, .52), transparent 70%),
		radial-gradient(3px 3px at 26% 22%, color-mix(in srgb, var(--hjw-gold) 35%, transparent), transparent 70%),
		radial-gradient(3px 3px at 78% 30%, color-mix(in srgb, var(--hjw-gold) 28%, transparent), transparent 70%);
	opacity: .28;
	pointer-events: none;
}

.hjw-event-intro--no-sheen .hjw-event-intro__shell::before,
.hjw-event-intro--no-sparkles .hjw-event-intro__shell::after {
	display: none;
}

.hjw-event-intro__wrap {
	position: relative;
	z-index: 1;
	padding: 14px;
	display: grid;
	grid-template-columns: 1.06fr .94fr;
	gap: 16px;
	align-items: stretch;
}

.hjw-event-intro--reverse .hjw-event-intro__video-card {
	order: 2;
}

.hjw-event-intro--reverse .hjw-event-intro__info {
	order: 1;
}

.hjw-event-intro__info:only-child {
	grid-column: 1 / -1;
}

.hjw-event-intro__video-card {
	border-radius: 18px;
	padding: 12px;
	background: rgba(255, 255, 255, .62);
	border: 1px solid var(--hjw-stroke);
	box-shadow: 0 18px 70px rgba(2, 6, 23, .14);
}

.hjw-event-intro__video-frame {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(0, 0, 0, .20);
	aspect-ratio: 16 / 9;
	border: 1px solid var(--hjw-stroke);
	box-shadow: 0 18px 64px rgba(2, 6, 23, .18);
}

.hjw-event-intro__video-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(820px 340px at 18% 22%, color-mix(in srgb, var(--hjw-gold) 22%, transparent), transparent 55%),
		radial-gradient(760px 340px at 88% 80%, color-mix(in srgb, var(--hjw-amber) 18%, transparent), transparent 58%),
		linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .18));
	mix-blend-mode: screen;
	opacity: .52;
}

.hjw-event-intro__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	background: rgba(0, 0, 0, .18);
	object-fit: cover;
}

.hjw-event-intro__info {
	border-radius: 18px;
	padding: 16px;
	background:
		radial-gradient(520px 240px at 22% 12%, color-mix(in srgb, var(--hjw-gold) 14%, transparent), transparent 62%),
		linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 250, 240, .95));
	border: 1px solid rgba(15, 23, 42, .08);
	box-shadow: 0 18px 60px rgba(2, 6, 23, .10);
	color: var(--hjw-ink);
}

.hjw-event-intro__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 950;
	color: rgba(15, 23, 42, .62);
}

.hjw-event-intro__kicker::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, var(--hjw-gold), var(--hjw-amber));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hjw-amber) 18%, transparent);
	flex: 0 0 auto;
}

.hjw-event-intro__title {
	margin: 8px 0 10px;
	font-size: clamp(18px, 2.1vw, 26px);
	font-weight: 950;
	letter-spacing: -.35px;
	line-height: 1.15;
	color: var(--hjw-ink);
}

.hjw-event-intro__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.hjw-event-intro__chip {
	font-size: 12px;
	font-weight: 900;
	padding: 7px 10px;
	border-radius: 999px;
	border: 1px solid var(--hjw-stroke);
	background: rgba(255, 255, 255, .82);
	color: rgba(15, 23, 42, .86);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--hjw-gold) 7%, transparent);
}

.hjw-event-intro__chip--highlight {
	border-color: color-mix(in srgb, var(--hjw-amber) 35%, transparent);
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--hjw-gold) 28%, transparent),
		color-mix(in srgb, var(--hjw-amber) 18%, transparent),
		color-mix(in srgb, var(--hjw-gold) 12%, transparent)
	);
}

.hjw-event-intro__text {
	margin: 0 0 8px;
	color: rgba(15, 23, 42, .72);
	font-size: 14px;
	line-height: 1.75;
}

.hjw-event-intro__text--second {
	margin-bottom: 12px;
}

.hjw-event-intro__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 12px;
}

.hjw-event-intro__feature {
	padding: 10px 12px 10px 26px;
	border-radius: 14px;
	border: 1px solid rgba(15, 23, 42, .08);
	background:
		radial-gradient(260px 90px at 20% 20%, color-mix(in srgb, var(--hjw-gold) 10%, transparent), transparent 70%),
		rgba(255, 255, 255, .76);
	font-size: 13px;
	font-weight: 900;
	color: rgba(15, 23, 42, .86);
	position: relative;
}

.hjw-event-intro__feature::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 12px;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--hjw-gold), var(--hjw-amber));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hjw-amber) 14%, transparent);
}

.hjw-event-intro__zoom {
	border-radius: 16px;
	border: 1px solid var(--hjw-stroke);
	background:
		radial-gradient(420px 140px at 20% 20%, color-mix(in srgb, var(--hjw-gold) 12%, transparent), transparent 65%),
		rgba(255, 255, 255, .80);
	padding: 12px;
}

.hjw-event-intro__zoom-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 10px;
}

.hjw-event-intro__zoom-card {
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(15, 23, 42, .08);
	background: rgba(250, 250, 252, .94);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--hjw-gold) 6%, transparent);
}

.hjw-event-intro__zoom-label {
	font-size: 12px;
	font-weight: 950;
	color: rgba(15, 23, 42, .58);
	margin-bottom: 4px;
}

.hjw-event-intro__zoom-value {
	font-size: 14px;
	font-weight: 950;
	letter-spacing: .08em;
	color: var(--hjw-ink);
}

.hjw-event-intro__button {
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 950;
	color: rgba(18, 6, 0, .92);
	background: linear-gradient(135deg, var(--hjw-gold), var(--hjw-amber), var(--hjw-gold));
	box-shadow:
		0 20px 60px color-mix(in srgb, var(--hjw-amber) 22%, transparent),
		0 0 0 1px rgba(255, 255, 255, .38) inset;
	position: relative;
	overflow: hidden;
	transition: transform .12s ease, filter .12s ease, color .12s ease, background .12s ease;
}

.hjw-event-intro__button::before {
	content: "";
	position: absolute;
	inset: -40% -30%;
	background: linear-gradient(115deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .32) 22%,
		rgba(255, 255, 255, 0) 44%,
		rgba(255, 255, 255, .18) 68%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(12deg);
	opacity: .55;
	pointer-events: none;
}

.hjw-event-intro__button:hover,
.hjw-event-intro__button:focus-visible {
	filter: brightness(1.05) contrast(1.02);
}

.hjw-event-intro__button:active {
	transform: scale(.99);
}

.hjw-event-intro__button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--hjw-gold) 55%, transparent);
	outline-offset: 3px;
}

.hjw-event-intro__host {
	margin-top: 10px;
	font-size: 12.5px;
	color: rgba(15, 23, 42, .64);
}

.hjw-event-intro__host strong {
	font-weight: 900;
}

@media (max-width: 980px) {
	.hjw-event-intro__wrap {
		grid-template-columns: 1fr;
	}

	.hjw-event-intro--reverse .hjw-event-intro__video-card,
	.hjw-event-intro--reverse .hjw-event-intro__info {
		order: initial;
	}
}

@media (max-width: 560px) {
	.hjw-event-intro--mobile-center .hjw-event-intro__info {
		text-align: center;
	}

	.hjw-event-intro--mobile-center .hjw-event-intro__chips {
		justify-content: center;
	}

	.hjw-event-intro__features,
	.hjw-event-intro__zoom-grid {
		grid-template-columns: 1fr;
	}

	.hjw-event-intro__button {
		width: 100%;
	}

	.hjw-event-intro--mobile-center .hjw-event-intro__kicker {
		justify-content: center;
	}

	.hjw-event-intro--mobile-center .hjw-event-intro__feature {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hjw-event-intro *,
	.hjw-event-intro *::before,
	.hjw-event-intro *::after {
		animation: none !important;
		transition: none !important;
	}
}