/* ==========================================================
   Huly Passion Badge Widget — hpw-style.css
   ========================================================== */

/* ---------- Outer wrapper ---------- */
.hpw-outer {
	display: flex;
	width: 100%;
}

/* ---------- Badge ---------- */
.hpw-badge {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	background: #141414;
	padding: 13px 24px;
	border-radius: 12px;
	border: 1px solid #2a2a2a;
	cursor: default;
	user-select: none;
}

/* ---------- Pixel heart grid ---------- */
.hpw-pixel-heart {
	--hpw-px: 7px;
	display: grid;
	grid-template-columns: repeat(8, var(--hpw-px));
	grid-template-rows:    repeat(7, var(--hpw-px));
	gap: 1.5px;
	flex-shrink: 0;
}

.hpw-px {
	width:  var(--hpw-px, 7px);
	height: var(--hpw-px, 7px);
	border-radius: 1px;
	background: transparent;
}

.hpw-px.on {
	background: #e07020;
	animation: hpw-beat 2s ease-in-out infinite,
	           hpw-sparkle 4s ease-in-out infinite;
	will-change: transform, opacity, filter;
}

.hpw-px.on.bright {
	background: #f09030;
}

/* ---------- Beat keyframes ---------- */
@keyframes hpw-beat {
	0%,  100% { transform: scale(1);    opacity: 1;    }
	10%        { transform: scale(1.3);  opacity: 1;    }
	20%        { transform: scale(1);    opacity: 0.9;  }
	30%        { transform: scale(1.15); opacity: 1;    }
	45%        { transform: scale(1);    opacity: 0.85; }
}

/* ---------- Sparkle keyframes ---------- */
@keyframes hpw-sparkle {
	0%, 60%, 100% { filter: brightness(1);   }
	30%            { filter: brightness(2);   }
}

/* ---------- Ripple (added via JS) ---------- */
.hpw-px.rippling {
	background: #ffffff !important;
	transform: scale(1.5) !important;
	transition: background 0.06s ease, transform 0.06s ease;
}

/* ---------- Text label ---------- */
.hpw-label {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: #888;
	letter-spacing: 0.01em;
	white-space: nowrap;
	line-height: 1;
}

/* Per-character span */
.hpw-label .char {
	display: inline-block;
	--hpw-shimmer: #e07020;
	transition: color 0.12s ease, transform 0.12s ease;
}

.hpw-label .brand {
	color: #ccc;
	font-weight: 500;
}

/* ---------- Hover: char wave ---------- */
.hpw-badge:hover .hpw-label .char {
	animation: hpw-char-wave 0.65s ease forwards;
}

@keyframes hpw-char-wave {
	0%   { transform: translateY(0);    color: inherit; }
	30%  { transform: translateY(-5px); color: var(--hpw-shimmer); }
	65%  { transform: translateY(1px);  }
	100% { transform: translateY(0);    color: inherit; }
}

/* Brand chars stay highlighted on hover */
.hpw-badge:hover .hpw-label .brand {
	color: var(--hpw-shimmer, #e07020);
}