profile-boot-duration = 2s

.profile
	horizontal

	position relative
	left calc(content-padding * -1)
	top calc(content-padding-top * -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 appear transition-speed

	overflow hidden

.profile-field
	text-align center

< 600px
	.profile
		vertical
		align-items center

	.intro-container
		align-items center
		margin-top calc(content-padding * 1.5)
		padding-left content-padding

animation 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
	object-fit cover
	// background-size cover
	overflow hidden
	
	default-transition
	animation cover-animation profile-boot-duration
	animation-fill-mode forwards

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

.profile-image
	border-radius 3px
	object-fit cover
	width 100%
	height auto

.image-container
	flex 1
	max-width 320px

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

// Categories

.profile-category
	margin-bottom content-padding