/**
 * Quote Postings — front end
 *
 * Everything is driven by custom properties set inline on .qp, so a single
 * stylesheet serves every rotator on the page with different settings.
 */

.qp {
	--qp-speed: 900ms;
	--qp-type-speed: 34ms;
	--qp-text: #ffffff;
	--qp-accent: #e3bc63;
	--qp-size: 30px;
	--qp-author: 0.5;
	--qp-role: 0.38;
	--qp-lh: 1.5;
	--qp-mw: 880px;
	--qp-font: inherit;
	--qp-bg-color: #1d1d1d;
	--qp-overlay: rgba(0, 0, 0, 0.45);
	--qp-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
	--qp-gradient: linear-gradient(160deg, #1b2a4a, #0d1119);
	--qp-tex: 0.22;

	position: relative;
	box-sizing: border-box;
	width: 100%;
}

.qp *,
.qp *::before,
.qp *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ stage */

.qp__viewport {
	position: relative;
	overflow: hidden;
	background-color: var(--qp-bg-color);
}

.qp--fixed-height .qp__viewport {
	height: var(--qp-h, 460px);
}

/* -------------------------------------------------------------- backgrounds */

.qp__bg--gradient {
	background-image: var(--qp-gradient);
	background-size: cover;
}

/* ---------------------------------------------------------------- textures
   Drawn in CSS over the background, at --qp-tex strength. No image files. */

.qp__texture {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: var(--qp-tex);
}

.qp--tex-noise .qp__texture {
	background-image:
		radial-gradient(#fff 0 0.6px, transparent 0.9px),
		radial-gradient(#000 0 0.5px, transparent 0.8px),
		radial-gradient(#fff 0 0.4px, transparent 0.7px);
	background-size: 3px 3px, 4px 4px, 5px 5px;
	background-position: 0 0, 1px 2px, 2px 1px;
	mix-blend-mode: overlay;
}

.qp--tex-paper .qp__texture {
	background-image:
		repeating-linear-gradient(94deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(3deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px),
		radial-gradient(rgba(255,255,255,.10) 0 0.5px, transparent 1px);
	background-size: auto, auto, 6px 6px;
	mix-blend-mode: soft-light;
}

.qp--tex-canvas .qp__texture {
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px);
	mix-blend-mode: soft-light;
}

.qp--tex-concrete .qp__texture {
	background-image:
		radial-gradient(ellipse at 22% 34%, rgba(255,255,255,.16), transparent 60%),
		radial-gradient(ellipse at 72% 68%, rgba(0,0,0,.20), transparent 62%),
		radial-gradient(rgba(0,0,0,.16) 0 1px, transparent 1.6px);
	background-size: 240px 180px, 300px 220px, 7px 7px;
	mix-blend-mode: overlay;
}

.qp--tex-grid .qp__texture {
	background-image:
		linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255,255,255,.24) 1px, transparent 1px);
	background-size: 26px 26px, 26px 26px;
}

.qp--tex-blueprint .qp__texture {
	background-image:
		linear-gradient(90deg, rgba(140,200,255,.30) 1px, transparent 1px),
		linear-gradient(0deg, rgba(140,200,255,.30) 1px, transparent 1px),
		linear-gradient(90deg, rgba(140,200,255,.14) 1px, transparent 1px),
		linear-gradient(0deg, rgba(140,200,255,.14) 1px, transparent 1px);
	background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
}

.qp--tex-dots .qp__texture {
	background-image: radial-gradient(rgba(255,255,255,.42) 0 1.4px, transparent 1.9px);
	background-size: 12px 12px;
}

.qp--tex-diagonal .qp__texture {
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.20) 0 2px, transparent 2px 10px);
}

.qp--tex-scanlines .qp__texture {
	background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 4px);
}

.qp--tex-carbon .qp__texture {
	background-image:
		repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 4px),
		repeating-linear-gradient(-45deg, rgba(0,0,0,.24) 0 2px, transparent 2px 4px);
	background-size: 8px 8px, 8px 8px;
}

.qp--tex-vignette .qp__texture {
	background-image: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0,0,0,.9) 100%);
	opacity: calc(var(--qp-tex) * 2);
}


