/* ============================================================================
   bb-motion.css : the v4 motion layer for barrelandbeacon.com
   ----------------------------------------------------------------------------
   Techniques borrowed from motion-graphics reels (dot-matrix type, halftone
   fields, orbital text rings, viewfinder HUDs, radial dot bursts), rendered in
   the B&B palette. Everything here is decorative and aria-hidden; the page
   reads identically with this file removed. scrollcraft.css is never edited.
   Loaded AFTER the page's inline <style>, so equal-specificity rules here win.
   ============================================================================ */

/* ---------- shared canvas layer ---------- */
.bbm-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; display: block; }

/* ---------- act 1 : standby halftone field in the system column ----------
   Sits between the ghosted dashboard and the system scrim (DOM order), so the
   scrim still darkens it under the copy. */
.act-split__col--system > .bbm-standby { z-index: 0; opacity: .9; }
/* Right-anchored at the column's widest (50vw) so the Act 3 split animation,
   which narrows this column every scroll frame, clips the canvas instead of
   resizing it. Full width once the columns stack. */
@media (min-width: 861px) {
  .act-split__col--system > .bbm-standby { left: auto; right: 0; width: 50vw; }
}

/* ---------- kinetic words (armed by JS only, so no-JS shows plain text) ---------- */
.bbm-words .bbm-w {
  display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(4px);
  transition: opacity .6s var(--sc-ease-out), transform .6s var(--sc-ease-out), filter .6s var(--sc-ease-out);
  transition-delay: calc(var(--w, 0) * 45ms);
}
.bbm-words.is-in .bbm-w { opacity: 1; transform: none; filter: none; }

/* ---------- act 3 : orbital text ring around the crest ----------
   Rotation is a pure function of the act's --sc-p (published by the engine on
   the section), so it scrubs with the crest ignition and needs no JS. */
.smoke-ground > .crest-orbit { position: relative; z-index: 2; flex-shrink: 0; display: grid; place-items: center; }
.crest-orbit__ring {
  position: absolute; inset: -14%; width: 128%; height: 128%; pointer-events: none; overflow: visible;
  transform: rotate(calc(var(--sc-p, 0) * 200deg - 40deg));
  will-change: transform;
}
.crest-orbit__ring text {
  font-family: var(--sc-font-text); font-weight: 600; font-size: 7.4px; letter-spacing: 0;
  fill: #e0b055;
}
.crest-orbit__dots { fill: none; stroke: #c9943a; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 0 4.2; opacity: .75; }
@media (max-width: 1100px) {
  .crest-orbit__ring { inset: -10%; width: 120%; height: 120%; }
}

/* ---------- act 4 : viewfinder HUD over the demo ---------- */
.bbm-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bbm-hud::before {
  /* four corner brackets from one element: 8 gradient strokes */
  content: ""; position: absolute; inset: 12px;
  --c: color-mix(in oklab, var(--sc-accent-2) 85%, transparent); --l: 22px; --t: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
}
.bbm-hud__tag {
  position: absolute; top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-family: "Doto", ui-monospace, "SF Mono", Menlo, monospace; font-weight: 800; font-size: 15px; line-height: 1;
  letter-spacing: .06em; color: #f0ead8; font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: 4px; background: rgb(6 5 4 / .78);
}
.bbm-hud__tag b { font-weight: 800; color: #e0b055; }
.bbm-hud__tag--l { left: 22px; }
.bbm-hud__tag--r { right: 22px; color: #e0b055; }
.bbm-rec { width: 8px; height: 8px; border-radius: 50%; background: #e0b055; box-shadow: 0 0 8px #c9943a; animation: bbm-rec 1.6s steps(2, jump-none) infinite; }
@keyframes bbm-rec { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .25; } }
/* scene-change wipe: a gold scan line with a halftone wake crosses the frame */
.bbm-hud__wipe {
  position: absolute; top: 0; bottom: 0; left: 0; width: 34%; opacity: 0;
  background:
    linear-gradient(to right, transparent 0 calc(100% - 3px), #f0ead8 calc(100% - 3px)),
    radial-gradient(circle, rgb(224 176 85 / .55) 1.4px, transparent 1.9px) 0 0 / 8px 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 85%);
          mask-image: linear-gradient(to right, transparent, #000 85%);
  transform: translateX(-100%);
}
.bbm-hud.is-wiping .bbm-hud__wipe { animation: bbm-wipe .75s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes bbm-wipe { 0% { transform: translateX(-100%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(300%); opacity: 0; } }
.workflow-video.is-lite .bbm-hud__tag--r, .workflow-video.is-lite .bbm-rec { display: none; }

/* ---------- reports : HUD tag on the dashboard + dot-matrix bars under the sample figures ---------- */
.product-strip__frame > .bbm-hud__tag { top: 14px; left: 14px; z-index: 2; font-size: 14px; }
/* Absolutely placed in the row gap under each label: zero layout height, so the
   page length (and every act offset below it) is unchanged from v3. */
.stat-line > div { position: relative; }
.bbm-bar {
  position: absolute; left: 0; top: calc(100% + 7px); height: 10px; width: calc(var(--v, 0) * 100%); min-width: 10px;
  background: radial-gradient(circle, #e0b055 1.9px, transparent 2.4px) 0 0 / 7px 5px;
}
.bbm-armed .bbm-bar { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--sc-ease-out) .15s; }
.bbm-bar--neg { background-image: radial-gradient(circle, #b3a795 1.9px, transparent 2.4px); }
.bbm-armed .stat-line.is-in .bbm-bar { clip-path: inset(0 0 0 0); }

/* ---------- pricing : halftone skyline in the section's top padding ---------- */
.pricing-shell { position: relative; }
.pricing-shell > .bbm-skyline { height: calc(var(--sc-section) * .9); }

/* ---------- peak : radial beacon burst behind the booking window ---------- */
.peak-stage > .bbm-burst { z-index: 0; }

/* ---------- reduced motion : every effect resolves to its finished frame ---------- */
@media (prefers-reduced-motion: reduce) {
  .bbm-words .bbm-w { opacity: 1; transform: none; filter: none; transition: none; }
  .crest-orbit__ring { transform: rotate(-20deg); will-change: auto; }
  .bbm-rec { animation: none; }
  .bbm-hud__wipe { display: none; }
  .bbm-bar { clip-path: none; transition: none; }
}

/* ---------- print : reveal-state never depends on having scrolled ---------- */
@media print {
  .bbm-words .bbm-w { opacity: 1; transform: none; filter: none; }
  .bbm-armed .bbm-bar { clip-path: none; }
  .bbm-canvas, .bbm-hud { display: none; }
}