/* opening intro, in four acts (js/intro/, timings in js/intro/config.js, docs in brand/README.md):
   1 the peacock unfurls on the dark ground   2 it flies onto the nav logo
   3 the name blurs in letter by letter beside it   4 the rest of the page blurs in, in a cascade */
.kl-loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0f0818;animation:kl-failsafe .6s ease 9s forwards}
.kl-loader svg{width:min(58vw,46vh,360px);height:auto;overflow:visible;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.kl-seen .kl-loader{display:none}
.kl-loader.kl-out{opacity:0;transition:opacity .6s ease}   /* still catches taps while it fades, so a tap to skip cannot land on a button underneath */
.kl-loader.kl-out svg{transform:scale(1.07)}
.kl-out .f,.kl-out .cap,.kl-out .lid,.kl-out .under{animation-play-state:paused}
html.kl-lock{overflow:hidden}
/* if the script never arrives, the loader still gets out of the way */
@keyframes kl-failsafe{to{opacity:0;visibility:hidden}}
/* the site plays the unfurl faster than the standalone files in brand/loader/ (.75): the fan is fully open 1.2 s in */
.kl-loader .kl-unfurl{--kl-pace:.493}

/* act 2: the dark ground melts as the bird takes off; the page under it is held invisible by the cascade (act 4) */
.kl-loader.kl-clear{background-color:rgba(15,8,24,0);transition:background-color var(--kl-clear,.35s) ease}
/* the nav logo waits for the bird to land on it; the script sets kl-intro, so without it the logo just shows */
html.kl-intro .logo-mark,html.kl-intro .logo-word{opacity:0}
html.kl-intro.kl-landed .logo-mark{opacity:1}
/* act 3: the name is shown as one slice of the word per letter, each blurs in on its own (js/intro/letters.js) */
.kl-letters{position:absolute;pointer-events:none}
.kl-letters img{position:absolute;inset:0;width:100%;height:100%}

/* unfurl:start (brand/_build/make_loader.py copies this block into the standalone files in brand/loader/) */
/* colours are the Night set; --kl-pace scales the speed, smaller is faster */
.kl-unfurl{--kl-ink:#f1e7d3;--kl-cap:#e0b354;--kl-plume:#48345f;--kl-hi:#2e1f45;--kl-flash:#fff6dc;--kl-pace:.75}
.kl-unfurl .ink{fill:var(--kl-ink)}
.kl-unfurl .cap{fill:var(--kl-cap)}
.kl-unfurl .plume{fill:var(--kl-plume)}
.kl-unfurl .hi{fill:var(--kl-hi)}
/* one loop: asleep with the tail folded, the eye opens, the tail snaps open and the bird blinks,
   the feathers shiver while light runs across the tips, a still moment, then it folds and sleeps again */
.kl-unfurl .f{animation:kl-unfurl calc(3.8s*var(--kl-pace)) ease-in-out infinite;animation-delay:calc(var(--d1)*var(--kl-pace))}
.kl-unfurl .cap{animation:kl-glint calc(3.8s*var(--kl-pace)) ease-in-out infinite;animation-delay:calc(var(--d2)*var(--kl-pace))}
.kl-unfurl .lid{transform:scaleY(0);animation:kl-lid calc(3.8s*var(--kl-pace)) linear infinite}
.kl-unfurl .under{animation:kl-under calc(3.8s*var(--kl-pace)) ease-in-out infinite}
/* each feather turns about the pivot on the bird's back: --r0 lays it down on the folded tail,
   --r1 is the overshoot as it snaps open, --k is how far it shakes in the shiver */
@keyframes kl-unfurl{
  0%,12%{transform:rotate(var(--r0)) scale(.55);animation-timing-function:cubic-bezier(.16,.84,.3,1)}
  40%{transform:rotate(var(--r1)) scale(1.035)}
  48%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(var(--k)) scale(1)}
  52%{transform:rotate(calc(var(--k)*-1)) scale(1)}
  54%{transform:rotate(calc(var(--k)*.7)) scale(1)}
  56%{transform:rotate(calc(var(--k)*-.7)) scale(1)}
  58%{transform:rotate(calc(var(--k)*.4)) scale(1)}
  60%{transform:rotate(calc(var(--k)*-.4)) scale(1)}
  62%{transform:rotate(0deg) scale(1)}
  76%{transform:rotate(0deg) scale(1);animation-timing-function:cubic-bezier(.6,0,.75,.3)}
  95%,100%{transform:rotate(var(--r0)) scale(.55)}
}
@keyframes kl-glint{0%,50%,72%,100%{fill:var(--kl-cap)}60%{fill:var(--kl-flash)}}
/* the eyelid is a patch of ink over the eye: 1 is shut, 0 is open. It blinks once as the tail snaps open */
@keyframes kl-lid{
  0%,1%{transform:scaleY(1);animation-timing-function:cubic-bezier(.3,.7,.2,1)}
  10%{transform:scaleY(0)}
  41%{transform:scaleY(0);animation-timing-function:ease-in}
  43%{transform:scaleY(1);animation-timing-function:ease-out}
  46.5%{transform:scaleY(0)}
  79%{transform:scaleY(0);animation-timing-function:ease-in-out}
  87%,100%{transform:scaleY(1)}
}
/* the soft plume patches under the fan (tail and back) only show while the fan is open, so the sleeping bird stays a clean shape */
@keyframes kl-under{0%,10%{opacity:0}30%{opacity:1}80%{opacity:1}93%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.kl-unfurl .f,.kl-unfurl .cap,.kl-unfurl .lid,.kl-unfurl .under{animation:none}}
/* unfurl:end */