/* Site-wide scroll-reveal + homepage hero entrance animations */

/* ---------------------------------------------------------------------
 * Header entrance — plays once on load, on every page (not just home).
 * The pill drops in first, then the logo, nav and action icons stagger
 * in behind it for a premium multi-part reveal instead of one flat fade.
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.header { opacity: 0; transform: translateY(-16px); animation: headerDropIn .7s cubic-bezier(.2, .8, .2, 1) .05s forwards; }
	.header .brand { opacity: 0; animation: headerFadeIn .6s cubic-bezier(.2, .8, .2, 1) .35s forwards; }
	.header .mega-nav { opacity: 0; animation: headerFadeIn .6s cubic-bezier(.2, .8, .2, 1) .45s forwards; }
	.header .home-nav { opacity: 0; animation: headerFadeIn .6s cubic-bezier(.2, .8, .2, 1) .45s forwards; }
	.header .landing-advisor { opacity: 0; transform: translateY(8px); animation: headerActionIn .5s cubic-bezier(.2, .8, .2, 1) .5s forwards; }
	.header .header-actions > * { opacity: 0; transform: translateY(8px); animation: headerActionIn .5s cubic-bezier(.2, .8, .2, 1) forwards; }
	.header .header-actions > *:nth-child(1) { animation-delay: .5s; }
	.header .header-actions > *:nth-child(2) { animation-delay: .57s; }
	.header .header-actions > *:nth-child(3) { animation-delay: .64s; }

	@keyframes headerDropIn { to { opacity: 1; transform: none; } }
	@keyframes headerFadeIn { to { opacity: 1; } }
	@keyframes headerActionIn { to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------------
 * Homepage hero entrance — plays once on load, no JS required.
 * Sequence: gradient fades in -> eyebrow rises -> headline curtain-wipes
 * into view -> lede rises -> CTAs stagger in -> location card slides in
 * -> a soft gold sheen sweeps across the copy block.
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.home-page .home-hero { overflow: hidden; opacity: 0; animation: homeHeroIn 1s ease-out .05s forwards; }
	.home-page .home-hero .eyebrow { opacity: 0; transform: translateY(16px); animation: heroUp .7s cubic-bezier(.2, .8, .2, 1) .3s forwards; }
	.home-page .home-hero h1 { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(8px); animation: heroWipe 1s cubic-bezier(.2, .8, .2, 1) .48s forwards; }
	.home-page .home-hero__copy > p:not(.eyebrow) { opacity: 0; transform: translateY(16px); animation: heroUp .7s cubic-bezier(.2, .8, .2, 1) .95s forwards; }
	.home-page .home-hero__copy > div > * { opacity: 0; transform: translateY(14px); animation: heroUp .6s cubic-bezier(.2, .8, .2, 1) forwards; }
	.home-page .home-hero__copy > div > *:nth-child(1) { animation-delay: 1.15s; }
	.home-page .home-hero__copy > div > *:nth-child(2) { animation-delay: 1.28s; }
	@keyframes homeHeroIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
	.product-page .landing-gallery { opacity: 0; transform: translateX(-24px) scale(.985); animation: productGalleryIn .9s cubic-bezier(.2,.8,.2,1) .2s forwards; }
	.product-page .landing-intro > * { opacity: 0; transform: translateY(18px); animation: heroUp .65s cubic-bezier(.2,.8,.2,1) forwards; }
	.product-page .landing-intro > *:nth-child(1) { animation-delay: .3s; }
	.product-page .landing-intro > *:nth-child(2) { animation-delay: .4s; }
	.product-page .landing-intro > *:nth-child(3) { animation-delay: .52s; }
	.product-page .landing-intro > *:nth-child(4) { animation-delay: .62s; }
	.product-page .landing-intro > *:nth-child(5) { animation-delay: .7s; }
	.product-page .landing-intro > *:nth-child(n+6) { animation-delay: .78s; }
	@keyframes productGalleryIn { to { opacity: 1; transform: none; } }
	.home-page .hero { overflow: hidden; }
	.home-page .hero:before { opacity: 0; animation: heroOverlayIn 1.2s ease-out .05s forwards; }
	.home-page .hero .eyebrow { opacity: 0; transform: translateY(16px); animation: heroUp .7s cubic-bezier(.2, .8, .2, 1) .3s forwards; }
	.home-page .hero h1 { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(6px); animation: heroWipe 1s cubic-bezier(.2, .8, .2, 1) .48s forwards; }
	.home-page .hero .lede { opacity: 0; transform: translateY(16px); animation: heroUp .7s cubic-bezier(.2, .8, .2, 1) 1s forwards; }
	.home-page .hero-actions > * { opacity: 0; transform: translateY(14px); animation: heroUp .6s cubic-bezier(.2, .8, .2, 1) forwards; }
	.home-page .hero-actions > *:nth-child(1) { animation-delay: 1.2s; }
	.home-page .hero-actions > *:nth-child(2) { animation-delay: 1.3s; }
	.home-page .hero-actions > *:nth-child(3) { animation-delay: 1.4s; }
	.home-page .hero-place { opacity: 0; transform: translate(26px, 14px) scale(.97); animation: heroUp .9s cubic-bezier(.2, .8, .2, 1) .7s forwards; }

	.home-page .hero-copy { position: relative; }
	.home-page .hero-copy:after {
		content: "";
		position: absolute;
		top: -10%;
		bottom: -10%;
		left: -35%;
		width: 30%;
		background: linear-gradient(75deg, transparent, #ffffff4d 45%, #f6d98966 55%, transparent);
		transform: skewX(-12deg);
		opacity: 0;
		pointer-events: none;
		animation: heroSheen 1.3s ease-out 1.55s forwards;
	}

	@keyframes heroOverlayIn { to { opacity: 1; } }
	@keyframes heroUp { to { opacity: 1; transform: none; } }
	@keyframes heroWipe { to { opacity: 1; clip-path: inset(0 0 0% 0); transform: none; } }
	@keyframes heroSheen {
		0% { left: -35%; opacity: 0; }
		18% { opacity: 1; }
		100% { left: 135%; opacity: 0; }
	}
}

/* ---------------------------------------------------------------------
 * Site-wide scroll reveal. JS (animations.js) adds `.reveal` to cards and
 * copy blocks across every template, then flips `.is-visible` as each one
 * enters the viewport. Gated behind `html.has-js` (set synchronously in
 * <head>) so content is never hidden when JS is unavailable.
 * --------------------------------------------------------------------- */
