/* Swift hero-strepen. Zonder WebGL blijven deze CSS-strepen staan als terugval. */
.swift-hero-strepen {
	position: relative;
	overflow: hidden;
	background-color: #1C62B4;
	background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0) 0 78px, rgba(255, 255, 255, .09) 78px 118px);
}
.swift-hero-strepen.is-strepen-actief {
	background-image: none;
}
.swift-hero-strepen > .swift-strepen-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
}
.swift-hero-strepen > .e-con,
.swift-hero-strepen > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Indeling van de tekst, naar de StudioFloww-hero.
   Klassen in de koptitel: <span class="swift-pil"> (klein label) en <span class="swift-kader"> (woord in selectiekader). */
.swift-hero-strepen .elementskit-section-title > span.swift-pil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 6px 13px 6px 10px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	text-shadow: none !important;
}
.swift-hero-strepen .swift-pil::before {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.swift-hero-strepen .elementskit-section-title > span:not(.swift-pil) {
	display: block;
}
.swift-hero-strepen .elementskit-section-title span.swift-kader {
	position: relative;
	display: inline-block;
	margin: 0 .06em;
	padding: 0 .14em .04em;
	border: 1.5px solid rgba(255, 255, 255, .75);
	background: rgba(255, 255, 255, .06);
	font-size: inherit !important;
	line-height: 1 !important;
	animation: swift-kader-in .7s cubic-bezier(.2, .8, .2, 1) .5s both;
}
/* Vier hoekgrepen, zoals een selectie in Figma. */
.swift-hero-strepen .swift-kader::before {
	content: "";
	position: absolute;
	inset: -5.5px;
	pointer-events: none;
	background:
		linear-gradient(#fff, #fff) 1.5px 1.5px / 7px 7px no-repeat,
		linear-gradient(#fff, #fff) calc(100% - 1.5px) 1.5px / 7px 7px no-repeat,
		linear-gradient(#fff, #fff) 1.5px calc(100% - 1.5px) / 7px 7px no-repeat,
		linear-gradient(#fff, #fff) calc(100% - 1.5px) calc(100% - 1.5px) / 7px 7px no-repeat,
		linear-gradient(#227AD6, #227AD6) 0 0 / 10px 10px no-repeat,
		linear-gradient(#227AD6, #227AD6) 100% 0 / 10px 10px no-repeat,
		linear-gradient(#227AD6, #227AD6) 0 100% / 10px 10px no-repeat,
		linear-gradient(#227AD6, #227AD6) 100% 100% / 10px 10px no-repeat;
}
/* Blauw badgetje met cursor rechtsboven. */
.swift-hero-strepen .swift-kader::after {
	content: "";
	position: absolute;
	top: -15px;
	right: -15px;
	width: 28px;
	height: 28px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #227AD6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 3l14 7.5-6.2 1.7L10 18.5z'/%3E%3C/svg%3E") 55% 55% / 18px 18px no-repeat;
	box-shadow: 0 6px 18px rgba(5, 25, 60, .35);
	background-size: 14px 14px;
	animation: swift-badge-in .45s cubic-bezier(.3, 1.6, .5, 1) 1.1s both;
}
@keyframes swift-kader-in {
	from { opacity: 0; transform: scale(.92); }
	to { opacity: 1; transform: none; }
}
@keyframes swift-badge-in {
	from { opacity: 0; transform: scale(0); }
	to { opacity: 1; transform: none; }
}

/* Onderbalk: diensten, klok en case-kaartje. */
.swift-hero-strepen .swift-hero-onder p {
	margin: 0;
}
.swift-hero-strepen .swift-punt {
	display: inline-block;
	margin: 0 .7em;
	opacity: .55;
}
.swift-hero-strepen .swift-hero-tijd p {
	display: flex;
	align-items: center;
	gap: 14px;
}
.swift-hero-strepen .swift-lijn {
	display: inline-block;
	width: 90px;
	height: 1px;
	background: rgba(255, 255, 255, .45);
}
.swift-hero-strepen .swift-klok {
	font-variant-numeric: tabular-nums;
	color: #fff;
}
.swift-hero-strepen .swift-hero-kaart a {
	position: relative;
	display: block;
	padding: 5px;
	border-radius: 32px;
	background: #0A1F41;
	box-shadow: 0 16px 40px rgba(5, 20, 50, .45);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.swift-hero-strepen .swift-hero-kaart img {
	display: block;
	border-radius: 27px;
	background: #fff;
}
.swift-hero-strepen .swift-hero-kaart a::after {
	content: "";
	position: absolute;
	right: 15px;
	bottom: 15px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #0A1F41 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.swift-hero-strepen .swift-hero-kaart a:hover {
	transform: translateY(-3px) rotate(-2deg);
}
.swift-hero-strepen .swift-hero-kaart a:hover::after {
	transform: rotate(45deg);
}

@media (max-width: 767px) {
	/* De regelbreuk in de titel geldt alleen op groot scherm. */
	.swift-hero-strepen .elementskit-section-title br {
		display: none;
	}
	.swift-hero-strepen .elementskit-section-title > span.swift-pil {
		margin-bottom: 18px;
		font-size: 11px !important;
	}
	.swift-hero-strepen .swift-kader::after {
		top: -12px;
		right: -12px;
		width: 24px;
		height: 24px;
		background-size: 12px 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.swift-hero-strepen .swift-kader,
	.swift-hero-strepen .swift-kader::after {
		animation: none;
	}
}