/* =============================================================================
   HERO BACKGROUND MOTION
   Additive layer only. Nothing in the existing hero (copy, headline, CTAs,
   trust row, slider, dots) is touched — this adds one decorative layer behind
   them at z-index 0, in the empty right-hand column.

   REVERT: delete this file + assets/video/, drop the enqueue in functions.php
   and the bemuar_hero_motion() call in front-page.php. Nothing else references
   these class names.
   ========================================================================== */

.bmx-hero-motion{
  position:absolute;
  inset:0;
  z-index:0;                 /* .bmx-hero-inner is z-index:2, dots are 4 */
  overflow:hidden;
  pointer-events:none;

  /* Paints the exact paper colour the hero already paints (real.css sets
     .bmx-hero{background:var(--bg)}), so this box is invisible — but it gives
     the clip below a known, opaque surface to multiply into instead of
     depending on whatever stacking context happens to be above it. */
  background:var(--bg,#EBE7DF);
  isolation:isolate;

  /* Where the clip starts horizontally. Everything left of this stays exactly
     as it is today — that is the column the headline lives in. */
  --hm-left:60%;
  /* One dial for how present the hand is. 0 hides it, 1 is as designed. */
  --hm-opacity:.9;
}

.bmx-hero-motion__video{
  position:absolute;
  top:0;
  left:var(--hm-left);
  /* <video> is a replaced element: with all four insets and auto sizing the
     spec drops right/bottom and falls back to the intrinsic 1200x1296, so the
     box has to be stated explicitly. */
  width:calc(100% - var(--hm-left));
  height:100%;
  /* The ground is pure white and multiply makes it disappear, so `contain`
     costs nothing: no crop, no visible letterbox — the subject is never cut. */
  object-fit:contain;
  object-position:center;

  /* The clip is already black-on-white and its ground has been lifted to a
     true 255, so multiply drops the ground completely and leaves only the
     subject sitting on the page — no rectangle, no wash needed. */
  mix-blend-mode:multiply;

  /* Fade in from the left so the subject never reaches the copy column. */
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,1) 26%,rgba(0,0,0,1) 100%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,1) 26%,rgba(0,0,0,1) 100%);

  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 2.4s cubic-bezier(.16,1,.3,1);
}

.bmx-hero-motion.is-on .bmx-hero-motion__video{
  opacity:var(--hm-opacity);
  transform:none;
}

/* --- opt out -------------------------------------------------------------- */
/* Below the two-column breakpoint the copy uses the full width, so there is no
   free space left to animate into — the page stays byte-for-byte as it is, and
   the JS never requests the file. */
@media (max-width:899px){
  .bmx-hero-motion{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .bmx-hero-motion{ display:none; }
}