/**
 * Button hover effect — per-character "flip up" on hover.
 * Inspired by the jeton.com sign-up button.
 *
 * Apply the class `prilinq-flip` to any button/link:
 *   - Theme buttons:      <a class="prilinq-button prilinq-flip">
 *   - Elementor buttons:  add `prilinq-flip` in Advanced → CSS Classes
 *
 * The DOM (per-character spans + a clone layer) is built at runtime by
 * assets/js/hover-fx.js, which also resolves the correct text element for
 * both theme and Elementor markup. This file only styles that structure.
 *
 * @package Prilinq
 */

/* Clip container that JS injects around the label text. */
.prilinq-flip__label {
	display: inline-block;
	position: relative;
	overflow: hidden;
	line-height: 1.25;
	white-space: nowrap;
	vertical-align: bottom;
}

/* Each character is an independent, transformable box. */
.prilinq-flip__c {
	display: inline-block;
	will-change: transform;
}

/* Preserve inter-word spacing (empty inline-block would collapse). */
.prilinq-flip__c.is-space {
	width: 0.28em;
}

/* The clone layer sits exactly over the original, pushed just below the clip. */
.prilinq-flip__clone {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.prilinq-flip__clone .prilinq-flip__c {
	transform: translateY(110%) rotate(20deg);
}

/* Animate only on real pointers so touch devices keep the label static. */
@media (hover: hover) and (pointer: fine) {
	.prilinq-flip__host:hover .prilinq-flip__text .prilinq-flip__c {
		transform: translateY(-110%);
		transition: transform 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53) calc(7ms * var(--i, 0));
	}

	.prilinq-flip__host:hover .prilinq-flip__clone .prilinq-flip__c {
		transform: translateY(0) rotate(0deg);
		transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) calc(0.12s + 7ms * var(--i, 0));
	}
}

/* Respect reduced-motion: no slide, just show the static label. */
@media (prefers-reduced-motion: reduce) {
	.prilinq-flip__host:hover .prilinq-flip__text .prilinq-flip__c,
	.prilinq-flip__host:hover .prilinq-flip__clone .prilinq-flip__c {
		transition: none;
	}
}