/*! Kirin Board Reveal 1.0.0 */

/* ---------- band ---------- */
.kbr {
	--kbr-bg: #000;
	--kbr-accent: #28ebf5;
	--kbr-ar: 1.3652;
	--kbr-pad: clamp(28px, 5vw, 64px) 0 clamp(26px, 4vw, 48px);
	--kbr-cw: min(64vw, 800px);
	--kbr-dx: calc(var(--kbr-cw) * 0.52);
	position: relative;
	box-sizing: border-box;
	background: var(--kbr-bg);
	color: #fff;
	line-height: 1.4;
}
.kbr *, .kbr *::before, .kbr *::after { box-sizing: border-box; }

/* Full width, edge to edge, even inside a narrow page column. Block themes force their own side margins on page content
   with !important, so this repeats the class to out-rank them (the repeated class changes nothing else). */
.kbr.kbr-bleed.kbr-bleed.kbr-bleed.kbr-bleed.kbr-bleed.kbr-bleed {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
html:has(.kbr-bleed) { overflow-x: clip; }

.kbr .kbr-stage {
	position: relative;
	max-width: 1500px;
	margin: 0 auto;
	padding: var(--kbr-pad);
	overflow: hidden;
}

/* ---------- before JavaScript starts (and if it never does): a plain grid of slides ---------- */
.kbr .kbr-fan {
	list-style: none;
	margin: 0;
	padding: 0 16px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 22px;
}
.kbr .kbr-item { margin: 0; padding: 0; list-style: none; }
.kbr .kbr-card {
	display: block;
	position: relative;
	aspect-ratio: var(--kbr-ar);
	border-radius: 12px;
	overflow: hidden;
	background: #0a0f14;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	text-decoration: none;
	border: 0;
	outline-offset: 4px;
	-webkit-tap-highlight-color: transparent;
}
.kbr .kbr-card img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	box-shadow: none;
	user-select: none;
	-webkit-user-drag: none;
}
.kbr .kbr-card:focus-visible { outline: 2px solid var(--kbr-accent); }

/* readable text: always in the page for screen readers and search, never shown in the band */
.kbr .kbr-body {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.kbr .kbr-live {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.kbr .kbr-nav, .kbr .kbr-dots { display: none; }

/* ---------- the fan (JavaScript is running) ---------- */
.kbr.kbr-ready .kbr-fan {
	display: block;
	position: relative;
	height: calc(var(--kbr-cw) / var(--kbr-ar) + 26px);
	padding: 0;
	perspective: 1800px;
	perspective-origin: 50% 42%;
	touch-action: pan-y;
}
.kbr.kbr-ready .kbr-item {
	position: absolute;
	left: 50%;
	top: 0;
	width: var(--kbr-cw);
	z-index: calc(20 - var(--a, 0));
	transform:
		translateX(-50%)
		translateX(calc(var(--o, 0) * var(--kbr-dx)))
		translateZ(calc(var(--a, 0) * -170px))
		rotateY(calc(var(--o, 0) * -36deg))
		scale(calc(1 - var(--a, 0) * 0.05));
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease, visibility 0s linear 0s;
	will-change: transform;
}
.kbr.kbr-ready .kbr-item[data-far="1"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease, visibility 0s linear 0.5s;
}
.kbr.kbr-ready .kbr-card { transition: filter 0.5s ease, box-shadow 0.5s ease; }
.kbr.kbr-ready .kbr-item:not(.is-active) .kbr-card { filter: brightness(0.5) saturate(0.9); }
.kbr.kbr-ready .kbr-item.is-active .kbr-card {
	box-shadow: 0 0 0 1px rgba(40, 235, 245, 0.45), 0 0 60px rgba(40, 235, 245, 0.22), 0 30px 70px rgba(0, 0, 0, 0.65);
}
.kbr.kbr-ready .kbr-item.is-active .kbr-card:hover { box-shadow: 0 0 0 1px rgba(40, 235, 245, 0.8), 0 0 80px rgba(40, 235, 245, 0.35), 0 30px 70px rgba(0, 0, 0, 0.65); }

/* arrows */
.kbr.kbr-ready .kbr-nav {
	display: grid;
	place-items: center;
	position: absolute;
	top: 50%;
	z-index: 60;
	width: 48px;
	height: 48px;
	margin: -24px 0 0;
	padding: 0 0 3px;
	border-radius: 999px;
	cursor: pointer;
	font: 400 30px/1 system-ui, sans-serif;
	color: var(--kbr-accent);
	background: rgba(3, 26, 35, 0.9);
	border: 1px solid rgba(40, 235, 245, 0.4);
	-webkit-tap-highlight-color: transparent;
}
.kbr.kbr-ready .kbr-nav[hidden] { display: none; }
.kbr.kbr-ready .kbr-prev { left: 14px; }
.kbr.kbr-ready .kbr-next { right: 14px; }
.kbr.kbr-ready .kbr-nav:hover:not(:disabled) { background: rgba(8, 60, 76, 0.96); border-color: var(--kbr-accent); }
.kbr.kbr-ready .kbr-nav:focus-visible { outline: 2px solid var(--kbr-accent); outline-offset: 3px; }
.kbr.kbr-ready .kbr-nav:disabled { opacity: 0.28; cursor: default; }

/* dots */
.kbr.kbr-ready .kbr-dots { display: flex; justify-content: center; gap: 4px; margin: 6px 0 0; }
.kbr .kbr-dot {
	position: relative;
	width: 28px; height: 28px;
	padding: 0; margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.kbr .kbr-dot::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 9px; height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	transition: width 0.3s ease, margin 0.3s ease, background 0.3s ease;
}
.kbr .kbr-dot[aria-current="true"]::after { width: 24px; margin-left: -12px; background: var(--kbr-accent); }
.kbr .kbr-dot:focus-visible { outline: 2px solid var(--kbr-accent); outline-offset: 0; border-radius: 6px; }

/* the hint talks about the fan, so only show it when the fan is running */
.kbr:not(.kbr-ready) .kbr-hint { display: none; }
.kbr .kbr-hint {
	display: block;
	width: fit-content;
	max-width: calc(100% - 32px);
	margin: 16px auto 0;
	padding: 9px 16px;
	border-radius: 999px;
	font: 400 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	text-align: center;
	color: #cfeff3;
	background: rgba(3, 26, 35, 0.9);
	border: 1px solid rgba(40, 235, 245, 0.25);
}

@media (max-width: 700px) {
	.kbr { --kbr-cw: min(84vw, 520px); --kbr-dx: calc(var(--kbr-cw) * 0.62); }
	.kbr.kbr-ready .kbr-nav { width: 40px; height: 40px; margin-top: -20px; font-size: 26px; }
	.kbr.kbr-ready .kbr-prev { left: 6px; }
	.kbr.kbr-ready .kbr-next { right: 6px; }
	.kbr.kbr-ready .kbr-item { transition-duration: 0.55s; }
}

/* ---------- full-screen viewer (appended to <body> by the script) ---------- */
html.kbr-lock { overflow: hidden; }
.kbr-view { position: fixed; inset: 0; z-index: 999999; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.kbr-view[hidden] { display: none; }
.kbr-view *, .kbr-view *::before, .kbr-view *::after { box-sizing: border-box; }
.kbr-view-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.97); opacity: 0; transition: opacity 0.3s ease; }
.kbr-view.is-open .kbr-view-bg { opacity: 1; }
.kbr-view-holder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.kbr-view-stage {
	position: relative;
	flex: none;
	width: min(96vw, calc((100vh - 90px) * var(--kbr-ar, 1.3652)));
	width: min(96vw, calc((100dvh - 90px) * var(--kbr-ar, 1.3652)));
	aspect-ratio: var(--kbr-ar, 1.3652);
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	cursor: pointer;
	box-shadow: 0 30px 120px rgba(0, 0, 0, 0.7);
}
.kbr-view-stage img, .kbr-view-stage video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}
.kbr-view-stage img { opacity: 0; transition: opacity 0.22s ease; }
.kbr-view-stage.is-locked img { opacity: 1; }
.kbr-view-stage.is-soft img { animation: kbr-soft 0.6s ease both; opacity: 1; }
@keyframes kbr-soft { from { opacity: 0; filter: blur(10px) brightness(1.5); } to { opacity: 1; filter: none; } }

