.fahmi-splash {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.fahmi-splash__panel {
	position: absolute;
	inset-block: 0;
	width: 50.1%;
	background: #000;
	will-change: transform;
}

.fahmi-splash__panel--left { left: 0; }
.fahmi-splash__panel--right { right: 0; }

.fahmi-splash__logo-wrap {
	position: relative;
	z-index: 1;
	animation: fahmi-logo-in .58s cubic-bezier(.16, 1, .3, 1) .05s both;
	will-change: opacity, transform;
}

.fahmi-splash__logo {
	width: clamp(130px, 20vw, 250px);
	max-height: 20vh;
	filter: brightness(0) invert(1);
	will-change: opacity, transform;
	animation: fahmi-logo-breathe 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

.fahmi-splash__content {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 1.1rem;
}

.fahmi-splash__tagline {
	margin: 0;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font: inherit;
	font-size: clamp(.65rem, 1.1vw, .8rem);
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 1.2;
	opacity: .8;
	text-shadow: 0 0 12px rgba(255, 255, 255, .14);
	white-space: nowrap;
}

.fahmi-splash--loaded .fahmi-splash__logo-wrap {
	animation: fahmi-logo-out .48s cubic-bezier(.65, 0, .35, 1) forwards;
}

.fahmi-splash--loaded .fahmi-splash__tagline {
	animation: fahmi-tagline-fade-out .48s cubic-bezier(.65, 0, .35, 1) forwards;
}

.fahmi-splash__tagline.is-typing::after,
.fahmi-splash__tagline.is-erasing::after {
	content: '';
	display: inline-block;
	height: 1em;
	margin-left: .24em;
	border-right: 1px solid currentColor;
	vertical-align: -.12em;
	animation: fahmi-caret .75s steps(1, end) infinite;
}

.fahmi-splash--loaded .fahmi-splash__panel--left {
	animation: fahmi-reveal-left 1s cubic-bezier(.76, 0, .24, 1) .52s forwards;
}

.fahmi-splash--loaded .fahmi-splash__panel--right {
	animation: fahmi-reveal-right 1s cubic-bezier(.76, 0, .24, 1) .52s forwards;
}

@keyframes fahmi-logo-breathe {
	0%, 100% { opacity: .7; transform: scale(.985); }
	50% { opacity: 1; transform: scale(1.015); }
}

@keyframes fahmi-logo-in {
	from { opacity: 0; transform: translateY(8px) scale(.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fahmi-logo-out {
	to { opacity: 0; transform: scale(.975); }
}

@keyframes fahmi-tagline-fade-out {
	to { opacity: 0; transform: translateY(-2px); }
}

@keyframes fahmi-caret { 50% { opacity: 0; } }

@keyframes fahmi-reveal-left { to { transform: translateX(-100%); } }
@keyframes fahmi-reveal-right { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
	.fahmi-splash { display: none; }
}