@charset "utf-8";
/* =====================================================================
   Bon Accord Engineering — motion layer
   Loads AFTER style.css. Replaces AOS + Flickity styling.
   Everything that hides content is scoped to html.js, so the site still
   shows fully if JavaScript fails to load.
   ===================================================================== */

:root{
	--ba-purple:#561577;
	--ba-purple-hover:#6c1f95;
	--ba-violet:#9328EC;
	--ba-lilac:#CC80DF;
	--ease-out:cubic-bezier(.16,1,.3,1);
	--ease-in-out:cubic-bezier(.65,0,.35,1);
	--reveal-dur:.8s;
}

html{scroll-behavior:smooth;}

/* ---------------------------------------------------------------------
   4. Hero (home) — slow settle on the photo, staged content entrance
   --------------------------------------------------------------------- */
#hero{position:relative;overflow:hidden;isolation:isolate;}
#hero::before{
	content:"";position:absolute;inset:0;z-index:-1;
	background:inherit;
	transform:scale(1.08);
	transition:transform 2.6s var(--ease-out);
}
.is-loaded #hero::before{transform:scale(1);}

.js .hero-holder{
	opacity:0;transform:translateY(26px) scale(.985);
	transition:opacity .9s var(--ease-out) .15s, transform 1.1s var(--ease-out) .15s;
}
.js .hero-holder > *{
	opacity:0;transform:translateY(16px);
	transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js.is-loaded .hero-holder,
.js.is-loaded .hero-holder > *{opacity:1;transform:none;}
.js.is-loaded .h-holder-one{transition-delay:.4s;}
.js.is-loaded .h-holder-two{transition-delay:.55s;}
.js.is-loaded .h-holder-three{transition-delay:.7s;}

/* ---------------------------------------------------------------------
   5. Inner page titles — rise in with an accent rule
   --------------------------------------------------------------------- */
.b-header-h1 h1::after{
	content:"";display:block;width:64px;height:2px;margin-top:14px;
	background:linear-gradient(90deg,var(--ba-violet),var(--ba-lilac));
	transform-origin:left center;
}
.js .b-header-h1 h1{
	opacity:0;transform:translateY(22px);
	transition:opacity .9s var(--ease-out) .2s, transform .9s var(--ease-out) .2s;
}
.js .b-header-h1 h1::after{transform:scaleX(0);transition:transform .9s var(--ease-out) .55s;}
.js.is-loaded .b-header-h1 h1{opacity:1;transform:none;}
.js.is-loaded .b-header-h1 h1::after{transform:scaleX(1);}

/* ---------------------------------------------------------------------
   6. Scroll reveals (replaces AOS)
   data-reveal="up | down | left | right | zoom | line"
   data-reveal-stagger  -> direct children cascade in
   --------------------------------------------------------------------- */
.js [data-reveal]{
	transition:opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out);
	transition-delay:var(--reveal-delay,0s);
}
.js [data-reveal]:not(.is-revealed){opacity:0;}
.js [data-reveal="up"]:not(.is-revealed){transform:translate3d(0,34px,0);}
.js [data-reveal="down"]:not(.is-revealed){transform:translate3d(0,-34px,0);}
.js [data-reveal="right"]:not(.is-revealed){transform:translate3d(-42px,0,0);}
.js [data-reveal="left"]:not(.is-revealed){transform:translate3d(42px,0,0);}
.js [data-reveal="zoom"]:not(.is-revealed){transform:scale(.93);}
.js [data-reveal="line"]{transition-duration:1.1s;}
.js [data-reveal="line"]:not(.is-revealed){opacity:1;transform:scaleX(0);}

.js [data-reveal-stagger] > *{
	transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
	transition-delay:calc(var(--reveal-delay,0s) + .15s + var(--i,0) * 70ms);
}
.js [data-reveal-stagger]:not(.is-revealed) > *{opacity:0;transform:translate3d(0,14px,0);}

/* ---------------------------------------------------------------------
   7. Hover polish — the old rules snapped with no transition
   --------------------------------------------------------------------- */
