/*
 * Liquid glass pill buttons — hero CTAs, section "View All" links.
 * Structural CSS ported 1:1 from the homepage_5 reference; colours pulled
 * from design tokens so a palette change updates every variant.
 * @package log-core
 */

.glass-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 0 28px;
	border-radius: var(--r-pill, 999px);
	cursor: pointer;
	text-decoration: none;
	z-index: 1;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: box-shadow .3s;
	overflow: hidden;
	isolation: isolate;
}

.glass-btn:active { filter: brightness(.92); }

.glass-btn .gb-base { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }

.glass-btn .gb-liquid {
	position: absolute; inset: 0;
	border-radius: inherit;
	background-size: 250% 250%;
	animation: log-glass-shift 3.5s ease infinite;
	opacity: .5;
	z-index: 1;
	mix-blend-mode: hard-light;
	transition: opacity .3s;
}

.glass-btn:hover .gb-liquid { opacity: .75; animation-duration: 1.8s; }

.glass-btn .gb-border {
	position: absolute; inset: 0;
	border-radius: inherit;
	border: 1.5px solid rgba(255, 255, 255, .55);
	z-index: 4;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .15);
	transition: border-color .3s;
}

.glass-btn:hover .gb-border {
	border-color: rgba(255, 255, 255, .85);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .1);
}

.glass-btn .gb-gloss {
	position: absolute; top: 0; left: 6%; right: 6%; height: 1.5px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .95) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, .95) 65%, transparent 100%);
	border-radius: var(--r-pill, 999px);
	pointer-events: none; z-index: 5;
}

.glass-btn .gb-arc {
	position: absolute; top: 1px; left: 4%; right: 4%; height: 52%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .18) 40%, rgba(255, 255, 255, 0) 100%);
	border-radius: 100px 100px 60% 60%;
	pointer-events: none; z-index: 5;
}

.glass-btn .gb-rim {
	position: absolute; bottom: 1px; left: 20%; right: 20%; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
	pointer-events: none; z-index: 5;
}

.glass-btn .gb-label {
	position: relative; z-index: 6;
	display: flex; align-items: center; gap: 8px;
	font-family: var(--body);
	font-size: inherit;
	font-weight: 700;
	letter-spacing: .025em;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .55), 0 0 20px rgba(255, 255, 255, .2);
	pointer-events: none; white-space: nowrap;
	transition: letter-spacing .3s, text-shadow .3s;
}

.glass-btn:hover .gb-label { letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0, 0, 0, .4), 0 0 24px rgba(255, 255, 255, .35); }
.glass-btn .gb-label svg { flex-shrink: 0; }

/* ── Variants ── */
.glass-btn.gb-orange .gb-base { background: linear-gradient(140deg, var(--sage-700) 0%, var(--sage-600) 40%, var(--sage-500) 70%, var(--sage-400) 100%); }
.glass-btn.gb-orange .gb-liquid { background: linear-gradient(120deg, #fbbf24, var(--sage-600), #ef4444, var(--sage-600), #fbbf24); }
.glass-btn.gb-orange { box-shadow: 0 4px 20px rgba(217, 95, 8, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
.glass-btn.gb-orange:hover { box-shadow: 0 8px 32px rgba(249, 115, 22, .7), 0 0 0 1px rgba(249, 115, 22, .3), inset 0 1px 0 rgba(255, 255, 255, .4); }

.glass-btn.gb-blue .gb-base { background: linear-gradient(140deg, var(--plum-800) 0%, var(--plum-700) 40%, var(--plum-600) 70%, var(--plum-500) 100%); }
.glass-btn.gb-blue .gb-liquid { background: linear-gradient(120deg, var(--sage-300), var(--plum-700), #7c3aed, var(--plum-700), var(--sage-300)); }
.glass-btn.gb-blue { box-shadow: 0 4px 20px rgba(26, 85, 196, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
.glass-btn.gb-blue:hover { box-shadow: 0 8px 32px rgba(45, 111, 224, .7), 0 0 0 1px rgba(45, 111, 224, .3), inset 0 1px 0 rgba(255, 255, 255, .4); }

.glass-btn.gb-navy .gb-base { background: linear-gradient(140deg, var(--sage-900) 0%, var(--sage-800) 40%, var(--plum-700) 70%, var(--plum-600) 100%); }
.glass-btn.gb-navy .gb-liquid { background: linear-gradient(120deg, var(--plum-600), var(--plum-700), #4743ef, var(--plum-700), var(--plum-600)); }
.glass-btn.gb-navy { box-shadow: 0 4px 20px rgba(14, 47, 120, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.glass-btn.gb-navy:hover { box-shadow: 0 8px 32px rgba(26, 85, 196, .65), 0 0 0 1px rgba(79, 142, 245, .3), inset 0 1px 0 rgba(255, 255, 255, .35); }

.glass-btn.gb-teal .gb-base { background: linear-gradient(140deg, #065f46 0%, #0f766e 40%, #0d9488 70%, #14b8a6 100%); }
.glass-btn.gb-teal .gb-liquid { background: linear-gradient(120deg, #5eead4, #0d9488, #0891b2, #0d9488, #5eead4); }
.glass-btn.gb-teal { box-shadow: 0 4px 20px rgba(13, 148, 136, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
.glass-btn.gb-teal:hover { box-shadow: 0 8px 32px rgba(20, 184, 166, .65), 0 0 0 1px rgba(94, 234, 212, .3), inset 0 1px 0 rgba(255, 255, 255, .4); }

@keyframes log-glass-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.gb-ripple {
	position: absolute; border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	transform: scale(0);
	animation: log-gb-ripple .55s ease-out forwards;
	pointer-events: none; z-index: 10;
}

@keyframes log-gb-ripple { to { transform: scale(7); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.glass-btn .gb-liquid { animation: none; }
}