/* =========================================================================
 *  CMO — animations (subtle, accessible)
 *  Honors prefers-reduced-motion at the bottom of the file.
 * ====================================================================== */

/* Reveal-on-scroll: starts hidden, JS adds .is-visible when in viewport. */

[data-cmo-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

[data-cmo-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

[data-cmo-reveal="left"]  { transform: translateX(-24px); }
[data-cmo-reveal="right"] { transform: translateX(24px); }
[data-cmo-reveal="left"].is-visible,
[data-cmo-reveal="right"].is-visible { transform: translateX(0); }

[data-cmo-reveal="fade"] { transform: none; }

/* Stagger via inline --i set by JS. */
[data-cmo-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 80ms);
}
[data-cmo-reveal-stagger].is-visible > * {
	opacity: 1;
	transform: translateY(0);
}

/* Hero subtle pulse on the eyebrow accent */
.cmo-hero__eyebrow::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	margin-right: 0.5rem;
	vertical-align: middle;
	animation: cmo-pulse 2.4s ease-in-out infinite;
}

@keyframes cmo-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(1.4); }
}

/* Button shine on hover (only desktop, hover-capable) */
@media (hover: hover) {
	.wp-block-button .wp-block-button__link {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}
	.wp-block-button .wp-block-button__link::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			120deg,
			transparent 30%,
			rgba(255,255,255,0.18) 50%,
			transparent 70%
		);
		transform: translateX(-100%);
		transition: transform 600ms ease;
		pointer-events: none;
	}
	.wp-block-button .wp-block-button__link:hover::after {
		transform: translateX(100%);
	}
}

/* Smooth chevron rotation on details/summary */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "›";
	font-size: 1.5em;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform 250ms ease;
	flex-shrink: 0;
}
.wp-block-details[open] summary::after {
	transform: rotate(90deg);
}
.wp-block-details > *:not(summary) {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--text-muted);
	animation: cmo-fadein 300ms ease;
}

@keyframes cmo-fadein {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Image zoom on hover for cards */
@media (hover: hover) {
	.cmo-doctor-card .wp-block-post-featured-image,
	.cmo-procedure-card .wp-block-post-featured-image,
	.cmo-post-card .wp-block-post-featured-image {
		overflow: hidden;
		border-radius: 0.5rem;
	}
	.cmo-doctor-card .wp-block-post-featured-image img,
	.cmo-procedure-card .wp-block-post-featured-image img,
	.cmo-post-card .wp-block-post-featured-image img {
		transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.cmo-doctor-card:hover .wp-block-post-featured-image img,
	.cmo-procedure-card:hover .wp-block-post-featured-image img,
	.cmo-post-card:hover .wp-block-post-featured-image img {
		transform: scale(1.04);
	}
}

/* ============== prefers-reduced-motion override ============== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	[data-cmo-reveal],
	[data-cmo-reveal-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
	}
	.cmo-hero__eyebrow::before { animation: none; }
}