profile-boot-duration = 2s

.profile
	display flex
	flex-flow row

	position relative
	left calc(content-padding * -1)
	top calc(content-padding * -1)
	min-width calc(100% + content-padding * 2)
	padding calc(content-padding * 2)

	color white
	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)

	default-transition
	animation-name appear
	animation-duration transition-speed

	overflow hidden

// @keyframes appear
// 	0%
// 		transform rotateX(90deg)
// 		filter opacity(0) saturate(0) blur(10px)
// 	100%
// 		transform rotateX(0)
// 		filter opacity(1) saturate(1) blur(0)

.profile-cover
	position absolute
	left 0
	top 0
	width 100%
	height 100%
	z-index -1
	background-size cover
	overflow hidden
	
	default-transition
	animation cover-animation profile-boot-duration
	animation-fill-mode forwards

@keyframes cover-animation
	0%
		filter brightness(500%) blur(5px)
	100%
		filter brightness(35%) blur(0)

.profile-image
	border-radius 3px
	width 320px !important
	height 320px !important
	object-fit cover

.image-container
	// ...

.intro-container
	vertical
	align-items flex-start
	padding content-padding
	padding-top 0
	padding-left content-padding * 2
	max-width 900px