/* Sticky CTA pill. Measured from DUNA Digital's floating "start a project" pill (teardown 09-30), rewritten.
   A fixed pill in the bottom-right corner. It stays hidden over the hero, then fades in and rises 12px (400ms) once
   the reader is past it (a marker at 90vh has left the top of the window). It steps away again (same 400ms, back
   down 12px) whenever the contact section or the footer is on screen, or a full-screen menu is open, so it never
   doubles a CTA the reader can already see. The round chip spins one more full turn (480ms) on every hover. */
.scta {
  --scta-ease: cubic-bezier(.22, 1, .36, 1);
  --scta-dur: 400ms;         /* show / hide */
  --scta-rise: 12px;         /* hidden = this far below its spot */
  --scta-inset: clamp(12px, 3vw, 32px);   /* distance from the bottom and right edges */
  --scta-spin: 480ms;        /* chip turn per hover */
  --scta-bg: #18181a;
  --scta-ink: #f4f3ef;
  --scta-ring: rgba(244, 243, 239, .3);   /* hairline ring: the ink at 30% */
  --scta-shadow: 0 14px 36px -14px rgba(0, 0, 0, .45);
  --scta-z: 70;
  position: fixed;
  right: var(--scta-inset);
  bottom: var(--scta-inset);
  z-index: var(--scta-z);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 20px;
  border-radius: 1000px;
  background: var(--scta-bg);
  color: var(--scta-ink);
  box-shadow: 0 0 0 1px var(--scta-ring), var(--scta-shadow);
  font: 600 14px/1 var(--scta-font, inherit);
  white-space: nowrap;
  text-decoration: none;
  opacity: 0;
  transform: translateY(var(--scta-rise));
  pointer-events: none;
  transition: opacity var(--scta-dur) var(--scta-ease), transform var(--scta-dur) var(--scta-ease);
}
.scta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.scta:hover, .scta:focus-visible { color: var(--scta-ink); }
.scta:focus-visible { outline: 2px solid var(--scta-bg); outline-offset: 3px; }
.scta__chip {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--scta-ink); color: var(--scta-bg);
}
.scta__icon {
  display: block;
  transform: rotate(calc(var(--scta-turns, 0) * 360deg));
  transition: transform var(--scta-spin) var(--scta-ease);
}
@media (prefers-reduced-motion: reduce) {
  .scta, .scta__icon { transition: none; }
}
@media (forced-colors: active) {
  .scta { border: 1px solid LinkText; }
}