/**
 * Effects that replaced Elementor add-on widgets. Enqueued in functions.php.
 */

/*
 * Issues page panels (js/issue-panels.js).
 *
 * Until the script runs only the first panel shows. In the Elementor editor
 * every panel shows so each one can be edited.
 */
.issue-panel {
	display: flow-root;
}

body:not(.elementor-editor-active) .issue-panels:not(.is-ready) > .issue-panel ~ .issue-panel,
.issue-panels.is-ready > .issue-panel:not(.is-active):not(.is-leaving):not(.is-entering) {
	display: none;
}

.issue-panels.is-ready {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	/* jQuery's "swing" easing, which the carousel's height animation used. */
	transition: height 300ms cubic-bezier(0.37, 0, 0.63, 1);
}

.issue-panels.is-ready > .issue-panel {
	position: relative;
	z-index: 998;
	opacity: 0;
	transition: opacity 300ms ease;
}

.issue-panels.is-ready > .issue-panel.is-active {
	z-index: 999;
	opacity: 1;
}

.issue-panels.is-ready > .issue-panel.is-leaving {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/*
 * Meet Ted scroll image swap (js/scroll-image-swap.js). A fixed box at the
 * start of <body> that the page paints over, so the images show only through
 * transparent areas.
 */
.scroll-swap {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
}

.scroll-swap__layer {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	background-repeat: no-repeat;
	background-size: contain;
	transition: all 0.5s ease;
}

.scroll-swap__layer.is-active {
	opacity: 1;
	visibility: visible;
}