/*
 * ---------------------------------------------------------------------------
 *  Asha Clinic — Motion & Hover Layer
 * ---------------------------------------------------------------------------
 *  Loaded AFTER main.css so it enhances the design without editing it. Delete
 *  the enqueue in inc/enqueue.php to disable every effect here at once.
 *
 *  Principles for a mental-health practice:
 *   - Calm, slow, gentle. Nothing that flashes, bounces hard, or demands focus.
 *   - No layout shift: transforms and opacity only (GPU-friendly).
 *   - Everything is disabled under prefers-reduced-motion (bottom of file).
 * ---------------------------------------------------------------------------
 */

/* =========================================================================
 *  1. BUTTONS — light sweep + press feedback
 * ====================================================================== */
.btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 55%;
	height: 100%;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(255, 255, 255, .38),
		transparent
	);
	transform: skewX(-18deg);
	transition: left .75s var(--ease);
	pointer-events: none;
	z-index: 1;
}

.btn:hover::after {
	left: 130%;
}

/* Ghost/outline buttons sit on light backgrounds — soften the sweep. */
.btn-ghost::after,
.btn-outline::after {
	background: linear-gradient(
		100deg,
		transparent,
		rgba(37, 169, 188, .18),
		transparent
	);
}

/* Tactile press */
.btn:active {
	transform: translateY(0) scale(.985);
	transition-duration: .08s;
}

/* Arrow inside the primary hero button nudges forward */
.btn svg {
	transition: transform .35s var(--ease);
}

.btn-primary:hover svg {
	transform: translateX(3px);
}

/* =========================================================================
 *  2. HEADER — logo + link polish
 * ====================================================================== */
.brand {
	display: inline-flex;
	transition: transform .4s var(--ease);
}

.brand:hover {
	transform: translateY(-1px) scale(1.02);
}

.nav-links a::after {
	/* main.css animates width; ease it from the left more smoothly */
	transition: width .35s var(--ease);
}

.nav-login svg {
	transition: transform .35s var(--ease);
}

.nav-login:hover svg {
	transform: scale(1.12);
}

/* Scroll progress bar (element injected by main.js) */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--teal), var(--brand));
	z-index: 200;
	pointer-events: none;
	will-change: transform;
}

/* =========================================================================
 *  3. HERO — breathing media, floating card, badge
 * ====================================================================== */
.hero-frame img {
	transition: transform 1.1s var(--ease);
	will-change: transform;
}

.hero-media:hover .hero-frame img {
	transform: scale(1.045);
}

/* The frame itself is moved by the pointer parallax in main.js (desktop only),
 * so it deliberately has no keyframe animation — a running animation would
 * override the inline transform the script sets. */
.hero-frame {
	transition: transform .5s var(--ease);
	will-change: transform;
}

/* Floating card gently floats. No hover transform here: a running animation
 * outranks it in the cascade, so hover changes depth instead. */
.float-card {
	animation: asha-float 11s ease-in-out infinite;
	transition: box-shadow .45s var(--ease);
}

@keyframes asha-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(7px); }
}

.hero-media:hover .float-card {
	box-shadow: var(--shadow-lg);
}

.float-card .dot {
	transition: transform .5s var(--ease);
}

.hero-media:hover .float-card .dot {
	transform: rotate(-8deg) scale(1.08);
}

/* Leaf badge bobs on its own rhythm */
.leaf-badge {
	animation: asha-bob 8s ease-in-out infinite;
	transition: box-shadow .4s var(--ease);
}

@keyframes asha-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

.hero-media:hover .leaf-badge {
	box-shadow: var(--shadow-md);
}

/* Trust chips lift + icon pops */
.trust-chips span {
	transition: transform .3s var(--ease), color .3s;
	cursor: default;
}

.trust-chips span:hover {
	transform: translateY(-2px);
	color: var(--ink);
}

.trust-chips svg {
	transition: transform .35s var(--ease);
}

.trust-chips span:hover svg {
	transform: scale(1.22) rotate(-6deg);
}

/* Word-by-word heading reveal (markup is built by main.js).
 * Each word sits in a masked wrapper (.aw) and rises into view (.aw-i).
 * The padding/negative-margin pair gives descenders (p, g, y) room so the
 * mask never clips them. */
[data-split-words] .aw {
	display: inline-block;
	overflow: hidden;
	padding-bottom: .14em;
	margin-bottom: -.14em;
	vertical-align: baseline;
}

[data-split-words].is-split .aw-i {
	display: inline-block;
	transform: translateY(115%);
	opacity: 0;
	animation: asha-word .85s var(--ease) forwards;
	will-change: transform, opacity;
}

