/* Lyra Lavender — WhatsApp FAB v1.16.7.7.4
   Visual: dark Lyra shell + official WhatsApp glyph.
   Motion: compositor-only transform/opacity pulse; no blur/backdrop-filter. */

html body.v2-home a.wa-fab,
html body.v2-home a.wa-fab:link,
html body.v2-home a.wa-fab:visited,
html body.portfolio-page a.wa-fab,
html body.portfolio-page a.wa-fab:link,
html body.portfolio-page a.wa-fab:visited,
html body a.wa-fab {
  --wa-green:#25d366;
  --wa-green-deep:#12b955;
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:120;
  min-width:172px;
  height:58px;
  padding:7px 15px 7px 8px !important;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:18px !important;
  color:#fff !important;
  text-decoration:none;
  background:linear-gradient(145deg,rgba(20,17,28,.97),rgba(8,7,12,.98)) !important;
  background-color:#0c0a11 !important;
  box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 0 1px rgba(153,124,235,.045),inset 0 1px 0 rgba(255,255,255,.065) !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transform:translate3d(0,0,0);
  transition:transform 240ms cubic-bezier(.2,.8,.2,1),border-color 240ms ease,box-shadow 240ms ease !important;
}

.wa-fab::before {
  content:"";
  position:absolute;
  left:13px;
  top:50%;
  width:30px;
  height:30px;
  margin:-15px 0 0;
  border:1px solid rgba(37,211,102,.52);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:scale(.86);
  animation:lyra-wa-ring 4.8s 1.6s cubic-bezier(.2,.7,.2,1) infinite;
  will-change:transform,opacity;
}

.wa-fab .wa-icon {
  position:relative;
  z-index:1;
  width:42px !important;
  height:42px !important;
  flex:0 0 42px;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px !important;
  color:#fff !important;
  background:linear-gradient(145deg,#31e879,var(--wa-green) 52%,var(--wa-green-deep)) !important;
  box-shadow:0 9px 22px rgba(37,211,102,.24),inset 0 1px 0 rgba(255,255,255,.34);
  transform:translate3d(0,0,0);
  transition:transform 240ms cubic-bezier(.2,.8,.2,1),box-shadow 240ms ease;
}

.wa-fab .wa-icon::before,
.wa-fab .wa-icon::after { display:none !important; }
.wa-fab .wa-icon .brand-svg { width:22px !important; height:22px !important; display:block; color:#fff !important; }

.wa-fab .wa-copy {
  min-width:0;
  display:grid;
  gap:1px;
  line-height:1.05;
  text-align:left;
}
.wa-fab .wa-copy strong {
  color:#fff;
  font:700 .78rem/1.1 Manrope,Inter,sans-serif;
  letter-spacing:-.01em;
}
.wa-fab .wa-copy small {
  color:rgba(231,225,242,.48);
  font:600 .57rem/1.15 Inter,sans-serif;
  letter-spacing:.015em;
}
.wa-fab .wa-label { display:none !important; }

@media (hover:hover) and (pointer:fine) {
  html body.v2-home a.wa-fab:hover,
  html body.portfolio-page a.wa-fab:hover,
  html body a.wa-fab:hover {
    transform:translate3d(0,-2px,0) !important;
    border-color:rgba(72,232,132,.24) !important;
    box-shadow:0 22px 50px rgba(0,0,0,.38),0 0 28px rgba(37,211,102,.08),inset 0 1px 0 rgba(255,255,255,.08) !important;
    background:linear-gradient(145deg,rgba(22,19,31,.99),rgba(8,7,12,.99)) !important;
  }
  .wa-fab:hover .wa-icon { transform:scale(1.045); box-shadow:0 11px 26px rgba(37,211,102,.30),inset 0 1px 0 rgba(255,255,255,.38); }
}

html body.v2-home a.wa-fab:focus-visible,
html body.portfolio-page a.wa-fab:focus-visible,
html body a.wa-fab:focus-visible {
  outline:2px solid rgba(115,242,163,.82) !important;
  outline-offset:4px;
}

@keyframes lyra-wa-ring {
  0%,72%,100% { opacity:0; transform:scale(.86); }
  78% { opacity:.48; }
  94% { opacity:0; transform:scale(1.72); }
}

/* Mobile: compact professional icon. No label, no expensive glass effect. */
@media (max-width:820px), (pointer:coarse) {
  html body.v2-home a.wa-fab,
  html body.v2-home a.wa-fab:link,
  html body.v2-home a.wa-fab:visited,
  html body.portfolio-page a.wa-fab,
  html body.portfolio-page a.wa-fab:link,
  html body.portfolio-page a.wa-fab:visited,
  html body a.wa-fab {
    right:max(14px,env(safe-area-inset-right,0px));
    bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
    width:58px !important;
    min-width:58px !important;
    height:58px !important;
    min-height:58px !important;
    padding:0 !important;
    justify-content:center;
    gap:0 !important;
    border-radius:19px !important;
    background:linear-gradient(145deg,rgba(19,16,27,.98),rgba(7,6,11,.99)) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 0 1px rgba(164,139,238,.045),inset 0 1px 0 rgba(255,255,255,.07) !important;
  }
  .wa-fab::before {
    left:50%;
    width:34px;
    height:34px;
    margin:-17px 0 0 -17px;
  }
  .wa-fab .wa-copy {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    white-space:nowrap !important;
  }
  .wa-fab .wa-icon {
    width:42px !important;
    height:42px !important;
    flex-basis:42px;
    border-radius:14px !important;
  }
  .wa-fab .wa-icon .brand-svg { width:23px !important; height:23px !important; }

  /* Portfolio mobile: when Safari docks the CTA into the topbar it becomes a true icon button. */
  .portfolio-page .v2-topbar-actions .wa-fab.lyra-fab-docked {
    position:static !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:14px !important;
    transform:none !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.065) !important;
  }
  .portfolio-page .v2-topbar-actions .wa-fab.lyra-fab-docked::before { display:none; }
  .portfolio-page .v2-topbar-actions .wa-fab.lyra-fab-docked .wa-icon {
    width:32px !important;
    height:32px !important;
    flex-basis:32px;
    border-radius:11px !important;
    box-shadow:0 6px 14px rgba(37,211,102,.18),inset 0 1px 0 rgba(255,255,255,.28);
  }
  .portfolio-page .v2-topbar-actions .wa-fab.lyra-fab-docked .wa-icon .brand-svg { width:18px !important; height:18px !important; }
}

@media (prefers-reduced-motion:reduce) {
  .wa-fab, .wa-fab .wa-icon { transition:none !important; }
  .wa-fab::before { animation:none !important; display:none !important; }
}

/* v1.16.7.7.5 — hidden mobile states do not keep the ambient ring alive. */
.wa-fab.is-scroll-hidden::before,
.wa-fab.is-contact-hidden::before,
.wa-fab.is-keyboard-hidden::before {
  animation-play-state: paused !important;
  will-change: auto;
}