﻿/* Loader: just the logo and the name. Quick fade-in, a gentle pulse while it waits, a soft fade-out into the page. */
.ld{position:fixed;inset:0;z-index:10000;display:none;place-items:center;color:#fff;background:#07060B;
  transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1),visibility 0s .5s;will-change:opacity}
html[data-theme="light"] .ld{color:#0F172A;background:#F8FAFC}
html.ld-on .ld{display:grid}
html.ld-on:not(.ld-gone){overflow:hidden}
.ld-brand{display:flex;align-items:center;gap:18px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.ld-logo{display:block;width:64px;height:64px;border-radius:15px;box-shadow:0 14px 40px -12px rgba(59,100,255,.7);
  animation:ldLogo .55s cubic-bezier(.16,1,.3,1) both,ldPulse 1.6s .6s ease-in-out infinite}
@keyframes ldLogo{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes ldPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.ld-word{display:flex;font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.035em;overflow:hidden;padding:4px 0}
.ld-word span{display:inline-block;animation:ldRise .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.15s + var(--i) * 55ms)}
@keyframes ldRise{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
/* exit */
html.ld-done .ld{opacity:0;visibility:hidden;transform:scale(1.025)}
html.ld-done .ld-brand{transform:scale(.97)}
/* hold the page's own entrance animations until the fade has begun */
html.ld-on:not(.ld-go) .ia,html.ld-on:not(.ld-go) .cs-stage .px{animation-play-state:paused}
/* ordinary page-to-page navigation: a short fade */
html:not(.ld-on) body{animation:pgIn .35s ease both}
@keyframes pgIn{from{opacity:0}to{opacity:1}}
@media (max-width:520px){.ld-logo{width:52px;height:52px;border-radius:12px}.ld-word{font-size:2.3rem}.ld-brand{gap:14px}}
@media (prefers-reduced-motion:reduce){html:not(.ld-on) body{animation:none}}
