//////////////////////////////
// THEME / COMPONENTS / FOOTER
//////////////////////////////


@use "sass:color";
@use "../variables/" as var;
@use "../mixins/" as mixins;


.unl .dcf-footer {
  color: var.$light-gray;
  background-color: var.$darker-gray;
  overflow: clip;
  position: relative;
}


// NU Seal
.unl .dcf-footer::before {
  aspect-ratio: 1 / 1;
  background: url('@images/seal.svg?no-inline') 0 0 / contain no-repeat;
  content: '';
  filter: blur(2px);
  height: auto;
  position: absolute;
}


.unl-footer-groups {
  --block-padding: #{var.$ms-8}rem;
  @include mixins.lh-3;
}


.unl .dcf-footer h2 {
  @include mixins.cream;
  @include mixins.ls-2;
  text-transform: uppercase;
}


.unl-footer-groups ul {
  margin-block: calc(var(--block-padding) * -1);
}


.unl-footer-groups dl:last-child,
.unl-footer-groups dd:last-child,
.unl-footer-groups li {
  margin-bottom: 0;
}


// Footer links
.unl .dcf-footer a,
.unl .dcf-footer a:link {
  color: var.$lighter-gray;
}


.unl .dcf-footer a:visited,
.unl .dcf-footer a:hover,
.unl .dcf-footer a:active {
  color: var.$cream;
}


.unl-footer-groups dd a:not(:hover),
.unl-footer-groups li a:not(:hover) {
  text-decoration: none;
}


.unl-footer-groups li a {
  display: inline-block;
  padding-block: var(--block-padding);
}


.unl-footer-title-est-copyright {
  row-gap: .32em;
}


@include mixins.mq(sm, max, width) {

  .unl-footer-social {
    flex-grow: 1;
  }


  .unl-std-footer {
    flex-wrap: wrap;
  }

}


@include mixins.mq(md, max, width) {

  // NU Seal
  .unl .dcf-footer::before {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 25vw);
    width: 110vw;
  }


  .unl .dcf-footer h2,
  .unl-footer-groups dl,
  .unl-footer-groups ul {
    @include mixins.txt-md;
  }


  .unl-footer-logos {
    align-items: center;
  }


  .unl-std-footer,
  .unl-big-footer {
    @include mixins.pb-11;
  }


  .unl-big-footer-social {
    @include mixins.mb-5;
  }

}


@include mixins.mq(md, min, width) {

  // NU Seal
  .unl .dcf-footer::before {
    right: -#{var.$ms04}em;
    top: -#{var.$ms00}em;
    width: clamp(#{var.$ms26}rem, calc(#{var.$ms16}rem + 25vw + 25vh), #{var.$ms28}rem);
  }


  .unl .dcf-footer h2,
  .unl-footer-groups dl,
  .unl-footer-groups ul {
    @include mixins.txt-sm;
  }


  .unl-footer-logos {
    flex-direction: column;
    align-items: flex-end;
  }


  .unl-std-footer,
  .unl-big-footer {
    @include mixins.pb-7;
  }


  .unl-big-footer-social {
    @include mixins.mb-3;
  }


  @supports (animation-timeline: view()) {

    @keyframes scale-nebraska {
      from {
        transform: scale(1.33);
      }
      to {
        transform: scale(1);
      }
    }


    #unl-footer-nebraska-wordmark {
      animation: scale-nebraska linear;
      animation-range: entry 0% entry 100%;
      animation-timeline: view();
      transform-origin: top center;
      will-change: transform;
    }

  }

}


@include mixins.mq(lg, max, width) {

  #unl-footer-herbie {
    display: none;
  }

}


@include mixins.mq(lg, min, width) {

  @supports (animation-timeline: view()) {

    @keyframes move-herbie-down {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(100%);
      }
    }


    @keyframes move-herbie-up {
      0% {
        transform: translateY(100%) scale(75%);
      }
      100% {
        transform: translateY(0) scale(100%);
      }
    }


    #unl-footer-herbie {
      /* --back-in easing: https://codepen.io/smashingmag/pen/zYywLXB */
      animation: move-herbie-down 300ms linear(0, -0.0029 4.31%, -0.0119 9.02%, -0.0838 31.27%, -0.0956 36.64%, -0.1 41.45%, -0.0953 47.03%, -0.0792 52.25%, -0.0512 57.19%, -0.0111 61.92%, 0.0512 67.19%, 0.131 72.27%, 0.2284 77.18%, 0.3443 81.96%, 0.479 86.62%, 0.6329 91.17%, 0.8065 95.63%, 1) forwards;
      filter: drop-shadow(-#{var.$ms-8}em var.$length-em-4 var.$length-em-3 rgba(0,0,0,.2)) drop-shadow(#{var.$ms-12}em var.$length-em-4 var.$length-em-4 rgba(0,0,0,.1));
      transform: translateY(100%) scale(75%);
      transform-origin: bottom center;
      will-change: transform;
    }


    @container style(--bit: 1) {
      #unl-footer-herbie {
        /* --expo-out easing: https://codepen.io/smashingmag/pen/zYywLXB */
        animation: move-herbie-up 600ms linear(0, 0.1684 2.66%, 0.3165 5.49%, 0.446 8.52%, 0.5581 11.78%, 0.6535 15.29%, 0.7341 19.11%, 0.8011 23.3%, 0.8557 27.93%, 0.8962 32.68%, 0.9283 38.01%, 0.9529 44.08%, 0.9711 51.14%, 0.9833 59.06%, 0.9915 68.74%, 1) 2s forwards;
      }
    }


    :has(> #unl-footer-herbie) {
      animation: flipthebit both;
      animation-range: entry 99%;
      animation-timeline: view();
      left: calc(var.$length-vw-2 + #{var.$ms26}rem + 1vw);
      overflow-y: clip;
    }

  }

}