@import "./common.css" layer(layout);
@import "./transition.css";

@import "./buttons.css" layer(layout);

html, body{
  /* Global font-scaling variable */
  font-size: 1.5em;
}


body{
  
  background-color: var(--color-primary-light);
  img{
    user-select: none;
  }
}



@layer page{

  @property --outline-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }


  @keyframes rotate {
    to{
      --outline-angle: 360deg;
    }
  }

  @keyframes wiggle {
    to {
      transform: translateY(2px) scale(1.02);
    }
  }
  
  @keyframes slide {
    from{
      background-position-x: 0;
    }
    to{
      background-position-x: 100%;
    }
  }


  main{
    --nav-height: 150px;
    position: absolute;
    inset: 0;
    max-height: 100vh;
    overflow: hidden;
    padding-bottom: var(--nav-height);


    .sliding-background{
      position: absolute;
      inset: 0;
      z-index: 0;
      height: 100%;
      background-size: auto 100%;
      background-repeat: repeat-x;
      animation: 40s slide linear infinite;
      user-select: none;
      pointer-events: none;
    }

    .sequence-image{
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center top;
      top: 0;
    }

    nav{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: var(--nav-height);
      max-height: var(--nav-height);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      > *{
        min-height: 0;
        max-height: var(--nav-height);
      }
    }
    
  }



  #alerts{
    margin: 0;
    top: auto;
    left: 30%;
    right: 30%;
    bottom: 1rem;
    width: auto;
    height: auto;
    > .notification {
      margin: auto;
      height: 3rem;
    }
  }
  
  .sequence-links{
    position: absolute;
    inset: 0;
  
    >div{
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translate(-50%, -100%);
  
      &.bottom{
        flex-direction: column-reverse;
        transform: translate(-50%, 0);
      }
  
      &.align-right{
        align-items: start;
        transform: translate(-40px, -100%);
        &.bottom{
          transform: translate(-40px, 0);
        }
      }
  
      &.align-left{
        align-items: end;
        transform: translate(calc(40px - 100%), -100%);
        &.bottom{
          transform: translate(calc(40px - 100%), 0);
        }
      }
  
  
      >.sequence-arrow{
        display: block;
        max-width: 100%;
        height: auto;
      }
  
      .btn{
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &.left{
          transform: translateX(-40%);
        }
  
        &.right{
          transform: translateX(40%);
        }
      }
  
      .outline{
        position: absolute;
        top: 100%;
  
        border: 4px solid transparent;
        border-radius: 6px;
        background: transparent;
      }
      
      &.bottom .outline{
        position: absolute;
        top: auto;
        bottom: 100%;
      }
  
      &:target {
        filter: drop-shadow( 2px 2px 6px rgba(255, 255, 255, 0.6));
        >.sequence-arrow{
          filter: saturate(2);
          animation: wiggle 1s ease alternate infinite;
        }
        .btn{ /* active anchor */
          color: var(--color-white);
          background: var(--color-sequence);
          box-shadow: 0 0 2px 4px #ffffff66;
        }
  
        .outline{
          /* border-image: linear-gradient(var(--outline-angle), var(--color-sequence), var(--color-sequence-dark)) 1; */
          background: linear-gradient(var(--outline-angle), var(--color-sequence), var(--color-sequence-dark)) border-box;
          mask: 
            linear-gradient(#000 0 0) padding-box, 
            linear-gradient(#000 0 0);
          mask-composite: exclude;
          animation: 4s rotate linear infinite;
        }
      }
    }
  }

  .image-anchor{
    &:active{
      filter: saturate(0.4);
    }
  }

}