/* Presentation layout layered on dist/theme/white.css. */

:root {
	--talk-accent: #1a5fb4;
	--talk-text: #000000;
	--talk-muted: #444;

	/* Arial preserves the layout when Liberation Sans is unavailable. */
	--r-main-font: "Liberation Sans", Arial, Helvetica, sans-serif;
	--r-heading-font: "Liberation Sans", Arial, Helvetica, sans-serif;
}

.reveal {
	font-size: 40px;
	color: var(--talk-text);
}

/* Percentage padding gives the same absolute gap on all four sides. */
.reveal .slides section,
.reveal .slides section > section {
	text-align: center;
	box-sizing: border-box;
	padding: 2%;
}

.reveal h1,
.reveal h2,
.reveal h3 {
	text-align: left;
	text-transform: none;
	font-weight: 600;
	color: var(--talk-text);
}

.reveal h4 {
	text-align: center;
	font-size: 0.9em;
	font-weight: 400;
	line-height: inherit;
	margin: 0 0 0 0;
	color: inherit;
	text-transform: none;
	font-family: inherit;
}

/* Slide title: top-left, accent rule underneath */
.reveal .slides section h2:first-child,
.reveal .slides section h1:first-child {
	font-size: 1.42em;
	/* Compensate for font leading above the capitals. */
	margin: -0.2em 0 0.8em 0;
	padding-bottom: 0em;
	border-bottom: 3px solid var(--talk-accent);
}

/* Bullets: flush left, roomier line spacing */
.reveal ul,
.reveal ol {
	display: block;
	margin-left: 1em;
}

.reveal li {
	margin-bottom: 0.4em;
}

.reveal ul ul {
	font-size: 0.85em;
	color: var(--talk-muted);
}

.reveal li::marker {
	color: var(--talk-accent);
}

/* A visible .dim-step dims every .dim-target on its slide. */
.reveal .slides section:has(.dim-step.visible) .dim-target {
	opacity: 0.3 !important;
	transition: opacity 0.3s ease;
}

/* A visible .hide-step hides every .hide-target on its slide. */
.reveal .slides section:has(.hide-step.visible) .hide-target {
	opacity: 0 !important;
	transition: opacity 0.3s ease;
}

/* Dim merged hierarchy branches; keep these equal-specificity rules ordered. */
.reveal .slides section:has(.fragment[data-fragment-index="3"].visible) img[src$="hierarchy/leaves1.svg"] {
	opacity: 0.15 !important;
	transition: opacity 0.3s ease;
}

.reveal .slides section:has(.fragment[data-fragment-index="5"].visible) img[src$="hierarchy/leaves2.svg"],
.reveal .slides section:has(.fragment[data-fragment-index="5"].visible) img[src$="hierarchy/h11.svg"] {
	opacity: 0.15 !important;
	transition: opacity 0.3s ease;
}

.reveal .slides section:has(.fragment[data-fragment-index="6"].visible) img[src$="hierarchy/leaves3.svg"],
.reveal .slides section:has(.fragment[data-fragment-index="6"].visible) img[src$="hierarchy/h12.svg"],
.reveal .slides section:has(.fragment[data-fragment-index="6"].visible) img[src$="hierarchy/h21.svg"] {
	opacity: 0.15 !important;
	transition: opacity 0.3s ease;
}
.reveal .slides section:has(.fragment[data-fragment-index="6"].visible) img[src$="hierarchy/h11.svg"],
.reveal .slides section:has(.fragment[data-fragment-index="6"].visible) img[src$="hierarchy/leaves2.svg"] {
	opacity: 1 !important;
	transition: opacity 0.3s ease;
}

.reveal .slides section:has(.fragment[data-fragment-index="7"].visible) img[src$="hierarchy/h13.svg"],
.reveal .slides section:has(.fragment[data-fragment-index="7"].visible) img[src$="hierarchy/leaves2.svg"],
.reveal .slides section:has(.fragment[data-fragment-index="7"].visible) img[src$="hierarchy/h11.svg"] {
	opacity: 0.15 !important;
	transition: opacity 0.3s ease;
}
.reveal .slides section:has(.fragment[data-fragment-index="7"].visible) img[src$="hierarchy/leaves1.svg"],
.reveal .slides section:has(.fragment[data-fragment-index="7"].visible) img[src$="hierarchy/h12.svg"] {
	opacity: 1 !important;
	transition: opacity 0.3s ease;
}