@keyframes asha-word {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* The "hope" underline draws itself once that word has landed. main.js sets
 * --hope-delay from the word's real position; the fallback covers the case
 * where the script hasn't run yet. */
.hero h1 .hope::after {
	transform-origin: left center;
	animation: asha-underline 1s var(--ease) var(--hope-delay, 1.15s) both;
}

@keyframes asha-underline {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* =========================================================================
 *  4. SECTION HEADS — eyebrow rule draws in when revealed
 * ====================================================================== */
.eyebrow::before {
	transform-origin: left center;
	transition: transform .6s var(--ease) .15s;
}

.reveal .eyebrow::before,
.reveal.eyebrow::before,
.reveal-up .eyebrow::before,
.reveal-down .eyebrow::before,
.reveal-left .eyebrow::before,
.reveal-right .eyebrow::before,
.reveal-scale .eyebrow::before {
	transform: scaleX(0);
}

.reveal.in .eyebrow::before,
.reveal.in.eyebrow::before,
.reveal-up.in .eyebrow::before,
.reveal-down.in .eyebrow::before,
.reveal-left.in .eyebrow::before,
.reveal-right.in .eyebrow::before,
.reveal-scale.in .eyebrow::before {
	transform: scaleX(1);
}

/* =========================================================================
 *  5. CONDITION CARDS — sheen, icon lift, title shift
 * ====================================================================== */
.card::after {
	content: "";
	position: absolute;
	top: 0;
	left: -140%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(37, 169, 188, .10),
		transparent
	);
	transform: skewX(-16deg);
	transition: left .85s var(--ease);
	pointer-events: none;
}

.card:hover::after {
	left: 140%;
}

.card .cic {
	transition: background .4s, color .4s, transform .45s var(--ease);
}

.card:hover .cic {
	transform: translateY(-3px) rotate(-5deg) scale(1.06);
}

.card h3 {
	transition: color .35s var(--ease);
}

.card:hover h3 {
	color: var(--teal-deep);
}

/* =========================================================================
 *  6. SERVICES — number slides, panel warms
 * ====================================================================== */
.svc-item {
	position: relative;
	overflow: hidden;
}

.svc-num {
	transition: transform .4s var(--ease), letter-spacing .4s var(--ease);
	display: inline-block;
}

.svc-item:hover .svc-num {
	transform: translateX(4px);
	letter-spacing: .09em;
}

.svc-item h3 {
	transition: color .35s var(--ease);
}

.svc-item:hover h3 {
	color: var(--teal-deep);
}

/* Accent bar grows along the bottom */
.svc-item::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, var(--teal), var(--brand));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s var(--ease);
}

.svc-item:hover::before {
	transform: scaleX(1);
}

/* =========================================================================
 *  7. PROCESS STEPS — number pops
 * ====================================================================== */