.mid-1-holder a *{transition:transform .45s var(--ease-out);}
.mid-1-rules{transition:filter .3s ease;}
.mid-1-rules:hover{filter:brightness(1.08);}
.button{transition:background-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out);}
.button:hover{background-color:var(--ba-purple-hover);box-shadow:0 10px 22px -10px rgba(86,21,119,.7);transform:translateY(-2px);}
.button:active{transform:translateY(0);box-shadow:none;}
.button span{transition:padding .35s var(--ease-out);}
.button span:after{transition:opacity .35s var(--ease-out), right .35s var(--ease-out);}
.mob-blog{border-radius:8px;}

/* ---------------------------------------------------------------------
   8. Carousel (replaces Flickity)
   --------------------------------------------------------------------- */
.ba-carousel{
	position:relative;width:100%;max-width:700px;margin:0 auto;
	font-family:"open-sans-p",sans-serif;letter-spacing:0;
}
.ba-carousel:focus-visible{outline:2px solid var(--ba-violet);outline-offset:6px;border-radius:16px;}
.ba-carousel__stage{
	position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:14px;
	background:#17121c;
	box-shadow:0 26px 50px -26px rgba(25,10,40,.6);
	touch-action:pan-y;cursor:zoom-in;
	-webkit-user-select:none;user-select:none;
}
.ba-carousel__slide{
	position:absolute;inset:0;margin:0;
	opacity:0;visibility:hidden;
	transform:translate3d(var(--from,4%),0,0);
	transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), visibility 0s linear .9s;
}
.ba-carousel__slide img{
	display:block;width:100%;height:100%;object-fit:cover;
	transform:scale(1.07);
	transition:transform 7s linear;
	-webkit-user-drag:none;pointer-events:none;
}
.ba-carousel__slide.is-active{
	opacity:1;visibility:visible;transform:none;z-index:1;
	transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), visibility 0s linear 0s;
}
.ba-carousel__slide.is-active img{transform:scale(1);}
.ba-carousel__slide.is-leaving{
	visibility:visible;transform:translate3d(var(--to,-4%),0,0);
}
/* Wide photos / collages: whole image visible, blurred copy fills the frame */
.ba-carousel__slide.is-wide::before{
	content:"";position:absolute;inset:-40px;
	background:var(--bg) center/cover no-repeat;
	filter:blur(24px) brightness(.55) saturate(1.1);
}
.ba-carousel__slide.is-wide img{position:relative;object-fit:contain;}
/* Before JS runs, just show the first image */
html:not(.js) .ba-carousel__slide:first-child{opacity:1;visibility:visible;transform:none;}

