/* =========================
   Hero Section
========================= */

.hero {
  position: relative;
  text-align: center;
  padding: 1rem 0 0.5rem;
  overflow: visible;

  --hero-banner-opacity: 0.6;
  --hero-banner-y: 0px;
}

/* =========================
   Top Banner
========================= */

.hero::before {
  content: "";
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100vw;
  height: min(35vw, 560px);

  transform:
    translate(-50%, calc(-50% + var(--hero-banner-y)))
    scale(1.02);

  background: url("../site assets/lily pad.webp") center / cover no-repeat;

  opacity: var(--hero-banner-opacity);
  z-index: 0;
  pointer-events: none;
  will-change: opacity, transform;

  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 10%,
    rgba(0, 0, 0, 0.6) 30%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 10%,
    rgba(0, 0, 0, 0.6) 30%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent 100%
  );
}

/* Dark side fade, clipped to banner only */
.hero::after {
  content: "";
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100vw;
  height: min(35vw, 560px);

  transform:
    translate(-50%, calc(-50% + var(--hero-banner-y)))
    scale(1.02);

  background: linear-gradient(
    to right,
    rgba(11, 11, 15, 0.9),
    rgba(11, 11, 15, 0.25),
    rgba(11, 11, 15, 0.25),
    rgba(11, 11, 15, 0.9)
  );

  z-index: 0;
  pointer-events: none;

  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 10%,
    rgba(0, 0, 0, 0.6) 30%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 10%,
    rgba(0, 0, 0, 0.6) 30%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent 100%
  );
}

/* =========================
   Bottom Banner
========================= */

footer {
  position: relative;
  --footer-banner-y: 0px;
}

/* Same as top banner, but attached to footer */
footer::before {
  content: "";
  position: absolute;

  bottom: 50%;
  left: 50%;

  width: 100vw;
  height: min(35vw, 560px);

  transform:
    translate(-50%, calc(50% + var(--footer-banner-y)))
    scale(1.02);

  background: url("../site assets/lily pad 2.webp") center / cover no-repeat;

  opacity: var(--hero-banner-opacity, 0.6);
  z-index: -1;
  pointer-events: none;

  mask-image: linear-gradient(
    to top,
    black 0%,
    black 10%,
    rgba(0, 0, 0, 0.6) 30%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    black 0%,
    black 10%,
    rgba(0, 0, 0, 0.6) 30%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent 100%
  );
}

footer::after {
  content: "";
  position: absolute;

  bottom: 50%;
  left: 50%;

  width: 100vw;
  height: min(35vw, 560px);

  transform:
    translate(-50%, calc(50% + var(--footer-banner-y)))
    scale(1.02);

  background: linear-gradient(
    to right,
    rgba(11, 11, 15, 0.9),
    rgba(11, 11, 15, 0.25),
    rgba(11, 11, 15, 0.25),
    rgba(11, 11, 15, 0.9)
  );

  z-index: -1;
  pointer-events: none;

  mask-image: linear-gradient(
    to top,
    black 0%,
    black 10%,
    rgba(0, 0, 0, 0.6) 30%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    black 0%,
    black 10%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent 100%
  );
}

/* Ensure hero content is above banner */
.hero h1,
.hero .links {
  position: relative;
  z-index: 1;
}

.hero h1 {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* =========================
   Links
========================= */

.links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1rem;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.5rem 1rem;
  border-radius: 999px;

  border: 1px solid #ffffff33;
  background: #ffffff0a;

  font-size: 1.2rem;
  opacity: 0.85;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.link-item:hover {
  background: #ffffff18;
  border-color: #ffffff66;
  transform: translateY(-2px);
  opacity: 1;
}

/* =========================
   Icons
========================= */

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;

  color: currentColor;

  transform: rotate(0deg) scale(1);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s ease;
}

.link-item:hover .icon {
  transform: rotate(5deg) scale(1.05);
}

.link-item:active .icon {
  transform: rotate(-1deg) scale(0.97);
}

/* =========================
   Brand Hover Colors
========================= */

.link-item.instagram:hover {
  border-color: #e1306c66;
}

.link-item.instagram:hover .icon {
  color: #e1306c;
}

.link-item.twitter:hover {
  border-color: #1da1f266;
}

.link-item.twitter:hover .icon {
  color: #1da1f2;
}

.link-item.patreon:hover {
  border-color: #ff424d66;
}

.link-item.patreon:hover .icon {
  color: #ff424d;
}

.link-item.discord:hover {
  border-color: #5865f266;
}

.link-item.discord:hover .icon {
  color: #5865f2;
}

.link-item.email:hover {
  border-color: #ea433566;
}

.link-item.email:hover .icon {
  color: #ea4335;
}

/* =========================
   Mobile Banner Fix
========================= */

/* =========================
   Mobile Banner Fix
========================= */

@media (max-width: 700px) {
  .hero {
    padding-top: 4.5rem;
  }

  .hero::before,
  .hero::after {
    top: 5rem;
    height: 260px;
    background-position: center top;

    transform:
      translate(-50%, calc(-50% + var(--hero-banner-y)))
      scale(1.05);

    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 18%,
      rgba(0, 0, 0, 0.65) 40%,
      rgba(0, 0, 0, 0.28) 68%,
      rgba(0, 0, 0, 0.08) 88%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 18%,
      rgba(0, 0, 0, 0.65) 40%,
      rgba(0, 0, 0, 0.28) 68%,
      rgba(0, 0, 0, 0.08) 88%,
      transparent 100%
    );
  }

  footer::before,
  footer::after {
    height: 260px;
    background-position: center bottom;

    transform:
      translate(-50%, calc(50% + var(--footer-banner-y)))
      scale(1.05);

    mask-image: linear-gradient(
      to top,
      black 0%,
      black 18%,
      rgba(0, 0, 0, 0.65) 40%,
      rgba(0, 0, 0, 0.28) 68%,
      rgba(0, 0, 0, 0.08) 88%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to top,
      black 0%,
      black 18%,
      rgba(0, 0, 0, 0.65) 40%,
      rgba(0, 0, 0, 0.28) 68%,
      rgba(0, 0, 0, 0.08) 88%,
      transparent 100%
    );
  }
}