:root{
  --black:#050605;
  --gold:#d8bd83;
  --ivory:#f1eadc;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--black);overflow:hidden}
body{font-family:Georgia,"Times New Roman",serif}
.entrance{
  position:fixed;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(216,189,131,.075),transparent 32%),
    linear-gradient(180deg,#080907 0%,#030403 100%);
  color:var(--ivory);
}
.entrance::before{
  content:"";position:absolute;inset:22px;border:1px solid rgba(216,189,131,.14);
  pointer-events:none;
}
.center{
  position:relative;z-index:2;text-align:center;
  width:min(680px,84vw);transform:translateY(-2vh);
}
.logo{
  width:clamp(145px,14vw,220px);height:auto;display:block;margin:0 auto 30px;
  opacity:0;transform:translateY(12px) scale(.97);
  animation:logoIn 1.25s .15s cubic-bezier(.22,.8,.25,1) forwards;
}
.slogan{
  margin:0;color:var(--gold);font:400 clamp(15px,1.25vw,19px)/1.4 Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.34em;
  opacity:0;animation:fadeIn 1.15s .7s ease forwards;
}
.loader{
  width:min(290px,58vw);height:1px;background:rgba(216,189,131,.18);
  margin:42px auto 0;position:relative;overflow:hidden;
  opacity:0;animation:fadeIn .8s 1.05s ease forwards;
}
.loader::after{
  content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--gold);
  animation:load 4.9s 1.15s cubic-bezier(.22,.7,.25,1) forwards;
}
.loading-text{
  margin-top:16px;font:500 10px/1 Arial,sans-serif;letter-spacing:.28em;
  color:rgba(241,234,220,.52);text-transform:uppercase;
  opacity:0;animation:fadeIn .8s 1.15s ease forwards;
}
.entrance.leave{animation:leave .75s cubic-bezier(.55,0,.3,1) forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}
@keyframes load{to{width:100%}}
@keyframes leave{to{opacity:0;transform:scale(1.018);filter:blur(4px)}}
@media(max-width:760px){
  .entrance::before{inset:12px}
  .logo{width:155px;margin-bottom:26px}
  .slogan{font-size:12px;letter-spacing:.26em}
  .loader{margin-top:34px;width:210px}
}
@media(prefers-reduced-motion:reduce){
  .logo,.slogan,.loader,.loading-text{opacity:1;transform:none;animation:none}
  .loader::after{width:100%;animation:none}
  .entrance.leave{animation:none}
}