/*
 * Testimonials — compact hero (planets, leaves, trust pills, score strip)
 * Depends on: design-tokens.css
 * Page: body.log-testimonials-page
 */

/* Blocksy's .ct-container-full adds a default 10px top padding meant for
 * normal padded page content — leaves a visible gap above our full-bleed
 * hero, which should sit flush against the header. */
body.log-testimonials-page .ct-container-full {
	padding-top: 0;
}

.test-hero {
	position: relative;
	background: linear-gradient(115deg, #d9ecdf 0%, #dce6d2 32%, #e1d9b8 62%, #e0c08a 100%);
	overflow: hidden;
	padding: 44px 24px 30px;
}

.hero-planet {
	position: absolute;
	pointer-events: none;
	opacity: .9;
	animation: testPlanetSpin 70s linear infinite, testPlanetBob 6s ease-in-out infinite;
}

.hero-planet.p2 { animation-duration: 95s, 7s; animation-name: testPlanetSpinRev, testPlanetBob; opacity: .75; }

@keyframes testPlanetSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes testPlanetSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes testPlanetBob { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }
@media(max-width:760px) { .hero-planet { display: none; } }

.test-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--mx, 18%) var(--my, 20%), rgba(255, 255, 255, .4), transparent 45%);
	transition: background .2s linear;
	pointer-events: none;
}

.test-hero::after {
	content: '';
	position: absolute;
	width: 360px;
	height: 360px;
	border: 1px solid rgba(31, 58, 52, .08);
	border-radius: 50%;
	top: -190px;
	right: -120px;
	pointer-events: none;
}

.th-leaf { position: absolute; color: var(--sage-700); opacity: 0; animation: testLeafDrift 7s ease-in-out infinite; pointer-events: none; z-index: 1; }
.th-leaf.alt { animation-name: testLeafDriftAlt; color: var(--plum-600); }
.th-leaf.sm .icon { width: 10px; height: 10px; }
.th-leaf.lg .icon { width: 19px; height: 19px; }
.th-leaf .icon { width: 14px; height: 14px; }

@keyframes testLeafDrift {
	0% { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); }
	12% { opacity: .5; }
	50% { opacity: .32; transform: translateY(-100px) translateX(14px) rotate(140deg); }
	100% { opacity: 0; transform: translateY(-170px) translateX(22px) rotate(250deg); }
}

@keyframes testLeafDriftAlt {
	0% { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); }
	12% { opacity: .45; }
	50% { opacity: .28; transform: translateY(-120px) translateX(-18px) rotate(-130deg); }
	100% { opacity: 0; transform: translateY(-200px) translateX(-30px) rotate(-240deg); }
}

@media(max-width:640px) { .th-leaf { display: none; } }

.test-hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; }

.th-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(138, 106, 46, .35);
	color: var(--sage-700);
	padding: 7px 15px;
	border-radius: var(--r-pill);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: 0;
	animation: testHeroIn .7s var(--ease) forwards, testKickerPulse 2.6s ease-in-out 1.2s infinite;
}

@keyframes testKickerPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(203, 168, 105, .35); } 50% { box-shadow: 0 0 0 7px rgba(203, 168, 105, 0); } }
@keyframes testHeroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.test-hero h1 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.1;
	font-size: clamp(28px, 4.4vw, 46px);
	letter-spacing: -.01em;
	margin-top: 13px;
	color: var(--ink-900);
	opacity: 0;
	animation: testHeroIn .7s var(--ease) .08s forwards;
}

.test-hero h1 em {
	font-style: italic;
	font-weight: 600;
	background: linear-gradient(100deg, var(--sage-700) 30%, var(--plum-500) 50%, var(--sage-700) 70%);
	background-size: 240% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: testShimmerText 6s linear infinite;
}

@keyframes testShimmerText { 0% { background-position: 0% 50%; } 100% { background-position: -240% 50%; } }

.test-hero p.lede {
	margin: 10px auto 0;
	max-width: 520px;
	color: var(--ink-700);
	font-size: 13.5px;
	line-height: 1.65;
	opacity: 0;
	animation: testHeroIn .7s var(--ease) .16s forwards;
}

.th-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 16px; }
.th-trust-pill { opacity: 0; animation: testPillPop .6s var(--ease) forwards; animation-delay: calc(.3s + var(--i, 0) * .08s); }

@keyframes testPillPop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }

.th-trust-pill {
	display: flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(31, 58, 52, .14);
	color: var(--ink-900);
	padding: 8px 14px;
	border-radius: var(--r-pill);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	transition: transform .25s var(--ease), background .25s var(--ease);
}

.th-trust-pill:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .85); }
.th-trust-pill .icon { width: 13px; height: 13px; color: var(--sage-700); }

.th-score-strip {
	position: relative;
	z-index: 2;
	max-width: 1000px;
	margin: 24px auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	opacity: 0;
	animation: testHeroIn .7s var(--ease) .32s forwards;
}

.th-score-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: rgba(255, 255, 255, .68);
	border: 1px solid rgba(31, 58, 52, .1);
	border-radius: 16px;
	padding: 16px 12px;
	backdrop-filter: blur(6px);
	transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
	animation: testChipFloat 4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * .3s);
}

@keyframes testChipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.th-score-chip:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .95); box-shadow: 0 14px 26px -6px rgba(31, 58, 52, .2); animation-play-state: paused; }

.th-score-num { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--plum-800); line-height: 1; }
.th-score-lbl { font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; color: var(--ink-700); margin-top: 5px; }

@media(max-width:700px) {
	.th-score-strip { grid-template-columns: 1fr 1fr; }
	.th-score-chip { padding: 13px 10px; }
}