.step .n {
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.step:hover .n {
	transform: scale(1.1) rotate(-6deg);
	box-shadow: 0 10px 22px -8px rgba(37, 169, 188, .75);
}

.step h3 {
	transition: color .35s var(--ease);
}

.step:hover h3 {
	color: var(--teal-deep);
}

/* =========================================================================
 *  8. PROMISE LIST — icon tiles
 * ====================================================================== */
.promise-list li .ic {
	transition: transform .4s var(--ease), background .4s, color .4s;
}

.promise-list li:hover .ic {
	transform: translateY(-2px) scale(1.08);
	background: var(--teal);
	color: #fff;
}

/* =========================================================================
 *  9. ABOUT — image zoom, tag lift
 * ====================================================================== */
.about-img {
	overflow: hidden;
	border-radius: var(--r);
}

.about-img img {
	transition: transform 1.1s var(--ease);
	will-change: transform;
}

.about-img:hover img {
	transform: scale(1.04);
}

.about-img .tag {
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.about-img:hover .tag {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.about-body .sig > div {
	transition: transform .35s var(--ease);
}

.about-body .sig > div:hover {
	transform: translateY(-3px);
}

/* =========================================================================
 *  10. FAQ — lift on hover, chevron nudge
 * ====================================================================== */
.faq {
	transition: box-shadow .3s, border-color .3s, transform .35s var(--ease);
}

.faq:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
	border-color: rgba(37, 169, 188, .35);
}

.faq summary:hover .chev {
	background: var(--teal);
	color: #fff;
}

.faq summary {
	transition: color .3s;
}

.faq summary:hover {
	color: var(--teal-deep);
}

/* =========================================================================
 *  11. CTA BAND — slow Ken Burns drift on the background
 * ====================================================================== */
.cta-band .bg img {
	animation: asha-kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes asha-kenburns {
	from { transform: scale(1) translateY(0); }
	to   { transform: scale(1.07) translateY(-10px); }
}

/* =========================================================================
 *  12. FOOTER — links slide, socials spin gently
 * ====================================================================== */
.foot-col a {
	transition: color .25s, transform .3s var(--ease);
}

.foot-col a:hover {
	transform: translateX(4px);
}

.socials a svg {
	transition: transform .4s var(--ease);
}

.socials a:hover svg {
	transform: scale(1.12);
}

.crisis {
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.crisis:hover {
	transform: translateY(-2px);
}

/* =========================================================================
 *  13. BLOG / INNER PAGES — card media zoom
 * ====================================================================== */
.post-card .thumb img {
	transition: transform 1s var(--ease);
}

.post-card:hover .thumb img {
	transform: scale(1.06);
}

.post-card h2 a,
.post-card h3 a {
	transition: color .3s;
}

.post-card:hover h2 a,
.post-card:hover h3 a {
	color: var(--teal-deep);
}

.post-card .readmore {
	transition: transform .3s var(--ease);
	display: inline-block;
}

.post-card:hover .readmore {
	transform: translateX(4px);
}

/* =========================================================================
 *  14. REVEAL DIRECTIONS
 *  Add any of these classes to an element and main.js will reveal it on scroll
 *  (it adds .in when the element enters the viewport). Combine with .d1–.d5 to
 *  stagger. main.css already ships .reveal (fade-up); these are the extras.
 *
 *    .reveal-up     fade + rise from below   (same feel as .reveal)
 *    .reveal-down   fade + settle from above
 *    .reveal-left   fade in from the left
 *    .reveal-right  fade in from the right
 *    .reveal-scale  fade + gentle zoom in
 * ====================================================================== */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale {
	opacity: 0;
	transition: opacity .75s var(--ease), transform .75s var(--ease);
	will-change: opacity, transform;
}

.reveal-up    { transform: translateY(28px); }
.reveal-down  { transform: translateY(-28px); }
.reveal-left  { transform: translateX(-34px); }
.reveal-right { transform: translateX(34px); }
.reveal-scale { transform: scale(.94); }

.reveal-up.in,
.reveal-down.in,
.reveal-left.in,
.reveal-right.in,
.reveal-scale.in {
	opacity: 1;
	transform: none;
}

/* Stagger delays for the variants (main.css defines these for .reveal only). */
.reveal-up.d1, .reveal-down.d1, .reveal-left.d1, .reveal-right.d1, .reveal-scale.d1 { transition-delay: .08s; }
.reveal-up.d2, .reveal-down.d2, .reveal-left.d2, .reveal-right.d2, .reveal-scale.d2 { transition-delay: .16s; }
.reveal-up.d3, .reveal-down.d3, .reveal-left.d3, .reveal-right.d3, .reveal-scale.d3 { transition-delay: .24s; }
.reveal-up.d4, .reveal-down.d4, .reveal-left.d4, .reveal-right.d4, .reveal-scale.d4 { transition-delay: .32s; }
.reveal-up.d5, .reveal-down.d5, .reveal-left.d5, .reveal-right.d5, .reveal-scale.d5 { transition-delay: .4s; }

/* =========================================================================
 *  15. ACCESSIBILITY — honour reduced motion
 *  Kills every ambient animation and movement added above. Colour/shadow
 *  feedback on hover remains, so the UI still responds.
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {

	.hero-frame,
	.float-card,
	.leaf-badge,
	.cta-band .bg img,
	.hero h1 .hope::after,
	[data-split-words] .aw-i {
		animation: none !important;
	}

	/* Words are never split when reduced motion is on, but if the class ever
	 * lands (e.g. the setting changes after load) keep them fully visible. */
	[data-split-words] .aw-i {
		transform: none !important;
		opacity: 1 !important;
	}

	[data-split-words] .aw {
		overflow: visible !important;
	}

	.btn::after,
	.card::after {
		display: none !important;
	}

	.scroll-progress {
		display: none !important;
	}

	.btn:hover svg,
	.brand:hover,
	.trust-chips span:hover,
	.trust-chips span:hover svg,
	.card:hover .cic,
	.svc-item:hover .svc-num,
	.step:hover .n,
	.promise-list li:hover .ic,
	.hero-media:hover .hero-frame img,
	.about-img:hover img,
	.about-img:hover .tag,
	.about-body .sig > div:hover,
	.faq:hover,
	.foot-col a:hover,
	.socials a:hover svg,
	.crisis:hover,
	.post-card:hover .thumb img,
	.post-card:hover .readmore,
	.hero-media:hover .float-card,
	.hero-media:hover .float-card .dot {
		transform: none !important;
	}

	.eyebrow::before,
	.reveal.in .eyebrow::before,
	.reveal-up,
	.reveal-down,
	.reveal-left,
	.reveal-right,
	.reveal-scale {
		transform: none !important;
		opacity: 1 !important;
	}

	.svc-item::before {
		transform: scaleX(1) !important;
	}
}