/* ==========================================================
   BSIL ambient layer (Oct 2026)
   Continuous, low-key motion that keeps the site alive:
   hero globe, drifting light, focus-area ticker, card float,
   gold shine, rotating rings. Transform/opacity first.
   Everything stops under prefers-reduced-motion and pauses
   when off screen (ambient.js). Disable bsil-motion.php's
   ambient enqueue to switch it off.
   ========================================================== */

@keyframes amb-drift-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,8%,0) scale(1.12)}100%{transform:translate3d(4%,-4%,0) scale(.95)}}
@keyframes amb-drift-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(10%,-6%,0) scale(.9)}100%{transform:translate3d(-4%,6%,0) scale(1.08)}}
@keyframes amb-meridian{
	0%{transform:scaleX(1);animation-timing-function:cubic-bezier(.12,0,.39,0)}
	25%{transform:scaleX(0);animation-timing-function:cubic-bezier(.61,1,.88,1)}
	50%{transform:scaleX(-1);animation-timing-function:cubic-bezier(.12,0,.39,0)}
	75%{transform:scaleX(0);animation-timing-function:cubic-bezier(.61,1,.88,1)}
	100%{transform:scaleX(1)}}
@keyframes amb-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes amb-shine{0%,72%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes amb-marquee{to{transform:translate3d(-50%,0,0)}}
@keyframes amb-rotate{to{transform:rotate(360deg)}}
@keyframes amb-scan{0%,88%{transform:translateX(-110%)}100%{transform:translateX(110%)}}

/* ---------- Homepage hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero>.wrap{position:relative;z-index:2}
.hero::before,.hero::after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;will-change:transform}
.hero::before{width:620px;height:620px;left:-180px;bottom:-320px;background:radial-gradient(closest-side,rgba(233,217,168,.20),rgba(233,217,168,0));animation:amb-drift-a 22s ease-in-out infinite alternate}
.hero::after{width:520px;height:520px;right:22%;top:-260px;background:radial-gradient(closest-side,rgba(110,190,140,.22),rgba(110,190,140,0));animation:amb-drift-b 26s ease-in-out infinite alternate}

.hero-art{position:absolute;z-index:1;top:50%;right:max(-140px,calc((100vw - 1200px) / 2 - 150px));width:clamp(380px,44vw,620px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;will-change:transform;contain:layout paint;animation:bsil-fade 1.6s ease .4s both}
.globe{display:block;width:100%;height:100%;overflow:visible}
.globe ellipse,.globe .g-rim,.globe .g-axis{fill:none;stroke:#E9D9A8;stroke-width:.8;vector-effect:non-scaling-stroke}
.globe .g-par ellipse{stroke-opacity:.2}
.globe .g-mer ellipse{stroke-opacity:.32;transform-box:fill-box;transform-origin:center;animation:amb-meridian 24s infinite;animation-delay:calc(var(--i) * -2s)}
.globe .g-rim{stroke-opacity:.5}
.globe .g-axis{stroke-opacity:.22;stroke-dasharray:2 5}
.globe .g-ring{stroke-opacity:.38;stroke-dasharray:3 6}
.globe .g-sat{fill:#E9D9A8}
.globe .g-halo{fill:#E9D9A8;fill-opacity:.18}


/* Featured card floats, its gold edge catches the light */
.hero-feature{position:relative;will-change:transform;animation:bsil-rise-card 1s var(--ease-out) .35s both,amb-float 7s ease-in-out 1.5s infinite}
.hero-feature:hover{animation-play-state:paused}

/* ---------- Gold buttons: periodic shine ---------- */
.btn-gold{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:-1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-160%) skewX(-20deg);animation:amb-shine 5.5s ease-in-out 2s infinite;pointer-events:none}

