<nav>
  <a href="#hiking" data-anchor="hiking">Hiking</a>
  <a href="#camping" data-anchor="camping">Camping</a>
  <a href="#stargazing" data-anchor="stargazing">Stargazing</a>
  
  <div class="progress-bar"></div>
</nav>

<section id="hiking">
  <h1>Hiking</h1>
</section>
<section id="camping">
  <h1>Camping</h1>
</section>
<section id="stargazing">
  <h1>Stargazing</h1>
</section>

@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');


@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}
html {
  font-size: 100vmax / 1600 * 100;
  
  // 🐰 scroll controls
  scroll-behavior: smooth;
  
  @media (max-width: 992px) {
    font-size: 60px;
  }
}
body {
  min-height: 100vh;
  color: #fff;
  font-size: 0.24rem;
  font-family: 'Philosopher', sans-serif;
  
  $anchors: 'hiking', 'camping', 'stargazing';
  @each $anchor in $anchors {
    &:has(##{$anchor}:target) {
      a[data-anchor=#{$anchor}]:before {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
      }
    }
  }
}

nav {
  position: fixed;
  top: 0.3rem;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
  padding: 0.1rem 1rem;
  box-shadow: 0 0 10px #0005;
  
  @include flexCenter;
  gap: 0.7rem;
  
  border-radius: 0.5rem;
  backdrop-filter: blur(10px);
  background-color: #fff2;
  
  overflow: hidden;
  z-index: 100;
  
  a {
    position: relative;
    display: inline-block;
    padding: 0.1rem;
    
    color: inherit;
    text-decoration: none;
    text-shadow: 0 0 5px rgba(#000, 0.8);
    letter-spacing: 2px;
    
    // star deco
    &:before {
      content: '\2605';
      position: absolute;
      right: 100%;
      
      font-family: 'Potta One', system-ui;
      font-size: 0.9em;
      
      opacity: 0;
      visibility: hidden;
      translate: 0 10px;
      transition: all 0.3s;
      
      pointer-events: none;    
    }
  }
  
  .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.08rem;
    background-image: linear-gradient(to right, #8ad4ff, #fa7196);
    border-radius: 0.1rem;
    
    animation: progressMove linear both;
    animation-timeline: scroll(block root);
  }
}


section {
  width: 100%;
  height: 100dvh;
  padding: 0.5rem;
  @include flexCenter;
  
  background: no-repeat center / cover;
  overflow: hidden;
  
  &:target h1 {
    animation: showText 0.5s 0.5s both;
  }
  
  h1 {
    letter-spacing: 0.2rem;
    font-size: 1.7rem;
    text-transform: uppercase;
    
    mix-blend-mode: soft-light;
    text-shadow: 0 0 10px rgba(#000, 0.5);
  }
}


#hiking {
  background-image: url('https://images.unsplash.com/photo-1535515384173-d74166f26820?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTcyNjU5ODh8&ixlib=rb-4.0.3&q=85&w=1920'); /* photo by David Gavi for Unsplash */
}

#camping {
  background-image: url('https://images.unsplash.com/photo-1565674484371-a90094649d30?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTcyNjYwODJ8&ixlib=rb-4.0.3&q=85&w=1920'); /* Photo by Valery Sysoev for Unsplash */
}

#stargazing {
  background-image: url('https://images.unsplash.com/photo-1516257273908-f54242bd5ade?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTcyNjU1OTh8&ixlib=rb-4.0.3&q=85&w=1920'); /* Photo by Chris Leggat for Unsplash */
}

@keyframes showText {
  from {
    opacity: 0;
    translate: 0 0.3rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes progressMove {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

// 🥸