/* ===== premium layer: glass header, scroll progress, ambient light, animated borders, heading masks, page veil =====
   Loaded last on every page. Everything here is an enhancement: remove this file (and premium.js) and the site still works.
   Behaviour lives in premium.js; the pieces below are grouped in the same order. */

/* ---- 1. glass header ---- */
.navbar{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.navbar.is-stuck{background:rgba(255,255,255,.86)}
.navbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.85) 30%,rgba(243,214,117,.95) 50%,rgba(212,175,55,.85) 70%,transparent);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.navbar.is-stuck::after{opacity:1}
.sub{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .navbar,.navbar.is-stuck{background:rgba(255,255,255,.97)}
  .sub{background:var(--white)}
}

/* ---- 2. reading progress (thin gold line under the very top of the screen) ---- */
.scroll-progress{position:fixed;top:0;left:0;right:0;z-index:500;height:3px;pointer-events:none}
.scroll-progress i{display:block;height:100%;background:var(--gold-grad);box-shadow:0 0 12px rgba(243,214,117,.7);transform:scaleX(0);transform-origin:left}

/* ---- 3. ambient light: two soft glows drift slowly behind dark sections (premium.js adds .aura, and .is-live while on screen) ---- */
.aura{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aura i{position:absolute;width:min(60vw,760px);aspect-ratio:1;border-radius:50%;will-change:transform;animation:auraDrift 22s ease-in-out infinite alternate;animation-play-state:paused}
.aura.is-live i{animation-play-state:running}
.aura i:first-child{left:-12%;top:-32%;background:radial-gradient(closest-side,rgba(6,70,168,.5),transparent)}
.aura i:last-child{right:-10%;bottom:-42%;background:radial-gradient(closest-side,rgba(212,175,55,.2),transparent);animation-duration:29s;animation-direction:alternate-reverse}
@keyframes auraDrift{to{transform:translate3d(14%,10%,0) scale(1.15)}}
/* a fine gold edge where each dark band meets the page */
.process,.testimonials{box-shadow:inset 0 1px 0 rgba(212,175,55,.4),inset 0 -1px 0 rgba(212,175,55,.4)}

/* hero: a soft gold light follows the mouse */
.hero{isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(520px circle at var(--lx,70%) var(--ly,30%),rgba(243,214,117,.15),transparent 65%);transition:opacity .7s var(--ease)}
.hero.is-lit::after{opacity:1}

/* ---- 4. animated borders: a gold highlight travels round the card edge on hover / focus ---- */
@property --ring{syntax:"<angle>";inherits:false;initial-value:0deg}
.blog-card::before,.logo-card::before,.info-card::before,.form-card::before{content:"";position:absolute;inset:0;z-index:2;padding:1.5px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);background:conic-gradient(from var(--ring),transparent 0 58%,var(--gold) 78%,var(--gold-hi) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.logo-card{position:relative}
.blog-card:hover::before,.logo-card:hover::before,.info-card:hover::before,.form-card:focus-within::before{opacity:1;animation:ringSpin 3.6s linear infinite}
@keyframes ringSpin{to{--ring:360deg}}

/* ---- 5. headings: each word rises out of its own mask (premium.js splits the words) ---- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block}
/* hidden until GSAP places them below their mask (visibility, not transform, so GSAP never inherits a pixel offset) */
.js:not(.no-anim) [data-split] .wi,.js:not(.no-anim) .page-hero h1 .wi{visibility:hidden}

/* inner-page banner: elements wait for the logo intro, then enter together (see premium.js pageHero) */
.js:not(.no-anim) .page-hero [data-pg]{opacity:0}
.js:not(.no-anim) .page-hero .ph-guard{animation:none;opacity:0}
.js:not(.no-anim) .page-hero .ph-disc{opacity:0}

/* ---- 6. page veil: a quick navy fade when you leave for another page, so the click gives instant feedback ---- */
.page-veil{position:fixed;inset:0;z-index:1100;background:radial-gradient(60% 80% at 50% 50%,#0B3A8F 0%,#0A2A66 38%,#071A3D 100%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility 0s .32s}
.page-veil::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-hi) 50%,var(--gold) 80%,transparent);box-shadow:0 0 18px 1px rgba(212,175,55,.6);transform:scaleX(0);transition:transform .5s var(--ease-out)}
.is-leaving .page-veil{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .32s ease}
.is-leaving .page-veil::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .aura i{animation:none}
  .blog-card:hover::before,.logo-card:hover::before,.info-card:hover::before,.form-card:focus-within::before{animation:none}
  .page-veil{display:none}
}

/* ---- floating WhatsApp button (fixed bottom-right on every page; the number lives in assets/js/site-config.js -> whatsapp) ---- */
.wa-float{position:fixed;right:max(1.1rem,env(safe-area-inset-right));bottom:max(1.1rem,env(safe-area-inset-bottom));z-index:400;display:flex;align-items:center;justify-content:center;width:62px;height:62px;color:#fff;background:linear-gradient(145deg,#2EE572,#1FB955 55%,#16A34A);border-radius:50%;box-shadow:0 14px 28px -10px rgba(14,120,60,.65),0 0 0 3px rgba(255,255,255,.9);transition:transform .4s var(--ease-out),box-shadow .4s;animation:waIn .7s var(--ease-out) 1.6s both}
.wa-float svg{position:relative;z-index:1;width:34px;height:34px;fill:currentColor}
.wa-float::before,.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.7);opacity:0;animation:waPulse 3s ease-out 2.4s infinite}
.wa-float::after{animation-delay:3.4s}
.wa-float:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 20px 34px -10px rgba(14,120,60,.75),0 0 0 3px #fff}
.wa-float:active{transform:scale(.96)}
.wa-tip{position:absolute;right:calc(100% + 14px);top:50%;padding:.55rem .9rem;font:700 .8rem/1 var(--sans);letter-spacing:.02em;white-space:nowrap;color:#091B42;background:#fff;border:1px solid rgba(214,163,46,.55);border-radius:99px;box-shadow:0 12px 24px -12px rgba(7,26,61,.5);opacity:0;transform:translate(8px,-50%);pointer-events:none;transition:opacity .3s,transform .4s var(--ease-out)}
.wa-float:hover .wa-tip,.wa-float:focus-visible .wa-tip{opacity:1;transform:translate(0,-50%)}
@keyframes waIn{from{opacity:0;transform:translateY(24px) scale(.6)}}
@keyframes waPulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@media (max-width:600px){.wa-float{width:54px;height:54px}.wa-float svg{width:30px;height:30px}.wa-tip{display:none}}
@media (prefers-reduced-motion:reduce){.wa-float,.wa-float::before,.wa-float::after{animation:none}.wa-float::before,.wa-float::after{display:none}}

/* "Who We Are" guard: a slow, gentle sway while the section is on screen (premium.js adds .is-live; off with reduced motion) */
.av-guard[data-idle]{transform-origin:50% 100%;will-change:transform;animation:guardSway 4.6s ease-in-out infinite alternate;animation-play-state:paused}
.av-guard[data-idle].is-live{animation-play-state:running}
@keyframes guardSway{0%{transform:translate(-4px,1px) rotate(-1.1deg)}50%{transform:translate(0,-2px) rotate(.1deg)}100%{transform:translate(4px,1px) rotate(1.1deg)}}
@media (prefers-reduced-motion:reduce){.av-guard[data-idle]{animation:none}}