/* ==========================================================================
   Brigg Studio — motion styles (paired with js/brigg-motion.js)
   Only active when the script adds .bs-js, so nothing is ever hidden
   without it. Uses the individual `translate` / `scale` properties so it
   never fights the layout's own transforms.
   ========================================================================== */
:root {
  --bs-out: cubic-bezier(.16, 1, .3, 1);        /* long, soft settle */
  --bs-io: cubic-bezier(.77, 0, .18, 1);        /* editorial wipe */
}

/* Headlines: each word rises out of a mask */
.bs-js .bs-title .bs-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .1em .16em 0; margin: -.1em -.1em -.16em 0; }
.bs-js .bs-title .bs-wi { display: inline-block; translate: 0 112%; transition: translate 1.3s var(--bs-out); transition-delay: calc(var(--i, 0) * 70ms + var(--title-d, 0ms)); will-change: translate; }
.bs-js .bs-title.bs-in .bs-wi { translate: 0 0; }
.bs-js .bs-hero-title { --title-d: 80ms; }

/* Supporting text: fade and rise, gently staggered */
.bs-js .bs-reveal { opacity: 0; translate: 0 14px; transition: opacity .9s ease var(--d, 0s), translate 1s var(--bs-out) var(--d, 0s); }
.bs-js .bs-reveal.bs-in { opacity: 1; translate: 0 0; }

/* Hero details arrive after the headline */
.bs-js .bs-hero { opacity: 0; translate: 0 18px; transition: opacity 1s var(--bs-out) var(--d, .5s), translate 1.2s var(--bs-out) var(--d, .5s); }
.bs-js .bs-hero.bs-in { opacity: 1; translate: 0 0; }

/* Photos: a soft, quick fade with the slightest lift — no wipes, zooms or scroll-linked movement */
.bs-js .bs-unveil { opacity: 0; translate: 0 12px; transition: opacity .9s ease, translate 1s var(--bs-out); }
.bs-js .bs-unveil.bs-in { opacity: 1; translate: 0 0; }

/* Hairlines draw themselves in */
.bs-js .brigg-service.bs-line, .bs-js .brigg-reviews article.bs-line { position: relative; border-top-color: transparent !important; }
.bs-js .brigg-service.bs-line::before, .bs-js .brigg-reviews article.bs-line::before,
.bs-js .paige-project-info.bs-line::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--bs-rule);
  transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--bs-io) .1s; pointer-events: none; }
.bs-js .brigg-service.bs-line::before, .bs-js .brigg-reviews article.bs-line::before { top: -1px; }
.bs-js .paige-project-info.bs-line { position: relative; border-bottom-color: transparent !important; }
.bs-js .paige-project-info.bs-line::after { bottom: -1px; }
.bs-js .paige-work.bs-line::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.8s var(--bs-io); }
.bs-js .bs-line.bs-in::before, .bs-js .bs-line.bs-in::after { transform: scaleX(1) !important; }

/* Eyebrow hairlines extend as their section appears */
.bs-js .paige-eyebrow::before, .bs-js .paige-page-kicker::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.2s var(--bs-io) calc(var(--d, 0s) + .25s); }
.bs-js .bs-in.paige-eyebrow::before, .bs-js .bs-in .paige-eyebrow::before,
.bs-js .bs-in.paige-page-kicker::before, .bs-js .bs-in .paige-page-kicker::before { transform: scaleX(1); }

/* Reading progress: a fine bronze line along the very top */
.bs-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 3001; pointer-events: none; background: var(--bs-hair, #a8927a); transform: scaleX(0); transform-origin: left center; }

/* Page-to-page fade */
.bs-veil { position: fixed; inset: 0; z-index: 99990; pointer-events: none; background: var(--bs-paper, #f5f1ea); opacity: 0; animation: bs-veil-out .9s var(--bs-out) both; }
.bs-leaving .bs-veil { animation: bs-veil-in .42s ease both; }
@keyframes bs-veil-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bs-veil-in { from { opacity: 0; } to { opacity: 1; } }

/* Header and menu links: a touch more refinement */
.bs-header { transition: background .6s ease, color .6s ease, height .6s var(--bs-out), transform .7s var(--bs-out) !important; }
.bs-nav-cta { position: relative; overflow: hidden; isolation: isolate; }
.bs-nav-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--bs-io); }
.bs-nav-cta:hover { background: transparent !important; }
.bs-nav-cta:hover::before { transform: scaleY(1); }
.bs-header:not(.is-over-hero) .bs-nav-cta:hover { color: var(--bs-paper) !important; }
.bs-header:not(.is-over-hero) .bs-nav-cta::before { background: var(--bs-ink); }
.is-over-hero .bs-nav-cta::before { background: #fff; }

/* Form submit: same filling sweep */
.paige-form button, .paige-inquiry-form button { position: relative; overflow: hidden; isolation: isolate; }
.paige-form button::before, .paige-inquiry-form button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bs-paper); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--bs-io); }
.paige-form button:hover::before, .paige-inquiry-form button:hover::before { transform: scaleY(1); }
.paige-form button:hover, .paige-inquiry-form button:hover { background: var(--bs-ink) !important; }

@media (prefers-reduced-motion: reduce) {
  .bs-veil, .bs-progress { display: none !important; }
  .bs-nav-cta::before, .paige-form button::before, .paige-inquiry-form button::before { transition: none; }
}
@media print { .bs-veil, .bs-progress { display: none !important; } }