/* =====================================================================
   HBCOC Premium Polish — site-wide finishing layer.
   Deliberately low-specificity (:where) so page and plugin styles win
   wherever they set something on purpose. Never targets .hbev* markup.
   ===================================================================== */
:root {
	--hbp-navy: #151923;
	--hbp-card: #1C2130;
	--hbp-line: #2E3446;
	--hbp-text: #ECEDF1;
	--hbp-muted: #8E94A3;
	--hbp-gold-1: #F4D688;
	--hbp-gold-2: #D6A84E;
	--hbp-gold-3: #C08A3A;
	--hbp-gold: linear-gradient(180deg, var(--hbp-gold-1) 0%, var(--hbp-gold-2) 100%);
	--hbp-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------- base */
html {
	background-color: var(--hbp-navy);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	scrollbar-color: #3A4256 var(--hbp-navy);
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

::selection { background: rgba(214, 168, 78, .38); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--hbp-navy); }
::-webkit-scrollbar-thumb {
	background: #343B4E;
	border: 3px solid var(--hbp-navy);
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #8C7342; }

/* ---------------------------------------------------------------- typography */
:where(h1, h2, h3, h4, blockquote) { text-wrap: balance; }
:where(p, li, figcaption) { text-wrap: pretty; }
:where(.elementor) :where(h1, h2, h3) { font-kerning: normal; font-feature-settings: "kern", "liga"; }

/* Inline text links inside page copy. */
:where(.elementor, .hbp-404) :where(p, li) a:not([class]) {
	color: var(--hbp-gold-1);
	text-decoration: underline;
	text-decoration-color: rgba(244, 214, 136, .4);
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	transition: color .2s ease, text-decoration-color .2s ease;
}
:where(.elementor, .hbp-404) :where(p, li) a:not([class]):hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- focus */
:where(a, button, [role="button"], summary, input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: 2px solid var(--hbp-gold-1);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- buttons
   .hbp-gold / .hbp-ghost are added by premium.js to buttons that are already
   gold-gradient or outline pills, so the look stays exactly the same at rest. */
.hbp-gold {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px -14px rgba(214, 168, 78, .8);
	transition: translate .3s var(--hbp-ease), box-shadow .3s var(--hbp-ease), filter .2s ease;
}
.hbp-gold::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, 0) 66%);
	translate: -130% 0;
	transition: translate .8s var(--hbp-ease);
	pointer-events: none;
}
.hbp-gold:hover {
	translate: 0 -1px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 34px -14px rgba(214, 168, 78, .95);
}
.hbp-gold:hover::after { translate: 130% 0; }
.hbp-gold:active { translate: 0; filter: brightness(.97); }

.hbp-ghost {
	transition: border-color .25s ease, color .25s ease, background-color .25s ease, translate .3s var(--hbp-ease) !important;
}
.hbp-ghost:hover {
	border-color: rgba(244, 214, 136, .7) !important;
	color: var(--hbp-gold-1) !important;
	background-color: rgba(214, 168, 78, .07) !important;
	translate: 0 -1px;
}

/* Plugin-rendered button used on the 404 page and store. */
.hbp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 30px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--hbp-gold);
	color: #1A1408;
	font: 700 15px/1 "Plus Jakarta Sans", system-ui, sans-serif;
	letter-spacing: -.1px;
	text-decoration: none;
	white-space: nowrap;
}
a.hbp-btn,
a.hbp-btn:hover,
a.hbp-btn:visited { color: #1A1408 !important; text-decoration: none !important; }
a.hbp-btn.hbp-btn--ghost,
a.hbp-btn.hbp-btn--ghost:visited { color: var(--hbp-text) !important; }
.hbp-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .22);
	color: var(--hbp-text);
}

