/* Auto-advancing slideshow of press-release illustrations (research section).
   The transition is chosen with data-transition on .rslides (see research_slides.js):
   fade, kenburns, blur, slide, wipe, iris, zoom. */
.rslides {
	--rs-interval: 9000ms;
	position: relative;
	overflow: hidden;
	margin: 12px 0 24px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	background: #ffffff;
}
.rslides-track {
	display: grid;
}
.rslides figure.rslide {
	margin: 0;
}
.rslide {
	grid-area: 1 / 1;
	visibility: hidden;
	z-index: 0;
	background: #ffffff;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	animation-fill-mode: both;
}
.rslide.is-active {
	visibility: visible;
	z-index: 2;
}
.rslide.is-leaving {
	visibility: visible;
	z-index: 1;
}
.rslide-img {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #f4f4f4;
}
.rslide-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rslide-credit {
	position: absolute;
	right: 8px;
	bottom: 8px;
	font-size: 0.7rem;
	color: #555555;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 3px;
	padding: 0 5px;
}
.rslide-caption {
	padding: 12px 18px 6px;
	line-height: 1.65;
}
.rslide-meta {
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: #888888;
}
.rslide-title {
	margin: 2px 0 0;
	font-size: 1.08rem;
	font-weight: bold;
}
.rslide-subtitle {
	margin: 0;
	font-size: 0.92rem;
	color: #555555;
}
.rslides blockquote.rslide-text {
	margin: 8px 0;
	padding: 0 0 0 12px;
	border-left: 3px solid #e0e0e0;
	font-size: 0.8rem;
	line-height: 1.6;
	color: #444444;
}
.rslide-ref {
	margin: 0 0 4px;
	font-size: 0.78rem;
	color: #555555;
}

/* Caption lines rise in one after another on every transition. */
.rslide.is-active .rslide-caption > * {
	animation: rs-cap-in 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(0.6s + var(--rs-cap-delay, 0s));
}
.rslide-caption > :nth-child(2) { --rs-cap-delay: 0.08s; }
.rslide-caption > :nth-child(3) { --rs-cap-delay: 0.16s; }
.rslide-caption > :nth-child(4) { --rs-cap-delay: 0.24s; }
.rslide-caption > :nth-child(5) { --rs-cap-delay: 0.32s; }

/* Controls: arrows on the picture, dots and pause below. */
.rslides-arrows {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 16 / 9;
	z-index: 3;
	pointer-events: none;
}
.rslides-arrow {
	position: absolute;
	top: 50%;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	pointer-events: auto;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 40px;
	color: #333333;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.rslides:hover .rslides-arrow,
.rslides-arrow:focus-visible {
	opacity: 1;
}
.rslides-arrow:hover {
	transform: scale(1.08);
}
.rslides-prev {
	left: 12px;
}
.rslides-next {
	right: 12px;
}
@media (hover: none) {
	.rslides-arrow {
		opacity: 0.85;
	}
}
.rslides-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(0, 0, 0, 0.08);
}
.rslides-progress span {
	display: block;
	height: 100%;
	width: 100%;
	transform-origin: left center;
	background: rgba(40, 40, 40, 0.65);
	animation: rs-progress var(--rs-interval) linear both;
}
.rslides.is-paused .rslides-progress span {
	animation-play-state: paused;
}
.rslides-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 2px 0 12px;
}
.rslides-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #cccccc;
	cursor: pointer;
	transition: width 0.4s ease, background 0.4s ease;
}
.rslides-dot[aria-current="true"] {
	width: 24px;
	background: #555555;
}
.rslides-pause {
	margin-left: 10px;
	padding: 1px 9px;
	border: 1px solid #cccccc;
	border-radius: 10px;
	background: #ffffff;
	font-size: 0.72rem;
	color: #555555;
	cursor: pointer;
}

/* ---- Transitions ---- */
/* fade: plain crossfade */
.rslides[data-transition="fade"] .rslide.is-active { animation-name: rs-fade-in; animation-duration: 0.9s; animation-timing-function: ease; }
.rslides[data-transition="fade"] .rslide.is-leaving { animation-name: rs-fade-out; animation-duration: 0.9s; animation-timing-function: ease; }

/* kenburns: slow crossfade while the picture drifts and zooms */
.rslides[data-transition="kenburns"] .rslide.is-active { animation-name: rs-fade-in; animation-duration: 2.6s; animation-timing-function: ease-in-out; }
.rslides[data-transition="kenburns"] .rslide.is-leaving { animation-name: rs-fade-out; animation-duration: 2.6s; animation-timing-function: ease-in-out; }
.rslides[data-transition="kenburns"] .rslide.is-active .rslide-img img,
.rslides[data-transition="kenburns"] .rslide.is-leaving .rslide-img img {
	animation: rs-kb-a calc(var(--rs-interval) + 5200ms) linear both;
}
.rslides[data-transition="kenburns"] .rslide:nth-child(even).is-active .rslide-img img,
.rslides[data-transition="kenburns"] .rslide:nth-child(even).is-leaving .rslide-img img {
	animation-name: rs-kb-b;
}

