.brand-info {
position: relative;
width: 100%;
height: 100%;
user-select: none;
perspective: 800px;
overflow: hidden;
}

.brand-info[data-current] .brand-info--text span {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 250ms;
}

.brand-info__inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(var(--rotX)) rotateY(var(--rotY));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
	
	
	.brand-title{
	border: solid #E6E6E6 2px;
	border-radius: 100px;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	color: white;
	}

	.brand-info--text {
	left: 0;
	bottom: 0;
	transform: translateZ(45px);
	color: #fff;
	width: 400px;
	aspect-ratio: 3.5/1;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	animation: ombre 1s ease-in-out infinite alternate;
	}

	.brand-info--text span {
	display: block;
	white-space: nowrap;
	transition: 800ms ease;
	transition-property: opacity, transform;
	grid-row-start: 1;
	grid-column-start: 1;
	--stack-height: calc(100% / var(--stacks) - 1px);
	--inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
	--clip-top: calc(var(--stack-height) * var(--index));
	--clip-bottom: calc(var(--stack-height) * var(--inverse-index));
	clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
	animation:stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(1400ms + (var(--index) * 120ms)),
    glitch 1s ease infinite 1s alternate-reverse;
	}
		
	.brand-info--text span:first-child{
		--glitch-translate: 8px; 
	}
	.brand-info--text span:last-child { 
		--glitch-translate: -8px; 
	}
	



  
	@keyframes stack {
		0% {
		opacity: 0;
		transform: translateX(-50%);
		text-shadow: -2px 3px 0 #83a1ff, 2px -3px 0 #173acc;
		};
		60% {
		opacity: 0.5;
		transform: translateX(50%);
		}
		80% {
		transform: none;
		opacity: 1;
		text-shadow: 2px -3px 0 #83a1ff, -2px 3px 0 #173acc;
		}
		100% {
		text-shadow: none;
		opacity: 0;
		}
	}
  
	@keyframes glitch {
		0% {
		text-shadow: -2px 3px 0 #83a1ff, 2px -3px 0 #173acc;
		transform: translate(var(--glitch-translate));
		}
		2% {
		text-shadow: 2px -3px 0 #83a1ff, -2px 3px 0 #173acc;
		}
		4%, 100% {  text-shadow: none; transform: none; }
	}

	@keyframes ombre{
		from {
			filter: 
			drop-shadow(0px 0px 1px rgb(240, 240, 255))
			drop-shadow(0px 0px 2px rgb(149, 160, 220))
			drop-shadow(0px 0px 3px rgb(88, 94, 138));
		}
		to {
			filter: 
			drop-shadow(0px 0px 1px rgb(86, 86, 208))
			drop-shadow(0px 0px 2px rgb(38, 60, 187))
			drop-shadow(0px 0px 3px rgb(52, 64, 155));
		}
	}
	

	  
@media only screen and (max-width: 1200px){
.brand-info--text {
width: 300px;
}

}