/* ==========================================================================
   Floating WhatsApp button
   --------------------------------------------------------------------------
   Every --u here carries its own 1px fallback rather than relying on a global
   one. The legal pages ship no script to set the unit, and a fallback on
   :root would change how the home page behaves before its own script runs.
   --------------------------------------------------------------------------
   Shared by the home page and the three legal pages, which are laid out on
   two different systems — the home page on the --u artboard unit, the legal
   pages on ordinary fluid CSS. Hence its own stylesheet rather than a home in
   either of theirs.

   Sized with max(): it tracks the design's scale on a wide screen, but never
   shrinks below a comfortable tap target on a narrow one. A control is not
   artwork — it has to stay the size a thumb needs whatever the artboard does.

   Physical `right`, not `inset-inline-end`. The page is right-to-left, where
   the inline end is the LEFT edge; this button was asked for on the right.
   ========================================================================== */

.wa-fab {
  position: fixed;
  right: max(18px, calc(28 * var(--u, 1px)));
  bottom: max(18px, calc(28 * var(--u, 1px)));
  z-index: 200;

  display: grid;
  place-items: center;
  /* clamp, not max — a FLOOR and a CEILING.

     --u has no cap above 1920 any more (see the note in js/main.js), so
     anything written as `N * --u` keeps growing: at 64u this button was 63.5px
     on a 1920 screen and would have been 85px on a 27″ one. That is what she
     saw as “huge”. max() only ever protected the small end.

     A control is not artwork. It tracks the artboard through the middle of the
     range and stops at both ends.

     Taken down a step on 20 Sep 2026 — she asked for it slightly smaller, and
     it is one shared component, so this is every page: 48/54/60 -> 44/48/54.
     Measured: 1400 -> 44, 1920 -> 47.6, 2560 -> 54.

     And twice more on 21 Sep 2026, every page: 44/48/54 -> 40/42/46 ->
     38/38/42. 38 is about as small as a thumb still hits reliably. */
  /* 4 Oct 2026: one button for the whole site, a little bigger again */
  width: clamp(46px, calc(46 * var(--u, 1px)), 50px);
  height: clamp(46px, calc(46 * var(--u, 1px)), 50px);

  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  /* WhatsApp's own green, 21 Sep 2026 — she asked for it on every page, so
     the button reads as WhatsApp at a glance instead of as one more lilac
     dot. The shadow is tinted the same green. */
  /* and a deeper green (4 Oct: "too bright"), its glow quieter */
  background: #1FA855;
  box-shadow: 0 calc(6 * var(--u, 1px)) calc(22 * var(--u, 1px)) rgba(31, 168, 85, 0.28);

  /* The home page hides the native cursor over a project tile; the button
     floats above those, so it restores a pointer over itself. */
  cursor: pointer;

  /* Two animations, in this order on purpose. wa-fab-in is `both`, so once it
     finishes it goes on applying transform:none forever; the breathe is later
     in the list, so from the moment it starts it is the one that wins.
     4.2s and a 1.045 peak: slow enough to read as breathing rather than as a
     pulse asking to be clicked. */
  animation: wa-fab-in 0.7s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 0.8s both,
             wa-fab-breathe 4.2s ease-in-out 1.6s infinite;
  /* `scale` and `translate` are the INDIVIDUAL properties, so the hover lift
     composes with the breathe (which owns `transform`) instead of fighting it. */
  transition: box-shadow 0.32s ease,
              scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wa-fab-in {
  from { opacity: 0; transform: translateY(14px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}

@keyframes wa-fab-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* THE HOVER, 21 Sep 2026 — she asked for something gentle: the button rises
   a few px and swells a touch with a little overshoot, the glow opens up, and
   the handset inside tips as if it were about to ring. */
.wa-fab:hover,
.wa-fab:focus-visible {
  scale: 1.1;
  translate: 0 -3px;
  box-shadow: 0 calc(8 * var(--u, 1px)) calc(34 * var(--u, 1px)) rgba(37, 211, 102, 0.55);
}

.wa-fab:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}

.wa-fab img {
  display: block;
  width: 56%;
  height: 56%;
  transition: rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wa-fab:hover img,
.wa-fab:focus-visible img { rotate: -12deg; }

/* ==========================================================================
   The label is gone
   --------------------------------------------------------------------------
   There was a pill of text that slid out on :hover. It is deleted, markup and
   all, because she asked for the button to be quiet — and because it carried
   the last backdrop-filter on the site, the one behind THE PURPLE SCREEN: a
   fixed element at z-index 200 whose backdrop region is the live viewport,
   snapshotted and blurred every frame even at opacity 0, which is exactly the
   operation a mobile GPU fails at, painting a flat purple fill instead. It was
   already hidden on touch; now it does not exist anywhere.

   The link keeps its aria-label, so nothing was lost for a screen reader.
   ========================================================================== */

/* The desktop used to shrink this to 44u / 40px min, on the argument that 52
   was a phone size and heavy on a 1920 screen. She has now asked for it bigger
   on the developers page — measured, the two pages were already byte-identical
   at 40px on a 1400 screen, so the shrink is simply gone and both carry the
   phone size at every width. 46px min, 52u above 1770. */

/* On a phone, a step bigger (her call, 22 Sep 2026): 38 read as small under a
   thumb. Every page, since the button is shared. */
@media (max-width: 899px) {
  .wa-fab { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { animation: none; transition: none; }
  .wa-fab:hover, .wa-fab:focus-visible { scale: none; translate: none; }
  .wa-fab:hover img, .wa-fab:focus-visible img { rotate: none; }
}