/* Challah Bake: animation classes. Pair with anim.js (GSAP + ScrollTrigger + SplitText).
   Usage: add a class to any Bricks element (or plain HTML):
     anim-fade | anim-fade-up | anim-fade-down | anim-fade-left | anim-fade-right | anim-blur-in
     anim-scale-in | anim-reveal (clip wipe) | anim-split (text) | anim-stagger (children)
     anim-counter (data-count) | anim-draw (SVG paths) | anim-parallax (data-speed)
     anim-marquee | anim-pin | anim-magnetic | anim-hover-lift
   Options (data attributes): data-anim-delay, data-anim-duration, data-anim-stagger, data-anim-start,
   data-split="lines|words|chars".
   Elements are only hidden before animating when JS is present (html.cb-js), and always revealed if
   the animation library fails to start (html.cb-anim-failed) or motion is reduced. */

.cb-js .anim-fade,
.cb-js .anim-fade-up,
.cb-js .anim-fade-down,
.cb-js .anim-fade-left,
.cb-js .anim-fade-right,
.cb-js .anim-blur-in,
.cb-js .anim-scale-in,
.cb-js .anim-stagger > * {
	opacity: 0;
}

.cb-js .anim-reveal {
	clip-path: inset(0 0 100% 0);
}

.cb-js .anim-split {
	visibility: hidden;
}

/* Text split helpers (SplitText wraps lines in these) */
.anim-split .cb-split-line {
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.anim-draw path,
.anim-draw line,
.anim-draw polyline {
	fill: none;
}

.anim-marquee {
	display: flex;
	overflow: hidden;
	white-space: nowrap;
	user-select: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.anim-marquee__track {
	display: flex;
	flex: none;
	gap: var(--cb-s-l, 40px);
	padding-right: var(--cb-s-l, 40px);
	animation: cb-marquee var(--cb-marquee-speed, 38s) linear infinite;
}

.anim-marquee:hover .anim-marquee__track {
	animation-play-state: paused;
}

@keyframes cb-marquee {
	to {
		transform: translateX(-100%);
	}
}

.anim-magnetic {
	will-change: transform;
}

/* Safety nets: library failed or reduced motion */
.cb-anim-failed .anim-fade,
.cb-anim-failed .anim-fade-up,
.cb-anim-failed .anim-fade-down,
.cb-anim-failed .anim-fade-left,
.cb-anim-failed .anim-fade-right,
.cb-anim-failed .anim-blur-in,
.cb-anim-failed .anim-scale-in,
.cb-anim-failed .anim-stagger > * {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

.cb-anim-failed .anim-reveal {
	clip-path: none !important;
}

.cb-anim-failed .anim-split {
	visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
	.cb-js .anim-fade,
	.cb-js .anim-fade-up,
	.cb-js .anim-fade-down,
	.cb-js .anim-fade-left,
	.cb-js .anim-fade-right,
	.cb-js .anim-blur-in,
	.cb-js .anim-scale-in,
	.cb-js .anim-stagger > * {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.cb-js .anim-reveal {
		clip-path: none;
	}

	.cb-js .anim-split {
		visibility: visible;
	}

	.anim-marquee__track {
		animation: none;
	}
}