/*
 * Homepage hero — "Start prototyping" CTA injected next to "Get project
 * estimate". See srini-child/inc/homepage-front-cta.php for the runtime
 * injection logic.
 *
 * Visual effects mirror the Microsoft Teams Chat AI floating button at the
 * bottom-right of the site (srini-ai-chatbox plugin) so the button reads
 * as part of the same Platform8 / AI visual language:
 *
 *   1. 135° violet→indigo gradient (matches .tcp-toggle-btn base)
 *   2. Slow-rotating conic shine overlay via ::before
 *   3. Pulsing box-shadow ring every 2.4s (auto-pause when reduced motion)
 *   4. Bouncy cubic-bezier transform on hover, scale-down on :active
 *
 * Parent source: srini/assets/stylesheets/components/_buttons.scss
 *   The base .c-btn has a black background. We replace it with the
 *   gradient and add the layered overlay/animation effects on top.
 */

/* Make sure the hero tools row wraps cleanly when two buttons don't fit
 * side-by-side. The parent has a single button there so wrap isn't set. */
.c-hero__tools {
	flex-wrap: wrap;
	gap: 0.75rem;
}

.c-btn--platform8 {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(135deg, #6d4ef7 0%, #8c73fa 100%);
	color: #fff;
	border: 0;
	box-shadow: 0 10px 26px -8px rgba(109, 78, 247, 0.55),
		0 4px 10px -2px rgba(109, 78, 247, 0.3);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.2s ease,
		filter 0.2s ease;
	animation: c-btn--platform8-pulse 2.4s ease-in-out infinite;
}

/* Rotating conic-gradient shine — sits behind the label but in front of
 * the gradient base via z-index ordering inside the isolated stack. */
.c-btn--platform8::before {
	content: '';
	position: absolute;
	inset: -60%;
	z-index: -1;
	background: conic-gradient(
		from 0deg,
		transparent 70%,
		rgba(255, 255, 255, 0.18) 80%,
		transparent 90%
	);
	animation: c-btn--platform8-shine 6s linear infinite;
	pointer-events: none;
}

.c-btn--platform8:hover,
.c-btn--platform8:focus-visible {
	background: linear-gradient(135deg, #6d4ef7 0%, #8c73fa 100%);
	color: #fff;
	transform: scale(1.04) translateY(-1px);
	box-shadow: 0 16px 36px -8px rgba(109, 78, 247, 0.7),
		0 6px 14px -2px rgba(109, 78, 247, 0.4);
	filter: brightness(1.06);
	outline: none;
	/* Pause the pulse on hover so the bigger hover shadow doesn't compete
	 * with the pulsing ring — same trick the chat-widget button uses. */
	animation-play-state: paused;
}

.c-btn--platform8:active {
	transform: scale(0.97);
}

.c-btn--platform8__icon {
	flex-shrink: 0;
	color: #fff;
}

@keyframes c-btn--platform8-pulse {
	0%, 100% {
		box-shadow: 0 10px 26px -8px rgba(109, 78, 247, 0.55),
			0 4px 10px -2px rgba(109, 78, 247, 0.3);
	}
	50% {
		box-shadow: 0 0 0 12px rgba(109, 78, 247, 0.16),
			0 12px 30px -4px rgba(109, 78, 247, 0.55);
	}
}

@keyframes c-btn--platform8-shine {
	to { transform: rotate(360deg); }
}

/* Respect users who've opted out of motion — drop the rotation and the
 * pulse but keep the static gradient + hover transform (single discrete
 * state change is fine under reduced-motion guidance). */
@media (prefers-reduced-motion: reduce) {
	.c-btn--platform8 { animation: none; }
	.c-btn--platform8::before { animation: none; }
}

@media (max-width: 720px) {
	.c-btn--platform8 {
		box-shadow: 0 8px 20px -10px rgba(109, 78, 247, 0.5);
	}
}