/* ---------------------------------------------------------------- motion
   Transform / opacity only. Hidden states exist only under html.hbp-motion
   (added by JS) and only on elements JS has tagged. Everything collapses to
   the final state under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	/* Entrances: fade-up 14px, 500ms, staggered via --hbp-d. */
	.hbp-motion .hbp-rise:not(.is-in) { opacity: 0; translate: 0 14px; }
	.hbp-motion .hbp-rise {
		transition: opacity .5s var(--hbp-ease), translate .5s var(--hbp-ease);
		transition-delay: var(--hbp-d, 0ms);
	}
	.hbp-motion .hbp-rise.is-in { transition-delay: var(--hbp-d, 0ms); }

	/* Ken Burns: 1.06 → 1 as banners and feature photos arrive. */
	.hbp-motion .hbp-kb:not(.is-in) { scale: 1.06; }
	.hbp-motion .hbp-kb { transition: scale 1.8s cubic-bezier(.2, .6, .2, 1); }

	/* Kicker rules: thin gold lines draw outward from the text. */
	.hbp-kick { position: relative; }
	.hbp-kick::before,
	.hbp-kick::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 28px;
		height: 1px;
		margin-top: -.5px;
		pointer-events: none;
		transform: scaleX(0);
		transition: transform .9s var(--hbp-ease) .15s;
	}
	.hbp-kick::before { right: calc(50% + var(--hbp-kw, 60px) + 14px); background: linear-gradient(90deg, rgba(214, 168, 78, 0), rgba(214, 168, 78, .85)); transform-origin: right; }
	.hbp-kick::after { left: calc(50% + var(--hbp-kw, 60px) + 14px); background: linear-gradient(90deg, rgba(214, 168, 78, .85), rgba(214, 168, 78, 0)); transform-origin: left; }
	.hbp-kick.is-drawn::before,
	.hbp-kick.is-drawn::after { transform: scaleX(1); }

	/* ---- Hero load-in (pure CSS: runs from first paint, ends fully visible).
	   Starts at opacity .01 rather than 0 so the LCP paints immediately. */
	@keyframes hbp-hero-rise { from { opacity: .01; translate: 0 .32em; } }
	@keyframes hbp-hero-down { from { opacity: .01; translate: 0 -10px; } }
	@keyframes hbp-hero-up { from { opacity: .01; translate: 0 14px; } }
	@keyframes hbp-hero-badge { from { opacity: .01; scale: .96; } }
	[data-elementor-type="wp-page"] > :first-child :is(h1:not(.hbbq-sr), .e-join-us) {
		animation: hbp-hero-rise 1s cubic-bezier(.16, 1, .3, 1) both;
	}
	[data-elementor-type="wp-page"] > :first-child :is(p:has(+ h1), .e-label-theme) {
		animation: hbp-hero-down .9s cubic-bezier(.16, 1, .3, 1) .05s both;
	}
	[data-elementor-type="wp-page"] > :first-child h1 + p {
		animation: hbp-hero-up .9s cubic-bezier(.16, 1, .3, 1) .25s both;
	}
	.e-hero-badge { animation: hbp-hero-badge 1.3s cubic-bezier(.16, 1, .3, 1) .2s both; }

	/* Ambient light sweep across the hero (one compositor layer). */
	.hbp-sweep {
		position: absolute;
		inset: -10% -40%;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(100deg, rgba(255, 236, 190, 0) 38%, rgba(255, 236, 190, .09) 47%, rgba(255, 244, 214, .16) 50%, rgba(255, 236, 190, .09) 53%, rgba(255, 236, 190, 0) 62%);
		mix-blend-mode: screen;
		transform: translateX(-70%);
		animation: hbp-sweep 14s cubic-bezier(.45, 0, .2, 1) .6s infinite;
		will-change: transform;
	}
	@keyframes hbp-sweep {
		0% { transform: translateX(-70%); }
		26%, 100% { transform: translateX(70%); }
	}

	/* Buttons: a soft press. */
	.hbp-gold:active,
	.hbp-ghost:active,
	.hbn-cta:active { scale: .98; }

	/* Header Tickets pill: a slow shimmer every ~6s (paused on hover, which runs its own). */
	.hbn-bar .hbn-cta--tickets::after { animation: hbp-pill-shimmer 6.5s cubic-bezier(.4, 0, .2, 1) 2.5s infinite; }
	.hbn-bar .hbn-cta--tickets:hover::after { animation: none; }
	@keyframes hbp-pill-shimmer {
		0% { transform: translateX(-130%); }
		18%, 100% { transform: translateX(130%); }
	}

	/* Thin gold scroll-progress line (scroll-driven, no JS). */
	@supports (animation-timeline: scroll()) {
		body::after {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1002;
			height: 2px;
			pointer-events: none;
			background: linear-gradient(90deg, var(--hbp-gold-3), var(--hbp-gold-1), var(--hbp-gold-2));
			transform-origin: 0 50%;
			transform: scaleX(0);
			animation: hbp-progress linear both;
			animation-timeline: scroll(root);
		}
		@keyframes hbp-progress { to { transform: scaleX(1); } }
		body.admin-bar::after { top: 32px; }
	}

	/* Cross-fade between pages (Chrome / Edge / Safari 18+). The header is
	   identical on both pages, so it reads as holding still. (No
	   view-transition-name on it: that would cut off its glass blur.) */
	@view-transition { navigation: auto; }
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; }
}
@media print {
	.hbp-rise, .hbp-kb { opacity: 1 !important; translate: none !important; scale: none !important; }
}

/* ---------------------------------------------------------------- images */
:where(.elementor) img { height: auto; }
:where(.hbw-card, .hbw-post) img { background-color: #20263A; }

/* ---------------------------------------------------------------- footers */
/* Gold hairline over the footer bar, nav added by premium.js. */
.hbp-footbar {
	position: relative;
	padding-top: 22px !important;
	row-gap: 18px !important;
}
.hbp-footbar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(214, 168, 78, 0), rgba(214, 168, 78, .55) 50%, rgba(214, 168, 78, 0));
}
.hbp-foot-nav { display: flex; justify-content: center; }
.hbp-foot-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hbp-foot-links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: #C9CCD5;
	font: 500 13px/1 "Plus Jakarta Sans", system-ui, sans-serif;
	letter-spacing: .2px;
	text-decoration: none;
	transition: color .2s ease;
}
.hbp-foot-links a:hover,
.hbp-foot-links .current-menu-item > a { color: var(--hbp-gold-1); }

