@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400..800&family=Tiro+Devanagari+Hindi&family=Dancing+Script:wght@600..700&display=swap");

  :root{--hi:"Tiro Devanagari Hindi","Noto Serif Devanagari",serif;box-sizing:border-box}
  *,*::before,*::after{box-sizing:inherit}
  
  
  body.kj-preloader-lock{overflow:hidden}

  /* ===== SPLASH ===== */
  .splash{position:fixed;inset:0;z-index:10000}
  .sp{position:absolute;left:0;right:0;height:33.5%;transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .6s;animation:wipe .75s cubic-bezier(.7,0,.2,1) backwards;transform-origin:left}
  .sp.t{top:0;background:#ff9933}.sp.m{top:33.3%;background:#fff;animation-delay:.12s}.sp.b{bottom:0;background:#138808;animation-delay:.24s}
  @keyframes wipe{from{transform:scaleX(0)}}
  .splash.out .sp.t{transform:translateY(-101%)}.splash.out .sp.b{transform:translateY(101%)}.splash.out .sp.m{transform:scaleY(0);opacity:0}
  .sc{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .4s}
  .sc>*{grid-area:1/1}
  .splash.out .sc{opacity:0}
  @keyframes rise{from{opacity:0;transform:scale(.8)}}
  @keyframes draw{from{stroke-dashoffset:1}}
  @keyframes fade{from{opacity:0}}
  @keyframes cspin{to{transform:rotate(360deg)}}
  .mapbox{position:relative;z-index:1;height:min(68vh,calc(78vw / .893));aspect-ratio:586/656;transform:translate(12.5%,3%)}
  .mapbox svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .fillwrap{clip-path:inset(0 0 0 0);animation:reveal 2.6s 1.8s cubic-bezier(.4,0,.5,1) backwards}
  @keyframes reveal{from{clip-path:inset(0 0 100% 0)}}
  #mfill{fill:none;stroke:none}
  #misl{fill:none;stroke:#06038d;stroke-width:1.6}
  .mapbox path{stroke-linejoin:round;stroke-linecap:round}
  .mapbox .gl,.mapbox .wh,.mapbox .tr,.mapbox .hd{fill:none}
  .mapbox .gl{stroke:#ffd36b;stroke-width:7;opacity:.35}
  .mapbox .tr{stroke:#06038d;stroke-width:2}
  .mapbox .wh{stroke:#fff;stroke-width:4.4;opacity:.5}
  .mapbox .gl,.mapbox .wh,.mapbox .tr{stroke-dasharray:1;animation:trace 2.6s 1.5s cubic-bezier(.45,0,.4,1) backwards}
  @keyframes trace{from{stroke-dashoffset:1}}
  .mapbox .hd{stroke:#ffe9a8;stroke-width:5;stroke-dasharray:.012 2;filter:drop-shadow(0 0 4px #ffc247) drop-shadow(0 0 10px #ff9933) drop-shadow(0 0 18px #ff9933);animation:run 2.6s 1.5s cubic-bezier(.45,0,.4,1) both,hv 2.6s 1.5s linear both}
  @keyframes run{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
  @keyframes hv{0%{opacity:0}1%{opacity:1}97%{opacity:1}100%{opacity:0}}
  .chakra{position:relative;z-index:5;width:min(25vh,42vw);aspect-ratio:1;animation:rise .9s .9s cubic-bezier(.2,.8,.2,1) backwards}
  .chakra svg{width:100%;height:100%;overflow:visible;display:block}
  .chakra .rg{fill:none;stroke:#06038d;stroke-width:9;stroke-dasharray:none;animation:ring 1.1s 1s ease-out backwards}
  @keyframes ring{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
  .chakra .hb{fill:#06038d;animation:fade .5s 1.1s backwards}
  .chakra .spk{fill:#06038d;transform-origin:100px 100px;animation:spk .55s ease-out backwards}
  @keyframes spk{from{opacity:0;transform:scale(.15)}}
  .chakra .dot{fill:#06038d;animation:fade .4s backwards}
  .chakra .sgp{transform-origin:100px 100px;animation:cspin 30s linear 2.4s infinite}
  .sc>.foot{position:absolute;left:0;right:0;bottom:calc(3.2% + env(safe-area-inset-bottom,0px));z-index:6;display:flex;flex-direction:column;align-items:center;gap:.25rem;color:#fff;text-align:center}
  .splash .foot .nm{font-weight:800;letter-spacing:.3em;font-size:min(2vh,3.4vw);animation:fade .8s 1.2s backwards}
  .splash .foot .nm b{font-family:var(--hi);font-weight:400;letter-spacing:.05em;font-size:2.7em;line-height:1}
  .splash .foot .stag{font-family:"Dancing Script","Segoe Script","Brush Script MT",cursive;font-weight:700;letter-spacing:0;font-size:clamp(1rem,2.2vw,1.4rem);line-height:1.1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.25);animation:stg .9s 3.6s cubic-bezier(.2,.8,.2,1) backwards}
  @keyframes stg{from{opacity:0;transform:translateY(12px)}}




/* Responsive preloader: balanced India map and chakra on portrait screens. */
#splash { width:100%; width:100vw; height:100%; height:100dvh; overflow:hidden; isolation:isolate; }
#splash .sc { width:100%; height:100%; }
@media (max-width: 767px), (orientation: portrait) {
  #splash .mapbox {
    height: auto;
    width: min(82vw, 42dvh);
    aspect-ratio: 586 / 656;
    transform: translate(12%, -5%);
  }
  #splash .chakra {
    width: min(29vw, 15dvh);
    height: auto;
    aspect-ratio: 1;
  }
  #splash .sc > .foot {
    bottom: calc(11dvh + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    gap: 8px;
  }
  #splash .foot .nm { font-size: clamp(10px, 2.5vw, 15px); letter-spacing: .16em; white-space: nowrap; }
  #splash .foot .nm b { font-size: 2.1em; }
  #splash .foot .stag { font-size: clamp(16px, 4vw, 22px); }
}
@media (max-height: 550px) and (orientation: landscape) {
  #splash .mapbox {height: 63dvh;}
  #splash .chakra {width: 23dvh;}
  #splash .sc > .foot {bottom: 3%;}
}

/* v1.6: position the chakra without using transform, which conflicts with the rise animation */
@media (max-width: 767px) and (orientation: portrait) {
  #splash .chakra { position: relative; left: clamp(24px, 9vw, 58px); }
}

/* v1.7 Mobile reference composition: large map and chakra centered over mainland. */
@media (max-width: 767px) and (orientation: portrait) {
  #splash .mapbox {
    width: min(94vw, 55dvh) !important;
    height: auto !important;
    aspect-ratio: 586 / 656;
    transform: translate(0, -5%) !important;
  }
  #splash .chakra {
    width: min(29vw, 16dvh) !important;
    height: auto !important;
    left: -7vw !important;
    top: -1dvh !important;
  }
  #splash .sc > .foot {
    bottom: calc(7dvh + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* v1.8: Align Chakra with the marked western-central mainland area on portrait mobile. */
@media (max-width:767px) and (orientation:portrait) {
 #splash .chakra { left: -23vw !important; top: -1dvh !important; }
}

/* v1.9: move chakra hub to orange arrow tip, approximately 9vw right of v1.8. */
@media (max-width:767px) and (orientation:portrait) {
  #splash .chakra { left: -14vw !important; top: -1dvh !important; }
}