/*
 * Conversion motion layer inspired by high-performing long-form landing pages.
 * It keeps VivaGift's restrained navy/yellow identity and respects reduced motion.
 */

.bgn-button.bgn-cta-enhanced {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	will-change: transform;
	transition: color .32s ease, background-color .32s ease, border-color .32s ease, box-shadow .32s ease, transform .22s var(--bgn-ease);
}

.bgn-button.bgn-cta-enhanced::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, #ffe37c 0%, var(--bgn-yellow) 48%, #ffb800 100%);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .44s var(--bgn-ease);
	content: "";
}

.bgn-button--secondary.bgn-cta-enhanced::before {
	background: linear-gradient(105deg, #fff 0%, var(--bgn-ice) 52%, #dff2fb 100%);
}

.bgn-button--ghost.bgn-cta-enhanced::before {
	background: rgba(255, 255, 255, .12);
}

.bgn-button.bgn-cta-enhanced::after {
	position: absolute;
	top: -45%;
	bottom: -45%;
	left: -34%;
	width: 22%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
	transform: translate3d(-230%, 0, 0) rotate(14deg);
	pointer-events: none;
	content: "";
}

.bgn-button.bgn-cta-enhanced:hover::before,
.bgn-button.bgn-cta-enhanced:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

.bgn-button.bgn-cta-enhanced > svg,
.bgn-button.bgn-cta-enhanced > span {
	position: relative;
	z-index: 1;
}

.bgn-button.bgn-cta-enhanced.is-bgn-cta-visible::after {
	animation: bgn-cta-sheen .9s .16s var(--bgn-ease) both;
}

.bgn-button.bgn-cta-enhanced.is-bgn-cta-visible .bgn-button__icon {
	animation: bgn-cta-arrow-cue .72s .26s var(--bgn-ease) both;
}

.bgn-button.bgn-cta-enhanced:active {
	transform: translateY(1px) scale(.985);
}

@keyframes bgn-cta-sheen {
	0% { transform: translate3d(-230%, 0, 0) rotate(14deg); }
	100% { transform: translate3d(760%, 0, 0) rotate(14deg); }
}

@keyframes bgn-cta-arrow-cue {
	0%, 100% { transform: translateX(0); }
	45% { transform: translateX(6px); }
}

/* Reuse editable hero proof fields as a lightweight conversion ticker. */
.bgn-hero .bgn-hero-ticker {
	position: absolute;
	z-index: 4;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	border-top: 1px solid rgba(4, 76, 132, .12);
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 -12px 34px rgba(4, 76, 132, .05);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	pointer-events: none;
}

.bgn-hero .bgn-hero-ticker__track {
	display: flex;
	width: max-content;
	animation: bgn-hero-ticker 28s linear infinite;
}

.bgn-hero .bgn-hero-ticker__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: max-content;
}

.bgn-hero .bgn-hero-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding-inline: 25px;
	color: var(--bgn-navy);
	font-size: .79rem;
	font-weight: 750;
	letter-spacing: .045em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bgn-hero .bgn-hero-ticker__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bgn-yellow);
	box-shadow: 0 0 0 4px rgba(254, 201, 49, .16);
}

@keyframes bgn-hero-ticker {
	to { transform: translate3d(-50%, 0, 0); }
}

/* Pointer-driven depth: a short interaction, never an autonomous loop. */
@media (min-width: 1025px) and (pointer: fine) {
	.bgn-hero .bgn-hero__visual.is-bgn-depth-ready .bgn-hero__product {
		transform: translate3d(var(--bgn-depth-x, 0), var(--bgn-depth-y, 0), 0);
		transition: transform .32s var(--bgn-ease);
	}

	.bgn-hero .bgn-hero__visual.is-bgn-depth-ready .bgn-hero__diamond--outline-one {
		transform: translate3d(var(--bgn-depth-back-x, 0), var(--bgn-depth-back-y, 0), 0);
		transition: transform .42s var(--bgn-ease);
	}

	.bgn-hero .bgn-hero__visual.is-bgn-depth-ready .bgn-hero__diamond--outline-two,
	.bgn-hero .bgn-hero__visual.is-bgn-depth-ready .bgn-hero__diamond--yellow {
		transform: translate3d(var(--bgn-depth-far-x, 0), var(--bgn-depth-far-y, 0), 0);
		transition: transform .5s var(--bgn-ease);
	}

	.bgn-hero .bgn-hero__visual.is-bgn-depth-ready:hover .bgn-hero__image {
		transform: none;
	}
}

/* Make the existing conversion dock behave like a purposeful mobile landing-page CTA. */
.bgn-mobile-actions.is-bgn-cta-ready .bgn-mobile-actions__item--quote {
	position: relative;
	isolation: isolate;
}

.bgn-mobile-actions.is-bgn-cta-ready .bgn-mobile-actions__item--quote::after {
	position: absolute;
	inset: 2px;
	border: 2px solid rgba(254, 201, 49, .8);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	content: "";
	animation: bgn-dock-cta-cue 5.8s 1.4s ease-out infinite;
}

@keyframes bgn-dock-cta-cue {
	0%, 72%, 100% { opacity: 0; transform: scale(1); }
	78% { opacity: .7; }
	90% { opacity: 0; transform: scale(1.12, 1.22); }
}

@media (max-width: 767px) {
	.bgn-hero {
		padding-bottom: 82px;
	}

	.bgn-hero .bgn-hero-ticker {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.bgn-hero .bgn-hero-ticker__track {
		animation-duration: 34s;
	}

	.bgn-hero .bgn-hero-ticker__item {
		min-height: 44px;
		padding-inline: 18px;
		font-size: .7rem;
	}

	.bgn-hero .bgn-hero__actions {
		gap: 10px;
	}

	.bgn-hero .bgn-hero__actions .bgn-button--primary {
		min-height: 56px;
		box-shadow: 0 12px 26px rgba(254, 201, 49, .24);
	}

	.bgn-hero .bgn-hero__actions .bgn-button--secondary {
		min-height: 50px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bgn-button.bgn-cta-enhanced::before,
	.bgn-button.bgn-cta-enhanced::after,
	.bgn-button.bgn-cta-enhanced .bgn-button__icon,
	.bgn-hero .bgn-hero__visual,
	.bgn-hero .bgn-hero__product,
	.bgn-hero .bgn-hero__diamond {
		animation: none !important;
		transition: none !important;
	}

	/* Keep only the explicit conversion cues, at a slower pace. */
	.bgn-button.bgn-cta-enhanced.is-bgn-cta-visible::after {
		animation: bgn-cta-sheen .9s .16s var(--bgn-ease) 1 both !important;
	}

	.bgn-button.bgn-cta-enhanced.is-bgn-cta-visible .bgn-button__icon {
		animation: bgn-cta-arrow-cue .72s .26s var(--bgn-ease) 1 both !important;
	}

	.bgn-hero .bgn-hero-ticker__track {
		animation: bgn-hero-ticker 44s linear infinite !important;
	}

	.bgn-mobile-actions.is-bgn-cta-ready .bgn-mobile-actions__item--quote::after {
		animation: bgn-dock-cta-cue 7.6s 1.8s ease-out infinite !important;
	}
}