/* ========================================================================================
 * motion.css - reusable scroll-reveal and on-load pop-in classes (L2 layer).
 * Ported from docs/design-source/homepage-template.html's .cd-reveal (search ".cd-reveal",
 * ~line 415: scroll-driven fade/rise via animation-timeline:view()) and patients-template.
 * html's pt-pop keyframe (~line 410-440, 474-477: the For Patients hero collage's on-load
 * pop, and the "what can we help with" symptom cards' scroll-triggered pop with staggered
 * animation-range). One reusable system instead of two page-specific ones: .inview is the
 * fade/rise, .inview--pop is the pop variant, .pop-in is the on-load-only pop (no scroll
 * trigger, for above-the-fold hero art).
 *
 * Named .inview, not .reveal: the parent theme's framework.css already defines a class
 * literally named .reveal (an unrelated image-wipe hover effect: position:relative;
 * display:inline-flex;visibility:hidden;overflow:hidden, toggled by the parent's own JS).
 * Reusing that name collided outright - our .reveal elements inherited the parent's
 * visibility:hidden with nothing in this file overriding it (we only ever set
 * animation/opacity/transform, never display/visibility/position/overflow), so every
 * .reveal element stayed invisible regardless of scroll or JS state. Confirmed live: the
 * faculty accordion's <details> computed visibility:hidden, traced via document.styleSheets
 * to framework.css's .reveal rule. .inview does not collide with anything in the parent
 * theme's or plugins' CSS.
 *
 * Motion is ADDED to visible content, never a prerequisite for seeing it:
 *   - .inview/.inview--pop's pre-animation (dimmed/offset) state only ever applies inside
 *     @supports (animation-timeline:view()) (the scroll-driven CSS animation itself, which
 *     carries its own guaranteed end state via `both` fill mode) or under html.js-inview
 *     (site.js's initInview(), added only once an IntersectionObserver actually confirmed
 *     it can watch the element). No JS, no animation-timeline support, or `?nojs` all leave
 *     every .inview/.inview--pop element at its normal, fully visible layout state.
 *   - .pop-in plays unconditionally on load (like the design source's pt-pop, applied
 *     inline with no JS/@supports gate) since "hidden until scrolled into view" does not
 *     apply to it; `prefers-reduced-motion:reduce` still turns it off below.
 *
 * Stagger is by custom property only, never :nth-child (see the CLAUDE.md/implementer-
 * rules.md rule against positioning lazy-loaded content by :nth-child; the same rule
 * applies here so an element's position in a list never determines its delay/range):
 *   --inview-delay        animation-delay / transition-delay (default 0s)
 *   --inview-range-start  animation-range entry start, .inview/.inview--pop only (default 10%)
 *   --inview-range-end    animation-range cover end, .inview/.inview--pop only (default 26%)
 * ======================================================================================== */

@keyframes kit-inview-rise{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kit-inview-pop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
	/* --- primary path: native scroll-driven animation ------------------------------- */
	@supports (animation-timeline:view()){
		.inview,.inview--pop{
			animation:kit-inview-rise linear both;
			animation-timeline:view();
			animation-range:entry var(--inview-range-start,10%) cover var(--inview-range-end,26%);
			animation-delay:var(--inview-delay,0s);
		}
		.inview--pop{
			animation-name:kit-inview-pop;
			animation-duration:.8s;
			animation-timing-function:cubic-bezier(.22,.61,.36,1);
		}
	}

	/* --- fallback path: IntersectionObserver (site.js initInview()) ----------------- */
	@supports not (animation-timeline:view()){
		html.js-inview .inview:not(.is-inview){opacity:.35;transform:translateY(14px)}
		html.js-inview .inview--pop:not(.is-inview){opacity:0;transform:translateY(18px) scale(.94)}
		html.js-inview .inview.is-inview,
		html.js-inview .inview--pop.is-inview{
			opacity:1;transform:none;
			transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
			transition-delay:var(--inview-delay,0s);
		}
	}
}

/* --- pop-in: on-load pop, no scroll trigger (hero collages) ------------------------- */
.pop-in{
	animation:kit-inview-pop .8s cubic-bezier(.22,.61,.36,1) both;
	animation-delay:var(--inview-delay,0s);
}
@media (prefers-reduced-motion:reduce){
	.pop-in{animation:none}
}