/* Beonyx — Hero Title

   The lettering is a set of closed contours: the outer shape of each letter
   plus, for P O R B D, its counter. Drawing works by laying a single dash the
   full length of a contour and then sliding it into place — stroke-dasharray
   and stroke-dashoffset both set to the contour's own length, then the offset
   animated to zero. The dash walks the outline, which is exactly the effect of
   a pen tracing it.

   Every contour needs its own length, and CSS cannot measure a path, so the
   script writes --len onto each one. --d, the moment a letter starts, is set
   per letter in PHP and inherited by that letter's contours.

   Everything here paints the FINISHED title. The script adds .is-armed to hide
   it before playing, which means a visitor with no JavaScript — or a crawler,
   or anyone who asked their system to reduce motion — gets the whole headline
   rather than an empty box. */

.bnxt,
.bnxt *,
.bnxt *::before,
.bnxt *::after { box-sizing: border-box; }

.bnxt {
  --bnxt-stroke: #ffffff;
  --bnxt-weight: 1px;
  --bnxt-draw: 900ms;
  --bnxt-ease: cubic-bezier(0.33, 1, 0.68, 1);

  position: relative;
  width: 100%;
  max-width: 1528px;
  /* centre in containers wider than the cap, rather than leaving all the
     leftover space on the right */
  margin-left: auto;
  margin-right: auto;
}

/* Elementor's own widget container will shrink-wrap its content if anything up
   the tree makes it a flex or inline-block child. The title would then be laid
   out at the SVG's intrinsic width rather than the container's, and no Maximum
   width setting could bring it back. The SVG carries width/height attributes
   for the same reason; this is the half of the defence that does not depend on
   the markup being the one this plugin renders. */
.elementor-widget-beonyx_hero_title .elementor-widget-container { width: 100%; }

.bnxt-art {
  display: block;
  /* overrides the width/height attributes on the element, which are there to
     give it an intrinsic size, not to fix its rendered size */
  width: 100%;
  height: auto;
  /* the stroke straddles the contour, so half of it falls outside the viewBox
     Figma measured — without this the outermost edge is shaved off */
  overflow: visible;
}

.bnxt-art path {
  fill: none;
  stroke: var(--bnxt-stroke);

  /* Line weight is authored in rendered pixels, but stroke-width is in the
     artwork's own units, so it is divided by however much the artwork has been
     scaled — the script measures that and writes --bnxt-scale. The result is a
     hairline that stays the same thickness on a phone and on a wide desktop.

     The obvious way to get that is vector-effect: non-scaling-stroke, and it
     was used here at first. It cannot be: it moves stroking into device space,
     including the dash pattern, while the dash lengths come from
     getTotalLength() in user units. The two only agree when the artwork is
     drawn at exactly its viewBox size. Scaled up 1.29x, every contour ends the
     animation 78% drawn and the letters never close. */
  stroke-width: calc(var(--bnxt-weight) / var(--bnxt-scale, 1));
  /* BankGothic's corners are square and meet at sharp angles; mitre joins spike
     badly at the tighter ones, and at hairline weights nobody can tell a round
     join from a mitred one anyway */
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* --- armed: the title is taken away ------------------------------------- */

/* Set together and with no transition yet, so the collapse is instant. */
.bnxt.is-armed .bnxt-art path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

/* --- ready: transitions switched on ------------------------------------- */

/* Only once the armed state has been committed. Doing this in a second step is
   what keeps the draw one-way — a visitor who lands already scrolled to the
   hero sees the title drawn, not erased first and then redrawn. */
.bnxt.is-ready .bnxt-art path {
  transition: stroke-dashoffset var(--bnxt-draw) var(--bnxt-ease) var(--d, 0ms);
}

/* --- shown: the pen runs ------------------------------------------------ */

.bnxt.is-shown .bnxt-art path {
  stroke-dashoffset: 0;
}

/* --- the real heading --------------------------------------------------- */

/* The artwork carries no text, so this is the headline as far as a screen
   reader or a search engine is concerned. It is normally out of sight. */
.bnxt-heading {
  margin: 0 0 0.4em;
  text-align: center;
}

.bnxt-heading--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- reduced motion ----------------------------------------------------- */

/* The script already declines to arm the title in this case. This is the belt
   to that pair of braces: if anything ever arms it anyway, the title still
   reads as finished rather than staying invisible. */
@media (prefers-reduced-motion: reduce) {
  .bnxt .bnxt-art path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}