/* ==========================================================
   BSIL motion layer (Oct 2026)
   Restrained, institutional motion: entrances, scroll reveals,
   and hover feedback. Transform and opacity only.
   Remove this file's enqueue in functions.php to switch it off.
   ========================================================== */
:root{
	--ease-out:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.4,0,.2,1);
	--rv-dist:16px;
	--rv-dur:.7s;
}

@keyframes bsil-up{from{opacity:0;transform:translate3d(0,var(--rv-dist),0)}to{opacity:1;transform:none}}
@keyframes bsil-fade{from{opacity:0}to{opacity:1}}
@keyframes bsil-rise-card{from{opacity:0;transform:translate3d(0,24px,0) scale(.985)}to{opacity:1;transform:none}}

/* ---------- Homepage hero: staggered entrance on load ---------- */
.hero-copy>*{animation:bsil-up .8s var(--ease-out) both}
.hero-copy>:nth-child(1){animation-delay:.05s}
.hero-copy>:nth-child(2){animation-delay:.13s}
.hero-copy>:nth-child(3){animation-delay:.21s}
.hero-copy>:nth-child(4){animation-delay:.29s}
.hero-copy>:nth-child(5){animation-delay:.37s}
.hero-feature{animation:bsil-rise-card 1s var(--ease-out) .35s both}

/* ---------- Inner page hero ---------- */
.page-hero .wrap>*{animation:bsil-up .7s var(--ease-out) both}
.page-hero .wrap>:nth-child(2){animation-delay:.08s}
.page-hero .wrap>:nth-child(3){animation-delay:.16s}
.page-hero .wrap>:nth-child(n+4){animation-delay:.22s}

/* ---------- Scroll reveal (class added by motion.js only to
   elements that start below the fold; no JS = fully visible) ---------- */
.rv{opacity:0;transform:translate3d(0,var(--rv-dist),0);transition:opacity var(--rv-dur) var(--ease-out),transform var(--rv-dur) var(--ease-out);transition-delay:var(--rv-delay,0s)}
.rv.is-in{opacity:1;transform:none}
/* Cards keep their own hover transform once revealed */
.card.rv.is-in,.logo-tile.rv.is-in,.topic.rv.is-in{transition:opacity var(--rv-dur) var(--ease-out),transform .25s var(--ease-soft),box-shadow .25s var(--ease-soft),border-color .2s}

/* ---------- Navigation ---------- */
@media (min-width:1101px){
	/* Top-level indicator: a short rounded gold bar under the text only,
	   growing from the centre. Replaces the full-width inset line. */
	.site-nav .menu>li:not(.menu-cta)>a{position:relative;background:none;box-shadow:none!important;border-radius:var(--radius);transition:color .2s}
	.site-nav .menu>li:not(.menu-cta)>a::before{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;border-radius:2px;background:var(--c-accent);transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease-out)}
	.site-nav .menu-item-has-children>a::before{right:24px!important}
	.site-nav .menu>li:not(.menu-cta):hover>a::before,
	.site-nav .menu>li:not(.menu-cta):focus-within>a::before{transform:scaleX(.6)}
	.site-nav .menu>li.current-menu-item>a::before,
	.site-nav .menu>li.current-menu-ancestor>a::before,
	.site-nav .menu>li.current_page_parent>a::before{transform:scaleX(1)}
	.site-nav .menu-item-has-children>a::after{transition:transform .3s var(--ease-out)}
	.site-nav .menu-item-has-children:hover>a::after,.site-nav .menu-item-has-children:focus-within>a::after{transform:translateY(0) rotate(225deg)}

	/* Frosted glass dropdown */
	.site-nav .sub-menu{top:calc(100% + 10px);left:0;min-width:240px;padding:8px;border:1px solid rgba(255,255,255,.65);border-radius:12px;
		background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
		box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 40px -12px rgba(8,63,37,.35),0 2px 8px -2px rgba(8,63,37,.12);
		opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;
		transition:opacity .2s var(--ease-soft),transform .3s var(--ease-out),visibility 0s linear .2s}
	/* Invisible bridge across the gap so the menu stays open while the pointer moves down */
	.site-nav .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
	.site-nav li:hover>.sub-menu,.site-nav li:focus-within>.sub-menu,.site-nav li.open>.sub-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease-soft),transform .3s var(--ease-out),visibility 0s}
	.site-nav .sub-menu li+li{margin-top:2px}
	.site-nav .sub-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:15px;font-weight:500;line-height:1.35;color:var(--c-ink);transition:background-color .18s,color .18s,transform .25s var(--ease-out)}
	.site-nav .sub-menu a:hover,.site-nav .sub-menu a:focus-visible{background:rgba(12,90,53,.08);color:var(--c-primary-deep);transform:translateX(2px)}
	.site-nav .sub-menu .current-menu-item>a{background:rgba(179,138,38,.14);color:var(--c-primary-deep);font-weight:600}
	@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-nav .sub-menu{background:rgba(255,255,255,.97)}}
}
.site-header{transition:box-shadow .3s var(--ease-soft)}

