/* Logo letter-by-letter and write animations */
.logo .word i span{display:inline-block;animation:letterIn .9s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--b) + var(--k) * .07s)}
.logo .the{position:absolute;left:50%;top:-.1em;font-family:'Mrs Saint Delafield',cursive;font-size:1.9em;line-height:1;transform:translateX(-45%);white-space:nowrap;animation:write 1.3s ease-out backwards;animation-delay:calc(var(--b) + .8s)}

/* Loader */
#loader{display:none}
.js #loader{display:flex;position:fixed;inset:0;z-index:999;background:#fce6e4;align-items:center;justify-content:center;transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
#loader.out{transform:translateY(-100%)}
.ld-bar{position:absolute;left:50%;bottom:30%;width:120px;height:1px;background:rgba(59,52,54,.15);transform:translateX(-50%);overflow:hidden}
.ld-bar::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-100%);animation:load 2.4s ease-in-out forwards}

/* Pause entrance animations until the loader lifts */
.js:not(.ready) header .logo .the,
.js:not(.ready) header .logo .word span,
.js:not(.ready) .hero .copy > *,
.js:not(.ready) .hero .model{animation-play-state:paused}

/* Keyframes */
@keyframes letterIn{from{opacity:0;transform:translateY(12px);filter:blur(5px)}}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
@keyframes load{to{transform:translateX(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  #loader{display:none!important}
}