:root {
	--star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='79.0' width='79.0' viewBox='0 0 79.0 79.0'%3E%3Cpath d='M32.084,2.892c4.135,-3.856 10.697,-3.856 14.832,0 2.364,2.204 5.652,3.234 8.91,2.79 5.696,-0.777 11.005,2.94 11.999,8.402 0.568,3.124 2.6,5.82 5.506,7.306 5.082,2.598 7.11,8.614 4.583,13.595a9.947,9.947 0,0 0,0 9.03c2.527,4.981 0.5,10.997 -4.583,13.596 -2.906,1.486 -4.938,4.181 -5.506,7.304 -0.994,5.462 -6.303,9.18 -12,8.403 -3.257,-0.444 -6.545,0.586 -8.91,2.79 -4.134,3.856 -10.696,3.856 -14.83,0 -2.365,-2.204 -5.653,-3.234 -8.91,-2.79 -5.697,0.777 -11.006,-2.94 -12,-8.403 -0.568,-3.123 -2.6,-5.818 -5.506,-7.305 -5.082,-2.598 -7.11,-8.614 -4.583,-13.595a9.947,9.947 0,0 0,0 -9.03c-2.527,-4.981 -0.5,-10.997 4.583,-13.595 2.906,-1.487 4.938,-4.182 5.506,-7.306 0.994,-5.461 6.303,-9.179 12,-8.402 3.257,0.444 6.545,-0.586 8.91,-2.79Z' /%3E%3C/svg%3E");
}

@keyframes blob-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes blob-spin-reverse {
	from { transform: scale(1.15) rotate(0deg); }
	to { transform: scale(1.15) rotate(-360deg); }
}

.hero-section {
  width: 100%;
  height: 500px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image:
    linear-gradient(to right, var(--color-grid-line) 1px, var(--color-transparent) 1px),
    linear-gradient(to bottom, var(--color-grid-line) 1px, var(--color-transparent) 1px);
  background-size: 40px 40px;
  background-position: calc(50% + var(--bg-x, 0px)) calc(50% + var(--bg-y, 0px));
  transition: background-position 0.15s ease-out;
  overflow: hidden;
  margin-bottom: 50px;
}

.hero-section::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150px;
	background: linear-gradient(to bottom, var(--color-transparent), var(--color-bg-primary));
	pointer-events: none;
	z-index: 3;
}

.star-avatar-container {
	position: relative;
	width: 280px;
	height: 280px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	animation: star-float 6s ease-in-out infinite alternate;
}

.star-badge-bg {
	position: absolute;
	inset: 0;
	background-color: var(--color-bg-secondary);
	-webkit-mask-image: var(--star-mask);
	mask-image: var(--star-mask);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	z-index: 1;
	animation: blob-spin 20s linear infinite;
}
.star-badge-bg::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, var(--color-accent-secondary) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: glow-pulse 4s ease-in-out infinite alternate;
}
@keyframes star-float {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.02);
  }
  100% {
    transform: translateY(4px) scale(0.99);
  }
}

@keyframes glow-pulse {
  0% {
    opacity: 0.3;
    transform: scale(0.9);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.15);
  }
}

.star-masked-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	-webkit-mask-image: var(--star-mask);
	mask-image: var(--star-mask);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	animation: blob-spin 20s linear infinite;
}

.star-masked-content .avatar-img {
	animation: blob-spin-reverse 20s linear infinite;
}

.star-popout-content {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.avatar-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.avatar-img-bottom {
	object-position: bottom center;
}

.avatar-img-top {
	object-position: top center;
	transform: translateY(-20px) scale(1.15);
}