/*!
 * Cakery Hero - frontend styles
 * Alle instelbare waardes komen als CSS custom property binnen via de
 * Elementor selectors, zodat dit stylesheet statisch kan blijven.
 */

.chero {
	--chero-cut-h: 50px;
	--chero-cut-w: 80px;
	--chero-ov-top: rgba(26, 20, 14, .5);
	--chero-ov-bottom: rgba(26, 20, 14, .82);
	--chero-ov-opacity: 1;
	--chero-glow-color: transparent;
	--chero-core: #FFF6E4;
	--chero-glow: #EFC98E;
	--chero-core-w: 1;
	--chero-glow-w: 3;
	--chero-glow-o: .18;
	--chero-dot-r: 2.4px;
	--chero-led-mob: .7;
	--chero-btn-cut: 10px;
	--chero-btn-bw: 1px;
	--chero-content-w: 860px;
	--chero-ta: center;
	--chero-ai: center;
	--chero-accent: #CBBF9E;
	--chero-focus: #CBBF9E;
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--chero-min-h, clamp(560px, 88vh, 800px));
	background: #201913;
	overflow: hidden;
}

/* De octagon-uitsnede van het logo, terug in de onderrand van de sectie. */
.chero--cut {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--chero-cut-h)),
		calc(100% - var(--chero-cut-w)) 100%,
		var(--chero-cut-w) 100%,
		0 calc(100% - var(--chero-cut-h))
	);
}

.chero--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ---------- 1. Medialaag ---------- */

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

.chero__media img,
.chero__media video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chero__media video {
	z-index: 1;
}

.chero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: var(--chero-ov-opacity);
	background:
		radial-gradient(720px 480px at 50% 78%, var(--chero-glow-color), rgba(0, 0, 0, 0) 70%),
		linear-gradient(180deg, var(--chero-ov-top) 0%, var(--chero-ov-bottom) 100%);
}

/* ---------- 2. LED-laag ---------- */

.chero__led {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.chero__led svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Twee tekeningen, één zichtbaar. Smal en staand krijgt de waaier, die werkt
   beter binnen een hoog kader. Vanaf 1025px de abstracte bogen vanuit de
   onderhoeken, waarbij het midden volledig vrij blijft voor de tekst. */
.chero__led .chero-led-svg--abstract {
	display: none;
}

@media (min-width: 1025px) {
	.chero__led .chero-led-svg--fan {
		display: none;
	}

	.chero__led .chero-led-svg--abstract {
		display: block;
	}
}

.chero__led .chero-glow {
	stroke: var(--chero-glow);
	stroke-width: var(--chero-glow-w);
	opacity: var(--chero-glow-o);
	animation: cheroBreathe 7s ease-in-out .3s infinite;
}

.chero__led .chero-core {
	stroke: var(--chero-core);
	stroke-width: var(--chero-core-w);
	opacity: .7;
}

.chero__led .chero-dots circle {
	r: var(--chero-dot-r);
}

/* Inschakel-animatie: de binnenste strips eerst, de buitenste volgen. */
.chero--draw .chero__led path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: cheroDraw 2.6s cubic-bezier(.4, 0, .2, 1) forwards;
}

.chero--draw .chero__led .chero-glow {
	animation-delay: 3s;
}

/* Vastgehouden tot de sectie in beeld komt (chero-hold komt van de observer). */
.chero--draw.chero-hold .chero__led path,
.chero--draw.chero-hold .chero__led .chero-glow {
	animation: none;
}

.chero-is-visible .chero__led path {
	will-change: stroke-dashoffset;
}

.chero-lit .chero__led path {
	will-change: auto;
}

@keyframes cheroDraw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes cheroBreathe {
	0%,
	100% {
		opacity: var(--chero-glow-o);
	}
	50% {
		opacity: calc(var(--chero-glow-o) * 1.45);
	}
}

/* ---------- 3. Contentlaag ---------- */

.chero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: var(--chero-ai);
	width: min(var(--chero-content-w), 92%);
	margin: 0 auto;
	padding: 100px 0 140px;
	text-align: var(--chero-ta);
}

.chero__eyebrow {
	margin: 0 0 22px;
	color: #CBBF9E;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .32em;
	text-transform: uppercase;
}

