@property --site-outline-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --site-outline-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/*
 * Global outline CTA for light surfaces.
 * Keep this component as the single source of truth for its geometry,
 * travelling outline, dot field and shared rolling-label alignment.
 */
.site-outline-cta {
  --site-outline-ink: #110f14;
  --site-outline-bg: #f7f6f4;
  --site-outline-bg-end: #e9e7e3;
  --site-outline-fill-lift: rgba(17, 15, 20, 0);
  --site-outline-base: rgba(17, 15, 20, 0.2);
  --site-outline-faint: rgba(17, 15, 20, 0.3);
  --site-outline-color: rgba(17, 15, 20, 0.48);
  --site-outline-core: rgba(17, 15, 20, 0.86);
  --site-outline-dot: rgba(17, 15, 20, 0.88);
  --site-outline-dot-opacity: 0.4;
  --site-outline-duration: 3s;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: max-content;
  min-width: 148px;
  min-height: 48px;
  padding: 0 21px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  contain: paint;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--site-outline-ink);
  background:
    linear-gradient(100deg, var(--site-outline-bg), var(--site-outline-bg-end)) padding-box,
    linear-gradient(100deg, var(--site-outline-fill-lift), var(--site-outline-fill-lift)) padding-box,
    conic-gradient(
      from calc(var(--site-outline-angle) - var(--site-outline-offset)),
      var(--site-outline-base) 0deg 115deg,
      var(--site-outline-faint) 137deg,
      var(--site-outline-color) 160deg,
      var(--site-outline-core) 192deg,
      var(--site-outline-core) 203deg,
      var(--site-outline-color) 235deg,
      var(--site-outline-faint) 258deg,
      var(--site-outline-base) 280deg,
      var(--site-outline-base) 360deg
    ) border-box;
  box-shadow: none;
  font-family: var(--font-suisse, "Suisse Intl", Arial, sans-serif);
  font-size: var(--type-button, 15px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  clip-path: inset(0);
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-mask-clip: border-box;
  mask-clip: border-box;
  outline-offset: 4px;
  transition:
    --site-outline-offset 800ms cubic-bezier(0.25, 1, 0.5, 1),
    color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 160ms ease;
  animation: siteOutlineCtaAngle var(--site-outline-duration) linear infinite;
}

/* The navigation keeps its fixed positioning and scroll reveal while its
   visual surface is supplied by this shared component. */
/* Match the legacy loaded-header selector's specificity so its one-shot
   entrance animation cannot replace this component's repeating outline. */
.site-navigation > .nav-action.site-outline-cta {
  animation: siteOutlineCtaAngle var(--site-outline-duration) linear infinite;
  color: var(--site-outline-ink) !important;
  background:
    linear-gradient(100deg, var(--site-outline-bg), var(--site-outline-bg-end)) padding-box,
    linear-gradient(100deg, var(--site-outline-fill-lift), var(--site-outline-fill-lift)) padding-box,
    conic-gradient(
      from calc(var(--site-outline-angle) - var(--site-outline-offset)),
      var(--site-outline-base) 0deg 115deg,
      var(--site-outline-faint) 137deg,
      var(--site-outline-color) 160deg,
      var(--site-outline-core) 192deg,
      var(--site-outline-core) 203deg,
      var(--site-outline-color) 235deg,
      var(--site-outline-faint) 258deg,
      var(--site-outline-base) 280deg,
      var(--site-outline-base) 360deg
    ) border-box;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em;
  transition:
    --site-outline-offset 800ms cubic-bezier(0.25, 1, 0.5, 1),
    color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 160ms ease,
    opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-outline-cta::before {
  --position: 2px;
  --space: calc(var(--position) * 2);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  content: "";
  pointer-events: none;
  translate: -50% -50%;
  background-image: radial-gradient(
    circle at var(--position) var(--position),
    var(--site-outline-dot) calc(var(--position) / 4),
    transparent 0
  );
  background-repeat: space;
  background-size: var(--space) var(--space);
  clip-path: inset(0);
  -webkit-mask-image: conic-gradient(from calc(var(--site-outline-angle) + 45deg), #000, transparent 10% 90%, #000);
  mask-image: conic-gradient(from calc(var(--site-outline-angle) + 45deg), #000, transparent 10% 90%, #000);
  opacity: var(--site-outline-dot-opacity);
  animation: siteOutlineCtaAngle var(--site-outline-duration) linear infinite;
}

.site-outline-cta::after {
  display: none;
}

.site-outline-cta__text {
  position: relative;
  z-index: 2;
  display: inline-block;
  white-space: nowrap;
  transform: translateY(1px);
}

.site-outline-cta .button-hover-text__line {
  height: 100%;
}

.site-outline-cta:is(:focus-visible, .is-touch-feedback),
.site-outline-cta:not([data-touch-feedback-ready]):hover {
  --site-outline-ink: #f1f1f1;
  --site-outline-bg: #09090c;
  --site-outline-bg-end: #09090c;
  --site-outline-fill-lift: rgba(255, 255, 255, 0);
  --site-outline-base: rgb(var(--brand-purple-rgb) / 0.22);
  --site-outline-faint: rgb(var(--brand-purple-rgb) / 0.36);
  --site-outline-color: rgb(var(--brand-purple-rgb) / 0.62);
  --site-outline-core: var(--brand-purple);
  --site-outline-dot: rgb(var(--brand-purple-rgb) / 0.72);
  --site-outline-dot-opacity: 0.594;
  --site-outline-offset: 95deg;
}

/* Shared inverse state for the same component on dark surfaces. */
.site-outline-cta--dark-surface {
  --site-outline-ink: #f7f7f8;
  --site-outline-bg: #09090c;
  --site-outline-bg-end: #242228;
  --site-outline-fill-lift: rgba(255, 255, 255, 0);
  --site-outline-base: rgba(255, 255, 255, 0.18);
  --site-outline-faint: rgba(255, 255, 255, 0.3);
  --site-outline-color: rgba(255, 255, 255, 0.56);
  --site-outline-core: rgba(255, 255, 255, 0.72);
  --site-outline-dot: rgba(255, 255, 255, 0.9);
}

.site-outline-cta--dark-surface:is(:focus-visible, .is-touch-feedback),
.site-outline-cta--dark-surface:not([data-touch-feedback-ready]):hover {
  --site-outline-ink: #ffffff;
  --site-outline-bg: #09090c;
  --site-outline-bg-end: var(--brand-purple);
  --site-outline-fill-lift: rgb(var(--brand-purple-rgb) / 0.16);
  --site-outline-base: rgb(var(--brand-purple-rgb) / 0.42);
  --site-outline-faint: rgb(var(--brand-purple-rgb) / 0.56);
  --site-outline-color: var(--brand-purple);
  --site-outline-core: var(--brand-purple);
  --site-outline-dot: rgb(var(--brand-purple-rgb) / 0.9);
}

.site-outline-cta:active {
  transform: translateY(1px);
}

@keyframes siteOutlineCtaAngle {
  to { --site-outline-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .site-outline-cta,
  .site-outline-cta::before,
  .site-navigation > .nav-action.site-outline-cta {
    animation: none;
  }
}