.ba-carousel__btn{
	position:absolute;top:50%;z-index:3;
	width:46px;height:46px;margin-top:-23px;padding:0;border:0;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.88);color:#1d1424;cursor:pointer;
	box-shadow:0 6px 18px -8px rgba(0,0,0,.5);
	opacity:0;
	transition:opacity .3s ease, transform .3s var(--ease-out), background-color .2s ease;
}
.ba-carousel__btn svg{width:18px;height:18px;}
.ba-carousel__btn--prev{left:14px;transform:translateX(-8px);}
.ba-carousel__btn--next{right:14px;transform:translateX(8px);}
.ba-carousel:hover .ba-carousel__btn,
.ba-carousel:focus-within .ba-carousel__btn{opacity:1;transform:none;}
.ba-carousel__btn:hover{background:#fff;}
.ba-carousel__btn:focus-visible{outline:2px solid var(--ba-violet);outline-offset:2px;opacity:1;transform:none;}
@media (hover:none){.ba-carousel__btn{opacity:1;transform:none;width:40px;height:40px;margin-top:-20px;}}

.ba-carousel__count{
	position:absolute;left:14px;top:14px;z-index:3;
	padding:5px 11px;border-radius:999px;
	background:rgba(15,10,20,.55);color:#fff;font-size:12px;letter-spacing:1.5px;
	-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
	pointer-events:none;
}
.ba-carousel__count b{font-weight:normal;color:#fff;}
.ba-carousel__count i{font-style:normal;opacity:.65;}

.ba-carousel__progress{
	position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;
	background:rgba(255,255,255,.18);
}
.ba-carousel__progress span{
	display:block;height:100%;width:100%;
	background:linear-gradient(90deg,var(--ba-violet),var(--ba-lilac));
	transform:scaleX(0);transform-origin:left center;
}
.ba-carousel__progress span.is-running{animation:baProgress var(--autoplay,5000ms) linear forwards;}
.ba-carousel.is-paused .ba-carousel__progress span{animation-play-state:paused;}
@keyframes baProgress{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.ba-carousel__thumbs{
	display:flex;gap:8px;margin-top:12px;padding:2px 2px 6px;
	overflow-x:auto;scrollbar-width:thin;scroll-behavior:smooth;
}
.ba-carousel__thumb{
	flex:0 0 auto;width:68px;aspect-ratio:4/3;padding:0;border:0;border-radius:8px;overflow:hidden;
	background:#ddd;cursor:pointer;opacity:.5;
	outline:2px solid transparent;outline-offset:2px;
	transition:opacity .3s ease, outline-color .3s ease, transform .3s var(--ease-out);
}
.ba-carousel__thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.ba-carousel__thumb:hover{opacity:.85;transform:translateY(-2px);}
.ba-carousel__thumb.is-active{opacity:1;outline-color:var(--ba-purple);}
.ba-carousel__thumb:focus-visible{outline-color:var(--ba-violet);opacity:1;}

/* Lightbox (shared, created by carousel.js) */
.ba-lightbox{
	width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;
	background:rgba(12,8,16,.97);color:#fff;
	font-family:"open-sans-p",sans-serif;
}
.ba-lightbox[open]{display:flex;align-items:center;justify-content:center;animation:baFadeIn .3s ease;}
.ba-lightbox::backdrop{background:rgba(12,8,16,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.ba-lightbox__img{
	max-width:min(92vw,1400px);max-height:84vh;object-fit:contain;border-radius:6px;
	box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
	animation:baLightboxIn .45s var(--ease-out);
}
.ba-lightbox__img.is-swapping{animation:baLightboxSwap .45s var(--ease-out);}
.ba-lightbox__btn{
	position:absolute;width:48px;height:48px;padding:0;border:0;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
	transition:background-color .2s ease;
}
.ba-lightbox__btn:hover,.ba-lightbox__btn:focus-visible{background:rgba(255,255,255,.25);outline:none;}
.ba-lightbox__btn svg{width:20px;height:20px;}
.ba-lightbox__close{top:18px;right:18px;}
.ba-lightbox__prev{left:18px;top:50%;margin-top:-24px;}
.ba-lightbox__next{right:18px;top:50%;margin-top:-24px;}
.ba-lightbox__count{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:13px;letter-spacing:2px;opacity:.75;}
@keyframes baLightboxIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
@keyframes baLightboxSwap{from{opacity:0;transform:translateX(var(--lb-from,20px));}to{opacity:1;transform:none;}}

/* Carousel sizing inside the existing layout */
.bolt-holder .ba-carousel{max-width:none;}
@media screen and (max-width:1050px){
	.bolt-holder{min-width:0;width:92%;}
	.ba-carousel__thumb{width:56px;}
	.b-header-h1 h1::after{width:48px;margin-top:10px;}
}

/* ---------------------------------------------------------------------
   9. Reduced motion — keep fades, drop movement
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	html{scroll-behavior:auto;}
	#hero::before{transform:none !important;transition:none;}
	.js [data-reveal],.js [data-reveal-stagger] > *,
	.js .hero-holder,.js .hero-holder > *,.js .b-header-h1 h1{transform:none !important;}
	.ba-carousel__slide,.ba-carousel__slide.is-leaving{transform:none !important;}
	.ba-carousel__slide img,.ba-carousel__slide.is-active img{transform:none !important;transition:none;}
	}