/* =============================================================================
   Cloud9 — Motion system
   Premium, restrained animations for the Soft Modern aesthetic.
   Respects prefers-reduced-motion.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Motion tokens (cubic-bezier easings + durations)
   ----------------------------------------------------------------------------- */

:root {
	--c9-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* "spring" out — settles softly */
	--c9-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);       /* standard material-style ease */
	--c9-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
	--c9-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--c9-ease-linear: cubic-bezier(0.5, 0, 0.5, 1);

	--c9-dur-1: 200ms;
	--c9-dur-2: 400ms;
	--c9-dur-3: 700ms;
	--c9-dur-4: 1000ms;
	--c9-dur-5: 1600ms;
}

/* -----------------------------------------------------------------------------
   2. Reveal-on-scroll — multiple patterns
   Add data-anim="pattern" to choose. Default = fade-up.
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	/* Base: hidden state */
	.c9-reveal,
	[data-anim] {
		opacity: 0;
		transition:
			opacity var(--c9-dur-4) var(--c9-ease-out),
			transform var(--c9-dur-4) var(--c9-ease-out),
			filter var(--c9-dur-4) var(--c9-ease-out);
		will-change: opacity, transform, filter;
	}

	/* fade-up (default) */
	.c9-reveal,
	[data-anim="fade-up"] {
		transform: translateY(28px);
	}

	/* fade-in (no movement) */
	[data-anim="fade-in"] {
		transform: none;
	}

	/* slide-from-left */
	[data-anim="from-left"] {
		transform: translateX(-32px);
	}

	/* slide-from-right */
	[data-anim="from-right"] {
		transform: translateX(32px);
	}

	/* scale-in */
	[data-anim="scale-in"] {
		transform: scale(0.94);
	}

	/* blur-in: blurry → sharp */
	[data-anim="blur-in"] {
		transform: translateY(20px);
		filter: blur(8px);
	}

	/* mask-reveal: text comes up from clip mask */
	[data-anim="mask"] {
		clip-path: inset(0 0 100% 0);
		transform: none;
	}

	/* Final state: visible */
	.c9-reveal.is-visible,
	[data-anim].is-visible {
		opacity: 1;
		transform: none;
		filter: none;
		clip-path: inset(0 0 0 0);
	}

	/* Stagger delays (set via data-delay on element, or via .c9-stagger-N parent) */
	[data-delay="100"] { transition-delay: 100ms; }
	[data-delay="200"] { transition-delay: 200ms; }
	[data-delay="300"] { transition-delay: 300ms; }
	[data-delay="400"] { transition-delay: 400ms; }
	[data-delay="500"] { transition-delay: 500ms; }
	[data-delay="600"] { transition-delay: 600ms; }

	/* Parent with [data-stagger] — JS adds .is-visible to each child sequentially */
	[data-stagger] > .c9-reveal:nth-child(1),
	[data-stagger] > [data-anim]:nth-child(1) { transition-delay: 0ms; }
	[data-stagger] > .c9-reveal:nth-child(2),
	[data-stagger] > [data-anim]:nth-child(2) { transition-delay: 80ms; }
	[data-stagger] > .c9-reveal:nth-child(3),
	[data-stagger] > [data-anim]:nth-child(3) { transition-delay: 160ms; }
	[data-stagger] > .c9-reveal:nth-child(4),
	[data-stagger] > [data-anim]:nth-child(4) { transition-delay: 240ms; }
	[data-stagger] > .c9-reveal:nth-child(5),
	[data-stagger] > [data-anim]:nth-child(5) { transition-delay: 320ms; }
	[data-stagger] > .c9-reveal:nth-child(6),
	[data-stagger] > [data-anim]:nth-child(6) { transition-delay: 400ms; }
}

