/* ==========================================================================
   SEYE — floating contact bar  ·  reusable widget (artboard 11)
   --------------------------------------------------------------------------
   Artboard 11 is drawn on the site's own canvas, so every measurement is
   written in the page's rem scale (1rem = 16px @1920 → 100vw / 120) instead
   of raw pixels: the bar then scales with the rest of the page the way the
   header and the sections do.

     viewport   root font-size   bar
     1024       8.53px           44.8 × 222.4
     1440       12px             63   × 312.8
     1920       16px             84   × 417     ← artboard size

     bar      84 × 417   radius 12   #7a888f @ 90 %
     rows     62 icon box + 13px serif label, kept on the artboard stops
     compact  while the page is scrolling the labels fold away and the bar
              shrinks to a column of icons, then unfolds again at rest
     WeChat   bottom row reveals the QR card on hover / focus

   Markup : partials/float-bar.html   (injected as @@FLOATBAR@@)
   Assets : assets/css/widget.css · assets/js/widget.js   (injected with it)
   ========================================================================== */

.fab { display: none; }

@media (min-width: 1024px) {

  /* ---------- shell ------------------------------------------------------ */
  .fab {
    --fab-ease: cubic-bezier(.22, .86, .26, 1);
    --fab-parallax: 0px;          /* written by the scroll loop in widget.js */
    --fab-s: 1;                   /* icon scale · .86 while compact */
    --fab-ico: 3.875rem;          /* 62 · icon box height */
    --fab-label: .8125rem;        /* 13 · exactly one line of label */
    --fab-pad: .5rem;             /* 8  · symmetric padding around a row */

    position: fixed;
    right: 6px;
    top: 50%;
    z-index: 70;
    /* the vertical offset is driven by the scroll parallax */
    transform: translateY(calc(-50% + var(--fab-parallax)));
    pointer-events: auto;
    display: block;
  }

  /* the entrance lives on an inner node so the parallax transform above can
     stay transition-free and follow the scroll without a lag trail */
  .fab-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5.25rem;                    /* 84 */
    /* 417 = rows (396.5) + the canvas the artboard leaves under the last
       label (20.5). The height is content-driven: a longer translation makes
       the row taller and the panel grows with it instead of spilling. */
    padding: .96875rem 0 .78125rem;    /* 15.5 top · 20.5 under the last row */
    background: rgba(122, 136, 143, .5);
    -webkit-backdrop-filter: blur(.375rem) saturate(1.08);
    backdrop-filter: blur(.375rem) saturate(1.08);
    border-radius: .75rem;
    opacity: 0;
    transform: translateX(7.75rem);
    transition: transform .78s var(--fab-ease), opacity .55s ease,
                width .5s var(--fab-ease), padding .5s var(--fab-ease);
    will-change: transform, opacity;
  }
  .fab.is-in .fab-panel { opacity: 1; transform: translateX(0); }

  /* ---------- rows -------------------------------------------------------
     The artboard spaces the four rows by hand, not uniformly: the icon boxes
     start 23.5 / 128.5 / 223.5 / 321.5 from the top of the bar. That offset
     is kept, but it now sits *outside* the row box (panel padding + margin),
     so every row is internally symmetric and the hover wash can be centred
     on the icon + label no matter which row is pointed at. */
  .fab-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--fab-pad) 0;
    margin-top: var(--row-mt, 0px);
    gap: var(--row-gap, 0px);
    color: #fff;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: padding .5s var(--fab-ease), margin .5s var(--fab-ease),
                gap .5s var(--fab-ease);
  }
  .fab-item:nth-child(1) { --row-mt: 0;        --row-gap: .5625rem; }   /* 0 · 9   */
  .fab-item:nth-child(2) { --row-mt: .3125rem; --row-gap: .21875rem; }  /* 5 · 3.5 */
  .fab-item:nth-child(3) { --row-mt: .03125rem; --row-gap: .0625rem; }  /* .5 · 1  */
  .fab-item:nth-child(4) { --row-mt: .375rem;  --row-gap: 0; }          /* 6 · 0   */

  /* hover wash — symmetric because the row box is symmetric */
  .fab-item::before {
    content: "";
    position: absolute;
    inset: 0 .3125rem;
    border-radius: .5625rem;
    background: #fff;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .fab-item:hover::before,
  .fab-item:focus-visible::before { opacity: .14; }

  .fab-ico {
    display: grid;
    place-items: center;
    height: var(--fab-ico);
    transition: height .5s var(--fab-ease);
  }
  .fab-ico img {
    display: block;
    /* the intrinsic sizes come off the artboard; the whole set scales with
       --fab-s so the compact state shrinks the artwork, not just the frame */
    width: calc(var(--iw) * var(--fab-s));
    height: calc(var(--ih) * var(--fab-s));
    transition: transform .38s var(--fab-ease), width .5s var(--fab-ease),
                height .5s var(--fab-ease);
  }
  .fab-item:nth-child(1) .fab-ico img { --iw: 3.1875rem; --ih: 3.8125rem; } /* 51 × 61 */
  .fab-item:nth-child(2) .fab-ico img { --iw: 3.1875rem; --ih: 3.1875rem; } /* 51 × 51 */
  .fab-item:nth-child(3) .fab-ico img { --iw: 3.5rem;    --ih: 2.6875rem; } /* 56 × 43 */
  .fab-item:nth-child(4) .fab-ico img { --iw: 3.8125rem; --ih: 3.3125rem; } /* 61 × 53 */
  .fab-item:hover .fab-ico img { transform: scale(1.09); }

  .fab-label {
    font-family: var(--serif);
    font-size: .8125rem;
    /* the artboard sets the labels in a bold serif, which is also what the
       rest of the site uses for serif type */
    font-weight: 600;
    /* the artboard sets the label as a single 13px line */
    line-height: 1;
    letter-spacing: .006em;
    /* "Get a Quote" fills 70 of the 84 bar pixels, so a longer translation
       wraps inside the bar rather than spilling out of it */
    max-width: 4.75rem;
    max-height: var(--fab-label);
    text-wrap: balance;
    transition: max-height .45s var(--fab-ease), opacity .3s ease,
                transform .38s var(--fab-ease);
  }
  .fab-item:hover .fab-label { transform: translateY(-1px); }

  .fab-item:active .fab-ico img { transform: scale(.96); }

  /* ---------- compact (while the page is scrolling) ----------------------
     Only the artwork is left; the panel narrows and the rows close up. The
     pointer resting on the bar suspends it — see widget.js. */
  .fab.is-compact { --fab-s: .86; --fab-ico: 3.375rem; }
  .fab.is-compact .fab-panel {
    width: 4.375rem;                /* 70 */
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
  .fab.is-compact .fab-item {
    --fab-pad: .4375rem;            /* 7 */
    --row-mt: .25rem;               /* 4 */
    --row-gap: 0;
  }
  .fab.is-compact .fab-label {
    max-height: 0;
    opacity: 0;
    transform: translateY(-.25rem);
  }

  /* ---------- WeChat QR card -------------------------------------------- */
  .fab-qr {
    position: absolute;
    right: calc(100% + .9375rem);
    bottom: -.375rem;
    width: 13.25rem;
    padding: 1rem 1rem .8125rem;
    background: #fff;
    border-radius: .875rem;
    box-shadow: 0 1.125rem 2.75rem rgba(20, 32, 28, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateX(.75rem) scale(.95);
    transform-origin: 100% 100%;
    transition: opacity .26s ease, transform .36s var(--fab-ease),
                visibility 0s linear .26s;
    pointer-events: none;
  }
  /* little caret aimed at the bar, level with the WeChat icon */
  .fab-qr::after {
    content: "";
    position: absolute;
    right: -.3125rem;
    bottom: 2.8125rem;
    width: .625rem;
    height: .625rem;
    background: #fff;
    transform: rotate(45deg);
  }
  .fab-qr img {
    width: 11.25rem;
    height: 11.25rem;
    max-width: none;
    border-radius: .25rem;
  }
  .fab-qr-title {
    margin-top: .5625rem;
    font-family: var(--serif);
    font-size: .8125rem;
    line-height: 1.2;
    color: var(--green);
    text-align: center;
  }

  .fab-item--qr:hover .fab-qr,
  .fab-item--qr:focus-visible .fab-qr,
  .fab-item--qr.is-open .fab-qr {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }

  /* ---------- reduced motion -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .fab-panel { opacity: 1; transform: none; transition: none; }
    .fab { transform: translateY(-50%); }
    .fab-ico img,
    .fab-label,
    .fab-item,
    .fab-qr { transition: opacity .2s ease; }
    .fab-item:hover .fab-ico img,
    .fab-item:hover .fab-label { transform: none; }
    .fab-qr { transform: none; }
  }
}