/* ════════════════════════════════════════════════════════════════
   VILKAX · CANONICAL WORDMARK  —  LOCKED 2026-06-21
   This is the ONLY approved VILKAX wordmark. Exactly this. No more, no less.
   Letter DNA sampled pixel-for-pixel from the approved master.

   USAGE
   -----
   1. Load Montserrat 800 — self-hosted, no third-party font request:
      <link rel="stylesheet" href="/fonts/fonts.css">   (do NOT add the Google Fonts link)
   2. Markup (per-letter spans are REQUIRED — the gradient is per-glyph):
      <div class="vx-stage">
        <div class="vx-wm">
          <b class="l1">V</b><b class="l2">I</b><b class="l3">L</b>
          <b class="l4">K</b><b class="l5">A</b><b class="l6">X</b>
        </div>
      </div>
   3. To resize, change ONE thing: --vx-size (font-size of the glyphs).
      Everything scales from it. Do not alter colors, tracking, or glow.
   ════════════════════════════════════════════════════════════════ */

.vx-stage{
  --vx-size:70px;                 /* the ONLY knob: glyph size */
  /* The wordmark is a strong-LTR brand lockup built from per-letter spans, so it
     must ALWAYS read V-I-L-K-A-X left-to-right. Without this, an RTL page (Arabic)
     inherits dir=rtl and the flex letters lay out right-to-left, rendering the
     brand backwards as "XAKLIV". Pin LTR + isolate from the surrounding bidi. */
  direction:ltr;unicode-bidi:isolate;
  position:relative;display:flex;align-items:center;justify-content:center;
  /* approved on-dark field; aspect lock ~4.08:1 */
  padding:calc(var(--vx-size)*.42) calc(var(--vx-size)*.78);
  background:radial-gradient(118% 150% at 50% 46%, #18395a 0%, #0e2742 34%, #0a1a30 62%, #081325 100%);
  overflow:hidden;
}
.vx-stage::before{                /* soft central bloom behind glyphs */
  content:"";position:absolute;left:50%;top:50%;width:78%;height:150%;
  transform:translate(-50%,-50%);
  background:radial-gradient(60% 60% at 50% 50%, rgba(96,150,210,.22), transparent 70%);
  filter:blur(10px);pointer-events:none;
}
/* transparent variant — drop the field, keep the glyphs+glow */
.vx-stage.bare{background:none;padding:calc(var(--vx-size)*.32) calc(var(--vx-size)*.2);}
.vx-stage.bare::before{display:none;}

.vx-wm{
  direction:ltr;unicode-bidi:isolate;   /* never reverse the lockup in RTL pages */
  position:relative;display:flex;line-height:1;
  font-family:"Montserrat",sans-serif;font-weight:800;
  font-size:var(--vx-size);
}
.vx-wm b{
  font-weight:800;display:inline-block;padding:0 .105em;   /* approved tracking */
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* per-letter vertical fill (top→bottom) + own-hue bloom. LOCKED. */
.vx-wm .l1{background-image:linear-gradient(180deg,#ffffff,#c0cdde);text-shadow:0 0 .19em rgba(210,222,242,.5),0 0 .48em rgba(150,180,220,.28);}
.vx-wm .l2{background-image:linear-gradient(180deg,#f1f7fc,#adbfd3);text-shadow:0 0 .19em rgba(196,214,236,.5),0 0 .48em rgba(140,175,215,.28);}
.vx-wm .l3{background-image:linear-gradient(180deg,#e6f3f9,#88bcd2);text-shadow:0 0 .19em rgba(150,205,232,.52),0 0 .48em rgba(90,170,215,.3);}
.vx-wm .l4{background-image:linear-gradient(180deg,#cfeefb,#4ba2cb);text-shadow:0 0 .2em rgba(95,190,230,.58),0 0 .51em rgba(50,160,215,.32);}
.vx-wm .l5{background-image:linear-gradient(180deg,#bdd6fb,#4f8edc);text-shadow:0 0 .2em rgba(95,150,225,.58),0 0 .51em rgba(60,130,225,.32);}
.vx-wm .l6{background-image:linear-gradient(180deg,#dad4fb,#8687dc);text-shadow:0 0 .2em rgba(150,140,225,.56),0 0 .51em rgba(120,110,225,.32);}

@media (prefers-reduced-motion: no-preference){
  .vx-stage[data-anim] .vx-wm b{animation:vxIn .7s cubic-bezier(.22,1,.36,1) both;}
  .vx-stage[data-anim] .l1{animation-delay:.02s}.vx-stage[data-anim] .l2{animation-delay:.08s}
  .vx-stage[data-anim] .l3{animation-delay:.14s}.vx-stage[data-anim] .l4{animation-delay:.2s}
  .vx-stage[data-anim] .l5{animation-delay:.26s}.vx-stage[data-anim] .l6{animation-delay:.32s}
  @keyframes vxIn{from{transform:translateY(.12em);filter:blur(4px)}to{transform:none;filter:none}}
}