/* /shared/index.css
   ===========================
   Hero Section (no scroll, works)
   ===========================
*/

/* Hero fixes for animations & overlay, no scroll */
.hero{
  position: relative;
  height: calc(100vh - var(--nav-h));
  overflow: visible; /* animations not clipped */

  background: url("/Pictures/background.jpg") no-repeat center center;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white);
}

.hero__inner{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
}

/* Overlay */
.hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1;
  pointer-events: none;
}

/* Profile image: sharper + subtle vignette + pro depth */
.hero__pfp{
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.16);
  object-fit: cover;
  flex-shrink: 0;
  max-height: 50%;

  /* crispness */
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(1.06) saturate(1.06) brightness(1.02);

  /* depth */
  box-shadow:
    0 16px 34px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.10) inset;
}

/* soft vignette ring over the pfp */
.hero__pfp{
  position: relative;
}
.hero__pfp::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  pointer-events: none;

  /* vignette + a tiny highlight */
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.14), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
  mix-blend-mode: overlay;
}

/* NOTE:
   The ::after trick only works if .hero__pfp is not a replaced element.
   If your .hero__pfp is an <img>, pseudo-elements won't render.
   Use this wrapper if you want the vignette guaranteed:

   <div class="pfp-wrap"><img class="hero__pfp" ...></div>

   Then move the ::after styles to .pfp-wrap::after and make .pfp-wrap position:relative.
*/

/* name & tagline */
.hero__name{
  margin-top: 14px;
  font-size: clamp(2rem,4.5vw,2.8rem);
}
.hero__tagline{
  margin-top: 10px;
  font-size: clamp(1.05rem,2.6vw,1.25rem);
  color: rgba(255,255,255,0.88);
}

/* buttons (default for most sizes) */
.hero__links{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero__btn{
  padding: 0.65rem 1.15rem;
  border-radius: 30px;
  border: 2px solid rgba(255,255,255,0.92);
  background: transparent;
  color: var(--white);
  text-decoration: none;
  transition: 0.16s ease all;
}

.hero__btn:hover{
  background: var(--white);
  color: var(--primary);
  font-weight: 600;
  transform: scale(1.07);
}

/* ===========================
   WIDE 16:9-ish override ONLY
   - Use aspect-ratio + min-width so this only hits desktop widescreens
=========================== */
@media (min-width: 1100px) and (min-aspect-ratio: 16/9){
  .hero__links{
    gap: 4rem;
  }

  .hero__btn{
    padding: 0.65rem 1.3rem;
    scale: .95; /* keeping your intent */
  }

  .hero__btn:hover{
    /* keep it clean: pick ONE scaling system (transform). */
    transform: scale(1.10);
    /* remove `scale: 1.5;` because it fights transform + is huge */
    scale: 1.1;
  }
}

/* stock widget bottom-left */
.widgets{
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 10;
}

/* Home page: let hero background live behind the fixed navbar */
body.home .hero{
  margin-top: calc(-1 * var(--nav-h));
  height: 100vh;
  padding-top: var(--nav-h);
}