/* ============================================================================
 * PK Peptides — Animations & interactions
 * Tasteful, clinical, performant. Transform/opacity only (no layout shift).
 * All motion is gated behind `.pk-js` (added by an inline head script) so no-JS
 * users never see hidden content, and fully disabled under prefers-reduced-motion.
 * ========================================================================== */

/* ---------- Scroll reveal --------------------------------------------------
 * pk-reveal      : fade + gentle rise (safe on white / inside bands)
 * pk-reveal-soft : fade only (use on full-bleed colored bands to avoid flicker)
 * pk-stagger     : container whose direct children rise in sequence
 * ------------------------------------------------------------------------- */
.pk-js .pk-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: opacity, transform;
}
.pk-js .pk-reveal.is-visible { opacity: 1; transform: none; }

.pk-js .pk-reveal-soft {
	opacity: 0;
	transition: opacity 0.7s ease;
	will-change: opacity;
}
.pk-js .pk-reveal-soft.is-visible { opacity: 1; }

.pk-js .pk-stagger > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pk-js .pk-stagger.is-visible > * { opacity: 1; transform: none; }
.pk-stagger.is-visible > :nth-child(2) { transition-delay: 0.08s; }
.pk-stagger.is-visible > :nth-child(3) { transition-delay: 0.16s; }
.pk-stagger.is-visible > :nth-child(4) { transition-delay: 0.24s; }
.pk-stagger.is-visible > :nth-child(5) { transition-delay: 0.32s; }
.pk-stagger.is-visible > :nth-child(6) { transition-delay: 0.40s; }

/* ---------- Hero ----------------------------------------------------------- */
/* Sequential entrance for the hero copy on load. */
.pk-js .pk-hero .wp-block-cover__inner-container > .wp-block-group > * {
	opacity: 0;
	animation: pk-hero-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.pk-js .pk-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(1) { animation-delay: 0.10s; }
.pk-js .pk-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(2) { animation-delay: 0.22s; }
.pk-js .pk-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(3) { animation-delay: 0.34s; }
.pk-js .pk-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(4) { animation-delay: 0.44s; }
.pk-js .pk-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(5) { animation-delay: 0.54s; }
.pk-js .pk-hero .wp-block-cover__inner-container > .wp-block-group > :nth-child(6) { animation-delay: 0.64s; }
@keyframes pk-hero-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Very subtle one-shot "settle" on the hero photo at load (understated, no
 * continuous CPU use). Gentle zoom-out that holds its final frame. */
.pk-hero .wp-block-cover__image-background {
	animation: pk-kenburns 6s ease-out both;
	transform-origin: 60% 50%;
}
@keyframes pk-kenburns {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

/* Hero feature list: gentle stagger after the copy. */
.pk-js .pk-hero__features li { opacity: 0; animation: pk-hero-in 0.6s ease forwards; }
.pk-js .pk-hero__features li:nth-child(1) { animation-delay: 0.70s; }
.pk-js .pk-hero__features li:nth-child(2) { animation-delay: 0.78s; }
.pk-js .pk-hero__features li:nth-child(3) { animation-delay: 0.86s; }
.pk-js .pk-hero__features li:nth-child(4) { animation-delay: 0.94s; }

/* ---------- Trust / feature row ------------------------------------------- */
.pk-trust .wp-block-column {
	transition: transform 0.2s ease;
	border-radius: 10px;
}
.pk-trust .wp-block-column svg {
	transition: transform 0.25s ease;
}
.pk-trust .wp-block-column:hover { transform: translateY(-4px); }
.pk-trust .wp-block-column:hover svg { transform: scale(1.12); }

/* ---------- Cards (quality + any .pk-card) -------------------------------- */
/* Base lift/shadow lives in brand.css; here we add a teal accent on hover. */
.pk-card { position: relative; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.pk-card::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: var(--pk-teal, #2C7A7B);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease;
}
.pk-card:hover { border-color: var(--pk-teal, #2C7A7B) !important; }
.pk-card:hover::after,
.pk-card:focus-within::after { transform: scaleX(1); }
.pk-card .pk-card__icon { transition: transform 0.25s ease; }
.pk-card:hover .pk-card__icon { transform: translateY(-2px); }

/* ---------- Animated <details> (cards + FAQ) ------------------------------ */
/* JS wraps the body in .pk-acc__panel and animates its height. */
.pk-acc__panel { overflow: hidden; transition: height 0.28s ease; }
.wp-block-details > summary { transition: color 0.15s ease; }

/* ---------- Sticky header ------------------------------------------------- */
/* The template-part wrapper is collapsed so the inner <header> can stick to the
 * viewport (a short wrapper would otherwise trap a sticky child). */
.wp-block-template-part:has(> .pk-site-header) { display: contents; }
.pk-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: padding 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
	-webkit-backdrop-filter: saturate(180%) blur(6px);
	backdrop-filter: saturate(180%) blur(6px);
}
.pk-site-header.is-scrolled {
	padding-top: var(--wp--preset--spacing--20) !important;
	padding-bottom: var(--wp--preset--spacing--20) !important;
	box-shadow: 0 4px 18px rgba(27, 31, 36, 0.10);
}
/* Shrink the logo slightly when the header is condensed. */
.pk-site-header.is-scrolled .custom-logo,
.pk-site-header.is-scrolled .wp-block-site-logo img { height: 46px; transition: height 0.22s ease; }

/* ---------- Buttons / links micro-interactions ---------------------------- */
.wp-block-button__link {
	transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(30, 58, 95, 0.20);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	transform: translateY(-1px);
}
/* Content links: subtle underline-offset shift on hover. */
.wp-block-group a:where(:not(.wp-block-button__link)) {
	transition: color 0.15s ease, text-underline-offset 0.15s ease;
}
.wp-block-group a:where(:not(.wp-block-button__link)):hover {
	text-underline-offset: 3px;
}

/* ---------- Smooth in-page scrolling -------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* ============================================================================
 * Reduced motion: disable/severely reduce everything. Content always visible.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.pk-js .pk-reveal,
	.pk-js .pk-reveal-soft,
	.pk-js .pk-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.pk-js .pk-hero .wp-block-cover__inner-container > .wp-block-group > *,
	.pk-js .pk-hero__features li {
		opacity: 1 !important;
		animation: none !important;
	}
	.pk-hero .wp-block-cover__image-background { animation: none !important; }
	.pk-acc__panel { transition: none !important; }
	.pk-site-header { transition: none !important; }
	.wp-block-button__link,
	.pk-trust .wp-block-column,
	.pk-trust .wp-block-column svg,
	.pk-card,
	.pk-card::after,
	.pk-card .pk-card__icon { transition: none !important; }
	/* keep hover lifts off too, to honor the preference */
	.pk-trust .wp-block-column:hover,
	.pk-card:hover,
	.wp-block-button__link:hover { transform: none !important; }
}