/*
 * 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(135deg, var(--ink-950) 0%, #0d0b06 28%, #1a1306 50%, #241a07 72%, var(--ink-950) 100%);
	overflow: hidden;
	padding: 44px 24px 30px;
}

/* multi-point gold ambient layer (matches delivery-proof hero) */
.test-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 55% at 8% 10%, var(--gold-glass-20) 0%, transparent 65%),
		radial-gradient(ellipse 50% 60% at 88% 40%, var(--gold-glass-10) 0%, transparent 65%),
		radial-gradient(ellipse 45% 35% at 50% 100%, var(--gold-glass-10) 0%, transparent 60%),
		linear-gradient(160deg, var(--gold-glass-06) 0%, transparent 50%);
}

/* subtle grid texture (matches delivery-proof hero) */
.test-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--gold-glass-04) 1px, transparent 1px), linear-gradient(90deg, var(--gold-glass-04) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

/* ── Decorative rising particles (matches delivery-proof hero) ── */
.th-leaf { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; animation: testParticleRise var(--dur, 8s) ease-in-out var(--delay, 0s) infinite; z-index: 1; }
.th-leaf.glow { box-shadow: 0 0 6px 2px var(--gold-glass-55); }
.th-leaf.glow-lg { box-shadow: 0 0 10px 4px var(--gold-glass-40); }

@keyframes testParticleRise {
	0% { opacity: 0; transform: translateY(0) scale(.5); }
	10% { opacity: 1; }
	75% { opacity: .5; }
	100% { opacity: 0; transform: translateY(-200px) scale(1.2); }
}

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

/* ── Decorative orbiting planets (matches delivery-proof hero .dp-badge) ── */
.hero-planet { position: absolute; pointer-events: none; z-index: 1; opacity: .94; animation: testPlanetOrbit 12s ease-in-out infinite; }
.hero-planet.p2 { opacity: .85; animation: testPlanetOrbitRev 15s ease-in-out infinite; }

@keyframes testPlanetOrbit {
	0% { transform: translate(0, 0); }
	25% { transform: translate(14px, -10px); }
	50% { transform: translate(0, -18px); }
	75% { transform: translate(-14px, -10px); }
	100% { transform: translate(0, 0); }
}

@keyframes testPlanetOrbitRev {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-10px, -8px); }
	50% { transform: translate(0, -14px); }
	75% { transform: translate(10px, -8px); }
	100% { transform: translate(0, 0); }
}

@media(max-width:900px) { .hero-planet { 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: var(--gold-glass-10);
	border: 1px solid var(--gold-glass-35);
	color: var(--gold-400);
	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 var(--gold-glass-35); } 50% { box-shadow: 0 0 0 7px rgba(212, 175, 55, 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(--white);
	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(--white-glass-55);
	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: var(--white-glass-06);
	border: 1px solid var(--gold-glass-20);
	color: var(--white-glass-80);
	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), border-color .25s var(--ease);
}

.th-trust-pill:hover { transform: translateY(-3px); background: var(--gold-glass-10); border-color: var(--gold-glass-35); }
.th-trust-pill .icon { width: 13px; height: 13px; color: var(--gold-500); }

.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: var(--white-glass-95);
	border: 1px solid var(--gold-glass-10);
	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: var(--white); box-shadow: 0 14px 26px -6px var(--ink-glass-20); animation-play-state: paused; }

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

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