/* ---------- Focus-area ticker under the hero ---------- */
.ticker{position:relative;overflow:hidden;contain:paint;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--c-primary-deep);border-top:1px solid rgba(233,217,168,.16);border-bottom:3px solid var(--c-accent);padding:14px 0}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:min(140px,14vw);z-index:1;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--c-primary-deep),rgba(8,63,37,0))}
.ticker::after{right:0;background:linear-gradient(270deg,var(--c-primary-deep),rgba(8,63,37,0))}
.ticker-track{display:flex;width:max-content;animation:amb-marquee 120s linear infinite;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
/* JS drives it with a pixel-exact, GPU-run animation; CSS loop is only the no-JS fallback */
.ticker.tk-js .ticker-track{animation:none}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-list{display:flex;list-style:none;margin:0;padding:0}
.ticker-list li{display:flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--f-head);font-style:italic;font-size:clamp(16px,1.45vw,19px);line-height:1.4;color:#E7F0EA;white-space:nowrap;transition:color .2s}
.ticker-list li::before{content:"";width:7px;height:7px;flex:none;background:var(--c-accent);transform:rotate(45deg)}
.ticker-list li:hover{color:var(--c-gold-soft)}

/* ---------- Section headings: gold rule that keeps drawing ---------- */
.section-head h2{position:relative;padding-bottom:12px}
.section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:3px;background:var(--c-accent)}
.section-head h2::before{content:"";position:absolute;left:0;bottom:0;width:18px;height:3px;z-index:1;border-radius:3px;background:linear-gradient(90deg,rgba(255,240,190,0),#FFF0BE,rgba(255,240,190,0));opacity:0;animation:amb-glide 4.5s ease-in-out infinite}
@keyframes amb-glide-sm{0%{transform:translateX(0);opacity:0}15%{opacity:1}55%{transform:translateX(30px);opacity:1}70%,100%{transform:translateX(30px);opacity:0}}
@keyframes amb-glide{0%{transform:translateX(0);opacity:0}15%{opacity:1}55%{transform:translateX(46px);opacity:1}70%,100%{transform:translateX(46px);opacity:0}}

/* ---------- About band: drifting light + slow compass ring ---------- */
.about-band{position:relative;overflow:hidden;isolation:isolate}
.about-band>.wrap{position:relative;z-index:1}
.about-band::before{content:"";position:absolute;z-index:0;width:560px;height:560px;left:-160px;top:-220px;border-radius:50%;background:radial-gradient(closest-side,rgba(179,138,38,.20),rgba(179,138,38,0));animation:amb-drift-b 24s ease-in-out infinite alternate;pointer-events:none}
.about-band::after{content:"";position:absolute;z-index:0;width:760px;height:760px;right:-260px;bottom:-330px;pointer-events:none;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23E9D9A8'%3E%3Ccircle cx='200' cy='200' r='198' stroke-opacity='.16'/%3E%3Ccircle cx='200' cy='200' r='160' stroke-opacity='.14' stroke-dasharray='2 7'/%3E%3Ccircle cx='200' cy='200' r='120' stroke-opacity='.12'/%3E%3Ccircle cx='200' cy='200' r='80' stroke-opacity='.12' stroke-dasharray='1 5'/%3E%3Cpath d='M200 0v400M0 200h400M59 59l282 282M341 59 59 341' stroke-opacity='.06'/%3E%3C/g%3E%3Cg fill='%23E9D9A8' fill-opacity='.45'%3E%3Ccircle cx='200' cy='2' r='3.5'/%3E%3Ccircle cx='360' cy='200' r='2.5'/%3E%3Ccircle cx='120' cy='200' r='2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
	will-change:transform;animation:amb-rotate 150s linear infinite}

/* Focus list: a soft light scans down the list, one item after another */
.focus-list li{position:relative;overflow:hidden}
.focus-list li::after{content:"";position:absolute;inset:0;will-change:transform;background:linear-gradient(90deg,transparent,rgba(233,217,168,.16),transparent);transform:translateX(-110%);animation:amb-scan 10s ease-in-out infinite;pointer-events:none}
.focus-list li:nth-child(1)::after{animation-delay:0s}
.focus-list li:nth-child(2)::after{animation-delay:.25s}
.focus-list li:nth-child(3)::after{animation-delay:.5s}
.focus-list li:nth-child(4)::after{animation-delay:.75s}
.focus-list li:nth-child(5)::after{animation-delay:1s}
.focus-list li:nth-child(6)::after{animation-delay:1.25s}
.focus-list li:nth-child(7)::after{animation-delay:1.5s}
.focus-list li:nth-child(8)::after{animation-delay:1.75s}
.focus-list li:nth-child(9)::after{animation-delay:2s}
.focus-list li:nth-child(10)::after{animation-delay:2.25s}
.focus-list li:nth-child(n+11)::after{animation-delay:2.5s}
.vision{position:relative}
.vision::before{content:"";position:absolute;left:-3px;top:0;width:3px;height:40%;background:linear-gradient(180deg,transparent,#F0DC9E,transparent);animation:amb-vline 4s ease-in-out infinite}
@keyframes amb-vline{0%{transform:translateY(-100%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(250%);opacity:0}}

/* ---------- Inner page heroes ---------- */
.page-hero{position:relative;overflow:hidden;isolation:isolate}
.page-hero>.wrap{position:relative;z-index:1}
.page-hero::before{content:"";position:absolute;z-index:0;width:520px;height:520px;right:8%;top:-300px;border-radius:50%;background:radial-gradient(closest-side,rgba(233,217,168,.18),rgba(233,217,168,0));animation:amb-drift-a 22s ease-in-out infinite alternate;pointer-events:none}
.page-hero::after{content:"";position:absolute;z-index:0;width:460px;height:460px;right:-140px;top:50%;margin-top:-230px;pointer-events:none;opacity:.9;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23E9D9A8'%3E%3Ccircle cx='200' cy='200' r='198' stroke-opacity='.18'/%3E%3Ccircle cx='200' cy='200' r='150' stroke-opacity='.12' stroke-dasharray='2 7'/%3E%3Cellipse cx='200' cy='200' rx='198' ry='60' stroke-opacity='.12'/%3E%3Cellipse cx='200' cy='200' rx='60' ry='198' stroke-opacity='.12'/%3E%3Cellipse cx='200' cy='200' rx='130' ry='198' stroke-opacity='.1'/%3E%3C/g%3E%3Ccircle cx='200' cy='2' r='3.5' fill='%23E9D9A8' fill-opacity='.5'/%3E%3C/svg%3E") center/contain no-repeat;
	will-change:transform;animation:amb-rotate 120s linear infinite}

/* ---------- Footer: gold hairline in motion ---------- */
.site-footer{position:relative;overflow-x:clip}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--c-primary) 0,var(--c-accent) 30%,var(--c-accent) 70%,var(--c-primary) 100%)}
.site-footer::after{content:"";position:absolute;left:0;top:0;width:30%;height:3px;background:linear-gradient(90deg,rgba(255,240,190,0),#FFF0BE,rgba(255,240,190,0));transform:translateX(-100%);animation:amb-run 9s linear infinite;pointer-events:none}
@keyframes amb-run{to{transform:translateX(340%)}}

/* ---------- Paused when off screen (ambient.js) ---------- */
.amb-off,.amb-off *,.amb-off::before,.amb-off::after{animation-play-state:paused!important}

/* ---------- Small screens ---------- */
@media (max-width:960px){
	.hero-art{top:-40px;right:-110px;width:320px;transform:none}
	.hero-art .globe{opacity:.45}
	.hero::after{right:-20%}
	.page-hero::after{width:300px;height:300px;margin-top:-150px;right:-120px;opacity:.6}
	.about-band::after{width:520px;height:520px;right:-240px;bottom:-240px}
}
@media (max-width:640px){
	/* Globe tucked into the top-right corner, faint, so it never sits on the headline */
	.hero-art{top:-56px;right:-96px;width:230px}
	.hero-art .globe{opacity:.32}
	.hero::before{width:380px;height:380px;left:-140px;bottom:-220px}
	.hero::after{width:320px;height:320px;top:-170px}
	.ticker{padding:8px 0;border-bottom-width:2px}
	.ticker::before,.ticker::after{width:36px}
	.ticker-list li{gap:16px;padding-right:16px;font-size:14.5px}
	.ticker-list li::before{width:5px;height:5px}
	.hero-feature{animation:bsil-rise-card 1s var(--ease-out) .35s both}
	.section-head h2{padding-bottom:9px}
	.section-head h2::after{width:44px;height:2px}
	.section-head h2::before{height:2px;width:14px;animation-name:amb-glide-sm}
	.about-band::after{width:420px;height:420px;right:-200px;bottom:-180px}
	.page-hero::after{width:220px;height:220px;margin-top:-110px;right:-90px;opacity:.5}
}

/* ---------- Reduced motion: completely still ---------- */
@media (prefers-reduced-motion:reduce){
	.hero::before,.hero::after,.about-band::before,.about-band::after,.page-hero::before,.page-hero::after,
	.btn-gold::after,.focus-list li::after,.vision::before,.section-head h2::before,.site-footer::after{animation:none!important}
	.btn-gold::after,.focus-list li::after,.vision::before,.section-head h2::before,.site-footer::after{display:none}
	.ticker-track{animation:none!important;width:auto;flex-wrap:wrap;justify-content:center}
	.ticker-list{flex-wrap:wrap;justify-content:center;row-gap:6px}
	.ticker-list[aria-hidden]{display:none}
	.ticker::before,.ticker::after{display:none}
}