/* Mobile drawer: items settle in one after another */
@media (max-width:1100px){
	.site-nav{transition:transform .35s var(--ease-out)}
	.nav-open .site-nav .menu>li{animation:bsil-up .45s var(--ease-out) both}
	.nav-open .site-nav .menu>li:nth-child(1){animation-delay:.08s}
	.nav-open .site-nav .menu>li:nth-child(2){animation-delay:.12s}
	.nav-open .site-nav .menu>li:nth-child(3){animation-delay:.16s}
	.nav-open .site-nav .menu>li:nth-child(4){animation-delay:.20s}
	.nav-open .site-nav .menu>li:nth-child(5){animation-delay:.24s}
	.nav-open .site-nav .menu>li:nth-child(6){animation-delay:.28s}
	.nav-open .site-nav .menu>li:nth-child(n+7){animation-delay:.32s}
	.site-nav li.open>.sub-menu{animation:bsil-fade .25s var(--ease-soft) both}
}

/* Reading progress (single posts) */
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent));transform-origin:left center;transform:scaleX(0);pointer-events:none}

/* ---------- Buttons and links ---------- */
.btn{transition:background .2s,border-color .2s,color .2s,transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
.btn-gold:hover{box-shadow:0 8px 20px -10px rgba(179,138,38,.7)}
.btn:not(.btn-line):not(.btn-ghost):not(.btn-gold):hover{box-shadow:0 8px 20px -10px rgba(8,63,37,.55)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}
.more .ic,.card-link .ic,.topic .ic{transition:transform .3s var(--ease-out)}
.more:hover .ic,.card-link:hover .ic{transform:translateX(4px)}
.topic:hover .ic{transform:translate(4px,-50%)}
.back{display:inline-block;transition:transform .25s var(--ease-out)}
.back:hover{transform:translateX(-3px)}

/* ---------- Cards ---------- */
.card{transition:box-shadow .25s var(--ease-soft),transform .25s var(--ease-soft),border-color .2s}
.card:hover{border-color:#C6D3CA}
.card-media img{transition:transform .7s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.035)}
.card-title a{transition:color .2s}

/* Partner tiles */
.logo-tile{transition:box-shadow .25s var(--ease-soft),transform .25s var(--ease-soft),border-color .2s}
a.logo-tile:hover{transform:translateY(-2px);border-color:#C6D3CA}
.logo-tile img{transition:transform .5s var(--ease-out)}
a.logo-tile:hover img{transform:scale(1.04)}

/* Topics */
.topic{transition:box-shadow .25s var(--ease-soft),border-color .2s,transform .25s var(--ease-soft)}
.topic:hover{transform:translateY(-1px)}

/* People */
.person-photo img{transition:transform .6s var(--ease-out)}

/* About band focus areas */
.focus-list li{transition:background-color .2s,transform .25s var(--ease-out)}
.focus-list li:hover{background:rgba(255,255,255,.11);transform:translateX(3px)}

/* Socials */
.socials a{transition:background .2s,color .2s,transform .25s var(--ease-out)}
.socials:not(.socials-sm) a:hover{transform:translateY(-2px)}

/* FAQ: answer eases in when opened */
.faq details{transition:border-color .2s}
.faq details[open]{border-color:#C6D3CA}
.faq summary .ic{transition:transform .3s var(--ease-out)}
.faq details[open] p{animation:bsil-up .35s var(--ease-out) both;--rv-dist:-4px}

/* Tabs, chips, pager, sidebar links */
.tabs a,.pager a,a.chip,.pd-links a,.copy{transition:background-color .2s,border-color .2s,color .2s}

/* Form fields */
.form input,.form textarea,.filters input,.filters select{transition:border-color .2s,box-shadow .2s}

/* ---------- Reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important}
	.rv{opacity:1!important;transform:none!important}
	.btn:hover,.card:hover,a.logo-tile:hover,.topic:hover,.focus-list li:hover,.socials a:hover,.back:hover{transform:none}
	.card:hover .card-media img,a.logo-tile:hover img{transform:none}
}