/* Motion layer. Everything below applies only when <html class="br-js"> (motion allowed, JS running);
   without it the page is simply its final, readable state. */

/* scroll progress */
.br-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 100; background: var(--br-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* generic reveals */
.br-js .br-rv { opacity: 0; transform: translateY(22px); }
.br-js .br-rv.is-in { opacity: 1; transform: none; transition: opacity .9s var(--br-ease-out) calc(var(--i, 0) * 70ms), transform .9s var(--br-ease-out) calc(var(--i, 0) * 70ms); }

/* hero intro */
.br-js .br-hero__title:not(.is-split), .br-js .br-pagehero__title:not(.is-split), .br-js .br-final__title:not(.is-split) { opacity: 0; animation: br-failsafe 0s 2.2s forwards; }
@keyframes br-failsafe { to { opacity: 1; } }
.br-js .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.br-js .wi { display: inline-block; transform: translateY(108%); }
.br-js .is-split.is-in .wi { transform: none; transition: transform 1s var(--br-ease-out) calc(var(--wi) * 60ms + 80ms); }
.br-js .br-hero .br-eyebrow, .br-js .br-hero__lede, .br-js .br-hero .br-actions, .br-js .br-pagehero .br-eyebrow, .br-js .br-pagehero .br-lede, .br-js .br-pagehero .br-actions { animation: br-up .9s var(--br-ease-out) both; }
.br-js .br-hero .br-eyebrow, .br-js .br-pagehero .br-eyebrow { animation-delay: .05s; }
.br-js .br-hero__lede, .br-js .br-pagehero .br-lede { animation-delay: .55s; } .br-js .br-hero .br-actions, .br-js .br-pagehero .br-actions { animation-delay: .75s; }
@keyframes br-up { from { opacity: 0; transform: translateY(16px); } }

/* artwork: strokes start disordered, resolve to their angle; later scrubbed by scroll (is-live) */
.br-js .br-art .fl { transform: rotate(var(--r)); }
.br-js .br-art.is-in .fl { transform: rotate(var(--a)); transition: transform 2.2s var(--br-ease-out) var(--d); }
.br-js .br-art.is-live .fl { transition: none; transform: rotate(calc(var(--a) * (1 - var(--p, 0)) + var(--r) * var(--p, 0))); }
.br-js .br-hero .br-art { transform: translate3d(0, calc(var(--p, 0) * 70px), 0); }

/* self-drawing illustrations */
.br-js .dg-draw :is(path, circle, rect) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.br-js .dg-draw.is-in :is(path, circle, rect) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--br-ease-out) calc(var(--k, 0) * 90ms); }
.br-js .dg-draw :is(path, circle, rect)[stroke-dasharray] { stroke-dasharray: 3 5; stroke-dashoffset: 0; opacity: 0; }
.br-js .dg-draw.is-in :is(path, circle, rect)[stroke-dasharray] { opacity: 1; transition: opacity 1s var(--br-ease) .8s; }

/* how-we-work steps */
.br-js .br-step { opacity: .38; }
.br-js .br-step.is-active { opacity: 1; }

/* journey, horizontal feel (class added by scenes/journey.js on desktop) */
.br-section.is-hscroll { overflow: hidden; padding-block: 4.5rem 3rem; }
.is-hscroll .br-intro { margin-bottom: 2rem; max-width: 46rem; }
.is-hscroll .br-journey { display: flex; width: max-content; gap: 1.25rem; border-top: 0; will-change: transform; }
.is-hscroll .br-journey__stage { width: 21rem; flex: none; padding: 1.75rem; background: var(--br-s1); border: var(--br-border); border-radius: var(--br-radius-lg); transition: border-color var(--br-dur-base) var(--br-ease), opacity var(--br-dur-base) var(--br-ease); opacity: .5; }
.is-hscroll .br-journey__stage.is-active { opacity: 1; border-color: var(--br-accent-line); }
.br-journey__object { position: absolute; right: var(--wp--custom--gutter); top: 0; width: 10rem; height: 10rem; }
.br-journey__object .dg-glyph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.82); transition: opacity .5s var(--br-ease), transform .7s var(--br-ease-out); stroke-width: 1.2; }
.br-journey__object .dg-glyph.is-on { opacity: 1; transform: none; }
.br-journey__bar { position: relative; height: 2px; background: var(--br-line); margin-block: 0 1.75rem; }
.br-journey__bar i { position: absolute; inset: 0; background: var(--br-accent); transform: scaleX(0); transform-origin: left; }

/* magnetic buttons: pointer devices only */
@media (hover: none) { .br-btn { --tx: 0 !important; --ty: 0 !important; } }
.br-btn { transition: transform .35s var(--br-ease-out), background-color var(--br-dur-fast) var(--br-ease); }

/* header progress, subtle active nav underline */
.br-nav a { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .br-progress { display: none; }
  * { scroll-behavior: auto !important; }
}