/* Design A: hero with story bars. */

.sigsl .sigsl-story {
	position: relative;
	height: clamp( 540px, 48cqi, 680px );
	overflow: hidden;
	background: var( --sigsl-ink );
	color: #fff;
	touch-action: pan-y;
}

.sigsl .sigsl-story-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.1s ease, visibility 0s 1.1s;
}

.sigsl .sigsl-story-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.1s ease, visibility 0s;
}

.sigsl .sigsl-story-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transform: scale( 1.02 );
}

.sigsl .sigsl-story-slide.is-active img {
	animation: sigsl-story-zoom 10s ease-out forwards;
}

.sigsl .sigsl-story.is-paused .sigsl-story-slide img,
.sigsl .sigsl-story.is-off .sigsl-story-slide img {
	animation-play-state: paused;
}

@keyframes sigsl-story-zoom {
	from { transform: scale( 1.02 ); }
	to { transform: scale( 1.11 ); }
}

.sigsl .sigsl-story-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient( 90deg, rgb( var( --sigsl-shade ) / 0.74 ) 0%, rgb( var( --sigsl-shade ) / 0.38 ) 46%, rgb( var( --sigsl-shade ) / 0 ) 72% ),
		linear-gradient( 0deg, rgb( var( --sigsl-shade ) / 0.6 ), rgb( var( --sigsl-shade ) / 0 ) 42% );
}

.sigsl .sigsl-story-copy {
	position: absolute;
	z-index: 2;
	left: clamp( 20px, 6cqi, 76px );
	right: clamp( 20px, 6cqi, 76px );
	bottom: clamp( 116px, 13cqi, 140px );
	max-width: 640px;
}

.sigsl .sigsl-story-copy > * {
	opacity: 0;
	transform: translateY( 20px );
	transition: opacity 0.6s, transform 0.8s var( --sigsl-ease );
}

.sigsl .sigsl-story-slide.is-active .sigsl-story-copy > * {
	opacity: 1;
	transform: none;
}

.sigsl .sigsl-story-slide.is-active .sigsl-story-copy > :nth-child( 1 ) { transition-delay: 0.35s; }
.sigsl .sigsl-story-slide.is-active .sigsl-story-copy > :nth-child( 2 ) { transition-delay: 0.48s; }
.sigsl .sigsl-story-slide.is-active .sigsl-story-copy > :nth-child( 3 ) { transition-delay: 0.6s; }
.sigsl .sigsl-story-slide.is-active .sigsl-story-copy > :nth-child( 4 ) { transition-delay: 0.72s; }

.sigsl .sigsl-story-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sigsl .sigsl-story-kicker::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var( --sigsl-accent );
}

.sigsl .sigsl-story-title {
	margin: 0 0 28px;
	padding: 0;
	color: #fff;
	font-size: clamp( 30px, 4cqi, 52px );
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-transform: none;
	text-wrap: balance;
}

.sigsl .sigsl-story-text {
	max-width: 48ch;
	margin: -12px 0 28px;
	color: rgb( 255 255 255 / 0.9 );
	font-size: 18px;
	line-height: 1.55;
}

.sigsl .sigsl-story-bar {
	position: absolute;
	z-index: 3;
	left: clamp( 20px, 6cqi, 76px );
	right: clamp( 20px, 6cqi, 76px );
	bottom: 30px;
	display: flex;
	align-items: flex-end;
	gap: 18px;
}

.sigsl button.sigsl-story-tab {
	display: block;
	flex: 1;
	min-width: 0;
	padding: 10px 0 0;
	border: 0;
	background: none;
	color: rgb( 255 255 255 / 0.66 );
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	transition: color 0.3s;
}

.sigsl button.sigsl-story-tab[aria-selected="true"],
.sigsl button.sigsl-story-tab:hover {
	background: none;
	color: #fff;
}

.sigsl .sigsl-story-track {
	display: block;
	height: 3px;
	margin-bottom: 12px;
	border-radius: 3px;
	background: rgb( 255 255 255 / 0.28 );
	overflow: hidden;
}

.sigsl .sigsl-story-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var( --sigsl-accent );
}

.sigsl .sigsl-story-tab.is-done .sigsl-story-fill {
	width: 100%;
	background: rgb( 255 255 255 / 0.85 );
}

.sigsl .sigsl-story-tab[aria-selected="true"] .sigsl-story-fill {
	animation: sigsl-story-progress var( --sigsl-dur, 7000ms ) linear forwards;
}

/* Without autoplay the bar of the slide shown is simply full. */
.sigsl--story[data-autoplay="0"] .sigsl-story-tab[aria-selected="true"] .sigsl-story-fill {
	width: 100%;
	animation: none;
}

.sigsl .sigsl-story.is-paused .sigsl-story-fill,
.sigsl .sigsl-story.is-off .sigsl-story-fill,
.sigsl .sigsl-story:has( :focus-visible ) .sigsl-story-fill {
	animation-play-state: paused;
}

@keyframes sigsl-story-progress {
	from { width: 0; }
	to { width: 100%; }
}

.sigsl .sigsl-story-name {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sigsl button.sigsl-story-pause {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1.5px solid rgb( 255 255 255 / 0.65 );
	border-radius: 50%;
	background: transparent;
	color: #fff;
}

.sigsl button.sigsl-story-pause:hover {
	background: rgb( 255 255 255 / 0.14 );
	color: #fff;
}

.sigsl .sigsl-story-pause .sigsl-icon {
	width: 16px;
	height: 16px;
}

.sigsl .sigsl-story-pause .sigsl-icon + .sigsl-icon,
.sigsl .sigsl-story.is-paused .sigsl-story-pause .sigsl-icon:first-child {
	display: none;
}

.sigsl .sigsl-story.is-paused .sigsl-story-pause .sigsl-icon + .sigsl-icon {
	display: block;
}

@container ( max-width: 640px ) {
	.sigsl .sigsl-story {
		height: 600px;
	}

	.sigsl .sigsl-story-slide::after {
		background: linear-gradient( 0deg, rgb( var( --sigsl-shade ) / 0.85 ) 0%, rgb( var( --sigsl-shade ) / 0.5 ) 48%, rgb( var( --sigsl-shade ) / 0.05 ) 80% );
	}

	.sigsl .sigsl-story-copy {
		bottom: 96px;
	}

	.sigsl .sigsl-story-name {
		display: none;
	}

	.sigsl .sigsl-story-bar {
		gap: 8px;
		bottom: 28px;
	}

	.sigsl .sigsl-story-track {
		margin-bottom: 6px;
	}
}