/* ==========================================================================
   Motion — only active when <html> has .kb-motion
   (set in <head>, skipped for prefers-reduced-motion, never in the editor)
   ========================================================================== */

/* --- Hero entrance: one orchestrated sequence on page load --------------- */
@keyframes kb-rise   { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes kb-settle { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes kb-wave   { from { transform: translate3d(0, 40%, 0); } to { transform: none; } }
@keyframes kb-sway   { 0% { transform: rotate(-10deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(0); opacity: 1; } }
@keyframes kb-draw   { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }

.kb-motion .kb-hero > .kb-hero__media img { animation: kb-settle 2.4s cubic-bezier(.2, .6, .2, 1) both; }
.kb-motion .kb-hero::after                { animation: kb-wave 1.4s .2s cubic-bezier(.2, .7, .2, 1) both; }
.kb-motion .kb-hero__content > *          { animation: kb-rise 1s cubic-bezier(.2, .7, .2, 1) both; }
.kb-motion .kb-hero__content > :nth-child(1) { animation-delay: .25s; }
.kb-motion .kb-hero__content > :nth-child(2) { animation-delay: .55s; }
.kb-motion .kb-hero__content > :nth-child(3) { animation-delay: .75s; }
.kb-motion .kb-hero__content > :nth-child(4) { animation-delay: .95s; }
.kb-motion .kb-hero h1 em { display: block; animation: kb-rise 1.1s .5s cubic-bezier(.2, .7, .2, 1) both; }

.kb-motion .kb-wordmark__mark { transform-origin: 10% 90%; animation: kb-sway 1.2s .1s ease-out both; }

/* --- Scroll reveal (JS adds .kb-reveal / .is-visible) --------------------- */
.kb-motion .kb-reveal {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity .9s cubic-bezier(.2, .7, .2, 1) var(--kb-delay, 0ms),
		transform .9s cubic-bezier(.2, .7, .2, 1) var(--kb-delay, 0ms);
}
.kb-motion .kb-reveal.is-visible { opacity: 1; transform: none; }

/* Leaf ornaments draw open / sway in when their section arrives */
.kb-motion .kb-intro-band::before { clip-path: inset(0 50% 0 50%); }
.kb-motion .kb-intro-band.is-inview::before { animation: kb-draw 1.2s cubic-bezier(.3, .7, .2, 1) both; }
.kb-motion .kb-cta::before { opacity: 0; transform-origin: 10% 90%; }
.kb-motion .kb-cta.is-inview::before { animation: kb-sway 1.2s ease-out both; }

/* --- Parallax (JS sets --kb-py) ----------------------------------------- */
.kb-motion .kb-hero > .kb-hero__media,
.kb-motion .kb-arch,
.kb-motion .kb-story .is-style-tilted-frame {
	transform: translate3d(0, var(--kb-py, 0px), 0);
	will-change: transform;
}

/* --- Responsive feedback on hover --------------------------------------- */
.kb-motion .wp-block-button__link {
	transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.kb-motion .wp-block-button__link:hover { transform: translateY(-2px); }

.kb-motion .kb-treat__card--featured { transition: transform .35s ease, box-shadow .35s ease; }
.kb-motion .kb-treat__card--featured:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(241, 108, 162, .16);
}