/* ===== Shared floating contact button =====
   Single source of truth — linked by every page (same pattern as cursor.css)
   so the widget is identical site-wide: a subtle floating trigger, fixed to
   the right edge, that expands into the three contact methods on click. */

.contact-fab {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(20px, 4vh, 40px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.contact-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.contact-fab__panel { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.contact-fab__item {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #eeece7;
  color: #111111;
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(10px) scale(.6);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.contact-fab__item svg { width: 20px; height: 20px; display: block; }
.contact-fab__item:hover { background: var(--accent-glow, #ff4438); color: #fff; transform: translateY(0) scale(1.08); }

.contact-fab.is-open .contact-fab__item { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.contact-fab.is-open .contact-fab__item:nth-child(1) { transition-delay: .15s; }
.contact-fab.is-open .contact-fab__item:nth-child(2) { transition-delay: .10s; }
.contact-fab.is-open .contact-fab__item:nth-child(3) { transition-delay: .05s; }
.contact-fab.is-open .contact-fab__item:nth-child(4) { transition-delay: 0s; }

.contact-fab__toggle {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12);
  cursor: pointer; display: grid; place-items: center; color: #111111;
  background: rgba(238,236,231,.75);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.25);
  transition: background .3s, border-color .3s, color .3s, transform .3s, box-shadow .3s;
  animation: fabPulse 2.6s ease-out infinite;
}
.contact-fab__toggle svg { width: 22px; height: 22px; display: block; transition: transform .35s ease; }
.contact-fab__toggle:hover {
  background: #fff; border-color: var(--accent, #ff1f1f); color: var(--accent, #ff1f1f);
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.5);
}
.contact-fab.is-open .contact-fab__toggle { background: var(--accent, #ff1f1f); border-color: var(--accent, #ff1f1f); color: #fff; animation: none; }
.contact-fab.is-open .contact-fab__toggle svg { transform: rotate(135deg); }

/* gentle attention ring so the CTA reads as clickable on every page, not just decorative */
@keyframes fabPulse {
  0%   { box-shadow: 0 14px 34px -14px rgba(0,0,0,.25), 0 0 0 0 rgba(255,31,31,.5); }
  65%  { box-shadow: 0 14px 34px -14px rgba(0,0,0,.25), 0 0 0 16px rgba(255,31,31,0); }
  100% { box-shadow: 0 14px 34px -14px rgba(0,0,0,.25), 0 0 0 0 rgba(255,31,31,0); }
}

@media (max-width: 560px) {
  .contact-fab__toggle { width: 48px; height: 48px; }
  .contact-fab__item { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-fab, .contact-fab__item, .contact-fab__toggle, .contact-fab__toggle svg { transition: none; }
  .contact-fab__toggle { animation: none; }
}