/* SVG - intro */
body {
	overflow: hidden;
} 

.hero-brackets-text {
	opacity: 0;
}

#hero-svg-container svg {
	width: 100%;
	height: auto;
	margin-top: 50px;
}

#hero-img-title {
	position: absolute;
	transform: translateY(12px);
	opacity: 0;
	transition: ease all .3s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

#hero-img-title::after {
	content: "";
	width: calc(100% + 4px);
	height: 1px;
	background: #AFBEB4;
	position: relative;
	display: block;
	margin-top: 2px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* #hero-section svg #a > g > *:not(ellipse[data-name="animation"]):not(rect[data-position="left"])  */
#hero-section svg #a > g > *:not(ellipse[data-name="animation"]) {
	opacity: 0;
}

.svg-visible {
	opacity: 1!important;
}

/* ellipse */
#hero-section svg ellipse {
	transition: ease all .3s;
}

#hero-section svg #a > g > ellipse:not([data-name="animation"]) {
	transition: ease opacity .7s, ease fill .3s;
}

#hero-section svg ellipse[data-name="btn"] {
	cursor: pointer;
	fill: transparent;
}

.svg-btn-hover {
	fill: rgba(255, 61, 40, .8)!important;
}

/* lines */
#hero-section svg #a > g > rect {
	transition: ease width .7s, ease transform .7s;
}

.rect-startpoint {
	width: 0;
}

#hero-section svg #a > g > rect[data-position="right"] {
	transform-origin: right;
	transform: scaleX(0);
	opacity: 1;
}


/* text */
#hero-section svg #a > g > text {
	transition: ease all .4s;
	transform: translateY(30px);
}

/* SVG - waves */
#hero-section svg ellipse[data-name="animation"] {
	transform: scale(0); 
	animation: scaleUp 2s ease-out infinite; 
}

#hero-section #hero-svg-container {
	position: absolute;
}

@keyframes scaleUp {
	0% {
		transform: scale(0); 
		opacity: 1;
	}
	100% {
		transform: scale(1); 
		opacity: 0; 
	}
}

/* 3D */
#container-3d > div {
	margin: 0; 
	display: flex; 
	justify-content: center;
	align-items: center;
}

#container3d { 
	width: 1440px; 
	height: 755px; 
}

@media screen and (max-width: 1103px) {
	#hero-static-img img {
		max-width: 100%;
	} 

	#hero-section #hero-svg-container {
		padding: 0 20px;
	}
}

@media screen and (max-width: 1024px) {
	#hero-section #hero-svg-container {
		top: 50%;
		transform: translateY(-50%);
	}

	#hero-img-title {
		top: 30%;
		transform: translateY(-50%);
	}

	#hero-brackets-container {
		top: 15%;
	}
}

@media screen and (max-width: 1023px) and (min-width: 811px) {
	#hero-brackets-container {
		top: 20%;
	}
}

@media screen and (max-width: 810px) {
	#hero-brackets-container {
		scale: .8;
	}
}

@media screen and (max-width: 520px) {
	#hero-section svg {
		transition: ease opacity .4s;
	}

	#hero-section svg #a > g > text {
		transform: none;
		cursor: pointer;
		transition: ease opacity 1s;
	}

	#hero-section svg #a > g > path {
		transition: ease opacity 1s;
	}
	
	 #hero-section #hero-svg-container {
		 padding: 0;
	}
	
	#container3d {
		opacity: .5;
	}
}