/* -----------------------------------------------------------------------------
   3. Hero home — Ken Burns + staggered text
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	/* Ken Burns: very slow scale + pan on the hero image */
	@keyframes c9-ken-burns {
		0%   { transform: scale(1.2) translate(0%, 0%); }
		100% { transform: scale(1.27) translate(-0.75%, -0.5%); }
	}
	.c9-hero-home__bg img {
		animation: c9-ken-burns 24s var(--c9-ease-in-out) infinite alternate;
	}

	/* Hero text staggered reveal on page load */
	@keyframes c9-fade-up {
		from { opacity: 0; transform: translateY(24px); filter: blur(4px); }
		to   { opacity: 1; transform: none; filter: blur(0); }
	}
	.c9-hero-home__content > * {
		opacity: 0;
		animation: c9-fade-up var(--c9-dur-4) var(--c9-ease-out) forwards;
	}
	.c9-hero-home__content > *:nth-child(1) { animation-delay: 0.15s; }
	.c9-hero-home__content > *:nth-child(2) { animation-delay: 0.30s; }
	.c9-hero-home__content > *:nth-child(3) { animation-delay: 0.45s; }
	.c9-hero-home__content > *:nth-child(4) { animation-delay: 0.60s; }

	/* Subtle hero overlay gradient drift */
	@keyframes c9-overlay-drift {
		0%, 100% { transform: translateX(0); }
		50%      { transform: translateX(-2%); }
	}
	.c9-hero-home__bg::after {
		animation: c9-overlay-drift 18s var(--c9-ease-in-out) infinite;
	}

	/* Editorial hero — heading shimmer underline option (subtle) */
	.c9-hero-page__heading {
		animation: c9-fade-up var(--c9-dur-5) var(--c9-ease-out) both;
		animation-delay: 0.25s;
	}
	.c9-hero-page__eyebrow {
		animation: c9-fade-up var(--c9-dur-3) var(--c9-ease-out) both;
	}
	.c9-hero-page__lead {
		animation: c9-fade-up var(--c9-dur-5) var(--c9-ease-out) both;
		animation-delay: 0.4s;
	}
}

/* -----------------------------------------------------------------------------
   4. Header — fade in on load, smooth scroll state
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@keyframes c9-header-fade-in {
		from { opacity: 0; transform: translateY(-12px); }
		to   { opacity: 1; transform: none; }
	}
	.c9-header {
		animation: c9-header-fade-in var(--c9-dur-3) var(--c9-ease-out) both;
		animation-delay: 0.05s;
	}
}

/* -----------------------------------------------------------------------------
   5. Buttons — stable hover + nested icon transitions
   ----------------------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button,
button.c9-btn {
	position: relative;
	/* Keep shadows visible while controls stay within their parent layout. */
	transition:
		background-color var(--c9-dur-2) var(--c9-ease-soft),
		color var(--c9-dur-2) var(--c9-ease-soft),
		transform var(--c9-dur-2) var(--c9-ease-out),
		box-shadow var(--c9-dur-2) var(--c9-ease-out),
		border-color var(--c9-dur-2) var(--c9-ease-soft);
}

/* Critical: ensure button wrappers don't clip either */
.wp-block-button,
.wp-block-buttons,
.c9-header__cta,
.c9-hero-home__cta {
	overflow: visible !important;
}

@media (prefers-reduced-motion: no-preference) {
	/* Keep feedback inside the button itself. Some full-width and inline button
	   groups have intentionally clipped edges, so external scale/shadows are not
	   safe here. */
	.wp-block-button__link:hover,
	.wp-element-button:hover {
		box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent);
		filter: brightness(1.06);
	}
	.wp-block-button__link:active,
	.wp-element-button:active {
		box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent);
		filter: brightness(0.96);
		transition-duration: 80ms;
	}
}

/* -----------------------------------------------------------------------------
   6. Cards — refined hover physics
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.c9-card,
	.c9-property-card,
	.c9-testimonial {
		transition:
			transform var(--c9-dur-3) var(--c9-ease-out),
			box-shadow var(--c9-dur-3) var(--c9-ease-out),
			border-color var(--c9-dur-3) var(--c9-ease-soft);
	}

	.c9-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 40px rgba(31, 26, 23, 0.10), 0 2px 6px rgba(31, 26, 23, 0.04);
		border-color: var(--c9-border);
	}

	.c9-property-card {
		overflow: hidden;
	}
	.c9-property-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 24px 56px rgba(31, 26, 23, 0.14), 0 4px 8px rgba(31, 26, 23, 0.06);
	}

	.c9-property-card__media img {
		transition: transform 1.2s var(--c9-ease-out);
	}
	.c9-property-card:hover .c9-property-card__media img {
		transform: scale(1.06);
	}

	.c9-property-card__status {
		transition: transform var(--c9-dur-2) var(--c9-ease-out);
	}
	.c9-property-card:hover .c9-property-card__status {
		transform: translateY(-2px);
	}

	.c9-testimonial::before {
		transition: transform var(--c9-dur-3) var(--c9-ease-out), color var(--c9-dur-3) var(--c9-ease-soft);
	}
	.c9-testimonial:hover {
		transform: translateY(-3px);
		border-color: var(--c9-accent-soft);
	}
	.c9-testimonial:hover::before {
		transform: translateY(-4px) scale(1.05);
		color: var(--c9-accent);
	}
}

/* -----------------------------------------------------------------------------
   7. Nav links — underline draw-in
   ----------------------------------------------------------------------------- */

