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

/* The class is in there twice. The Elementor kit sets h1 to h3 and p with a
   class plus an element (.elementor-kit-000 h1), and that beats a single class.
   Without this doubling the kit would decide the colour and the typeface here.
   Your own settings in the widget still come first: Elementor writes those with
   the wrapper included and so more specifically still. */

.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-content-max: 92%;
	--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;
}

/* The class is in there twice on purpose. Elementor sets .elementor img to
   height:auto, with exactly the same specificity as a single class; which of the
   two wins then depends on the order the stylesheets come in. That order is not
   fixed, so we give this one the last word here. */
.chero__media.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);
	/* De kleinste van twee: een vaste breedte in pixels, en een deel van de
	   banner zodat de tekst op een smal scherm niet tegen de rand plakt. Allebei
	   in te stellen; op 100% loopt de inhoud tot de rand van de banner. */
	width: min(var(--chero-content-w), var(--chero-content-max));
	margin: 0 auto;
	padding: 100px 0 140px;
	text-align: var(--chero-ta);
}
.chero__eyebrow.chero__eyebrow {
	margin: 0 0 22px;
	color: #CBBF9E;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .32em;
	text-transform: uppercase;
}
.chero__title.chero__title {
	max-width: var(--chero-title-w, none);
	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.chero__sub {
	max-width: var(--chero-sub-w, 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;
	}
}