/**
 * Movimiento editorial de White Coat Capital.
 * Las clases son opt-in para que Elementor siga siendo editable y predecible.
 */

:root {
	--wcc-motion-distance: 1.25rem;
	--wcc-motion-duration: 560ms;
	--wcc-motion-stagger: 90ms;
	--wcc-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* El contenido permanece visible hasta que JS confirme que puede observarlo. */
.wcc-motion-ready .wcc-reveal {
	opacity: 0;
	transform: translate3d(0, var(--wcc-motion-distance), 0);
	transition:
		opacity var(--wcc-motion-duration) var(--wcc-motion-ease),
		transform var(--wcc-motion-duration) var(--wcc-motion-ease);
	transition-delay: var(--wcc-motion-delay, 0ms);
}

.wcc-motion-ready .wcc-motion-item {
	opacity: 0;
	transform: translate3d(0, 1rem, 0);
	transition:
		opacity 520ms var(--wcc-motion-ease),
		transform 520ms var(--wcc-motion-ease);
	transition-delay: var(--wcc-motion-delay, 0ms);
}

.wcc-motion-ready .wcc-motion-item.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.wcc-motion-ready .wcc-hero {
	animation: wcc-hero-background-in 1400ms var(--wcc-motion-ease) both;
}

.wcc-motion-ready .wcc-hero__overlay {
	animation: wcc-hero-overlay-in 900ms ease-out both;
}

@keyframes wcc-hero-background-in {
	from { background-position: 50% 47%; }
	to { background-position: 50% 50%; }
}

@keyframes wcc-hero-overlay-in {
	from { opacity: .35; }
	to { opacity: 1; }
}

.wcc-motion-ready .wcc-reveal[data-reveal="left"] {
	transform: translate3d(calc(var(--wcc-motion-distance) * -1), 0, 0);
}

.wcc-motion-ready .wcc-reveal[data-reveal="right"] {
	transform: translate3d(var(--wcc-motion-distance), 0, 0);
}

.wcc-motion-ready .wcc-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.wcc-stagger > .wcc-reveal:nth-child(2) { --wcc-motion-delay: 90ms; }
.wcc-stagger > .wcc-reveal:nth-child(3) { --wcc-motion-delay: 180ms; }
.wcc-stagger > .wcc-reveal:nth-child(4) { --wcc-motion-delay: 270ms; }
.wcc-stagger > .wcc-reveal:nth-child(5) { --wcc-motion-delay: 360ms; }
.wcc-stagger > .wcc-reveal:nth-child(6) { --wcc-motion-delay: 450ms; }

.wcc-card {
	transition:
		transform 260ms var(--wcc-motion-ease),
		box-shadow 260ms var(--wcc-motion-ease),
		border-color 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.wcc-card:hover {
		transform: translateY(-0.25rem);
		box-shadow: 0 1.125rem 2.5rem rgb(13 28 46 / 10%);
	}
}

.wcc-timeline-progress {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 900ms var(--wcc-motion-ease);
}

.wcc-timeline.is-visible .wcc-timeline-progress {
	transform: scaleX(1);
}

.wcc-header {
	transition:
		box-shadow 240ms ease,
		background-color 240ms ease,
		padding 240ms var(--wcc-motion-ease);
}

.wcc-header.is-scrolled {
	box-shadow: 0 0.5rem 1.5rem rgb(13 28 46 / 9%);
}

.wcc-market-faq details::details-content {
	block-size: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		block-size 320ms var(--wcc-motion-ease),
		content-visibility 320ms allow-discrete,
		opacity 240ms ease;
}

.wcc-market-faq details[open]::details-content {
	block-size: auto;
	opacity: 1;
}

/* JS handles the accordion motion; avoid running a second layout transition. */
.wcc-faq-motion-ready .wcc-market-faq details::details-content {
	block-size: auto;
	opacity: 1;
	transition: none;
}

.wcc-market-faq__item summary h3,
.wcc-market-faq__item summary span {
	transition:
		color 200ms ease,
		transform 220ms var(--wcc-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
	.wcc-market-faq__item summary:hover h3 { color: var(--wcc-red); }
	.wcc-market-faq__item summary:hover span { transform: scale(1.14); }
	.wcc-market-faq__item[open] summary:hover span { transform: rotate(45deg) scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}

	.wcc-motion-ready .wcc-reveal,
	.wcc-motion-ready .wcc-motion-item,
	.wcc-card,
	.wcc-timeline-progress,
	.wcc-header,
	.wcc-market-faq details::details-content {
		opacity: 1;
		transform: none;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}

	.wcc-motion-ready .wcc-hero,
	.wcc-motion-ready .wcc-hero__overlay {
		animation: none !important;
	}
}