```css
@charset "UTF-8";

/* =====================================================
  TOP LOADING
===================================================== */

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
}

body.top-minimal-body{
  overflow:hidden;
  background:var(--fb-bg);
  color:var(--fb-text);
}

/* =====================================================
  LOADING
===================================================== */

.top-loading{
  position:fixed;
  inset:0;
  z-index:9999;

  display:grid;
  place-items:center;

  width:100%;
  min-height:100vh;
  min-height:100svh;

  background:var(--fb-bg);

  opacity:1;
  visibility:visible;

  overflow:hidden;

  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    visibility .8s ease;
}

.top-loading::before{
  content:"";
  position:absolute;
  inset:-14%;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(43,42,40,.035) 0%,
      rgba(43,42,40,.012) 34%,
      rgba(0,0,0,0) 68%
    ),
    linear-gradient(
      180deg,
      rgba(43,42,40,.015) 0%,
      rgba(0,0,0,0) 100%
    );

  opacity:0;
  filter:blur(20px);
  transform:scale(1.02);

  animation:
    topGradientReveal 1.25s cubic-bezier(.22,.61,.36,1) .15s forwards,
    topGradientDrift 18s ease-in-out 1.4s infinite alternate;
}

.top-loading::after{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:0;
  pointer-events:none;

  opacity:0;

  background-image:
    radial-gradient(rgba(43,42,40,.020) .45px, transparent .55px),
    radial-gradient(rgba(43,42,40,.012) .35px, transparent .5px);

  background-size:7px 7px, 11px 11px;
  background-position:0 0, 3px 4px;

  mix-blend-mode:multiply;

  animation:
    topNoiseReveal 1.2s cubic-bezier(.22,.61,.36,1) .35s forwards,
    topNoiseFloat 16s ease-in-out 1.5s infinite alternate;
}

.top-loading.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* =====================================================
  INNER
===================================================== */

.top-loading__inner{
  position:relative;
  z-index:1;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:18px;
  padding:24px;

  text-align:center;

  transform:translateY(1px);
}

/* =====================================================
  TITLE
===================================================== */

.top-loading__title{
  margin:0;

  font-family:var(--fb-en);
  font-size:11px;
  font-weight:400;
  line-height:1;
  letter-spacing:.12em;

  color:var(--fb-text);

  opacity:0;
  filter:blur(3px);
  transform:translateY(7px);

  animation:
    topLoadingTitle 1s cubic-bezier(.22,.61,.36,1) .1s forwards;
}

/* =====================================================
  ANIMATION
===================================================== */

@keyframes topLoadingTitle{

  from{
    opacity:0;
    filter:blur(3px);
    transform:translateY(7px);
  }

  to{
    opacity:1;
    filter:blur(0);
    transform:translateY(0);
  }

}

@keyframes topGradientReveal{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }

}

@keyframes topGradientDrift{

  0%{
    transform:scale(1.02);
  }

  50%{
    transform:scale(1.035);
  }

  100%{
    transform:scale(1.05);
  }

}

@keyframes topNoiseReveal{

  from{
    opacity:0;
  }

  to{
    opacity:.10;
  }

}

@keyframes topNoiseFloat{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-3px);
  }

  100%{
    transform:translateY(3px);
  }

}

/* =====================================================
  SELECTION
===================================================== */

::selection{
  background:rgba(141,125,104,.25);
  color:var(--fb-text);
}

::-moz-selection{
  background:rgba(141,125,104,.25);
  color:var(--fb-text);
}

/* =====================================================
  MOBILE
===================================================== */

@media (max-width:640px){

  .top-loading__inner{
    gap:16px;
    padding:20px;
  }

  .top-loading__title{
    font-size:11px;
    letter-spacing:.12em;
  }

}

/* =====================================================
  REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion:reduce){

  .top-loading,
  .top-loading::before,
  .top-loading::after,
  .top-loading__title{
    animation:none;
    transition:none;
  }

  .top-loading::before{
    opacity:1;
  }

  .top-loading::after{
    opacity:.10;
  }

  .top-loading__title{
    opacity:1;
    filter:none;
    transform:none;
  }

}