/* =====================================================================
   BGol - motion layer: animated vector art, background scenes, scroll-scrubbed effects,
   word reveals, the slow photo carousel, scroll cue and the live compass.
   Everything degrades gracefully: without JavaScript all content is visible; with
   "reduce motion" selected on the device, loops stop and nothing moves.
   Scroll variables (set by assets/js/main.js on any element with data-sp):
     --sp  progress of the element through the screen, 0 (entering) .. 1 (leaving)
     --sc  position relative to the screen centre, -1 (below) .. 0 (centred) .. 1 (above)
   ===================================================================== */

/* ---------- animated vector art (inline SVG from /assets/art) */
.art{display:block;width:100%;height:auto;overflow:visible}
.art.is-off *{animation-play-state:paused!important}

.topic__art,.channel__art{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:radial-gradient(circle at 50% 62%,rgba(4,157,116,.10),rgba(4,157,116,0) 62%),var(--paper)}
.topic__art .art,.channel__art .art{position:absolute;inset:0;width:100%;height:100%}
.topic__art{margin:-4px -4px 12px}
.topic:hover .topic__art .art *,.channel:hover .channel__art .art *{animation-duration:calc(var(--speedup,1) * 1s)}

/* ---------- background scenes (25% strength, behind content; owner rule: never stronger) */
.has-scene{position:relative;overflow:hidden;isolation:isolate}
.has-scene>.wrap,.has-scene>.wrap-narrow{position:relative;z-index:1}
.scene{position:absolute;left:0;right:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.25;height:min(56%,460px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%)}
.scene--right{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(to right,transparent 0,transparent 30%,rgba(0,0,0,.55) 48%,#000 66%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(to right,transparent 0,transparent 30%,rgba(0,0,0,.55) 48%,#000 66%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.scene--top{top:0}
.scene--bottom{bottom:0}
.scene .art{position:absolute;left:0;top:-6%;width:100%;height:112%;transform:translate3d(0,calc(var(--sc,0) * 34px),0);will-change:transform}
.page-head.has-scene .scene{height:100%;opacity:.25;-webkit-mask-image:linear-gradient(to left,#000 0,#000 40%,transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 40%,transparent 100%)}
@media (max-width:760px){.scene{opacity:.22;height:min(40%,280px)}}

/* ---------- scroll-scrubbed entrances (reversible: they follow the scroll position both ways) */
html.js-ready .scrub{
  --e:clamp(0,calc(var(--sp,1) * 3.6 - var(--o,0) * .22),1);
  opacity:var(--e);
  transform:translate3d(0,calc((1 - var(--e)) * 74px),0) scale(calc(.93 + .07 * var(--e))) rotateX(calc((1 - var(--e)) * 10deg));
  transform-origin:50% 100%;will-change:transform,opacity}
html.js-ready .scrub-l{
  --e:clamp(0,calc(var(--sp,1) * 3.2),1);
  opacity:var(--e);transform:translate3d(calc((1 - var(--e)) * -110px),0,0)}
html.js-ready .scrub-r{
  --e:clamp(0,calc(var(--sp,1) * 3.2),1);
  opacity:var(--e);transform:translate3d(calc((1 - var(--e)) * 110px),0,0)}
.par{transform:translate3d(0,calc(var(--sc,0) * var(--par,-46px)),0);will-change:transform}
.scrub-scale{transform:scale(calc(1.08 - var(--sp,.5) * .12))}

/* ---------- hero scroll-out + cue */
.hero[data-sp] .hero__copy{transform:translate3d(0,calc(var(--sp,0) * -56px),0);opacity:calc(1 - var(--sp,0) * 1.35)}
.hero[data-sp] .hero__art{transform:translate3d(0,calc(var(--sp,0) * 120px),0) scale(calc(1 - var(--sp,0) * .14)) rotate(calc(var(--sp,0) * 5deg));opacity:calc(1 - var(--sp,0) * 1.2);transform-origin:50% 60%}
.cue{position:absolute;left:50%;bottom:18px;width:28px;height:46px;margin-left:-14px;border:2px solid var(--ink);border-radius:16px;opacity:.55;display:block;z-index:2}
.cue::after{content:"";position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:3px;background:var(--flag);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}}
@media (max-width:900px){.cue{display:none}}

/* ---------- headline words (split by JavaScript so the original text stays in the page for search engines) */
html.js-ready .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
html.js-ready .split .w>i{display:inline-block;font-style:inherit;transform:translateY(112%) rotate(4deg);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js-ready .split.is-in .w>i{transform:none}
html.js-ready .split em .w>i{font-style:italic}

/* ---------- marquee: always moving; scrolling adds extra push */
.marquee__shift{will-change:transform}
.marquee__track{animation:marq 80s linear infinite}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}

/* ---------- slow endless photo carousel (STN 02) */
.carousel{position:relative;padding-block:clamp(40px,6vw,88px) clamp(48px,7vw,104px);overflow:hidden}
.carousel__head{padding-bottom:28px}
.carousel__viewport{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.carousel__track{display:flex;width:max-content;animation:carousel 95s linear infinite;will-change:transform}
.carousel figure{margin:0 clamp(12px,1.6vw,22px) 0 0;flex:none}
.carousel figure:nth-child(even){margin-top:34px}
.carousel img{display:block;width:auto;height:clamp(260px,44vh,420px);border-radius:var(--r-m);background:var(--paper-2)}
@keyframes carousel{to{transform:translate3d(-50%,0,0)}}

/* ---------- connected line behind the five channel cards (draws as you scroll) */
.channels{position:relative}
.channels .chain{position:absolute;left:4%;right:4%;top:36%;height:56px;width:92%;overflow:visible;pointer-events:none;z-index:0}
.channels .chain path{fill:none;stroke:var(--brand);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--sp,1) - .12) * 2.3,1));stroke-linecap:round;opacity:.7}
.channels .channel{position:relative;z-index:1}
@media (max-width:1100px){.channels .chain{display:none}}

