/* Opening curtain: only exists when the inline script in <head> marked the page as loading. */
.loader { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(900px 600px at 50% 40%, #544941, #2b221e); color: #f5f1ed;
  clip-path: inset(0 0 0 0);
}
.loader-inner { text-align: center; transition: transform .7s cubic-bezier(.76,0,.24,1), opacity .5s ease; }
.loader .loader-logo { position: relative; width: min(400px, 74vw); color: #f5f1ed; clip-path: inset(0 100% 0 0); animation: logo-write 1.8s cubic-bezier(.65,.05,.2,1) .2s forwards; }
@keyframes logo-write { to { clip-path: inset(0 0 0 0); } }
/* the mask of the logo also clips this pseudo-element, so the shine only shows inside her letters */
.loader .loader-logo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, #ccb98e 50%, transparent 58%) 85% 0 / 300% 100% no-repeat;
  animation: logo-shine 1.3s cubic-bezier(.45,.05,.35,1) 1.4s forwards;
}
@keyframes logo-shine { to { background-position: 15% 0; } }
.loader-line { width: min(220px, 52vw); height: 1px; margin: 36px auto 0; background: rgba(245,241,237,.22); overflow: hidden; }
.loader-line i { display: block; height: 100%; background: #ccb98e; transform: scaleX(0); transform-origin: left; animation: line-fill 2.3s cubic-bezier(.65,.05,.2,1) .25s forwards; }
@keyframes line-fill { to { transform: none; } }
.loader.loader-out { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.76,0,.24,1); }
.loader.loader-out .loader-inner { transform: translateY(-34px); opacity: 0; }