/**
 * Waitlist CTA styles — glow, breathe, flash animations.
 *
 * Scoped under .ne-waitlist-* to avoid leaking into other components.
 *
 * @see Issue #887
 */

/* ─── Idle state — attention-grabbing glow pulse ─── */

.ne-waitlist-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ne-space-2);
	background: var(--ne-yellow, #e6a817);
	color: #000;
	border: 1px solid var(--ne-yellow, #e6a817);
	border-radius: var(--ne-radius-pill);
	padding: var(--ne-space-2) var(--ne-space-4);
	font-family: var(--ne-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	min-height: 36px;
	white-space: nowrap;
	flex: 0 0 auto;
	position: relative;
	overflow: hidden;
	transition:
		background var(--ne-duration) var(--ne-ease),
		color var(--ne-duration) var(--ne-ease),
		border-color var(--ne-duration) var(--ne-ease),
		box-shadow var(--ne-duration) var(--ne-ease);
	animation: ne-waitlist-glow 2.4s var(--ne-ease) infinite;
}

@keyframes ne-waitlist-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(230, 168, 23, 0.4); }
	50%      { box-shadow: 0 0 0 6px rgba(230, 168, 23, 0); }
}

.ne-waitlist-cta:hover {
	background: #d49a15;
	border-color: #d49a15;
}

.ne-waitlist-cta:focus-visible {
	outline: 2px solid var(--ne-accent);
	outline-offset: 2px;
}

/* ─── Active state — subtle breathing (already on waitlist) ─── */

.ne-waitlist-cta[data-on-waitlist="1"] {
	background: rgba(139, 127, 232, 0.12);
	color: var(--ne-accent);
	border-color: var(--ne-accent);
	animation: ne-waitlist-breathe 3s ease-in-out infinite;
}

@keyframes ne-waitlist-breathe {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.75; }
}

.ne-waitlist-cta[data-on-waitlist="1"]:hover {
	background: rgba(255, 79, 79, 0.15);
	color: var(--ne-red);
	border-color: var(--ne-red);
	animation: none;
}

/* ─── Icon transition (bell <-> check morph) ─── */

.ne-waitlist-cta__icon {
	position: relative;
	width: 14px;
	height: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ne-waitlist-cta__icon-bell,
.ne-waitlist-cta__icon-check {
	position: absolute;
	transition: opacity 0.3s var(--ne-ease), transform 0.3s var(--ne-ease);
	font-size: 0.75rem;
}

/* Idle: bell visible, check hidden */
.ne-waitlist-cta__icon-check {
	opacity: 0;
	transform: scale(0.5) rotate(-90deg);
}

/* Active: check visible, bell hidden */
.ne-waitlist-cta[data-on-waitlist="1"] .ne-waitlist-cta__icon-bell {
	opacity: 0;
	transform: scale(0.5) rotate(90deg);
}
.ne-waitlist-cta[data-on-waitlist="1"] .ne-waitlist-cta__icon-check {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* ─── Join success — one-shot flash (600ms) ─── */

.ne-waitlist-cta.is-joining {
	animation: ne-waitlist-flash 0.6s ease-out;
}

@keyframes ne-waitlist-flash {
	0%   { box-shadow: 0 0 0 0 rgba(139, 127, 232, 0.7); }
	50%  { box-shadow: 0 0 20px 8px rgba(139, 127, 232, 0.3); background: rgba(139, 127, 232, 0.2); }
	100% { box-shadow: 0 0 0 0 rgba(139, 127, 232, 0); }
}

/* ─── Count badge ─── */

.ne-waitlist-count {
	font-size: 0.688rem;
	color: var(--ne-text-subtle);
	white-space: nowrap;
}

/* ─── Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {
	.ne-waitlist-cta,
	.ne-waitlist-cta[data-on-waitlist="1"] {
		animation: none;
	}
	.ne-waitlist-cta.is-joining {
		animation: none;
		background: rgba(139, 127, 232, 0.2);
	}
}

/* ─── Banner (below hero) ─── */

.ne-waitlist-banner {
	background: linear-gradient(135deg, rgba(139, 127, 232, 0.08), rgba(139, 127, 232, 0.03));
	border-bottom: 1px solid rgba(139, 127, 232, 0.2);
	padding: var(--ne-space-3) 0;
}

.ne-waitlist-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ne-space-4);
}

.ne-waitlist-banner__info {
	display: flex;
	align-items: center;
	gap: var(--ne-space-3);
	min-width: 0;
}

.ne-waitlist-banner__icon {
	font-size: 1.25rem;
	color: var(--ne-accent);
	flex-shrink: 0;
}

.ne-waitlist-banner__text {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: var(--ne-space-3);
	flex-wrap: wrap;
}

.ne-waitlist-banner__title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ne-text);
}

.ne-waitlist-banner__count {
	font-size: 0.75rem;
	color: var(--ne-text-subtle);
}

/* ─── Mobile ─── */

@media (max-width: 768px) {
	.ne-waitlist-cta {
		min-height: 40px;
		padding: var(--ne-space-2) var(--ne-space-3);
		font-size: 0.8125rem;
	}
	.ne-waitlist-banner__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ne-space-3);
	}
}