/* SNA — cursor trail + one-time welcome mark + quiet page-to-page transition (shared by every page; colours come from fx.js).
   Animations are marked !important on purpose: the sector pages' stylesheet disables all animations when
   Windows reports "reduced motion", which left the mark frozen on screen instead of playing and vanishing. */
.fx-trail{position:fixed;inset:0;z-index:9998;pointer-events:none}

/* (no welcome mark on entering the site: opening a page is immediate; the mark appears only between pages) */
@keyframes fxFade{to{opacity:1}}
@keyframes fxDraw{from{clip-path:inset(0 100% 0 0);transform:scale(.96)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}

/* ---- between pages: the page dims and the destination sector's check mark draws itself in the centre (0.8 s in all),
        then the veil closes to solid navy and the mark fades just before the next page opens ---- */
.fx-mark{position:fixed;inset:0;z-index:9990;display:grid;place-items:center;background:rgba(6,14,32,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:var(--fx,#62A744);opacity:0;animation:fxFade .16s ease-out forwards!important}
.fx-mark__sym{position:relative;width:96px;height:96px;filter:drop-shadow(0 0 18px currentColor)}
.fx-mark__sym svg{width:100%;height:100%;display:block;animation:fxDraw .5s cubic-bezier(.2,.7,.2,1) .05s both!important}
.fx-mark.is-closing{animation:fxVeilClose .22s ease-in both!important}
.fx-mark.is-closing .fx-mark__sym{animation:fxSymOut .22s ease-in both!important}
@keyframes fxVeilClose{from{opacity:1;background:rgba(6,14,32,.78)}to{opacity:1;background:#0A1631}}
@keyframes fxSymOut{to{opacity:0;transform:scale(.85)}}

/* touch devices: no backdrop blur (it is the costly part on phones) and a quicker mark, so navigation feels immediate */
@media (hover:none){
  .fx-mark{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,14,32,.86)}
  .fx-mark__sym svg{animation-duration:.35s!important}
}

/* ---- plain navy veil (kept for the bfcache tidy-up; no longer used for clicks) ---- */
.fx-veil{position:fixed;inset:0;z-index:9990;background:#0A1631;opacity:0;animation:fxVeilIn .26s ease-in forwards!important}
@keyframes fxVeilIn{to{opacity:1}}

/* ---- arriving on a page (html.fx-enter is set by the inline head script before first paint):
        the whole page fades in as ONE piece from the same navy; every component is already in its place ---- */
html.fx-enter{background:#0A1631}
html.fx-enter body{animation:fxPageIn .3s ease-out both!important}
@keyframes fxPageIn{from{opacity:0}to{opacity:1}}
/* then the visible components rise in quickly, one after another (index --i comes from fx.js; without it they all rise together) */
html.fx-enter :is(.topbar,.page-hero__text > *,.pillar,.gw-bar,.gw-top h1,.gw-tagline,.lang,.gate,.gw-trust,.gw-footer){opacity:0;animation:fxRise .4s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 45ms + 80ms) both!important}
@keyframes fxRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- scroll-reveal on the sector pages: quicker and subtler than the original (16 px, .5 s), ordered by --d set in fx.js,
        and it also plays when the OS asks for reduced motion because the owner wants it; elements become visible as soon
        as they enter the view, so nothing blocks reading or reaching the contact details ---- */
.reveal{opacity:0!important;transform:translateY(16px)!important;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)!important;transition-delay:var(--d,0s)!important}
.reveal.in-view{opacity:1!important;transform:none!important}