/* ---------- live compass (hero) */
.compass{position:absolute;right:2%;top:2%;width:84px;height:84px;padding:0;border:0;border-radius:50%;background:rgba(255,254,250,.9);cursor:pointer;z-index:3;
  box-shadow:0 0 0 1.5px var(--line),0 8px 22px -12px rgba(20,35,31,.45);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.compass:hover{transform:scale(1.05)}
.compass svg{display:block;width:100%;height:100%;overflow:visible}
.compass .cp-ring{fill:none;stroke:#9DB0AA;stroke-width:2;transition:stroke .5s}
.compass .cp-tick{stroke:#9DB0AA;stroke-width:1.6;stroke-linecap:round;transition:stroke .5s}
.compass .cp-n{fill:#7E908A;font:600 11px var(--f-mono);transition:fill .5s}
.compass .cp-needle-n{fill:#8B9A95;transition:fill .5s}
.compass .cp-needle-s{fill:#C6D0CC}
.compass .cp-pin{fill:#8B9A95}
.compass .cp-rose{transform-origin:40px 40px;transition:transform .12s linear}
.compass.is-sway .cp-rose{animation:sway 9s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-7deg)}35%{transform:rotate(9deg)}70%{transform:rotate(-3deg)}}
.compass.is-north{box-shadow:0 0 0 2px rgba(4,157,116,.75),0 0 24px 6px rgba(4,157,116,.45),0 0 60px 14px rgba(4,157,116,.22)}
.compass.is-north .cp-ring,.compass.is-north .cp-tick{stroke:var(--brand)}
.compass.is-north .cp-n{fill:var(--brand-d)}
.compass.is-north .cp-needle-n{fill:var(--brand)}
.compass__hint{position:absolute;right:0;top:92px;white-space:nowrap;font:500 .7rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity .4s;pointer-events:none}
.compass.needs-tap .compass__hint,.compass:hover .compass__hint,.compass:focus-visible .compass__hint{opacity:1}
.compass.needs-tap::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:cpulse 2.2s ease-out infinite}
@keyframes cpulse{0%{transform:scale(.92);opacity:.7}100%{transform:scale(1.35);opacity:0}}
@media (max-width:900px){.compass{width:72px;height:72px;right:0;top:-6px}.compass__hint{top:78px}}

/* ---------- app-like safe areas on notched phones */
.site-header{padding-top:env(safe-area-inset-top,0)}
.site-footer{padding-bottom:calc(36px + env(safe-area-inset-bottom,0))}
@supports (padding:max(0px)){.wrap,.wrap-narrow{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}}

@media (prefers-reduced-motion:reduce){
  .carousel__track,.marquee__track,.cue::after,.compass.is-sway .cp-rose,.compass.needs-tap::after{animation:none}
  .carousel__viewport{overflow-x:auto}
  html.js-ready .scrub,html.js-ready .scrub-l,html.js-ready .scrub-r{opacity:1;transform:none}
  html.js-ready .split .w>i{transform:none;transition:none}
  .par,.scene .art,.hero[data-sp] .hero__copy,.hero[data-sp] .hero__art{transform:none;opacity:1}
}

/* ---------- hero: extra life that needs no scrolling */
.hero__art .mdr{animation:mfly 30s linear infinite}
.hero__art .mbob{animation:mbob 3.2s ease-in-out infinite alternate}
.hero__art .mr{transform-box:fill-box;transform-origin:center;animation:mrot .14s linear infinite alternate}
.hero__art .pg{fill:none;stroke:var(--flag);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0;animation:pgp 3.6s ease-out infinite;animation-delay:calc(3.2s + var(--k) * .6s)}
@keyframes mfly{from{transform:translateX(-80px)}to{transform:translateX(680px)}}
@keyframes mbob{from{transform:translateY(-4px)}to{transform:translateY(6px)}}
@keyframes mrot{from{transform:scaleX(.25)}to{transform:scaleX(1)}}
@keyframes pgp{0%{transform:scale(.8);opacity:.85}100%{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero__art .mdr,.hero__art .pg{display:none}}

/* keep text crisp where a scene passes behind it */
.has-scene .faq{background:rgba(247,244,236,.88);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:8px}
.has-scene .mini{background:rgba(239,234,223,.7);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}