/* IMPORTS */
@import "globalvars.css";
@import "bootstrap-overrides.css";
@import "utility-classes.css";
@import "hover-zoom.css";

/* TOPOGRAPHY STYLES */
body {
 background-color: var(--pageBG);
 font-family: var(--font);
}
#pageSpacer {
  height: 72px;
}
#content {
  background: #FFF;
  width: 100%;
  max-width: var(--pageMaxWidth);
}
#footer {
  background-color: var(--dark);
  color: #FFF;
}

/* ELEMENT STYLES */
.transition-navbar,
.navbar.scrolled {
  transition: background-color 2s ease, backdrop-filter 0.4s ease;
  /* backdrop-filter: blur(3px); */ /* subtle glass effect */
}
.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.75) !important; /* semi-transparent */
  -webkit-backdrop-filter: blur(3px); /* add */
  backdrop-filter: blur(3px);         /* add */
}
.navbar.scrolled.boxShadow {
  box-shadow: none;
}
.navbar.scrolled .cta-nav {
  background-color: rgba(255,255,255,0.10);
  border-color: rgba(0,0,0,0.15);
  border: none;
}
.navbar.scrolled .cta-nav.glisten {
  background: transparent;
}

.nav-item.last {
  padding-right: 0;
}
#hero {
  overflow: hidden;
}
#hero.project-page .img-caption {
  max-width: 600px;
}
.cta {
  color: var(--light);
  background: url("../../assets/img/cta-bg.jpg") no-repeat left -280px;
  filter: blur(1.5rem);          /* starting blur */
  transition: filter 1s ease;
  will-change: filter;
}
.cta.loaded {
  filter: blur(0);             /* animate to sharp */
}
.cta-nav {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--dark);
  border-radius: var(--spacing2) !important;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
  will-change: opacity;
}
.hamburger .cta-nav {
  border: none;
  border-radius: 0;
}
.img-caption {
  color: var(--light);
  position: absolute;
  text-shadow: 0 0 7px #000;
  text-transform: uppercase;
  bottom: var(--spacing1);
  left: var(--spacing3);
  z-index: 100;
}
#footer a {
  color: var(--light);
  text-decoration: none;
}

p.lbl-unblur span {
  display: block;                  /* each line on its own */
  filter: blur(6px);
  opacity: 0;
  transition: filter 3.0s ease, opacity 3.0s ease;
}
p.lbl-unblur.loaded span.unblur {
  filter: blur(0);
  opacity: 1;
}

/* ANIMATIONS */
.glisten {
  animation: glisten infinite;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-duration: 10s;
  background: linear-gradient(
    135deg,
    #ffffff   0%,
    #ffffff  50%,
    #C3D1E8  55%,
    #FFFFFF  56%,
    #ffffff 100%
  );
  background-size: 500% 100%;
  transition: background-color 2.0s ease;
}
@keyframes glisten {
    0% { background-position: 100% 0; }
  100% { background-position:   0% 0; }
}

.page-title {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: .95;
}