.qp__bgs {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* The gradient and the pictures are separate stacks so that each can hold one
   layer per quote and still cross-fade in step. The gradient sits underneath;
   the pictures sit on it, dialled back by Image opacity so the colour beneath
   can show through as much or as little as the author wants. */
.qp__bgs--gradient {
	z-index: 0;
}

.qp__bgs--image {
	z-index: 1;
	opacity: var(--qp-img-op, 1);
}

.qp__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity var(--qp-speed) ease;
	will-change: opacity;
}

.qp__bg.is-active {
	opacity: 1;
}

.qp--bgfx-kenburns .qp__bg.is-active {
	animation: qp-kenburns 22s ease-out both;
}

.qp--bgfx-pulse .qp__bg.is-active {
	animation: qp-pulse 18s ease-in-out infinite;
}

@keyframes qp-kenburns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(1.5%, -1.5%, 0); }
}

@keyframes qp-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.07); }
}

.qp__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--qp-overlay);
	pointer-events: none;
}

/* ------------------------------------------------------------------ slides */

.qp__slides {
	position: relative;
	z-index: 2;
	display: grid;
	align-items: center;
	justify-items: center;
	padding: clamp(36px, 5vw, 80px) clamp(22px, 6vw, 84px);
	perspective: 1400px;
}

.qp--fixed-height .qp__slides {
	position: absolute;
	inset: 0;
}

/* Full width: the quote fills the section rather than sitting in a column.
   Where the arrows are also on they would otherwise sit on top of the last
   word, so the gutter is widened to clear them — 20px of offset plus a 44px
   button plus a little air. */
.qp--full.qp--arrows .qp__slides {
	padding-left: max(clamp(22px, 6vw, 84px), 76px);
	padding-right: max(clamp(22px, 6vw, 84px), 76px);
}

.qp__slide {
	grid-area: 1 / 1;
	margin: 0;
	width: 100%;
	max-width: var(--qp-mw);
	opacity: 0;
	pointer-events: none;
	transform-style: preserve-3d;
	transition:
		opacity var(--qp-speed) ease,
		transform var(--qp-speed) cubic-bezier(0.22, 0.7, 0.3, 1),
		filter var(--qp-speed) ease;
	will-change: opacity, transform;
}

/* Scoped with .qp so this outweighs the per-transition rules below, which are
   written as `.qp__slide.qp-fx-x` and would otherwise win on source order and
   leave the active slide rotated, scaled or offset. */
.qp .qp__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	filter: none;
	z-index: 1;
}

/* --------------------------------------------------------- slide transitions
   These sit on the slide, not the rotator, so each quote can arrive its own
   way. The renderer puts either the quote's own choice or the global default
   on every slide. */

.qp__slide.qp-fx-fade-scale            { transform: scale(1.05); }
.qp__slide.qp-fx-fade-scale.is-leaving { transform: scale(0.96); }

.qp__slide.qp-fx-slide-left            { transform: translate3d(7%, 0, 0); }
.qp__slide.qp-fx-slide-left.is-leaving { transform: translate3d(-7%, 0, 0); }

.qp__slide.qp-fx-slide-right            { transform: translate3d(-7%, 0, 0); }
.qp__slide.qp-fx-slide-right.is-leaving { transform: translate3d(7%, 0, 0); }

.qp__slide.qp-fx-slide-up            { transform: translate3d(0, 12%, 0); }
.qp__slide.qp-fx-slide-up.is-leaving { transform: translate3d(0, -12%, 0); }

.qp__slide.qp-fx-slide-down            { transform: translate3d(0, -12%, 0); }
.qp__slide.qp-fx-slide-down.is-leaving { transform: translate3d(0, 12%, 0); }

.qp__slide.qp-fx-zoom            { transform: scale(0.72); }
.qp__slide.qp-fx-zoom.is-leaving { transform: scale(1.4); }

.qp__slide.qp-fx-flip            { transform: rotateY(80deg); }
.qp__slide.qp-fx-flip.is-leaving { transform: rotateY(-80deg); }

.qp__slide.qp-fx-blur            { filter: blur(16px); transform: scale(1.02); }
.qp__slide.qp-fx-blur.is-leaving { filter: blur(16px); transform: scale(0.98); }

.qp__slide.qp-fx-swap {
	transition: none;
}

/* ------------------------------------------------------------------- typography */

.qp__quote {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-family: var(--qp-font);
	font-size: var(--qp-size);
	line-height: var(--qp-lh);
	color: var(--qp-text);
	text-shadow: var(--qp-shadow);
}

