@layer layout {
  
  .l-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }
}


@layer utilities {
  
  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}




@layer components {
  .icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
  }
}




@layer components {
  @scope (.wvvu-mark) {
    :scope {
      position: relative;
      display: inline-block;
      width: var(--wvvu-mark-w);
      height: var(--wvvu-mark-h);
      transform: rotate(var(--wvvu-mark-rotate));
      mix-blend-mode: var(--wvvu-mark-blend);
      pointer-events: none;
    }

    .letter {
      position: absolute;
      inset: 0;
      overflow: hidden;
      mask-repeat: no-repeat;
      mask-mode: alpha;
    }

    .letter > img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
    }

    
    .pan-group {
      position: absolute;
      inset: 0;
      display: flex;
      width: 200%;
      height: 100%;
    }

    .pan-set {
      position: relative;
      width: 50%;
      height: 100%;
      flex: none;
    }

    :scope.is-pan-animated {
      overflow: hidden;
    }

    :scope.is-pan-animated .pan-group {
      animation: wvvu-mark-pan 7.2s linear infinite;
    }

    
    :scope.is-animated .letter {
      animation-duration: 1.92s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    :scope.is-animated .letter:nth-child(1) {
      animation-name: wvvu-bounce-translate-1, wvvu-bounce-scale-1;
    }

    :scope.is-animated .letter:nth-child(2) {
      animation-name: wvvu-bounce-translate-2, wvvu-bounce-scale-2;
    }

    :scope.is-animated .letter:nth-child(3) {
      animation-name: wvvu-bounce-translate-3, wvvu-bounce-scale-3;
    }

    :scope.is-animated .letter:nth-child(4) {
      animation-name: wvvu-bounce-translate-4, wvvu-bounce-scale-4;
    }
  }

  @keyframes wvvu-mark-pan {
    from {
      transform: translateX(-50%);
    }

    to {
      transform: translateX(0%);
    }
  }

  @keyframes wvvu-bounce-translate-1 {
    0% {
      translate: 0 0;
    }

    7.813% {
      animation-timing-function: ease-in;
      translate: 0 0;
    }

    13.021% {
      animation-timing-function: ease-out;
      translate: 0 7.783px;
    }

    22.396% {
      animation-timing-function: ease-in;
      translate: 0 -12px;
    }

    31.771% {
      animation-timing-function: ease-out;
      translate: 0 7.783px;
    }

    37.5% {
      animation-timing-function: ease-in-out;
      translate: 0 -4px;
    }

    45.313% {
      translate: 0 0;
    }

    100% {
      translate: 0 0;
    }
  }

  @keyframes wvvu-bounce-scale-1 {
    0% {
      scale: 1 1;
    }

    7.813% {
      animation-timing-function: ease-in;
      scale: 1 1;
    }

    13.021% {
      animation-timing-function: ease-out;
      scale: 1.25 0.8;
    }

    22.396% {
      animation-timing-function: ease-in;
      scale: 0.833 1.2;
    }

    31.771% {
      animation-timing-function: ease-out;
      scale: 1.25 0.8;
    }

    37.5% {
      animation-timing-function: ease-in-out;
      scale: 0.935 1.07;
    }

    45.313% {
      scale: 1 1;
    }

    100% {
      scale: 1 1;
    }
  }

  @keyframes wvvu-bounce-translate-2 {
    0% {
      translate: 0 0;
    }

    15.625% {
      animation-timing-function: ease-in;
      translate: 0 0;
    }

    20.833% {
      animation-timing-function: ease-out;
      translate: 0 7.368px;
    }

    30.208% {
      animation-timing-function: ease-in;
      translate: 0 -12px;
    }

    39.583% {
      animation-timing-function: ease-out;
      translate: 0 7.368px;
    }

    45.313% {
      animation-timing-function: ease-in-out;
      translate: 0 -4px;
    }

    53.125% {
      translate: 0 0;
    }

    100% {
      translate: 0 0;
    }
  }

  @keyframes wvvu-bounce-scale-2 {
    0% {
      scale: 1 1;
    }

    15.625% {
      animation-timing-function: ease-in;
      scale: 1 1;
    }

    20.833% {
      animation-timing-function: ease-out;
      scale: 1.25 0.8;
    }

    30.208% {
      animation-timing-function: ease-in;
      scale: 0.833 1.2;
    }

    39.583% {
      animation-timing-function: ease-out;
      scale: 1.25 0.8;
    }

    45.313% {
      animation-timing-function: ease-in-out;
      scale: 0.935 1.07;
    }

    53.125% {
      scale: 1 1;
    }

    100% {
      scale: 1 1;
    }
  }

  @keyframes wvvu-bounce-translate-3 {
    0% {
      translate: 0 0;
    }

    23.438% {
      animation-timing-function: ease-in;
      translate: 0 0;
    }

    28.646% {
      animation-timing-function: ease-out;
      translate: 0 7.368px;
    }

    38.021% {
      animation-timing-function: ease-in;
      translate: 0 -12px;
    }

    47.396% {
      animation-timing-function: ease-out;
      translate: 0 7.368px;
    }

    53.125% {
      animation-timing-function: ease-in-out;
      translate: 0 -4px;
    }

    60.938% {
      translate: 0 0;
    }

    100% {
      translate: 0 0;
    }
  }

  @keyframes wvvu-bounce-scale-3 {
    0% {
      scale: 1 1;
    }

    23.438% {
      animation-timing-function: ease-in;
      scale: 1 1;
    }

    28.646% {
      animation-timing-function: ease-out;
      scale: 1.25 0.8;
    }

    38.021% {
      animation-timing-function: ease-in;
      scale: 0.833 1.2;
    }

    47.396% {
      animation-timing-function: ease-out;
      scale: 1.25 0.8;
    }

    53.125% {
      animation-timing-function: ease-in-out;
      scale: 0.935 1.07;
    }

    60.938% {
      scale: 1 1;
    }

    100% {
      scale: 1 1;
    }
  }

  @keyframes wvvu-bounce-translate-4 {
    0% {
      animation-timing-function: ease-in;
      translate: 0 0;
    }

    5.208% {
      animation-timing-function: ease-out;
      translate: 0 7.388px;
    }

    14.583% {
      animation-timing-function: ease-in;
      translate: 0 -12px;
    }

    23.958% {
      animation-timing-function: ease-out;
      translate: 0 7.388px;
    }

    29.688% {
      animation-timing-function: ease-in-out;
      translate: 0 -4px;
    }

    37.5% {
      translate: 0 0;
    }

    100% {
      translate: 0 0;
    }
  }

  @keyframes wvvu-bounce-scale-4 {
    0% {
      animation-timing-function: ease-in;
      scale: 1 1;
    }

    5.208% {
      animation-timing-function: ease-out;
      scale: 1.25 0.8;
    }

    14.583% {
      animation-timing-function: ease-in;
      scale: 0.833 1.2;
    }

    23.958% {
      animation-timing-function: ease-out;
      scale: 1.25 0.8;
    }

    29.688% {
      animation-timing-function: ease-in-out;
      scale: 0.935 1.07;
    }

    37.5% {
      scale: 1 1;
    }

    100% {
      scale: 1 1;
    }
  }
}