/* The Cakery: page band. An empty band with light strips to sit under the header,
   on pages without a hero or a banner. Deliberately without JavaScript: the strips
   draw themselves on CSS keyframes and the light dot runs on SMIL, as in the hero.

   Adjustable values come in as custom properties on .cband, so this file stays
   static. Deliberately loads no fonts. */

.cband {
	--cband-h: 150px;
	--cband-c1: #241C13;
	--cband-c2: #191209;
	--cband-glow: rgba(150, 116, 64, .3);
	--cband-cut-h: 20px;
	--cband-cut-w: 34px;
	--cband-overlap: 84px;
	--cband-led: #EFC98E;
	--cband-core: #FFF6E4;
	--cband-led-o: .16;
	--cband-core-o: .6;
	--cband-led-w: 3;
	--cband-core-w: 1;

	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	height: var(--cband-h);
	background:
		radial-gradient(760px 300px at 50% 120%, var(--cband-glow), rgba(150, 116, 64, 0) 70%),
		linear-gradient(180deg, var(--cband-c1) 0%, var(--cband-c2) 100%);
}

/* The band slides under the header, so the header lies over it. */
.cband--under { margin-top: calc(var(--cband-overlap) * -1); }

/* The same notch out of the bottom edge as the hero and the banner. */
.cband--cut {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--cband-cut-h)),
		calc(100% - var(--cband-cut-w)) 100%,
		var(--cband-cut-w) 100%,
		0 calc(100% - var(--cband-cut-h))
	);
}

/* Breaking out of a container with a maximum width. */
.cband--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.cband__led {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

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

/* The blur sits on the group instead of in an SVG filter. That saves a defs
   block and with it ids that have to stay unique per widget. */
.cband__led .cband-glow {
	stroke: var(--cband-led);
	stroke-width: var(--cband-led-w);
	filter: blur(5px);
	opacity: var(--cband-led-o);
	animation: cbandBreathe 7s ease-in-out 3s infinite;
}

.cband__led .cband-core {
	stroke: var(--cband-core);
	stroke-width: var(--cband-core-w);
	opacity: var(--cband-core-o);
	filter: drop-shadow(0 0 3px rgba(255, 246, 228, .5));
}

.cband__led .cband-dots {
	filter: drop-shadow(0 0 4px rgba(255, 253, 244, .9));
}

.cband--draw .cband__led .cband-glow path,
.cband--draw .cband__led .cband-core path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: cbandDraw 2.4s cubic-bezier(.4, 0, .2, 1) .24s forwards;
}

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

@keyframes cbandBreathe {
	0%,
	100% {
		opacity: var(--cband-led-o);
	}

	50% {
		opacity: calc(var(--cband-led-o) * 1.5);
	}
}

/* ---------- Small screen ----------
   Only a safety net. As soon as a value is set in Elementor it writes its own
   media query and beats this one; that is why the responsive controls have a
   default on all three sizes. */

@media (max-width: 1080px) {
	.cband {
		--cband-h: 130px;
		--cband-cut-h: 15px;
		--cband-cut-w: 26px;
		--cband-overlap: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cband--draw .cband__led .cband-glow path,
	.cband--draw .cband__led .cband-core path {
		animation: none;
		stroke-dashoffset: 0;
	}

	.cband__led .cband-glow {
		animation: none;
	}
}