.btn-wrapper::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      pointer-events: none;
      background-color: #0000;
      background-image: repeating-linear-gradient(45deg, var(--grid-color) 0 1px, transparent 2px 5px);
      opacity: 0;
      z-index: -1;
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active)::after {
      animation: opacity-anim calc(var(--animation-speed) * 4) ease-in-out forwards;
    }

    @keyframes opacity-anim {
      80% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    .btn-wrapper .btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.8rem 1.25rem;
      background-color: #fff0;
      border: 1px solid var(--grid-color);
      color: #fffd;
      font-family: "Inter", sans-serif;
      letter-spacing: -0.01em;
      font-size: 1rem;
      font-weight: 600;
      text-transform: capitalize;
      border-radius: 6px;
      cursor: pointer;
      transition: transform .2s ease-in-out, letter-spacing .2s ease-in-out;
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .btn {
      background-color: var(--red);
      color: #fff;
      transform: scale(1.05);
      letter-spacing: .06em;
    }

    .btn-wrapper .btn:active {
      background-color: var(--red);
      transform: scale(.98);
      letter-spacing: .02em;
    }

    .btn-wrapper .btn-svg {
      margin-left: .5rem;
      height: 24px;
      stroke-width: 1;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke: #fff4;
      fill: #fff2;
      transition: all .2s ease-in-out;
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .btn-svg {
      stroke: #fffa;
      fill: #fff3;
    }

    .btn-wrapper .dot {
      position: absolute;
      width: var(--dot-size);
      aspect-ratio: 1;
      border-radius: 2px;
      background-color: var(--dot-color);
      transition: all .3s ease-in-out;
      opacity: 0;
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .dot.top.left {
      top: 50%;
      left: 20%;
      animation: move-top-left var(--animation-speed) ease-in-out forwards;
    }

    @keyframes move-top-left {
      90% {
        opacity: .6;
      }

      100% {
        top: calc(var(--dot-size) * -0.5);
        left: calc(var(--dot-size) * -0.5);
        opacity: 1;
      }
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .dot.top.right {
      top: 50%;
      right: 20%;
      animation: move-top-right var(--animation-speed) ease-in-out forwards;
      animation-delay: calc(var(--animation-speed)*.6);
    }

    @keyframes move-top-right {
      80% {
        opacity: .6;
      }

      100% {
        top: calc(var(--dot-size) * -0.5);
        right: calc(var(--dot-size) * -0.5);
        opacity: 1;
      }
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .dot.bottom.right {
      bottom: 50%;
      right: 20%;
      animation: move-bottom-right var(--animation-speed) ease-in-out forwards;
      animation-delay: calc(var(--animation-speed)*1.2);
    }

    @keyframes move-bottom-right {
      80% {
        opacity: .6;
      }

      100% {
        bottom: calc(var(--dot-size) * -0.5);
        right: calc(var(--dot-size) * -0.5);
        opacity: 1;
      }
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .dot.bottom.left {
      bottom: 50%;
      left: 20%;
      animation: move-bottom-left var(--animation-speed) ease-in-out forwards;
      animation-delay: calc(var(--animation-speed)*1.8);
    }

    @keyframes move-bottom-left {
      80% {
        opacity: .6;
      }

      100% {
        bottom: calc(var(--dot-size) * -0.5);
        left: calc(var(--dot-size) * -0.5);
        opacity: 1;
      }
    }

    .btn-wrapper .line {
      position: absolute;
      transition: all .3s ease-in-out;
    }

    .btn-wrapper .line.horizontal {
      height: var(--line-weight);
      width: 100%;
      background-image: repeating-linear-gradient(90deg, #0000 0 calc(var(--line-weight)*2), var(--line-color) calc(var(--line-weight)*2) calc(var(--line-weight)*4));
    }

    .btn-wrapper .line.top {
      top: calc(var(--line-weight)*-0.5);
      transform-origin: top left;
      transform: rotate(5deg) scaleX(0);
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .line.top {
      animation: draw-top var(--animation-speed) ease-in-out forwards;
      animation-delay: calc(var(--animation-speed)*.8);
    }

    @keyframes draw-top {
      100% {
        transform: rotate(0deg) scaleX(1);
      }
    }

    .btn-wrapper .line.bottom {
      bottom: calc(var(--line-weight)*-0.5);
      transform-origin: bottom right;
      transform: rotate(5deg) scaleX(0);
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .line.bottom {
      animation: draw-bottom var(--animation-speed) ease-in-out forwards;
      animation-delay: calc(var(--animation-speed)*2);
    }

    @keyframes draw-bottom {
      100% {
        transform: rotate(0deg) scaleX(1);
      }
    }

    .btn-wrapper .line.vertical {
      width: var(--line-weight);
      height: 100%;
      background-image: repeating-linear-gradient(0deg, #0000 0 calc(var(--line-weight)*2), var(--line-color) calc(var(--line-weight)*2) calc(var(--line-weight)*4));
    }

    .btn-wrapper .line.left {
      left: calc(var(--line-weight)*-0.5);
      transform-origin: bottom left;
      transform: rotate(0deg) scaleY(0);
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .line.left {
      animation: draw-left var(--animation-speed) ease-in-out forwards;
      animation-delay: calc(var(--animation-speed)*2.4);
    }

    @keyframes draw-left {
      100% {
        transform: rotate(0deg) scaleY(1);
      }
    }

    .btn-wrapper .line.right {
      right: calc(var(--line-weight)*-0.5);
      transform-origin: top right;
      transform: rotate(5deg) scaleY(0);
    }

    .btn-wrapper:is(:hover,:focus-within,.is-active) .line.right {
      animation: draw-right var(--animation-speed) ease-in-out forwards;
      animation-delay: calc(var(--animation-speed)*1.4);
    }

    @keyframes draw-right {
      100% {
        transform: rotate(0deg) scaleY(1);
      }
    }
  
.portfolio.btn-wrapper{--dot-size:6px;--line-weight:1px;--line-distance:.8rem 1rem;--animation-speed:.35s;--dot-color:#fffa;--line-color:#fffa;--grid-color:#fff3;position:relative;isolation:isolate;display:inline-flex;justify-content:center;align-items:center;width:100%;min-height:0;height:auto;padding:var(--line-distance);border:0;border-radius:0;background:transparent;text-decoration:none;user-select:none}
.portfolio.btn-wrapper .btn{width:100%;font-size:clamp(8px,2.3vw,11px);padding:12px 7px;white-space:nowrap;letter-spacing:-.02em;gap:5px}
.portfolio.btn-wrapper .btn-svg{flex-shrink:0;width:20px;height:20px;margin:0}
.portfolio.btn-wrapper:active{background:transparent}
.btn-wrapper .dot,.btn-wrapper .line{pointer-events:none}
@media(prefers-reduced-motion:reduce){.btn-wrapper *,.btn-wrapper:after{animation:none!important;transition:none!important}.btn-wrapper:is(:hover,:focus-within,.is-active) .btn{transform:none;letter-spacing:-.02em}}