/* From Uiverse.io by augustin_4687 */ 
.home6-hero-event a {
  --stone-50: #fffdf9;
  --stone-800: #f5631b;
  --yellow-400: #ffbd87;

  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 22px 0 18px;
  min-height: 48px;
  isolation: isolate;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
  font-size: 1rem;
  border-radius: 5px;
  outline: 2px solid transparent;
  outline-offset: 6px;
  color: var(--stone-50);

  &:active {
    outline-color: var(--yellow-400);
  }

  &:focus-visible {
    outline-color: var(--yellow-400);
    outline-style: dashed;
  }

  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    height: 200%;
    max-height: 100px;
    aspect-ratio: 1;
    margin: auto;
    background: white;
    clip-path: polygon(
      100% 50%,
      91.48% 56.57%,
      97.55% 65.45%,
      87.42% 69.07%,
      90.45% 79.39%,
      79.7% 79.7%,
      79.39% 90.45%,
      69.07% 87.42%,
      65.45% 97.55%,
      56.57% 91.48%,
      50% 100%,
      43.43% 91.48%,
      34.55% 97.55%,
      30.93% 87.42%,
      20.61% 90.45%,
      20.3% 79.7%,
      9.55% 79.39%,
      12.58% 69.07%,
      2.45% 65.45%,
      8.52% 56.57%,
      0% 50%,
      8.52% 43.43%,
      2.45% 34.55%,
      12.58% 30.93%,
      9.55% 20.61%,
      20.3% 20.3%,
      20.61% 9.55%,
      30.93% 12.58%,
      34.55% 2.45%,
      43.43% 8.52%,
      50% 0%,
      56.57% 8.52%,
      65.45% 2.45%,
      69.07% 12.58%,
      79.39% 9.55%,
      79.7% 20.3%,
      90.45% 20.61%,
      87.42% 30.93%,
      97.55% 34.55%,
      91.48% 43.43%
    );

    animation: star-rotate 4s linear infinite;
    opacity: 0.1;
  }

  &:hover::before {
    opacity: 1;
  }

  & > div {
    padding: 2px;
    border-radius: 5px;
    background-color: var(--yellow-400);
    transform: translate(-4px, -4px);
    transition: all 150ms ease;
    box-shadow:
      0.5px 0.5px 0 0 var(--yellow-400),
      1px 1px 0 0 var(--yellow-400),
      1.5px 1.5px 0 0 var(--yellow-400),
      2px 2px 0 0 var(--yellow-400),
      2.5px 2.5px 0 0 var(--yellow-400),
      3px 3px 0 0 var(--yellow-400),
      0 0 0 2px var(--stone-800),
      0.5px 0.5px 0 2px var(--stone-800),
      1px 1px 0 2px var(--stone-800),
      1.5px 1.5px 0 2px var(--stone-800),
      2px 2px 0 2px var(--stone-800),
      2.5px 2.5px 0 2px var(--stone-800),
      3px 3px 0 2px var(--stone-800),
      3.5px 3.5px 0 2px var(--stone-800),
      4px 4px 0 2px var(--stone-800),
      0 0 0 4px var(--stone-50),
      0.5px 0.5px 0 4px var(--stone-50),
      1px 1px 0 4px var(--stone-50),
      1.5px 1.5px 0 4px var(--stone-50),
      2px 2px 0 4px var(--stone-50),
      2.5px 2.5px 0 4px var(--stone-50),
      3px 3px 0 4px var(--stone-50),
      3.5px 3.5px 0 4px var(--stone-50),
      4px 4px 0 4px var(--stone-50);

    .home6-hero-event a:hover & {
      transform: translate(0, 0);
      box-shadow:
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 0 var(--yellow-400),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 2px var(--stone-800),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50),
        0 0 0 4px var(--stone-50);
    }

    & > div {
      position: relative;
      pointer-events: none;
      border-radius: 3px;
      overflow: hidden;
      background-color: var(--stone-800);

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 3px;
        opacity: .22;
        /* Fine circuit grid with sparse rectangular data pulses. */
        background-image: linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px), linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px), linear-gradient(90deg,transparent 80%,#fff 80%,#fff 94%,transparent 94%), linear-gradient(90deg,transparent 35%,#fff 35%,#fff 42%,transparent 42%);
        background-size: 12px 12px,12px 12px,43px 2px,67px 1px;
        background-repeat: repeat,repeat,repeat-x,repeat-x;
        background-position: 0 0,0 0,0 9px,0 calc(100% - 9px);
        animation: hero-data-flow 2.8s linear infinite;
        transition: opacity 150ms ease;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(105deg,transparent 40%,rgba(255,239,214,.2) 49%,rgba(255,255,255,.45) 50%,transparent 51%);
        transform: translateX(-120%);
        animation: hero-tech-scan 4.8s ease-in-out infinite;
      }

      & > div {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: 0.75rem 1.25rem;
        gap: 0.25rem;
        filter: drop-shadow(0 -1px 0 var(--stone-800));

        &:hover {
          filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.1));
        }

        &:active {
          transform: translateY(2px);
        }
      }
    }
  }
}

@keyframes star-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dots {
  0% {
    background-position:
      0 0,
      4px 4px;
  }
  100% {
    background-position:
      8px 0,
      12px 4px;
  }
}

@keyframes hero-data-flow {
  to { background-position: 0 0,0 0,43px 9px,-67px calc(100% - 9px); }
}
@keyframes hero-tech-scan {
  0%, 40% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
.home6-hero-event a:hover > div > div::before { opacity: .36; }

@media (prefers-color-scheme: dark) {
  .home6-hero-event a {
    &:active,
    &:focus-visible {
      outline-color: var(--yellow-400);
    }
  }
}

.home6-hero-event a:hover { color: #fffdf9; text-decoration: none; }
.hero-register-text { position:relative; display:inline-grid; overflow:hidden; line-height:1.5; }
.hero-register-state { grid-area:1 / 1; display:flex; transition:transform .3s ease,opacity .3s ease; }
.hero-register-state--hover { transform:translateY(140%); opacity:0; }
.hero-register-arrow { font-size:22px; line-height:1; }
.home6-hero-event a:hover .hero-register-state--rest,
.home6-hero-event a:focus-visible .hero-register-state--rest { transform:translateY(-140%); opacity:0; }
.home6-hero-event a:hover .hero-register-state--hover,
.home6-hero-event a:focus-visible .hero-register-state--hover { transform:translateY(0); opacity:1; }
@media(max-width:620px) {
 .home6-hero-event a { font-size:12px; }
 .home6-hero-event a > div > div > div { padding:12px 10px; }
 .hero-register-arrow { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) {
 .home6-hero-event a::before,.home6-hero-event a > div > div::before,.home6-hero-event a > div > div::after { animation:none; }
 .home6-hero-event a > div,.hero-register-state { transition:none; }
}