.qp--italic .qp__quote {
	font-style: italic;
}

/* The marks belong to the text span, not the blockquote. On a translatable
   quote the blockquote's children are grid items, and marks attached there
   would become grid items too and drop onto their own rows. Attached here
   they flow inline with whichever wording is showing, and follow its
   direction. */
/* .qp__text--own-marks is excluded throughout: on those quotes the effect is
   already using these two pseudo-elements, the marks have been set in the text
   itself instead, and letting the styling below through would paint the
   effect's duplicate at 1.9em in the accent colour — a giant garbled line
   sitting over the quote. */
.qp--marks .qp__text:not(.qp__text--own-marks)::before,
.qp--marks .qp__text:not(.qp__text--own-marks)::after,
.qp--marks .qp__trans:not(.qp__text--own-marks)::before,
.qp--marks .qp__trans:not(.qp__text--own-marks)::after {
	font-family: Georgia, "Times New Roman", serif;
	font-style: normal;
	font-size: 1.9em;
	line-height: 0;
	color: var(--qp-accent);
	opacity: 0.75;
}

.qp--marks .qp__text:not(.qp__text--own-marks)::before,
.qp--marks .qp__trans:not(.qp__text--own-marks)::before {
	content: "\201C";
	margin-right: 0.06em;
	vertical-align: -0.34em;
}

.qp--marks .qp__text:not(.qp__text--own-marks)::after,
.qp--marks .qp__trans:not(.qp__text--own-marks)::after {
	content: "\201D";
	margin-left: 0.04em;
	vertical-align: -0.34em;
}

/* Right-to-left text opens with the mark on the right. */
.qp--marks .qp__quote[dir="rtl"] .qp__text:not(.qp__text--own-marks)::before { content: "\201D"; }
.qp--marks .qp__quote[dir="rtl"] .qp__text:not(.qp__text--own-marks)::after  { content: "\201C"; }

.qp__text {
	display: inline;
}

.qp__cite {
	display: block;
	margin-top: clamp(16px, 2.2vw, 30px);
	font-family: var(--qp-font);
	font-style: normal;
	line-height: 1.45;
}

.qp__cite-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.qp__cite-link:hover {
	border-bottom-color: currentColor;
}

.qp__author {
	display: block;
	font-size: calc(var(--qp-size) * var(--qp-author, 0.5));
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--qp-accent);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.qp__role {
	display: block;
	margin-top: 0.25em;
	font-size: calc(var(--qp-size) * var(--qp-role, 0.38));
	color: var(--qp-text);
	opacity: 0.72;
}

/* alignment */
.qp--align-left   .qp__slide { text-align: left; }
.qp--align-center .qp__slide { text-align: center; }
.qp--align-right  .qp__slide { text-align: right; }

/* a per-quote override beats the rotator default */
.qp .qp__slide.qp--align-left   { text-align: left; }
.qp .qp__slide.qp--align-center { text-align: center; }
.qp .qp__slide.qp--align-right  { text-align: right; }

/* --------------------------------------------------------------- text effects
   The effect classes themselves live in text-effects.css, which is only loaded
   when a quote uses one. These few rules are the seam between the two. */

.qp__slide--has-effect .qp__text,
.qp__slide--has-effect .qp__trans {
	display: inline-block;
	max-width: 100%;
}

/* An effect paints its own colour, so the quote's drop shadow would fight it. */
.qp__slide--has-effect .qp__quote {
	text-shadow: none;
}

/* Effects that repeat the text in a pseudo-element need a positioning parent. */
.qp__slide--has-effect .qp__text,
.qp__slide--has-effect .qp__trans {
	position: relative;
}

/* Those repeats are drawn with content: attr(data-text), which is one string.
   Without this the copy re-wraps wherever the box happens to end and lands
   beside the real text as a ghost — two quotes overlapping at an angle. The
   attribute carries the quote's own newlines, so honouring them here makes the
   copy break exactly where the text below it breaks. */
.qp__text[data-text]::before,
.qp__text[data-text]::after,
.qp__trans[data-text]::before,
.qp__trans[data-text]::after {
	white-space: pre-wrap;
}

/* Letter-by-letter effects lay their <b> elements out with inline-flex, and a
   flex container treats <br> as an item with no effect — so a quote of several
   lines ran together into one. These two rules give the break its line back. */
