body {
  margin: 0;
  padding: 0;
  background-color: #0a0a0a;
  color: white;
  font-family: "Inter", sans-serif;
  overflow: hidden;
}

.cmp-nav-column {
  transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.cmp-nav-column::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 20;
}

.cmp-nav-column::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 20vh;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  z-index: 21;
  animation: cmp-border-sweep 4s infinite ease-in-out;
}

.cmp-nav-column:nth-child(1)::after {
  animation-delay: 0s;
}

.cmp-nav-column:nth-child(2)::after {
  animation-delay: -2s;
}

.cmp-nav-column:last-child::before,
.cmp-nav-column:last-child::after {
  display: none;
}

.cmp-nav-column.cmp-inactive {
  width: 15%;
}

.cmp-nav-column.cmp-active {
  width: 70%;
}

.cmp-nav-column.cmp-default {
  width: 33.333%;
}

.cmp-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(0px) brightness(1);
  transform: scale(1.05);
  transition:
    opacity 0.8s ease,
    filter 0.8s ease;
  z-index: -1;
}

.cmp-active .cmp-bg-layer {
  opacity: 1;
  filter: blur(0px) brightness(1);
}

.cmp-inactive .cmp-bg-layer {
  opacity: 1;
  filter: blur(8px) brightness(0.6);
}

.cmp-nav-text {
  font-size: 4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  color: white;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
  white-space: nowrap;
  z-index: 10;
}

.cmp-pos-left {
  position: absolute;
  left: 8vw;
  bottom: 10vh;
  transform-origin: left bottom;
}

.cmp-pos-center {
  position: absolute;
  left: 50%;
  bottom: 10vh;
  transform: translateX(-50%);
  transform-origin: center bottom;
}

.cmp-pos-right {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  transform-origin: right bottom;
}

.cmp-inactive .cmp-nav-text {
  opacity: 0.3;
  filter: blur(8px);
}

.cmp-inactive .cmp-pos-left {
  transform: scale(0.8);
}

.cmp-inactive .cmp-pos-center {
  transform: translateX(-50%) scale(0.8);
}

.cmp-inactive .cmp-pos-right {
  transform: scale(0.8);
}

.cmp-social-link svg {
  width: 20px;
  height: 20px;
  fill: white;
  transition: opacity 0.3s;
}

.cmp-social-link:hover {
  opacity: 0.6;
}

/* Slideshow logic for Stills */
.cmp-slideshow-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.cmp-slideshow-img.cmp-visible {
  opacity: 1;
}

/* Overlay for legibility */
.cmp-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Default background - The Mountain */
#cmp-default-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../main-image.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;
  transition: opacity 1s ease;
}

.cmp-any-active #cmp-default-bg {
  opacity: 0;
}
#instagram-feed-container .eapps-instagram-feed.es-widget > a {
  display: none !important;
}
@keyframes cmp-border-sweep {
  0%,
  100% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(500%);
  }
}

/* About Page Transition Classes */
.cmp-line-show {
  width: 2px !important;
  height: 100vh !important;
}

.cmp-line-expand {
  width: 100vw !important;
  height: 100vh !important;
}

.cmp-page-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

#cmp-transition-line {
  transition:
    width 800ms cubic-bezier(0.8, 0, 0.2, 1),
    height 800ms cubic-bezier(0.8, 0, 0.2, 1);
}

@keyframes cmp-border-sweep-horizontal {
  0%,
  100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(500%);
  }
}

@media (max-width: 768px) {
  .cmp-nav-column {
    width: 100% !important;
    height: 33.333vh;
    transition: height 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .cmp-nav-column.cmp-inactive {
    width: 100% !important;
    height: 15vh;
  }

  .cmp-nav-column.cmp-active {
    width: 100% !important;
    height: 70vh;
  }

  .cmp-nav-column.cmp-default {
    width: 100% !important;
    height: 33.333vh;
  }

  .cmp-nav-column::before {
    width: 100%;
    height: 1px;
    top: auto;
    bottom: 0;
    left: 0;
  }

  .cmp-nav-column::after {
    width: 20vw;
    height: 1px;
    top: auto;
    bottom: 0;
    left: 0;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent
    );
    animation: cmp-border-sweep-horizontal 4s infinite ease-in-out;
  }

  .cmp-nav-column:last-child::before,
  .cmp-nav-column:last-child::after {
    display: none;
  }

  .cmp-nav-text {
    font-size: 2.5rem;
  }

  .cmp-pos-left,
  .cmp-pos-center,
  .cmp-pos-right {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%);
  }

  .cmp-inactive .cmp-pos-left,
  .cmp-inactive .cmp-pos-center,
  .cmp-inactive .cmp-pos-right {
    transform: translate(-50%, 50%) scale(0.8);
  }
}