/*
 * Uiverse premium button, scoped to the homepage contact component:
 * https://uiverse.io/vinodjangid07/brave-treefrog-18
 */
.uiverse-contact-wrapper {
  min-height: 40px;
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Uiverse Brave Treefrog 18 button, adapted with the studio mark. */
.uiverse-contact-wrapper .contact-button {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 40px;
  background: linear-gradient(to right,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c);
  background-size: 200% 200%;
  background-position: 0% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(121,103,3);
  font-size: .8em;
  font-weight: 600;
  gap: 8px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 3s ease-in-out, background-position 3s ease-in-out, box-shadow 3s ease-in-out;
  box-shadow: 5px 5px 10px rgba(0,0,0,.144);
  text-shadow: none;
}
.uiverse-contact-wrapper .contact-button-label { position: relative; z-index: 1; }
.uiverse-contact-wrapper .contact-button:hover { transform: scale(.95); background-position: 100% 50%; }

/* Contact card */
.contact-overlay {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(246, 248, 253, 0.78);
  backdrop-filter: blur(8px);
  animation: contactOverlayIn 0.25s ease both;
  will-change: opacity;
}
.contact-overlay[hidden] { display: none; }
.contact-comet-perspective { perspective: 1000px; transform-style: preserve-3d; }
.contact-comet-motion { position: relative; border-radius: 16px; transform-style: preserve-3d; will-change: transform; }
.contact-comet-glare { pointer-events: none; position: absolute; z-index: 50; inset: 0; border-radius: 16px; mix-blend-mode: overlay; }
.contact-card { position: relative; width: min(390px, 86vw); min-height: 480px; padding: 18px; border: 0; border-radius: 16px; background: #1f2121; color: #fff; overflow: hidden; }
.contact-card-visual { display: grid; height: 250px; place-items: center; overflow: hidden; border-radius: 16px; background: #202020; }
.contact-card-visual .hole { display: flex; align-items: center; justify-content: center; }
.contact-card-visual .hole i { display: block; position: absolute; width: 50px; height: 50px; border-radius: 140px; opacity: 0; animation-name: scale; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; }
.contact-card-visual .hole i:nth-child(1) { animation-delay: 0.3s; }
.contact-card-visual .hole i:nth-child(2) { animation-delay: 0.6s; }
.contact-card-visual .hole i:nth-child(3) { animation-delay: 0.9s; }
.contact-card-visual .hole i:nth-child(4) { animation-delay: 1.2s; }
.contact-card-visual .hole i:nth-child(5) { animation-delay: 1.5s; }
.contact-card-visual .hole i:nth-child(6) { animation-delay: 1.8s; }
.contact-card-visual .hole i:nth-child(7) { animation-delay: 2.1s; }
.contact-card-visual .hole i:nth-child(8) { animation-delay: 2.4s; }
.contact-card-visual .hole i:nth-child(9) { animation-delay: 2.7s; }
.contact-card-visual .hole i:nth-child(10) { animation-delay: 3s; }
.contact-card-copy { display: grid; gap: 12px; padding: 25px 14px 12px; font-family: "PingFang SC", "PingFang TC", "苹方", "Noto Sans SC", "Source Han Sans SC", sans-serif; }
.contact-card-copy small { color: #aeb3c2; }
.contact-card-eyebrow { display: flex; align-items: center; gap: 15px; min-height: 22px; }
.contact-card-mark { position: relative; display: block; width: 48px; height: 22px; overflow: hidden; flex: 0 0 auto; }
.contact-card-mark img { position: absolute; width: 76px; max-width: none; height: auto; left: -14px; top: -14px; filter: brightness(0) invert(1); opacity: .94; }
.contact-card-copy h2 { margin: 0 0 10px; font-size: 26px; }
.contact-card-copy a { color: #fff; text-decoration: none; font-size: 15px; }
.contact-card-copy .contact-detail { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 24px; }
.contact-card-copy .contact-detail svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.82; }
.contact-card-copy .contact-detail span { min-width: 0; font-variant-numeric: tabular-nums; }
.contact-close { position: absolute; z-index: 70; right: 25px; top: 25px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }

body.contact-card-opening .aurora-layer:after,
body.contact-card-open .aurora-layer:after {
  animation-play-state: paused !important;
}

@keyframes contactOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scale {
  0% { transform: scale(2); opacity: 0; box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5); }
  50% { transform: scale(1) translate(0px, -5px); opacity: 1; box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.5); }
  100% { transform: scale(0.1) translate(0px, 5px); opacity: 0; box-shadow: 0px 10px 20px rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .uiverse-contact-wrapper .contact-button {
    transition-duration: 3s !important;
  }
  .contact-overlay,
  .contact-comet-motion {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .contact-card-visual .hole i {
    animation-duration: 3s !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
  }
}