html.has-js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
html.has-js .reveal.is-visible { opacity: 1; transform: none; }

/* Product information remains visible even if a preview blocks or delays
   IntersectionObserver; the dedicated hero entrance animation still runs. */
.product-page main .reveal{opacity:1!important;transform:none!important;visibility:visible!important}

@media (prefers-reduced-motion: reduce) {
	.home-page .hero *, .home-page .hero:before, .home-page .hero-copy:after,
	.home-page .home-hero, .home-page .home-hero * { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.product-page .landing-gallery, .product-page .landing-intro > *, .header .landing-advisor { animation: none !important; opacity: 1 !important; transform: none !important; }
	html.has-js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------
 * Hover-color integrity. This theme communicates hover/focus with an
 * underline, a transform, or a background change — never a text-color
 * swap. Elementor's global kit ships an `!important` link hover color
 * (often a red/orange accent) that otherwise bleeds through onto plain
 * text and buttons alike; these rules force every interactive text
 * element back to its intended color, loaded last so they always win.
 * --------------------------------------------------------------------- */
a:hover:not(.btn):not(.icon-btn),
a:focus:not(.btn):not(.icon-btn) { color: inherit !important; }

.btn-dark:hover, .btn-dark:focus { color: #fff !important; }
.btn-gold:hover, .btn-gold:focus { color: var(--ink) !important; }
.btn-ghost-light:hover, .btn-ghost-light:focus { color: #fff !important; }
.btn:not(.btn-dark):not(.btn-gold):not(.btn-ghost-light):hover,
.btn:not(.btn-dark):not(.btn-gold):not(.btn-ghost-light):focus { color: var(--ink) !important; }
.icon-btn:hover, .icon-btn:focus { color: #fff !important; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { color: #fff !important; }

/* Header nav: hover reveals only the underline, never a color change. */
.main-nav a:hover, .main-nav a:focus { color: inherit !important; }