@import url('https://rsms.me/inter/inter.css');

$color--background: hsl(300, 3%, 15%); // Note the $block--modifier syntax. This is just personal preference. Just be consistent!
$color--primary: hsl(0, 0%, 100%); // White color for most of the app.
$color--secondary: hsl(0, 0%, 90%); // Off-white for the progress indicator
$color--neutral: hsl(0, 0%, 1%); // Nearly-black color for text.


$app-width: 100%;

$debug: false;
// mixins
@mixin debugger($color) {
  @if $debug == true {
    border: 1px solid $color;
  }
}
@mixin slide-image {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@mixin clip-path-wipe {
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  &-enter{
    clip-path: polygon(0 0,0 0,0 100%,0 100%);
    transform: scale(1.3);
  }
  &-leave-to{
    clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
    transform: scale(1.3);
  }
  &-enter-active {
    transition: all 700ms;
    transition-delay: 500ms;
  }
  &-leave-active {
    transition: all 700ms;
  }
}

*, *:before, *:after{box-sizing: border-box;}
html {
  font-size: calc(100% + 0.2vw);
   font-family: "Inter", sans-serif;
  @supports (font-variation-settings: normal) {
    font-family: "Inter var", sans-serif;
  }
}
body {
  display: grid;
  background-color: $color--background;
}
a {
  color: inherit;
  text-decoration: none;
  &:hover, &:active {
    color: inherit;
    text-decoration: underline;
  }
  &:active {
    opacity: .7;
  }
  &:visited {
    color: inherit;
  }
}
.viewport {
  @include debugger(grey);
  width: $app-width;
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  background-color: $color--primary;
  box-shadow: 0 1rem 2rem hsla(0, 0%, 0%, 0.2); 
}
.nav {
  @include debugger(cyan);

  padding: 1rem;
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  grid-template-columns: 1fr 4fr;
  &__brand {
    color: $color--primary;
    font-weight: 730;
    font-size: 1.6rem;
  }
  &__list {
    @include debugger(cyan);

    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    font-weight: 500;
    padding: 0;
    &-item{
      margin-left: 2rem;
    }
  }
}
.main {
  @include debugger(chartreuse);

  display: grid;
  grid-template-rows: 2fr 1fr;
  grid-template-areas: "headline" "nav";
  align-items: end;
  &__slider {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;
    
  }
  &__slide-image {
    @include slide-image;
    @include clip-path-wipe;
  }
  &__headline {
    @include debugger(chartreuse);

    padding: 1.2rem;
    grid-area: headline;
    z-index: 1;
    color: $color--primary;
    font-size: 2rem;
    font-weight: 730;
    z-index: 1;
  }
  &__nav {
    @include debugger(chartreuse);

    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-area: nav;
    width: 80%;
    padding: 1rem 3rem;
    color: $color--primary;
  }
  &__headline-span{
    position: absolute;
    width: 60%;
    &-enter,&-leave-to{
      transform: translateY(1em);
      opacity: 0;
    }
    &-enter-active,&-leave-active{
      transition: all 300ms;
    }
    &-enter-active {
      transition-delay: 700ms;
    }
  }
}
.social-links {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.4rem;
  align-items: center;
  &:before,
  &:after {
    content: "";
    display: block;
    width: 1rem;
    height: 0.1rem;
    background: $color--primary;
  }
  &:before {
    grid-column: 2;
  }
  &:after {
    grid-column: 4;
  }
  &__item {
    color: $color--primary;
  }
}
.aside {
  @include debugger(magenta);

  position: relative;
  display: grid;
  padding: 2rem;
  $button-size: 2rem;
  &__slider {
    @include debugger(magenta);

    position: relative;
    height: 15rem;
    margin-top: 2rem;
    overflow:hidden;
  }
  &__slide-image {
    @include slide-image;
    @include clip-path-wipe;
    &-leave-active {
      transition-delay: 200ms;
    }
    &-enter-active {
      transition-delay: 600ms;
    }
  }
  &__button {
    width: $button-size;
    height: $button-size;
    font-size: 1.2rem;
    width: 2rem;
    height: 2rem;
    margin: 0;
    cursor: pointer;
    border: 1px solid $color--primary;
    outline: 0;
    background: $color--primary;
    &:hover,
    &:focus {
      border-color: $color--neutral;
    }
    &:active {
      color: $color--primary;
      border-color: $color--neutral;
      background: $color--neutral;
    }
  }
  
  &__nav {
    @include debugger(magenta);

    position: absolute;
    bottom: 0;
    left: -#{$button-size};
  }
}
.progress-indicator {
  @include debugger(magenta);

  position: absolute;
  right: 2rem;
  bottom: 1rem;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1rem;
  align-items: center;
  justify-content: end;
  width:5rem;
  &__bar {
      width: 1.5rem;
      height: 0.2rem;
      background: $color--secondary;
      &--active {
        background: $color--neutral;
      }
    }
    &:before,
    &:after {
      color: $color--neutral
    }
    &:before {
      content: "01";
    }
    &:after {
      content: attr(data-slides-count);
    }
}