/* Plain slide number, bottom right, no background */
.reveal .slide-number {
	background: none;
	color: var(--talk-muted);
	font-size: 20px;
	right: 16px;
	bottom: 10px;
}

/* Spaces around the "/" separator: "3 / 40" */
.reveal .slide-number .slide-number-delimiter {
	margin: 0 0.35em;
}

/* Hide the slide number on slides with data-state="hide-number" (title slide).
   reveal copies the active slide's data-state onto the viewport as a class. */
.hide-number .slide-number {
	/* !important overrides reveal's inline style="display: block" */
	display: none !important;
}

/* Vertically centered title slide with logos pinned separately. */
.reveal .slides section.title-slide {
	text-align: center;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

/* Generic vertical centering. */
.reveal .slides section.vcenter {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.reveal .slides section.title-slide h1,
.reveal .slides section.title-slide h2 {
	text-align: center;
}

.reveal .slides section.title-slide h1:first-child,
.reveal .slides section.title-slide h2:first-child {
	border-bottom: none;
	margin-top: 0;
	/* gap below the title is carried by the paragraphs' top margin instead,
	   so the title/conference/author gaps stay equal */
	margin-bottom: 0;
}

/* Conference name + author block: smaller, evenly spaced. Both paragraphs
   share this font size, so the top margin is the same pixel gap each time. */
.reveal .slides section.title-slide p {
	font-size: 0.7em;
	margin: 1.4em 0 0 0;
	color: var(--talk-muted);
}

/* Institution logos row, centered along the bottom edge (out of the centered
   flow so the title/author block centers on its own). */
.reveal .title-slide .logo-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2em;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 25px;
	margin: 0;
}

.reveal .title-slide .logo-row img {
	height: 60px;
	width: auto;
	margin: 0;
}

/* Corner logos: graphdeco top-left, erc top-right. The section is the
   positioned ancestor, and its 2% padding is ~25px of the 1280px canvas. */
.reveal .title-slide .logo-corner {
	position: absolute;
	top: 25px;
	height: 80px;
	width: auto;
	margin: 0;
}

.reveal .title-slide .logo-tl {
	left: 25px;
}

.reveal .title-slide .logo-tr {
	right: 25px;
}

/* Closing slide ("Thank you!") is just a title-slide with only a heading, so
   it inherits the vertical centering and bottom logo row above. */

/* Stack helper: overlay images (or videos) centered on top of one another */
.reveal .img-stack {
	position: relative;
	display: grid;
	place-items: center;
}

.reveal .img-stack img,
.reveal .img-stack video,
.reveal .img-stack object {
	grid-area: 1 / 1;
	margin: 0;
}

/* object has no intrinsic size like img/video, so it needs the same
   max-height cap spelled out explicitly (inline style sets the rest) */
.reveal .img-stack object {
	max-width: 100%;
	border: none;
}

/* Text overlaid on top of a video, pinned to its top-right corner (e.g. a
   bullet list layered over a demo clip instead of placed below it). */
.reveal .video-overlay {
	position: relative;
	display: inline-block;
}

/* Pick the corner with the class name: overlay-tl (top-left) or overlay-tr
   (top-right); everything else is shared. */
.reveal .video-overlay .overlay-tl,
.reveal .video-overlay .overlay-tr {
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
}

.reveal .video-overlay .overlay-tl {
	left: 0;
}

.reveal .video-overlay .overlay-tr {
	right: 0;
}

/* Let each Markdown-generated list item shrink-wrap independently. */
.reveal .video-overlay .overlay-tl ul,
.reveal .video-overlay .overlay-tr ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.reveal .video-overlay .overlay-tl ul {
	align-items: flex-start;
}

.reveal .video-overlay .overlay-tr ul {
	align-items: flex-end;
}

/* Give each revealed bullet its own compact backing. */
.reveal .video-overlay .overlay-tl li,
.reveal .video-overlay .overlay-tr li {
	width: fit-content;
	list-style: none;
	margin: 0;
	padding: 0 0.25em;
	line-height: 1.35;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
}

.reveal .video-overlay .overlay-tl li {
	text-align: left;
}

.reveal .video-overlay .overlay-tr li {
	text-align: right;
}

/* Swap labels in place when they share a fragment index. */
.reveal .video-overlay .overlay-swap ul {
	display: grid;
}

.reveal .video-overlay .overlay-swap li {
	grid-area: 1 / 1;
}

.reveal .video-overlay .overlay-tr.overlay-swap ul {
	justify-items: end;
}

/* Opt an image out of the overlay onto its own row below, without
   reordering the markup (e.g. keep frame order 0,1,2 but show 2 below). */
.reveal .img-stack .stack-below {
	grid-area: 2 / 1;
}

/* Diagonal image cascade driven by --n, --w, --h, and DOM-derived --i. */
.reveal .diagonal-stack {
	position: relative;
	margin: 0 auto;
}

.reveal .diagonal-stack img {
	/* Room reserved on every side so the box-shadow stays inside the
	   container's declared box instead of bleeding past its edges. */
	--pad: 12px;
	position: absolute;
	width: var(--w);
	height: var(--h);
	max-height: none;
	object-fit: cover;
	margin: 0;
	border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	top: calc(var(--pad) + var(--i) / (var(--n) - 1) * (100% - var(--h) - 2 * var(--pad)));
	left: calc(var(--pad) + var(--i) / (var(--n) - 1) * (100% - var(--w) - 2 * var(--pad)));
}

.reveal .diagonal-stack img:nth-child(1) { --i: 0; }
.reveal .diagonal-stack img:nth-child(2) { --i: 1; }
.reveal .diagonal-stack img:nth-child(3) { --i: 2; }
.reveal .diagonal-stack img:nth-child(4) { --i: 3; }
.reveal .diagonal-stack img:nth-child(5) { --i: 4; }
.reveal .diagonal-stack img:nth-child(6) { --i: 5; }
.reveal .diagonal-stack img:nth-child(7) { --i: 6; }
.reveal .diagonal-stack img:nth-child(8) { --i: 7; }
.reveal .diagonal-stack img:nth-child(9) { --i: 8; }
.reveal .diagonal-stack img:nth-child(10) { --i: 9; }
.reveal .diagonal-stack img:nth-child(11) { --i: 10; }
.reveal .diagonal-stack img:nth-child(12) { --i: 11; }

/* Fade cascade images in sequentially when their fragment appears. */
@keyframes diagonal-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.reveal .diagonal-stack img {
	opacity: 0;
}

.reveal .fragment.visible .diagonal-stack img {
	animation: diagonal-fade-in 0.4s ease forwards;
	animation-delay: calc(var(--i) * 0.15s);
}

/* Simple two-column helper */
.reveal .columns {
	display: flex;
	gap: 0.5em;
	align-items: flex-start;
}

.reveal .columns > * {
	flex: 1;
	min-width: 0;
}

/* Media sits flush left like the text, no theme border/shadow */
.reveal img,
.reveal video {
	max-width: 100%;
	max-height: 480px; /* of the 720px-tall canvas */
	margin: 0 0 0 0;
	border: none;
	box-shadow: none;
	vertical-align: middle; /* drop the inline baseline descender gap below media */
}

/* Block-level video removes the inline line-box space a tall inline element
   still reserves below itself; auto margins keep it centered in the flow. */
.reveal video {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Remove wrapper margins added by Markdown around standalone media. */
.reveal p:has(> video:only-child),
.reveal p:has(> img:only-child) {
	margin: 0;
}

.reveal video.full-width {
	width: 100%;
	max-width: 100%;
	max-height: 480px; /* of the 720px-tall canvas */
}