#loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden}
.pg{position:absolute;top:0;bottom:0;width:50%;background:var(--loader-bg);transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
.pg.l{left:0}.pg.r{right:0}
.pg::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--loader-ink);transform:scaleY(0)}
.pg.l::after{right:-.5px}.pg.r::after{left:-.5px}
.stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(78vw,380px);transition:opacity .45s ease,transform .6s ease}
.logo{width:100%;height:auto;overflow:visible}
.logo .f{fill:var(--loader-ink)}
.logo .s{fill:none;stroke:var(--loader-ink);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
.logo .b{fill:var(--loader-bg)}
.logo .bs{fill:none;stroke:var(--loader-bg);stroke-width:9;stroke-linecap:round}

/* Secuencia del logo */
.arc{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .2s cubic-bezier(.6,0,.2,1) forwards}
.arc.o{animation-delay:.5s}
@keyframes draw{to{stroke-dashoffset:0}}
.pen{opacity:0;animation:drop .9s .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes drop{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}
.scale{transform-box:fill-box;transform-origin:50% 15%;opacity:0;animation:fade .5s .9s forwards,swing 2.6s 1.1s cubic-bezier(.3,.1,.3,1) forwards}
.pan{transform-box:fill-box;transform-origin:50% 0%;animation:cswing 2.6s 1.1s cubic-bezier(.3,.1,.3,1) forwards}
@keyframes fade{to{opacity:1}}
@keyframes swing{0%{transform:rotate(-11deg)}25%{transform:rotate(8deg)}50%{transform:rotate(-4.5deg)}75%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@keyframes cswing{0%{transform:rotate(11deg)}25%{transform:rotate(-8deg)}50%{transform:rotate(4.5deg)}75%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
.bk{transform-box:fill-box;opacity:0;animation:fade .3s 1s forwards}
.bk.l{transform-origin:100% 100%;animation:openL 1.2s 1s cubic-bezier(.2,.9,.2,1) forwards}
.bk.r{transform-origin:0% 100%;animation:openR 1.2s 1s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes openL{from{opacity:0;transform:rotate(38deg)}to{opacity:1;transform:none}}
@keyframes openR{from{opacity:0;transform:rotate(-38deg)}to{opacity:1;transform:none}}
.ink{fill:var(--loader-ink);transform-box:fill-box;transform-origin:50% 0;opacity:0;animation:inkd 1.6s 2.2s ease-in-out infinite}
@keyframes inkd{0%{opacity:0;transform:translateY(0) scale(.4)}20%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(46px) scale(.8)}}

/* Texto */
.name{margin:.9rem 0 0;font-weight:400;font-size:clamp(2.4rem,9vw,3.4rem);line-height:1;letter-spacing:.005em;display:flex}
.name span{opacity:0;transform:translateY(.35em);filter:blur(6px);animation:ltr .7s forwards;animation-delay:calc(1.5s + var(--i)*.07s)}
@keyframes ltr{to{opacity:1;transform:none;filter:blur(0)}}
.assoc{margin:.7rem 0 0;font-size:clamp(.8rem,3vw,1rem);letter-spacing:.32em;text-transform:uppercase;display:flex;align-items:center;gap:.8em;opacity:0;animation:fade .8s 2.2s forwards}
.assoc i{display:block;width:1.6em;height:1px;background:var(--loader-ink)}

/* Progreso */
.prog{margin-top:2rem;width:100%;max-width:260px;opacity:0;animation:fade .6s 1.8s forwards}
.bar{height:1px;background:color-mix(in srgb,var(--loader-ink) 22%,transparent);position:relative}
.bar b{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--loader-ink);transform:scaleX(0);transform-origin:left}
.meta{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.82rem;color:var(--loader-mute);font-variant-numeric:tabular-nums}

/* Salida: el libro se abre */
#loader.done .stage{opacity:0;transform:scale(1.06) translateY(-8px)}
#loader.done .pg::after{animation:seam .8s .35s cubic-bezier(.6,0,.2,1) forwards}
@keyframes seam{to{transform:scaleY(1)}}
#loader.done .pg.l{transform:translateX(-101%);transition-delay:1.4s}
#loader.done .pg.r{transform:translateX(101%);transition-delay:1.4s}
#loader.gone{display:none}
#loader.skip-exit .pg{transition-duration:.25s!important;transition-delay:0s!important}
#loader.skip-exit .pg::after{animation:none!important;transform:scaleY(1)}
#loader.skip-exit .stage{transition-duration:.15s!important}


#loader{--loader-bg:var(--paper);--loader-ink:var(--deep);--loader-mute:var(--muted);display:none;z-index:1000;color:var(--loader-ink);font-family:"Playfair Display",Georgia,serif}
.intro-active #loader{display:grid}
#loader.gone{display:none}
#loader .loader-skip{position:absolute;right:24px;top:24px;z-index:4;min-height:44px;padding:8px 14px;background:var(--loader-bg);color:var(--loader-ink);border:1px solid var(--loader-ink);font:600 .73rem/1.2 Arial,sans-serif;cursor:pointer}
#loader .loader-skip:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
#loader .stage{max-height:calc(100dvh - 100px)}
.intro-active{overflow:hidden}
@media(max-width:600px){#loader .loader-skip{right:15px;top:15px}#loader .stage{width:min(77vw,320px)}#loader .prog{margin-top:1.4rem}}
@media(prefers-reduced-motion:reduce){#loader{display:none!important}.intro-active{overflow:auto}}