.qp__slide--has-effect .qp__text,
.qp__slide--has-effect .qp__trans {
	flex-wrap: wrap;
}

.qp__slide--has-effect .qp__text > br,
.qp__slide--has-effect .qp__trans > br {
	flex-basis: 100%;
	width: 100%;
	height: 0;
}

/* ------------------------------------------------------------ text animations */

/* Whole-block animations, also per slide. They restart naturally because
   .is-active is removed and re-added as the rotator moves. */
.qp__slide.qp-anim-fade.is-active .qp__quote { animation: qp-t-fade      600ms ease both; }
.qp__slide.qp-anim-fade-up.is-active .qp__quote { animation: qp-t-fade-up   700ms cubic-bezier(0.22,0.7,0.3,1) both; }
.qp__slide.qp-anim-fade-down.is-active .qp__quote { animation: qp-t-fade-down 700ms cubic-bezier(0.22,0.7,0.3,1) both; }
.qp__slide.qp-anim-zoom.is-active .qp__quote { animation: qp-t-zoom      700ms cubic-bezier(0.22,0.7,0.3,1) both; }
.qp__slide.qp-anim-blur.is-active .qp__quote { animation: qp-t-blur      800ms ease both; }
.qp__slide.qp-anim-reveal.is-active .qp__quote { animation: qp-t-reveal    900ms cubic-bezier(0.65,0,0.35,1) both; }

.qp__slide.qp-anim-fade.is-active .qp__cite,
.qp__slide.qp-anim-fade-up.is-active .qp__cite,
.qp__slide.qp-anim-fade-down.is-active .qp__cite,
.qp__slide.qp-anim-zoom.is-active .qp__cite,
.qp__slide.qp-anim-blur.is-active .qp__cite,
.qp__slide.qp-anim-reveal.is-active .qp__cite {
	animation: qp-t-fade-up 700ms cubic-bezier(0.22,0.7,0.3,1) 260ms both;
}

