/*
 * ON CALL — animation support layer.
 *
 * The compiled Tailwind build (css/style.css) already ships every keyframe used
 * by the React app (rise-in, pulse-ring, confetti-fall, accordion-*, ticker).
 * This file only adds what the WordPress build needs on top: the no-JS
 * fallback, the accordion height transition and the carousel viewport that
 * replaces Embla.
 */

/* ---------------------------------------------------------------- No JS ---- */

/*
 * Reveal-on-scroll elements are rendered with `opacity-0` and unhidden by
 * js/main.js. Without JavaScript they must stay visible.
 */
html.no-js .opacity-0 {
	opacity: 1 !important;
}

html.no-js [data-oc-accordion-content] {
	display: block !important;
	height: auto !important;
}

/* --------------------------------------------------------------- Reveal ---- */

.animate-rise {
	animation-fill-mode: both;
}

/* ------------------------------------------------------------ Accordion ---- */

[data-oc-accordion-content] {
	overflow: hidden;
	transition: height 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

[data-oc-accordion-trigger] [data-oc-accordion-chevron],
[data-oc-accordion-trigger] .lucide-chevron-down {
	transition: transform 260ms ease;
}

[data-oc-accordion-trigger][aria-expanded='true'] [data-oc-accordion-chevron],
[data-oc-accordion-trigger][aria-expanded='true'] .lucide-chevron-down {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------- Carousel ---- */

.oc-carousel-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.oc-carousel-viewport::-webkit-scrollbar {
	display: none;
}

.oc-carousel-slide {
	scroll-snap-align: start;
}

/* ------------------------------------------------------ Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.animate-rise,
	.animate-pulse-ring,
	.animate-ticker,
	.claim-confetti {
		animation: none !important;
	}

	[data-oc-accordion-content] {
		transition: none !important;
	}

	.oc-carousel-viewport {
		scroll-behavior: auto;
	}
}