.kull-sensei-intro {
	--ksi-width: 260px;
	--ksi-height: auto;
	--ksi-bottom: 20px;
	--ksi-right-start: -260px;
	--ksi-z-index: 9999;
	--ksi-travel: max(3in, calc(var(--ksi-width) + 28px));

	position: fixed;
	right: var(--ksi-right-start);
	bottom: var(--ksi-bottom);
	z-index: var(--ksi-z-index);
	width: var(--ksi-width);
	height: var(--ksi-height);
	background: transparent !important;
	pointer-events: none;
	opacity: 0;
	transform: translate3d(0, 0, 0);
	will-change: transform, opacity;
}

.kull-sensei-intro.is-entering {
	animation: kull-sensei-intro-walk-on 1350ms cubic-bezier(0.19, 1, 0.22, 1) 120ms forwards;
}

.kull-sensei-intro.is-ending {
	opacity: 0;
	transition: opacity 360ms ease;
}

.kull-sensei-intro.is-hidden {
	display: none;
}

.kull-sensei-intro__video {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent !important;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

@keyframes kull-sensei-intro-walk-on {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0);
	}

	10% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translate3d(calc(-1 * var(--ksi-travel)), 0, 0);
	}
}

@media (max-width: 1024px) {
	.kull-sensei-intro {
		max-width: min(38vw, 300px);
	}
}

@media (max-width: 767px) {
	.kull-sensei-intro {
		width: min(var(--ksi-width), 44vw);
		max-width: 220px;
	}
}

@media (max-width: 420px) {
	.kull-sensei-intro {
		width: min(var(--ksi-width), 52vw);
		max-width: 190px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kull-sensei-intro.is-entering {
		animation-duration: 1ms;
		animation-delay: 0ms;
	}

	.kull-sensei-intro.is-ending {
		transition-duration: 1ms;
	}
}