/* ------------------ */
/* HEADER TEXT/BANNER */
/* ------------------ */

header {
    position: relative;
    background: var(--header-image) no-repeat center/cover;

    color: #fff;
    text-align: center;

    /* For header fade*/
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 20%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 20%,
        rgba(0,0,0,0) 100%
    );
}

/** Adding slight gradient to header image for text visibility */
header::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.15) 40%,
      rgba(0,0,0,0.00) 100%
  );
  pointer-events: none;
}

/** Header banner w/ candid shot of me & team for home page */
body.home header {
    --header-image: url('../media/PencilPusherDitchShot.jpg');
    height: 750px;
}
/* Smaller banner for non-home pages */
body:not(.home) header {
    height: 280px;
    background-size: cover;
    background-position: center;
}

header::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    background: var(--header-image) no-repeat center/cover;

    z-index: -1;

    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 25%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 25%,
        rgba(0,0,0,0) 100%
    );
}
/* Allows scroll-based movement */
#header-content {
  position: absolute;
  top: 20%;         /* starting point */
  left: 50%;
  transform: translateX(-50%);
  transition: top 0.1s ease-out;
}
header h1 {
  text-align: center;
  font-size: 6em;
  letter-spacing: 2px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.75);
}


/* Banner backgrounds for specific project pages */
body.arcade header {
    --header-image: url('../media/ArcadeMachine/IMG_5900.jpg');
}
body.clock header {
    --header-image: url('../media/ClockArtProject/FinalPiece.png');
}
body.il header {
    --header-image: url('../media/InterestLaunch/ABM_0988.JPG');
}
body.impeller header {
    --header-image: url('../media/OptimizedImpeller/Design1HarmonicStress.png');
}
body.mach3 header {
    --header-image: url('../media/Mach3/Mach3OpenRocketDesign.png');
}
body.l2 header {
    --header-image: url('../media/L2Rocket/IMG_0288.JPG');
}