/* Universe Capsules — loading screen. Matches the website: warm cream, gold #FBD028 / #EFBF04, Roboto. */
.ucls{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#ffffff 0%,#fbf8f1 38%,#f3eee2 72%,#ece4d2 100%);
  opacity:0;visibility:hidden;pointer-events:none;
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
html.ucls-js .ucls{display:flex}
/* Soft gold glow behind the logo */
.ucls::before{content:"";position:absolute;left:50%;top:44%;width:min(70vmin,560px);height:min(70vmin,560px);
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(251,208,40,.20) 0%,rgba(239,191,4,.08) 40%,rgba(239,191,4,0) 70%);
  animation:uclsGlow 2.6s ease-in-out infinite}

/* Page load: appears only if loading takes longer than 0.3 s (fast pages never flicker).
   First page of a visit: appears at once. Safety: fades away by itself after 8 s whatever happens. */
.ucls.ucls-show{visibility:visible;pointer-events:auto;animation:uclsIn .3s ease .3s forwards,uclsOut .5s ease 8s forwards}
html.ucls-first .ucls.ucls-show,html.ucls-now .ucls.ucls-show{opacity:1;animation:uclsOut .5s ease 8s forwards}
html.ucls-now .ucls-logo{animation:none}
/* Opening another page of the site */
.ucls.ucls-nav{visibility:visible;pointer-events:auto;animation:uclsIn .25s ease .15s forwards}
/* Done: fade out */
.ucls.ucls-hide{visibility:hidden;opacity:0;pointer-events:none;animation:none;transition:opacity .45s ease,visibility 0s linear .45s}

.ucls-box{position:relative;text-align:center;padding:16px}
/* Logo is a background image, not an <img>: lazy-load scripts and theme rules for images (e.g. on the
   blog page) can't resize or swap it. Fixed size: the height, and the width from the logo's 258x360 shape. */
.ucls-logo{display:block;height:min(30vh,210px);width:calc(min(30vh,210px) * 258 / 360);margin:0 auto 26px;
  background:var(--ucls-logo) center/contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(138,98,36,.22));animation:uclsRise .6s ease both}

/* Capsule: gold cap + clear body, like the capsules on the home page */
.ucls-capsule{width:68px;height:26px;margin:24px auto 44px;display:flex;border-radius:13px;overflow:hidden;
  box-shadow:0 6px 16px rgba(138,98,36,.28),inset 0 0 0 1px rgba(138,98,36,.18);
  animation:uclsSpin 1.15s cubic-bezier(.55,.1,.45,.9) infinite}
.ucls-cap{flex:0 0 47%;position:relative;
  background:linear-gradient(180deg,#fff1b0 0%,#fbd028 30%,#efbf04 60%,#a8770f 100%)}
.ucls-body{flex:1;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(250,244,226,.92) 45%,rgba(226,206,158,.95) 100%)}
.ucls-cap::after,.ucls-body::after{content:"";position:absolute;left:8%;right:8%;top:18%;height:22%;border-radius:6px;background:rgba(255,255,255,.65)}

/* Thin gold progress line */
.ucls-bar{width:150px;height:3px;margin:0 auto 14px;border-radius:3px;background:#ebe3d0;overflow:hidden;position:relative}
.ucls-bar span{position:absolute;top:0;left:-40%;width:40%;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#efbf04,#fbd028,#efbf04);animation:uclsBar 1.3s ease-in-out infinite}

.ucls-text{font-size:12px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:#7d7d7d;padding-left:4px}
.ucls-text::after{content:"";display:inline-block;width:1.4em;text-align:left;animation:uclsDots 1.2s steps(4,end) infinite}

@keyframes uclsIn{to{opacity:1}}
@keyframes uclsOut{from{opacity:1}to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes uclsSpin{to{transform:rotate(360deg)}}
@keyframes uclsBar{0%{left:-40%}100%{left:100%}}
@keyframes uclsGlow{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes uclsRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes uclsDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

@media (max-width:600px){.ucls-logo{height:min(24vh,160px);width:calc(min(24vh,160px) * 258 / 360);margin-bottom:22px}}
@media (prefers-reduced-motion:reduce){.ucls-capsule{animation-duration:3s}.ucls-bar span,.ucls::before{animation:none}}
@media print{.ucls{display:none!important}}

/* Ekko theme page fade: switched off (this screen replaces it), also when the theme adds the classes itself. */
html.ucls-js body.loading-effect,html.ucls-js body.loading-effect.fade-in,html.ucls-js body.loading-effect.fade-out{opacity:1!important;transition:none!important}