html, body, div, span, applet, object, button,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, picture, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
	box-sizing: border-box;
	/* border: 2px solid green; */
}

*, *:before, *:after {
	box-sizing: inherit;
}


#logo {
	width: 70%;
	height: auto;
	margin-top: -10%;
	animation: move-in 8s ease-out 1, move-out 8s ease-in 1 32s;
	overflow: visible;
}


#container {
	/* border: 2px solid red; */
	display: flex;
    justify-content: center;
    align-items: center;
	height: 100vh;
	overflow: hidden;
	background-color: #1c1c1c;
	animation: lightUp 8s 1 3.5s, lightDown 8s 1 32s;
	animation-fill-mode: forwards;
}

#container2 {
	display: flex;
    justify-content: center;
    align-items: center;
	height: 100vh;
	width: 100%;
	perspective: 25px;
	overflow: visible;
	position: relative;

}

#container2::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	z-index: 100;
	background: linear-gradient(
		120deg,
		transparent,
		transparent,
		transparent,
		transparent,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent,
		transparent,
		transparent,
		transparent,
		transparent);
	animation-name: highlight;
	animation-duration: 4s;
	animation-delay: 15s;
	animation-iteration-count: 2;
	/* animation-direction: x; */
	animation-timing-function: linear;
}

.logoText {
	transform: translateY(10px);
	animation-name: letterJump;
	animation-duration: 1.5s;
	animation-direction: alternate;
	animation-timing-function: steps(2, end);
	/* animation-fill-mode: none; */
	animation-iteration-count: 2;
}


#C {
  animation-delay: 28s;
}

#H {
  animation-delay: 28.1s;
}

#R {
  animation-delay: 28.2s;
}

#I {
  animation-delay: 28.3s;
}

#S {
  animation-delay: 28.4s;
}

#T {
  animation-delay: 28.5s;
}

#O {
  animation-delay: 28.6s;
}

#P {
  animation-delay: 28.7s;
}

#H2 {
  animation-delay: 28.8s;
}

#R2 {
  animation-delay: 28.9s;
}

#E {
  animation-delay: 29s;
}

#I2 {
  animation-delay: 29.1s;
}

#N {
  animation-delay: 29.2s;
}

#H3 {
  animation-delay: 29.3s;
}

#O2 {
  animation-delay: 29.4s;
}

#L {
  animation-delay: 29.5s;
}

#Z {
  animation-delay: 29.6s;
}

.outter-rect {
	visibility:hidden;
	transform-origin: center;
	animation-name: pulsate;
	animation-duration: 3s;
	animation-delay: 5.5s;
	animation-iteration-count: infinite;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect2 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: 0s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect3 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: 0.1s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect4 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: 0.2s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect5 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: 0.3s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect6 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: 0.4s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect7 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: .5s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect8 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: .6s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect9 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: .7s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect10 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: .8s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect11 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: .9s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect12 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: 1s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.inner-rect13 {
	visibility: visible;
	transform-origin: center;
	animation-name: shoot2;
	animation-duration: 2s;
	animation-delay: 1.1s;
	animation-iteration-count: 3;
	/* animation-direction: x; */
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}


@keyframes lightUp {
	0% {
		backdrop-filter: brightness(0);
	}
	100% {
		backdrop-filter: brightness(1);
		background-color: #ffffff;
	}
}

@keyframes lightDown {
	0% {
		backdrop-filter: brightness(1);
	}
	100% {
		backdrop-filter: brightness(0);
		background-color: #1c1c1c;
	}
}

@keyframes highlight {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(500%);
	}
}


@keyframes move-in {
	0% {
		transform: translate3d(0, 0, -100px);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes move-out {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(0, 0, -100px);
	}
}

@keyframes pulsate {
	0% {
		visibility: visible;
		transform: scale(1.05);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1.05);
		visibility: visible;
	}
	}

@keyframes shoot2 {
	0% {
		visibility: visible;
		transform: scale(1);
	}
	100% {
		transform: scale(50);
		visibility: hidden;
	}
}
	
@keyframes letterJump {
	20%,
	100% {
		transform: translate(0, 10px);
	}
	0% {
		transform: translate(0, 0px);
	}
	10% {
		transform: translate(0, 10px);
	}
}