/* Every var this file uses, declared HERE on :root.
   The bug this fixes: the easing and colour vars lived only inside `#stage {}`
   in hero.css, and #preloader is a SIBLING of #stage, not a descendant. So
   `animation: chIn2 .34s var(--ease-out) both` resolved its var to nothing,
   which makes the whole declaration invalid and the browser drops it — the
   letters kept opacity:0 and the intro rendered as a blank white cover.
   Suryansh's values, except the two fonts and the accent, which are ours:
   his Outfit/Lora are not on this site and his --blue-500 is not our accent. */
:root {
  --img-globe: url('/home/pl/pl-globe.png');
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --brand-green: #094A35;                 /* the logo's own green, his value */
  --blue-500: var(--accent, #3685ff);
  --font-logo: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: var(--font-body-site, 'Inter', ui-sans-serif, system-ui, sans-serif);
}

#preloader{display:none}

html.preloading #preloader{
  display:flex;position:fixed;inset:0;z-index:9999;
  align-items:center;justify-content:center;flex-direction:column;
  background:transparent;pointer-events:none;
}

/* the white backdrop fades on its own, so the page is revealed
   underneath while the globe is still in flight */
.pl-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, #f4f8ff 0%, #ffffff 62%),
    #ffffff;
  transition:opacity .85s var(--ease);
}

html.preloading.pl-out .pl-bg{opacity:0}


.pl-word{
  display:flex;align-items:center;
  font-family:var(--font-logo);font-weight:700;
  font-size:clamp(46px,9vw,92px);letter-spacing:-.012em;line-height:1;
  color:var(--brand-green);
}

.pl-word .ch{display:none}

.pl-word .ch.on{display:inline-block;animation:chIn .34s var(--ease-out) both}

.pl-word .ch.gslot{width:.84em;height:.84em;position:relative;top:.035em;margin:0 .03em}

.pl-word .ch.gslot svg{width:100%;height:100%;display:block}


.pl-caret{
  width:.055em;height:.86em;margin-left:.1em;border-radius:2px;
  background:var(--brand-green);opacity:.85;
  animation:caret .78s steps(1) infinite;
}

.pl-caret.done{animation:none;opacity:0;transition:opacity .3s}


.pl-sub{
  margin-top:26px;font-family:var(--font-body);
  font-size:11.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(9,74,53,.42);
  opacity:0;animation:heroIn .7s var(--ease-out) .95s forwards;
}

.pl-bar{
  margin-top:34px;width:186px;height:2px;border-radius:2px;
  background:rgba(9,74,53,.12);overflow:hidden;
  opacity:0;animation:heroIn .7s var(--ease-out) 1.05s forwards;
}

.pl-bar i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-green),var(--blue-500));
  transition:width .5s var(--ease-out);
}

/* Letters + chrome clear out, leaving only the globe to fly.
   These elements animate IN with fill-mode:both, and a finished
   animation outranks plain declarations in the cascade — so the
   exit has to be a keyframe too, not just `opacity:0`. */
@keyframes plOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-12px)}
}

html.preloading.pl-lift .pl-word .ch:not(.gslot),
html.preloading.pl-lift .pl-caret,
html.preloading.pl-lift .pl-sub,
html.preloading.pl-lift .pl-bar{
  animation:plOut .5s var(--ease) forwards;
}

/* the globe itself: flies to the hero sphere */
/* the flight transform + opacity are set inline from JS so the logo globe
   and the 3D sphere share one identical timeline — see FLIGHT in the script */
.pl-word .ch.gslot{will-change:transform,opacity}

.pl-word .ch.gslot .bg-ring,
.pl-word .ch.gslot .bg-spin{transition:stroke-width 1.5s var(--ease)}

html.preloading.pl-lift .ch.gslot{z-index:2}

html.preloading.pl-lift .hero-map > svg{opacity:1;transition:opacity 1.1s ease .3s}

html.preloading.pl-lift #nav,
html.preloading.pl-lift #whatsnew{opacity:1;transition:opacity .8s ease .55s}
@media (prefers-reduced-motion:reduce){

  html.preloading #preloader{display:none}
}

/* ---- Preloader: real logo typed letter-by-letter + globe that flies ---- */
.pl-word{position:relative}

#plWordImg{position:relative;aspect-ratio:1350 / 440;height:clamp(58px,11.5vw,112px)}

#plLetters{position:absolute;inset:0}

.pl-ch{position:absolute;top:0;height:100%;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:0}

.pl-ch.on{animation:chIn2 .34s var(--ease-out) both}

.pl-ch[data-ch="L"]{left:0%;width:12.257%;background-image:url("/home/pl/pl-asset0.png")}

.pl-ch[data-ch="e"]{left:14.382%;width:13.385%;background-image:url("/home/pl/pl-asset1.png")}

.pl-ch[data-ch="p"]{left:31.04%;width:13.355%;background-image:url("/home/pl/pl-asset2.png")}

.pl-ch[data-ch="t"]{left:46.238%;width:9.447%;background-image:url("/home/pl/pl-asset3.png")}

.pl-ch[data-ch="n"]{left:87.219%;width:12.781%;background-image:url("/home/pl/pl-asset4.png")}

#plGlobe{position:absolute;left:56.68%;top:4.37%;width:29%;aspect-ratio:1;background:var(--img-globe) center/contain no-repeat;opacity:0;will-change:transform,opacity;pointer-events:none}

#plGlobe.on{opacity:1;transition:opacity .34s var(--ease-out)}

#plCaret2{position:absolute;top:11%;height:78%;width:.055em;left:0;background:var(--brand-green);border-radius:2px;opacity:0;transition:left .12s var(--ease-out)}

#plCaret2.show{opacity:.85;animation:caretBlink .78s steps(1) infinite}

#plCaret2.done{animation:none;opacity:0;transition:opacity .3s}

html.preloading.pl-lift #plLetters{animation:plOut .5s var(--ease) forwards}

html.preloading.pl-lift #plCaret2{opacity:0;transition:opacity .3s}

html.preloading.pl-lift #plGlobe{z-index:2}

/* keyframes the rules above reference, pulled by NAME */
@keyframes caret{0%,49%{opacity:.85}50%,100%{opacity:0}}
@keyframes caretBlink{0%,49%{opacity:.85}50%,100%{opacity:0}}
@keyframes chIn{
  from{opacity:0;transform:translateY(.16em) scale(.94)}
  to{opacity:1;transform:none}
}
@keyframes chIn2{from{opacity:0;transform:translateY(.16em) scale(.94)}to{opacity:1;transform:none}}
@keyframes heroIn{to{opacity:1;transform:none}}

/* preloading-state rules that name neither #pl nor .pl- */
html.preloading body{overflow:hidden}
html.preloading .hero-map > svg{opacity:0}
html.preloading .hero-inner > *,
html.preloading .bw .w > i,
html.preloading .scroll-hint{animation-play-state:paused}
html.preloading #nav,
html.preloading #whatsnew{opacity:0}
html.preloading .hero-map,
  html.preloading #nav,
  html.preloading #whatsnew{opacity:1}