/* Kestra — motion and interaction.
   Everything here is CSS-only. base.css already collapses all animation/
   transition durations to near-zero under prefers-reduced-motion, so this
   file doesn't need its own reduced-motion guards except where a near-zero
   duration would still look wrong (the infinite marquee, flagged below). */

/* animated underline on inline links — replaces the static underline
   theme.json now leaves off (styles.elements.link.typography.textDecoration) */

a {
	background-image: linear-gradient( currentColor, currentColor );
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size 0.25s ease;
	text-decoration: none;
	padding-bottom: 0.05em;
}

a:hover,
a:focus-visible {
	background-size: 100% 2px;
}

:is( h1, h2, h3, h4, h5, h6 ) a,
.wp-block-button__link,
.wp-block-navigation-item__content,
.kk-category-tile,
.wp-block-post-title a,
.kk-nav a,
.wp-block-site-title a,
.kk-header .wp-block-woocommerce-customer-account a {
	background-image: none;
	padding-bottom: 0;
}

/* buttons: lift + shadow on hover, press down on click */

.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY( -2px );
	box-shadow: var( --wp--custom--shadow--raised );
}

.wp-block-button__link:active {
	transform: translateY( 0 ) scale( 0.98 );
}

/* cards: lift on hover */

.is-style-card.wp-block-group {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.is-style-card.wp-block-group:hover {
	transform: translateY( -4px );
	box-shadow: var( --wp--custom--shadow--raised );
}

/* images: subtle zoom on hover, clipped to the frame */

.wp-block-post-featured-image,
.kk-portfolio-grid figure,
.kk-team-member figure,
.kk-image-pair figure,
.is-style-framed {
	overflow: hidden;
}

.wp-block-post-featured-image img,
.kk-portfolio-grid img,
.kk-team-member img,
.kk-image-pair img,
.is-style-framed img {
	transition: transform 0.5s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.wp-block-post-featured-image:hover img,
.kk-portfolio-grid figure:hover img,
.kk-team-member:hover img,
.kk-image-pair figure:hover img,
.is-style-framed:hover img {
	transform: scale( 1.05 );
}

.kk-category-tile:hover img {
	transform: scale( 1.05 );
}

/* hero entrance: rise on load.
   Deliberately does NOT animate opacity: this rule covers the hero copy, which
   is the LCP element on the front page. Fading in from opacity 0 (with fill
   mode `both`, so it applies before the animation even starts) withholds the
   largest text paint and measured ~1.8s of LCP render delay. Transform-only
   keeps the motion and paints the text immediately. */

@keyframes kk-rise-in {
	from {
		transform: translateY( 18px );
	}
	to {
		transform: translateY( 0 );
	}
}

.kk-section--hero h1,
.kk-section--hero > .kk-section__inner > p,
.kk-section--hero .kk-hero__copy > *,
.kk-section--hero .wp-block-buttons,
.wp-block-cover__inner-container > * {
	animation: kk-rise-in 0.7s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

.kk-section--hero .kk-hero__copy > *:nth-child( 2 ),
.wp-block-cover__inner-container > *:nth-child( 2 ) {
	animation-delay: 0.08s;
}

.kk-section--hero .kk-hero__copy > *:nth-child( 3 ),
.wp-block-cover__inner-container > *:nth-child( 3 ) {
	animation-delay: 0.16s;
}

.kk-section--hero .kk-hero__copy > *:nth-child( 4 ),
.wp-block-cover__inner-container > *:nth-child( 4 ) {
	animation-delay: 0.24s;
}

/* infinite marquee: the global reduced-motion rule collapses this to a
   near-zero-duration loop, which would flash rather than sit still — pause
   it outright instead. */

@media ( prefers-reduced-motion: reduce ) {
	.kk-marquee__track {
		animation: none;
	}
}