/* Shiny Button reference: designali-in / 21st.dev. Keep the site's geometry
   and typography; hero and contact-page links share the same hover/focus. */
@property --contact-shine-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --contact-shine-width {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

:is(.intro-actions .intro-action, .contact-page-links .contact-page-link) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color .2s ease, background-color .3s ease, box-shadow .6s ease;
}

:is(.intro-actions .intro-action, .contact-page-links .contact-page-link) > * {
  position: relative;
  z-index: 1;
}

:is(.intro-actions .intro-action, .contact-page-links .contact-page-link)::before,
:is(.intro-actions .intro-action, .contact-page-links .contact-page-link)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease, --contact-shine-width .8s cubic-bezier(.25,1,.5,1);
  animation: contact-shine-orbit 3s linear infinite paused;
}

/* Mask only the one-pixel ring, so the effect cannot cover text or icons. */
:is(.intro-actions .intro-action, .contact-page-links .contact-page-link)::before {
  padding: 1px;
  background: conic-gradient(from var(--contact-shine-angle),
    transparent, #6554ff var(--contact-shine-width),
    #e8e3ff calc(var(--contact-shine-width) * 2),
    #7465ff calc(var(--contact-shine-width) * 3),
    transparent calc(var(--contact-shine-width) * 4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Smooth internal light stays beneath the label, without a dotted texture. */
:is(.intro-actions .intro-action, .contact-page-links .contact-page-link)::after {
  inset: 2px;
  background: conic-gradient(from var(--contact-shine-angle), transparent 20%, rgb(103 78 255 / .26), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at bottom, #000, transparent 82%);
  mask-image: radial-gradient(ellipse at bottom, #000, transparent 82%);
}

:is(.intro-actions .intro-action, .contact-page-links .contact-page-link):focus-visible {
  outline: 2px solid #cfc6ff;
  outline-offset: 4px;
  box-shadow: inset 0 -12px 24px -14px #7764ff, inset 0 0 0 1px rgb(200 189 255 / .18);
}

:is(.intro-actions .intro-action, .contact-page-links .contact-page-link):focus-visible::before,
:is(.intro-actions .intro-action, .contact-page-links .contact-page-link):focus-visible::after {
  --contact-shine-width: 20%;
  opacity: 1;
  animation-play-state: running;
}

@media (hover: hover) and (pointer: fine) {
  :is(.intro-actions .intro-action, .contact-page-links .contact-page-link):hover {
    transform: none;
    background: rgb(10 7 20 / .85);
    box-shadow: inset 0 -12px 24px -14px #7764ff, inset 0 0 0 1px rgb(200 189 255 / .18);
  }

  :is(.intro-actions .intro-action, .contact-page-links .contact-page-link):hover::before,
  :is(.intro-actions .intro-action, .contact-page-links .contact-page-link):hover::after {
    --contact-shine-width: 20%;
    opacity: 1;
    animation-play-state: running;
  }
}

:is(.intro-actions .intro-action, .contact-page-links .contact-page-link):active {
  box-shadow: inset 0 0 0 1px #a79aff, inset 0 -10px 22px -12px #7764ff;
}

/* Preserve the existing email-copy success feedback. */
:is(.intro-actions .intro-action-copy-email, .contact-page-links .contact-page-link-copy-email).is-copied {
  background: rgb(22 77 61 / .72);
  color: #d9ffef;
}

@keyframes contact-shine-orbit {
  to { --contact-shine-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.intro-actions .intro-action, .contact-page-links .contact-page-link),
  :is(.intro-actions .intro-action, .contact-page-links .contact-page-link)::before,
  :is(.intro-actions .intro-action, .contact-page-links .contact-page-link)::after {
    animation: none;
    transition: none;
  }
}