/* Compound reference study — scoped to filled action buttons on the Home. */
@property --home-compound-shine-1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.15;
}

@property --home-compound-shine-2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.296;
}

@property --home-compound-shine-3 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.219;
}

.page-v4 .button--primary,
.page-v4 .button--ink {
  align-self: center;
  min-height: 40px;
  padding: 0 20px;
  gap: 0;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 9999px;
  background-image: radial-gradient(
    circle at top left,
    rgb(255 255 255 / var(--home-compound-shine-1)),
    rgb(255 255 255 / var(--home-compound-shine-2)),
    rgb(255 255 255 / var(--home-compound-shine-3))
  );
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  animation: home-compound-shine 3.77s linear 2 both;
  transition: background-color 150ms ease;
}

.page-v4 .button--primary {
  background-color: var(--orange);
  color: var(--on-orange);
  transition: background-color 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.page-v4 .hero-actions .button--secondary {
  align-self: center;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--cream) 44%, transparent);
  background-image: linear-gradient(
    135deg,
    rgb(255 255 255 / 59%),
    rgb(244 242 242 / 39%)
  );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 86%),
    inset 0 -1px 0 rgb(46 42 35 / 3.5%),
    0 0 0 1px rgb(46 42 35 / 6%),
    0 1px 2px -1px rgb(0 0 0 / 6%),
    0 2px 4px rgb(0 0 0 / 4%);
  color: var(--ink-strong);
  backdrop-filter: blur(18px) saturate(1.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.28);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  transform: none;
  transition:
    transform 150ms cubic-bezier(0.2, 0, 0, 1),
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.page-v4 .hero-actions .button--secondary:hover {
  border-color: rgb(255 255 255 / 82%);
  background-color: color-mix(in srgb, var(--cream) 56%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 94%),
    inset 0 -1px 0 rgb(46 42 35 / 4%),
    0 0 0 1px rgb(46 42 35 / 8%),
    0 1px 2px -1px rgb(0 0 0 / 8%),
    0 2px 4px rgb(0 0 0 / 6%);
  transform: none;
}

.page-v4 .hero-actions .button--secondary:active {
  transform: scale(0.96);
}

.page-v4 .hero-actions .button--secondary:focus-visible {
  outline: 2px solid var(--ink-strong);
  outline-offset: 3px;
}

.page-v4 .button--primary:hover,
.page-v4 .button--ink:hover {
  border-color: rgb(255 255 255 / 52%);
  background-image: radial-gradient(
    circle at top left,
    rgb(255 255 255 / var(--home-compound-shine-1)),
    rgb(255 255 255 / var(--home-compound-shine-2)),
    rgb(255 255 255 / var(--home-compound-shine-3))
  );
  transform: none;
}

.page-v4 .button--primary:hover {
  background-color: var(--orange-hover);
  box-shadow: 0 6px 18px rgb(233 78 27 / 28%);
}

.page-v4 .button--ink {
  background-color: var(--ink-strong);
}

.page-v4 .button--ink:hover {
  background-color: var(--ink);
}

.page-v4 .contact-action .button--ink {
  background-color: var(--orange);
  background-image: radial-gradient(
    circle at top left,
    rgb(255 255 255 / var(--home-compound-shine-1)),
    rgb(255 255 255 / var(--home-compound-shine-2)),
    rgb(255 255 255 / var(--home-compound-shine-3))
  );
  color: var(--on-orange);
}

.page-v4 .contact-action .button--ink:hover {
  background-color: var(--orange-hover);
  background-image: radial-gradient(
    circle at top left,
    rgb(255 255 255 / var(--home-compound-shine-1)),
    rgb(255 255 255 / var(--home-compound-shine-2)),
    rgb(255 255 255 / var(--home-compound-shine-3))
  );
}

.page-v4 .button--primary:focus-visible,
.page-v4 .button--ink:focus-visible {
  outline: 2px solid var(--ink-strong);
  outline-offset: 3px;
}

.page-v4 .contact-action .button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

.page-v4 :is(.button--primary, .button--ink):is(:hover, :focus-visible) {
  animation: home-compound-shine 3.77s linear infinite;
}

.no-at-property .page-v4 :is(.button--primary, .button--ink) {
  animation: none;
}

.page-v4 .button--primary::after,
.page-v4 .button--ink::after {
  content: none;
}

.page-v4 .button--primary svg,
.page-v4 .button--ink svg {
  display: none;
}

.page-v4 .hero-actions .button--primary,
.page-v4 .hero-actions .button--secondary,
.page-v4 .contact-action .button,
.page-v4 .form-actions .button--primary {
  min-height: 48px;
  padding: 0 26px;
  font-size: 15px;
}

@keyframes home-compound-shine {
  0%,
  100% {
    --home-compound-shine-1: 0.15;
    --home-compound-shine-2: 0.296;
    --home-compound-shine-3: 0.219;
  }

  25% {
    --home-compound-shine-1: 0;
    --home-compound-shine-2: 0.115;
    --home-compound-shine-3: 0.284;
  }

  50% {
    --home-compound-shine-1: 0.15;
    --home-compound-shine-2: 0.004;
    --home-compound-shine-3: 0.081;
  }

  75% {
    --home-compound-shine-1: 0.3;
    --home-compound-shine-2: 0.185;
    --home-compound-shine-3: 0.016;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-v4 .hero-actions .button--secondary {
    transition: none;
  }

  .page-v4 .hero-actions .button--secondary:active {
    transform: none;
    filter: brightness(0.94);
  }

  .page-v4 .button--primary,
  .page-v4 .button--ink,
  .page-v4 :is(.button--primary, .button--ink):is(:hover, :focus-visible) {
    animation: none !important;
    transition: none;
  }
}

@media (max-width: 880px) {
  .page-v4 .hero-actions {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .page-v4 .hero-actions .button--primary,
  .page-v4 .hero-actions .button--secondary {
    width: auto;
    min-height: 44px;
    padding: 0 14px;
    font-size: 13px;
  }
}