@keyframes qp-t-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes qp-t-fade-up   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes qp-t-fade-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes qp-t-zoom      { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes qp-t-blur      { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes qp-t-reveal {
	from { clip-path: inset(0 100% 0 0); opacity: 1; }
	to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* Per-unit animations. JS wraps each letter / word / line in .qp__u and sets
   --i, so the delay is a multiple of the configured stagger speed. */
.qp__u {
	display: inline-block;
	white-space: pre-wrap;
}

.qp__u--line {
	display: block;
}

.qp__slide.qp-anim-letters.is-active .qp__u,
.qp__slide.qp-anim-words.is-active .qp__u,
.qp__slide.qp-anim-lines.is-active .qp__u {
	animation: qp-t-fade-up 520ms cubic-bezier(0.22,0.7,0.3,1) both;
	animation-delay: calc(var(--i, 0) * var(--qp-type-speed));
}

.qp__slide.qp-anim-flip-words.is-active .qp__u {
	transform-origin: 50% 60%;
	animation: qp-t-flip 640ms cubic-bezier(0.22,0.7,0.3,1) both;
	animation-delay: calc(var(--i, 0) * var(--qp-type-speed));
}

@keyframes qp-t-flip {
	from { opacity: 0; transform: rotateX(-92deg) translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.qp__slide.qp-anim-letters.is-active .qp__cite,
.qp__slide.qp-anim-words.is-active .qp__cite,
.qp__slide.qp-anim-lines.is-active .qp__cite,
.qp__slide.qp-anim-flip-words.is-active .qp__cite,
.qp__slide.qp-anim-typewriter.is-active .qp__cite {
	animation: qp-t-fade 600ms ease both;
	animation-delay: var(--qp-cite-delay, 400ms);
}

/* Typewriter: JS feeds characters in; CSS supplies the caret. The drawn
   closing mark is held back until the sentence has finished arriving. */
.qp--marks .qp__slide.is-typing .qp__text::after {
	opacity: 0;
}

/* Typewriter: JS feeds characters in; CSS supplies the caret. */
.qp__slide.qp-anim-typewriter .qp__text.is-typing::after {
	content: "";
	display: inline-block;
	width: 0.06em;
	height: 1em;
	margin-left: 0.06em;
	vertical-align: -0.12em;
	background: currentColor;
	animation: qp-caret 900ms steps(1) infinite;
}

@keyframes qp-caret {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* ------------------------------------------------------------- translation */

/* The original and the translation are stacked in the same box and cross-faded,
   so the slide never jumps height as one replaces the other. */
.qp__slide--has-tr .qp__quote {
	cursor: help;
}

/* The two wordings share one grid cell and cross-fade in place, so the cell is
   as wide and tall as the longer of them and nothing reflows on the swap. */
.qp__swap {
	display: grid;
	text-align: inherit;
}

.qp__swap > .qp__text,
.qp__swap > .qp__trans {
	grid-area: 1 / 1;
	transition: opacity 320ms ease, transform 320ms ease;
}

.qp__swap > .qp__text {
	display: block;
}

.qp__swap > .qp__trans {
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
}

.qp__slide.is-translated .qp__swap > .qp__text {
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}

.qp__slide.is-translated .qp__swap > .qp__trans {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* While a machine translation is being fetched. */
.qp__slide.is-translating .qp__trans::after {
	content: "…";
	opacity: 0.7;
}

.qp__tr-badge {
	display: inline-block;
	margin-top: 14px;
	padding: 3px 11px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-style: normal;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--qp-text);
	background: rgba(0, 0, 0, 0.34);
	border: 1px solid currentColor;
	border-radius: 999px;
	opacity: 0.5;
	transition: opacity 0.25s ease, background-color 0.25s ease;
	cursor: help;
}

.qp__slide--has-tr:hover .qp__tr-badge,
.qp__slide.is-translated .qp__tr-badge {
	opacity: 0.92;
}

.qp__slide.is-translated .qp__tr-badge {
	color: var(--qp-accent);
}

.qp--tr-click .qp__tr-badge {
	cursor: pointer;
}

/* Right-to-left quotes lay themselves out correctly; the translation is always
   left-to-right, and its alignment follows the rotator, not the source. */
.qp__quote[dir="rtl"] {
	text-align: right;
}

.qp--align-center .qp__quote[dir="rtl"] {
	text-align: center;
}

.qp__trans {
	text-align: inherit;
}

/* ------------------------------------------------------------------ controls */

.qp__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	color: #fff;
	background: rgba(0, 0, 0, 0.32);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.qp__nav:hover,
.qp__nav:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.55);
}

.qp__nav--prev { left: clamp(8px, 1.6vw, 20px); }
.qp__nav--next { right: clamp(8px, 1.6vw, 20px); }

.qp__dots {
	display: flex;
	gap: 10px;
	justify-content: center;
	padding: 16px 0 0;
}

.qp__dot {
	width: 22px;
	height: 22px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
}

.qp__dot span {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.55;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 5px rgba(0, 0, 0, 0.6);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.qp__dot.is-active span {
	opacity: 1;
	transform: scale(1.25);
}

.qp__dot:focus-visible span {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* dots sitting on top of the image get a light treatment */
.qp--fixed-height .qp__dots {
	/* a faint pill keeps them readable over a busy photograph */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 3;
	padding: 0;
	color: #fff;
}

/* ------------------------------------------------------------------ widget */

.qp--in-widget .qp__quote { text-shadow: none; }
.qp--in-widget .qp__slides { padding: 26px 22px; }

/* ------------------------------------------------------------------ misc */

.qp-empty {
	padding: 14px 16px;
	background: #fff8e5;
	border-left: 4px solid #dba617;
	color: #46392c;
}

/* ------------------------------------------------------------------ small screens */

@media (max-width: 782px) {
	.qp {
		--qp-size: clamp(18px, 5.2vw, 28px);
	}

	.qp__slides {
		padding: clamp(30px, 8vw, 54px) clamp(18px, 7vw, 40px);
	}

	.qp__nav {
		width: 38px;
		height: 38px;
	}
}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
	.qp__swap > .qp__text,
	.qp__swap > .qp__trans {
		transition-duration: 1ms;
		transform: none !important;
	}

	.qp__slide,
	.qp__bg {
		transition-duration: 1ms;
	}

	.qp__slide.is-active .qp__quote,
	.qp__slide.is-active .qp__cite,
	.qp__slide.is-active .qp__u,
	.qp__bg.is-active {
		animation: none !important;
	}

	.qp__slide {
		transform: none;
		filter: none;
	}
}