/* blur: dissolve through a blur */
.rslides[data-transition="blur"] .rslide.is-active { animation-name: rs-blur-in; animation-duration: 1.1s; }
.rslides[data-transition="blur"] .rslide.is-leaving { animation-name: rs-blur-out; animation-duration: 1.1s; }

/* slide: incoming slide covers the outgoing one, which drifts back more slowly (parallax) */
.rslides[data-transition="slide"] .rslide.is-active { animation-name: rs-slide-in-next; animation-duration: 1s; }
.rslides[data-transition="slide"] .rslide.is-leaving { animation-name: rs-slide-out-next; animation-duration: 1s; }
.rslides[data-transition="slide"][data-dir="prev"] .rslide.is-active { animation-name: rs-slide-in-prev; }
.rslides[data-transition="slide"][data-dir="prev"] .rslide.is-leaving { animation-name: rs-slide-out-prev; }

/* wipe: a slanted edge sweeps across */
.rslides[data-transition="wipe"] .rslide.is-active { animation-name: rs-wipe-in-next; animation-duration: 1.1s; }
.rslides[data-transition="wipe"] .rslide.is-leaving { animation-name: rs-sink; animation-duration: 1.1s; }
.rslides[data-transition="wipe"][data-dir="prev"] .rslide.is-active { animation-name: rs-wipe-in-prev; }
.rslides[data-transition="wipe"] .rslide.is-active .rslide-img img { animation: rs-settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* iris: the new slide opens from a circle */
.rslides[data-transition="iris"] .rslide.is-active { animation-name: rs-iris-in; animation-duration: 1.2s; }
.rslides[data-transition="iris"] .rslide.is-leaving { animation-name: rs-sink; animation-duration: 1.2s; }
.rslides[data-transition="iris"] .rslide.is-active .rslide-img img { animation: rs-settle 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* zoom: the old slide recedes, the new one arrives from close up */
.rslides[data-transition="zoom"] .rslide.is-active { animation-name: rs-zoom-in; animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
.rslides[data-transition="zoom"] .rslide.is-leaving { animation-name: rs-zoom-out; animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }

@keyframes rs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rs-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rs-kb-a {
	from { transform: scale(1) translate(0, 0); }
	to { transform: scale(1.1) translate(-2%, -1.5%); }
}
@keyframes rs-kb-b {
	from { transform: scale(1.1) translate(2%, 1.5%); }
	to { transform: scale(1) translate(0, 0); }
}
@keyframes rs-blur-in {
	from { opacity: 0; filter: blur(18px); transform: scale(1.04); }
	to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes rs-blur-out {
	from { opacity: 1; filter: blur(0); transform: scale(1); }
	to { opacity: 0; filter: blur(12px); transform: scale(0.98); }
}
@keyframes rs-slide-in-next { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes rs-slide-out-next { from { transform: translateX(0); filter: brightness(1); } to { transform: translateX(-30%); filter: brightness(0.7); } }
@keyframes rs-slide-in-prev { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes rs-slide-out-prev { from { transform: translateX(0); filter: brightness(1); } to { transform: translateX(30%); filter: brightness(0.7); } }
@keyframes rs-wipe-in-next {
	from { clip-path: polygon(120% 0, 120% 0, 120% 100%, 100% 100%); }
	to { clip-path: polygon(0% 0, 120% 0, 120% 100%, -20% 100%); }
}
@keyframes rs-wipe-in-prev {
	from { clip-path: polygon(-20% 0, -20% 0, 0% 100%, -20% 100%); }
	to { clip-path: polygon(-20% 0, 100% 0, 120% 100%, -20% 100%); }
}
@keyframes rs-iris-in {
	from { clip-path: circle(0% at 50% 36%); }
	to { clip-path: circle(125% at 50% 36%); }
}
@keyframes rs-sink {
	from { transform: scale(1); filter: brightness(1); }
	to { transform: scale(0.96); filter: brightness(0.75); }
}
@keyframes rs-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes rs-zoom-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes rs-zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
@keyframes rs-cap-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
	.rslides[data-transition] .rslide.is-active { animation: rs-fade-in 0.3s ease both; }
	.rslides[data-transition] .rslide.is-leaving { animation: rs-fade-out 0.3s ease both; }
	.rslides[data-transition] .rslide .rslide-img img,
	.rslides[data-transition] .rslide .rslide-caption > * { animation: none; }
}