@media (max-width: 900px) {
	.hbp-footbar { flex-direction: column !important; justify-content: center !important; text-align: center; }
	.hbp-foot-links { gap: 2px 18px; max-width: 340px; }
}

/* Store pages (cart / checkout) use the block theme footer. */
.hbs-footer.hbp-footbar { max-width: 1180px; margin-inline: auto; }

/* ---------------------------------------------------------------- store */
:where(.woocommerce-cart, .woocommerce-checkout) .wc-block-components-button:not(.is-link) {
	transition: translate .3s var(--hbp-ease), box-shadow .3s var(--hbp-ease), filter .2s ease;
}
:where(.woocommerce-cart, .woocommerce-checkout) :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button):hover {
	translate: 0 -1px;
	box-shadow: 0 16px 34px -14px rgba(214, 168, 78, .95);
}
.hbp-empty-cart-cta { margin: 30px 0 0; text-align: center; }
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before { display: none !important; }
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { text-wrap: balance; }
.hbp-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--hbp-muted);
	font: 500 12px/1.4 "Plus Jakarta Sans", system-ui, sans-serif;
	letter-spacing: .2px;
}
.hbp-secure svg { flex: none; color: var(--hbp-gold-2); }

/* ---------------------------------------------------------------- 404 */
body.hbp-404-page { margin: 0; background: var(--hbp-navy); color: var(--hbp-text); font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
body.hbp-404-page .wp-site-blocks { display: none; }
.hbp-404 {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(80vh, 780px);
	padding: 150px 20px 40px;
	overflow: hidden;
	text-align: center;
}
.hbp-404-sky {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 50% at 50% 0%, rgba(201, 162, 74, .22), rgba(201, 162, 74, 0) 70%),
		linear-gradient(180deg, rgba(21, 25, 35, .55) 0%, var(--hbp-navy) 85%),
		url("/wp-content/uploads/2026/09/hbcoc-hero-sky.jpg") center top / cover no-repeat;
	opacity: .9;
}
.hbp-404-inner { position: relative; max-width: 760px; }
.hbp-kicker {
	margin: 0 0 22px;
	color: var(--hbp-gold-2);
	font: 400 12px/1.4 Poppins, sans-serif;
	letter-spacing: 4px;
	padding-left: 4px;
	text-transform: uppercase;
}
.hbp-404-title {
	margin: 0;
	background: linear-gradient(180deg, var(--hbp-gold-1) 0%, var(--hbp-gold-2) 60%, var(--hbp-gold-3) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(44px, 8vw, 96px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.035em;
}
.hbp-404-text {
	max-width: 560px;
	margin: 26px auto 0;
	color: #C9CCD5;
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.65;
}
.hbp-404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }
.hbp-404-verse {
	margin: 56px auto 0;
	color: var(--hbp-muted);
	font-size: 15px;
	line-height: 1.6;
}
.hbp-404-verse span {
	display: block;
	margin-top: 8px;
	font: 400 11px/1 Poppins, sans-serif;
	letter-spacing: 4px;
	padding-left: 4px;
	text-transform: uppercase;
}

.hbp-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-height: 520px;
	padding: 40px 24px 28px;
	background:
		linear-gradient(180deg, #151923 0%, rgba(21, 25, 35, 0) 50%, rgba(14, 19, 32, .35) 80%, rgba(14, 19, 32, .7) 100%),
		url("/wp-content/uploads/2026/09/hbcoc-night-skyline.png") bottom center / contain no-repeat,
		var(--hbp-navy);
	background-size: auto, contain, auto;
}
.hbp-footer-80th { width: 240px; height: auto; margin-bottom: 120px; }
.hbp-footer-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	max-width: 1180px;
	padding-top: 22px;
}
.hbp-footer-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(214, 168, 78, 0), rgba(214, 168, 78, .55) 50%, rgba(214, 168, 78, 0));
}
.hbp-footer-logo { width: 150px; height: auto; }
.hbp-footer-copy { margin: 0; color: #D5D7DD; font-size: 12px; }
@media (max-width: 900px) {
	.hbp-footer { min-height: 420px; }
	.hbp-footer-80th { width: 180px; margin-bottom: 110px; }
	.hbp-footer-bar { flex-direction: column; text-align: center; }
}

/* ---------------------------------------------------------------- countdown */
.hbcd-unit { font-variant-numeric: tabular-nums; }
@media (max-width: 359px) {
	.hbcd-unit { font-size: 34px; }
}

a.hbp-btn.hbp-btn--ghost { transition: border-color .25s ease, color .25s ease, background-color .25s ease, translate .3s var(--hbp-ease); }
a.hbp-btn.hbp-btn--ghost:hover {
	border-color: rgba(244, 214, 136, .7);
	color: var(--hbp-gold-1) !important;
	background-color: rgba(214, 168, 78, .07);
	translate: 0 -1px;
}