/* ==========================================================================
   Sane & Able – hero typewriter
   "We make you look Great… [*Scrap that] … Fucking Amazing"
   ========================================================================== */

.sa-type {
	--sa-text: #FFFFFF;
	--sa-hl: #BA63FF;
	--sa-strike-dur: 1000ms;
	--sa-fade-dur: 300ms;

	/* Stack the hidden "ghost" copies and the live layer in one grid cell,
	   so the h1 is always as tall as its longest state – no layout jump. */
	display: grid;
}
.sa-type > * {
	grid-area: 1 / 1;
	display: block;
}
.sa-type__ghost {
	visibility: hidden;
}

/* The site has "#home-section-1 h1 span { color:#BA63FF }" – undo that for
   our spans, then re-apply the highlight only where we want it. */
.sa-type span,
#home-section-1 h1.sa-type span {
	color: inherit;
}
.sa-type .sa-hl,
#home-section-1 h1.sa-type .sa-hl {
	color: var(--sa-hl);
}

/* Highlighted keyword + animated strike-through */
.sa-kw {
	position: relative;
}
.sa-strike {
	position: absolute;
	left: -0.04em;
	right: -0.04em;
	top: 54%;
	height: 0.1em;               /* ≈7px at 70px, ≈4px at 40px – matches the old .striker */
	margin-top: -0.05em;
	background: var(--sa-hl);
	border-radius: 0.05em;
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}
.sa-strike.is-on {
	transform: scaleX(1);
	transition: transform var(--sa-strike-dur) cubic-bezier(.65, 0, .35, 1);
}

/* Internal monologue */
.sa-aside {
/* 	font-family: "Playfair Display", Georgia, serif; */
	font-family: "Source Serif 4", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 0.9em;
	opacity: .5;
	transition: opacity var(--sa-fade-dur) ease-out;
}
.sa-aside.is-gone {
	opacity: 0;
}

/* Caret */
.sa-caret {
	display: inline-block;
	width: 0.05em;
	min-width: 2px;
	height: 0.95em;
	margin: 0 -0.05em 0 0.04em;  /* negative right margin so it doesn't push text */
	vertical-align: -0.1em;
	background: var(--sa-text);
	animation: sa-blink 1s steps(1) infinite;
	transition: opacity .4s ease;
}
.sa-caret--hl  { background: var(--sa-hl); }
.sa-caret.is-typing { animation: none; }
.sa-caret.is-hidden { opacity: 0; animation: none; }

@keyframes sa-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0; }
}