.chero__title {
	margin: 0;
	color: #F7F1E6;
	font-family: "Myorie", Georgia, serif;
	font-size: clamp(40px, 5.5vw, 68px);
	font-weight: 400;
	line-height: 1.2;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.chero__title em {
	color: var(--chero-accent);
	font-style: normal;
	font-weight: inherit;
}

.chero__sub {
	max-width: 36em;
	margin: 26px 0 0;
	color: rgba(247, 241, 230, .78);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.7;
}

/*
 * justify-content moet mee met de uitlijning: zodra de rij de volle breedte
 * vult (smalle schermen, of knoppen die afbreken) bepaalt hij de positie,
 * niet meer de align-items van de kolom.
 */
.chero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--chero-ai);
	gap: 16px;
	margin-top: 38px;
}

/* ---------- Knoppen ---------- */

/*
 * De octagon zit op de pseudo-elementen, niet op de <a> zelf.
 * Zo knipt de clip-path de focus-outline niet weg.
 */
.chero__btn {
	position: relative;
	z-index: 0;
	display: inline-block;
	padding: 15px 34px;
	font-size: 14px;
	letter-spacing: .14em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

.chero__btn > span {
	position: relative;
}

.chero__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	transition: background-color .25s ease;
	clip-path: polygon(
		var(--chero-btn-cut) 0,
		calc(100% - var(--chero-btn-cut)) 0,
		100% var(--chero-btn-cut),
		100% calc(100% - var(--chero-btn-cut)),
		calc(100% - var(--chero-btn-cut)) 100%,
		var(--chero-btn-cut) 100%,
		0 calc(100% - var(--chero-btn-cut)),
		0 var(--chero-btn-cut)
	);
}

.chero__btn--filled {
	color: var(--chero-bft, #241D14);
	transition: color .25s ease;
}

.chero__btn--filled::before {
	background: var(--chero-bfb, #A9A083);
}

.chero__btn--filled:hover,
.chero__btn--filled:focus {
	color: var(--chero-bfth, #241D14);
}

.chero__btn--filled:hover::before,
.chero__btn--filled:focus::before {
	background: var(--chero-bfbh, #CBBF9E);
}

/* Omrand: ::before is de rand, ::after de vulling met een iets kleinere octagon. */
.chero__btn--outline {
	color: var(--chero-bot, #F7F1E6);
	transition: color .25s ease;
}

.chero__btn--outline::before {
	background: var(--chero-bod, rgba(233, 220, 190, .55));
}

.chero__btn--outline::after {
	content: "";
	position: absolute;
	inset: var(--chero-btn-bw);
	z-index: -1;
	background: var(--chero-bof, #221B13);
	transition: background-color .25s ease;
	--chero-btn-cut-i: max(0px, calc(var(--chero-btn-cut) - var(--chero-btn-bw)));
	clip-path: polygon(
		var(--chero-btn-cut-i) 0,
		calc(100% - var(--chero-btn-cut-i)) 0,
		100% var(--chero-btn-cut-i),
		100% calc(100% - var(--chero-btn-cut-i)),
		calc(100% - var(--chero-btn-cut-i)) 100%,
		var(--chero-btn-cut-i) 100%,
		0 calc(100% - var(--chero-btn-cut-i)),
		0 var(--chero-btn-cut-i)
	);
}

.chero__btn--outline:hover,
.chero__btn--outline:focus {
	color: var(--chero-both, #F7F1E6);
}

.chero__btn--outline:hover::before,
.chero__btn--outline:focus::before {
	background: var(--chero-bodh, rgba(233, 220, 190, .9));
}

.chero__btn--outline:hover::after,
.chero__btn--outline:focus::after {
	background: var(--chero-bofh, #2A2118);
}

.chero__btn:focus-visible {
	outline: 2px solid var(--chero-focus);
	outline-offset: 3px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.chero--imgtab .chero__media video {
		display: none;
	}
}

@media (max-width: 767px) {
	.chero--imgmob .chero__media video {
		display: none;
	}

	.chero__led {
		opacity: var(--chero-led-mob);
	}
}

/* ---------- Toegankelijkheid ---------- */

@media (prefers-reduced-motion: reduce) {
	.chero__led path {
		animation: none !important;
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
	}

	.chero__led .chero-glow {
		animation: none !important;
	}

	.chero__led .chero-dots {
		display: none;
	}

	.chero__btn,
	.chero__btn::before,
	.chero__btn::after {
		transition: none;
	}
}