.c9-header__nav .wp-block-navigation-item__content,
.c9-header__nav a {
	position: relative;
	padding-bottom: 4px;
}
.c9-header__nav .wp-block-navigation-item__content::after,
.c9-header__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--c9-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--c9-dur-2) var(--c9-ease-out);
}
.c9-header__nav .wp-block-navigation-item__content:hover::after,
.c9-header__nav a:hover::after,
.c9-header__nav .current-menu-item .wp-block-navigation-item__content::after,
.c9-header__nav .current-menu-item a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* -----------------------------------------------------------------------------
   8. Card-link arrow — kinetic trailing
   ----------------------------------------------------------------------------- */

.c9-card__link {
	overflow: hidden;
}
.c9-card__link::after {
	display: inline-block;
	transition: transform var(--c9-dur-2) var(--c9-ease-out);
}
.c9-card__link:hover::after {
	transform: translateX(6px);
}

/* -----------------------------------------------------------------------------
   9. Image float-in (for image-rich blocks)
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	[data-anim="image-float"] {
		opacity: 0;
		transform: translateY(40px) scale(0.96);
		filter: blur(6px);
		transition:
			opacity 1.1s var(--c9-ease-out),
			transform 1.1s var(--c9-ease-out),
			filter 1.1s var(--c9-ease-out);
	}
	[data-anim="image-float"].is-visible {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* -----------------------------------------------------------------------------
   10. Counter / stat number — pop-in
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	[data-c9-count] {
		display: inline-block;
		transition: transform var(--c9-dur-3) var(--c9-ease-bounce);
	}
	[data-c9-count].is-visible {
		animation: c9-count-pop 0.8s var(--c9-ease-bounce);
	}
	@keyframes c9-count-pop {
		0%   { transform: scale(0.5); opacity: 0; }
		60%  { transform: scale(1.08); opacity: 1; }
		100% { transform: scale(1); }
	}
}

/* -----------------------------------------------------------------------------
   11. Trust badges marquee — auto-scroll
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.c9-trust__logos.c9-trust__logos--marquee {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow: hidden;
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.c9-trust__logos--marquee .c9-trust__track {
		display: flex;
		gap: clamp(2rem, 5vw, 4rem);
		animation: c9-marquee 32s linear infinite;
		flex-shrink: 0;
	}
	@keyframes c9-marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}
	.c9-trust__logos--marquee:hover .c9-trust__track {
		animation-play-state: paused;
	}
}

/* -----------------------------------------------------------------------------
   12. Parallax wrappers (light, CSS-only)
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.c9-parallax-bg {
		background-attachment: fixed;
	}
}

/* -----------------------------------------------------------------------------
   13. FAQ details — smooth open
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.c9-faq details summary::after {
		transition: transform var(--c9-dur-2) var(--c9-ease-bounce);
	}
	.c9-faq details[open] p {
		animation: c9-faq-slide var(--c9-dur-2) var(--c9-ease-out);
	}
	@keyframes c9-faq-slide {
		from { opacity: 0; transform: translateY(-6px); }
		to   { opacity: 1; transform: none; }
	}
}

/* -----------------------------------------------------------------------------
   14. Smooth focus rings
   ----------------------------------------------------------------------------- */

*:focus-visible {
	outline: 2px solid var(--c9-accent);
	outline-offset: 3px;
	border-radius: 2px;
	transition: outline-offset 0.15s var(--c9-ease-soft);
}

/* -----------------------------------------------------------------------------
   15. Cursor accent on interactive elements (subtle)
   ----------------------------------------------------------------------------- */

a, button, .wp-block-button__link, .wp-element-button,
.c9-card, .c9-property-card, .c9-testimonial {
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
   16. Page transition (subtle fade between page loads)
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@keyframes c9-page-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	main {
		animation: c9-page-in var(--c9-dur-3) var(--c9-ease-soft);
	}
}

/* Honor reduced-motion strictly */
@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;
	}
}

/* End motion.css */