.kbr-view .kbr-btn {
	position: absolute;
	z-index: 3;
	min-width: 46px;
	height: 46px;
	margin: 0;
	padding: 0 16px;
	border-radius: 999px;
	cursor: pointer;
	display: grid;
	place-items: center;
	font: 600 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0;
	text-transform: none;
	color: #28ebf5;
	background: rgba(3, 26, 35, 0.92);
	border: 1px solid rgba(40, 235, 245, 0.4);
	-webkit-tap-highlight-color: transparent;
}
.kbr-view .kbr-btn:hover { background: rgba(8, 60, 76, 0.97); border-color: #28ebf5; }
.kbr-view .kbr-btn:focus-visible { outline: 2px solid #28ebf5; outline-offset: 3px; }
.kbr-view .kbr-close { top: 14px; right: 14px; font-size: 26px; padding: 0 0 3px; width: 46px; }
.kbr-view .kbr-replay { top: 14px; left: 14px; }
.kbr-view .kbr-copy { top: 14px; left: 112px; }
.kbr-view .kbr-prev, .kbr-view .kbr-next { top: 50%; margin-top: -23px; font-size: 28px; padding: 0 0 3px; width: 46px; }
.kbr-view .kbr-prev { left: 14px; }
.kbr-view .kbr-next { right: 14px; }
.kbr-view .kbr-prev:disabled, .kbr-view .kbr-next:disabled { opacity: 0.28; cursor: default; }
.kbr-view .kbr-count {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	margin: 0;
	padding: 7px 14px;
	border-radius: 999px;
	font: 400 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.08em;
	color: #cfeff3;
	background: rgba(3, 26, 35, 0.92);
	border: 1px solid rgba(40, 235, 245, 0.25);
	pointer-events: none;
	white-space: nowrap;
}

/* the readable text under the slide (phones held upright only) */
.kbr-read { display: none; width: 100%; max-width: 680px; padding: 22px 8px 90px; }
.kbr-read h2 { margin: 0 0 4px; font: 700 24px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; }
.kbr-read .kbr-read-role { margin: 0 0 10px; font-size: 15px; color: #28ebf5; }
.kbr-read .kbr-read-cred { margin: 0 0 16px; font-size: 13px; color: #9fc6cc; }
.kbr-read p { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: #e9f6f8; }

@media (max-width: 760px) {
	.kbr-view .kbr-prev, .kbr-view .kbr-next { display: none; }
	.kbr-view .kbr-copy { left: auto; right: 70px; }
	.kbr-view-holder { padding: 0; justify-content: flex-start; padding-top: 70px; }
	.kbr-view-stage { width: 100vw; border-radius: 0; }
}
@media (max-width: 760px) and (orientation: portrait) {
	.kbr-read { display: block; padding-left: 18px; padding-right: 18px; }
	.kbr-view .kbr-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.kbr.kbr-ready .kbr-item, .kbr.kbr-ready .kbr-item[data-far="1"], .kbr.kbr-ready .kbr-card, .kbr-view-bg, .kbr-view-stage img, .kbr .kbr-dot::after { transition: none; }
	.kbr-view-stage.is-soft img { animation: none; opacity: 1; }
}