html, body { height: 100%; margin: 0; overflow: hidden; }
body {
background: radial-gradient(ellipse at 50% 38%, #45403a 0%, #2e2a26 55%, #1d1a17 100%);
overscroll-behavior: none;
-webkit-user-select: none; user-select: none;
}
#stage {
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
touch-action: none;
}
#flipbook { position: relative; }
#flipbook.open { box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4); }
/* ---------- hard covers ---------- */
.cover {
background:
radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.09), rgba(255,255,255,0) 55%),
linear-gradient(135deg, #142e56 0%, #24487f 46%, #142e56 100%);
box-shadow: inset 0 0 40px rgba(0,0,0,.35);
}
.cover-front::before, .cover-back::before {
content: ''; position: absolute; top: 0; bottom: 0; width: 12%;
pointer-events: none; z-index: 2;
}
.cover-front::before { left: 0; background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.14) 55%, rgba(0,0,0,0)); }
.cover-back::before { right: 0; background: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,.14) 55%, rgba(0,0,0,0)); }
.cover-inner { position: absolute; inset: 0; }
.cover-frame {
position: absolute; inset: 7%;
border: 3px double #c9a84c; border-radius: 3px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; color: #e7c96f;
font-family: Georgia, 'Palatino Linotype', serif;
padding: 0 6%;
}
.cover-title {
font-variant: small-caps; letter-spacing: .1em;
font-size: 2em; line-height: 1.25;
text-shadow: 0 2px 3px rgba(0,0,0,.55);
}
.cover-orn { color: #b89a4e; font-size: 1.5em; margin-top: 1.1em; }
.cover-orn.big { font-size: 2.4em; }
.cover-sub { letter-spacing: .5em; font-size: .68em; margin-top: 1em; color: #cdb069; text-indent: .5em; }
.cover-author { margin-top: 2.4em; font-variant: small-caps; letter-spacing: .18em; font-size: 1.02em; color: #e2c26a; }
/* ---------- endpapers ---------- */
.endpaper {
background:
repeating-linear-gradient(45deg, rgba(120,96,58,.05) 0 3px, rgba(0,0,0,0) 3px 6px),
linear-gradient(#e8dfc8, #dcd2b6);
box-shadow: inset 0 0 55px rgba(96,74,40,.25);
}
/* ---------- paper pages ---------- */
.paper {
background:
radial-gradient(ellipse at 50% 45%, #faf5e9 55%, #f1e8d4 92%, #eadfc7 100%);
color: #33291f;
}
/* inner spine shadow — the fold between the two pages of a spread */
.pg-right::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 9%;
background: linear-gradient(to right, rgba(84,26,18,.30), rgba(84,26,18,.10) 52%, rgba(84,26,18,0));
pointer-events: none; z-index: 3;
}
.pg-left::before {
content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 9%;
background: linear-gradient(to left, rgba(84,26,18,.26), rgba(84,26,18,.09) 52%, rgba(84,26,18,0));
pointer-events: none; z-index: 3;
}
.pg-single::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 6%;
background: linear-gradient(to right, rgba(62,44,16,.18), rgba(84,26,18,0));
pointer-events: none; z-index: 3;
}
/* outer edge — hint of the closed page stack */
.pg-right::after, .pg-left::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 7px;
pointer-events: none; z-index: 3; opacity: .5;
}
.pg-right::after { right: 0; background: repeating-linear-gradient(to left, rgba(90,70,40,.16) 0 1px, rgba(0,0,0,0) 1px 3px); }
.pg-left::after { left: 0; background: repeating-linear-gradient(to right, rgba(90,70,40,.16) 0 1px, rgba(0,0,0,0) 1px 3px); }
/* ---------- text ---------- */
.textenv {
font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
line-height: 1.55; text-align: justify;
hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
text-rendering: optimizeLegibility;
color: #33291f;
}
.textenv p { margin: 0; text-indent: 1.5em; }
.textenv p.noind { text-indent: 0; }
.chead { margin-bottom: 1.25em; }
.cnum {
text-align: center; font-variant: small-caps;
letter-spacing: .24em; font-size: 1.26em;
padding-top: 1em; text-indent: .24em; color: #4a3b28;
}
.corn { text-align: center; color: #8a744a; margin-top: .4em; font-size: 1em; }
.brk { text-align: center; margin: 1.1em 0; color: #8a744a; font-size: .78em; letter-spacing: .5em; text-indent: .5em; }
.theend { text-align: center; margin-top: 2.6em; letter-spacing: .4em; text-indent: .4em; font-size: 1.02em; color: #5a4a33; }
.folio { text-align: center; font-size: .66em; letter-spacing: .18em; color: #8d7b5f; font-family: Georgia, serif; }
/* ---------- title page ---------- */
.titlepage {
position: absolute; inset: 10% 12%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; font-family: Georgia, 'Palatino Linotype', serif; color: #3d3020;
}
.tp-title { font-variant: small-caps; font-size: 1.85em; letter-spacing: .1em; line-height: 1.3; }
.tp-rule { width: 42%; height: 1px; background: #a08c5a; margin: 1.4em 0; }
.tp-sub { letter-spacing: .45em; font-size: .72em; color: #6a583c; text-indent: .45em; }
.tp-by { margin-top: 2.2em; font-style: italic; font-size: .85em; color: #6a583c; }
.tp-author { margin-top: .5em; font-variant: small-caps; letter-spacing: .16em; font-size: 1.12em; }
.tp-orn { margin-top: 2.2em; color: #8a744a; font-size: 1.3em; }
/* ---------- chrome ---------- */
.nav {
position: fixed; top: 50%; transform: translateY(-50%);
z-index: 60; cursor: pointer;
font: 46px/1 Georgia, serif; color: rgba(255,255,255,.30);
padding: 26px 14px; transition: color .2s;
background: none; border: 0; margin: 0;
-webkit-appearance: none; appearance: none;
}
.nav:hover { color: rgba(255,255,255,.75); }
#nav-prev { left: 4px; }
#nav-next { right: 4px; }
#hint {
position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%);
z-index: 60; font: 12.5px/1.4 Georgia, serif; letter-spacing: .06em;
color: rgba(255,255,255,.45); background: rgba(0,0,0,.25);
padding: 6px 14px; border-radius: 20px; white-space: nowrap;
transition: opacity 1.2s; pointer-events: none;
}
#hint.gone { opacity: 0; }
#loader {
position: fixed; inset: 0; z-index: 100;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: rgba(24,21,18,.82);
font: 15px Georgia, serif; letter-spacing: .08em; color: #d8c9a6;
opacity: 0; pointer-events: none; transition: opacity .25s;
}
#loader.show { opacity: 1; pointer-events: auto; }
#loader .spin {
width: 34px; height: 34px; border-radius: 50%;
border: 3px solid rgba(216,201,166,.25); border-top-color: #d8c9a6;
animation: lspin .9s linear infinite;
}
@keyframes lspin { to { transform: rotate(360deg); } }
/* ---------- embossed cover tooling ---------- */
.cover-inner::before {
content: ''; position: absolute; inset: 2.2%;
pointer-events: none; opacity: .9;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E");
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: left top, left bottom, left top, right top;
background-size: 28px 28px;
}
.cover-inner::after {
content: ''; position: absolute; inset: 1.4%;
pointer-events: none; opacity: .95;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top, right top, left bottom, right bottom;
background-size: 52px 52px;
}
/* ---------- illustration captions & display lines ---------- */
.illus {
margin: 1.15em 5%; padding: .5em 3%;
text-align: center; font-style: italic;
font-size: .84em; line-height: 1.45; color: #6b5a3e;
border-top: 1px solid rgba(122,100,60,.4);
border-bottom: 1px solid rgba(122,100,60,.4);
}
.disp {
text-align: center; margin: 1em 8%;
font-variant: small-caps; letter-spacing: .12em;
font-size: .95em; color: #4a3b28;
}
.ctitle {
text-align: center; font-variant: small-caps;
letter-spacing: .08em; font-size: 1.05em;
margin-top: .45em; color: #5a4a33;
}
.verse {
text-align: center; font-style: italic;
margin: 1.1em 0; line-height: 1.65; color: #4a3b28;
}
.letter {
margin: 1.1em 6%; padding: .7em 1em;
font-size: .88em; line-height: 1.6; font-style: italic;
color: #4a3b28; background: rgba(146,120,70,.07);
border-left: 2px solid rgba(122,100,60,.45);
}
.songtitle {
text-align: center; font-variant: small-caps; letter-spacing: .18em;
text-indent: .18em; font-size: .92em; color: #5a4a33; margin: 1.2em 0 .3em;
}
.plate {
margin: 1.2em auto; padding: .45em 1.2em; width: fit-content;
text-align: center; letter-spacing: .3em; text-indent: .3em; font-size: .86em;
color: #4a3b28; border: 1px solid rgba(122,100,60,.55); border-radius: 2px;
background: rgba(170,150,95,.14);
}
.prog {
margin: 1.1em 6%; text-align: center; font-size: .85em; line-height: 1.75;
color: #4a3b28; border-top: 1px solid rgba(122,100,60,.4);
border-bottom: 1px solid rgba(122,100,60,.4); padding: .7em 0;
}
/* ---------- skip to page (fixed overlay: never touches #flipbook) ---------- */
#skipbar {
position: fixed; left: 50%; bottom: 12px;
transform: translateX(-50%) translateY(10px);
z-index: 70;
display: flex; align-items: center; gap: 8px;
opacity: 0; pointer-events: none;
transition: opacity .32s ease, transform .32s ease;
font-family: Georgia, 'Palatino Linotype', serif;
}
#skipbar.vis { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
#skipbar button {
font: 13.5px/1 Georgia, serif; letter-spacing: .06em;
color: #ffeec0; background: rgba(38,10,66,.85);
border: 1px solid rgba(255,216,106,.55); border-radius: 18px;
padding: 9px 16px; cursor: pointer;
-webkit-appearance: none; appearance: none;
transition: background .18s, color .18s, border-color .18s;
}
#skipbar button:hover { background: rgba(70,21,122,.94); color: #fff8dc; border-color: #ffd86a; }
#skipbar button:focus-visible { outline: 2px solid #ffd86a; outline-offset: 2px; }
#skip-wrap {
display: none; align-items: center; gap: 6px;
background: rgba(38,10,66,.9);
border: 1px solid rgba(255,216,106,.55); border-radius: 18px;
padding: 5px 6px 5px 12px;
}
#skip-wrap.open { display: flex; }
#skip-btn.gone { display: none; }
#skip-input {
width: 74px; font: 14px/1 Georgia, serif; text-align: center;
color: #1b0733; background: #f8f0e2;
border: 1px solid rgba(255,216,106,.7); border-radius: 12px;
padding: 7px 8px; -webkit-appearance: none; appearance: none;
}
#skip-input:focus { outline: 2px solid #ffd86a; outline-offset: 1px; }
#skip-err {
font: 11.5px/1 Georgia, serif; letter-spacing: .05em;
color: rgba(255,238,192,.72); padding-right: 8px; white-space: nowrap;
}
@keyframes skipShake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
#skip-wrap.bad { animation: skipShake .34s ease; border-color: #ff5c7a; }
#skip-wrap.bad #skip-err { color: #ffb3c1; }
@media (prefers-reduced-motion: reduce) {
#skipbar { transition: opacity .2s ease; transform: translateX(-50%); }
#skipbar.vis { transform: translateX(-50%); }
#skip-wrap.bad { animation: none; }
}
/* ---------- chapter half-title page ----------
Same cream stock, margins and rules as a text page; no folio, as a printed
half-title carries none. .chapanim is an empty full-bleed stage kept for
per-chapter artwork later. Animation "rise and settle": numeral lifts, a
hairline draws outward from the centre, the title follows. */
.paper.intro { overflow: hidden; }
.intropage {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
.chapanim { position: absolute; inset: 0; pointer-events: none; }
.intro-label {
position: relative; z-index: 2;
text-align: center; padding: 0 14%;
font-family: Georgia, 'Palatino Linotype', serif;
color: #3a2f22;
}
.intro-label .il-num {
display: block; font-size: .74em; letter-spacing: .34em;
text-transform: uppercase; color: #8a6d3a;
}
.intro-label .il-rule {
display: block; height: 1px; width: 0; margin: 1.15em auto;
background: linear-gradient(to right, transparent, #b08d4c, transparent);
}
.intro-label .il-txt {
display: block; font-size: 1.42em; line-height: 1.35; letter-spacing: .04em;
}
.intro-label .il-txt.il-solo {
font-size: 1.9em; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
}
/* An optional summary beneath the title. Set smaller, italic and narrower
than the measure of a text page, so that it reads as apparatus rather than
as the opening of the story it stands in front of. */
.intro-label .il-sum {
display: block; max-width: 22em; margin: 1.45em auto 0;
font-size: .86em; line-height: 1.62; letter-spacing: .012em;
font-style: italic; color: #5c4a32;
}
/* the reveal runs when the page comes into view, not on a loop */
.intropage .il-num,
.intropage .il-rule,
.intropage .il-sum,
.intropage .il-txt { opacity: 0; }
.intropage.play .il-num { animation: introUp .70s ease-out .10s both; }
.intropage.play .il-rule { animation: introRule .60s ease-out .68s both; }
.intropage.play .il-txt { animation: introUp .80s ease-out 1.00s both; }
.intropage.play .il-sum { animation: introUp .90s ease-out 1.38s both; }
@keyframes introUp { from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; } }
@keyframes introRule { from { width: 0; opacity: 0; }
to { width: 42%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.intropage .il-num, .intropage .il-txt, .intropage .il-sum { opacity: 1; }
.intropage .il-rule { opacity: 1; width: 42%; }
.intropage.play .il-num,
.intropage.play .il-rule,
.intropage.play .il-sum,
.intropage.play .il-txt { animation: none; }
/* the drawing stays, but stops moving */
.chapanim * { animation: none !important; }
}
/* ---------- translator's footnote ----------
Three notes in Crime and Punishment are the translator's, not Dostoevsky's.
They are set smaller and ruled off so they can't be mistaken for the text. */
.tnote { font-size: .82em; line-height: 1.5; color: #5b4f3f; margin: 1.05em 0 .95em;
padding-top: .55em; border-top: 1px solid rgba(90,70,40,.28); text-indent: 0; }
/* A note with no marker of its own gets a dagger; a note that carries its
own asterisk marker prints that instead, so the reader can match it. */
.tnote.dagger::before { content: '\2020\2003'; color: #937a45; }
.tn-m { color: #937a45; margin-right: .6em; font-weight: 700; letter-spacing: .04em; }
/* ---------- part half-title ----------
'Part I' owns a whole leaf, like a chapter half-title. .partanim is a
full-bleed stage left deliberately empty: the per-part animation goes there
later and needs no change to the page geometry. The page keeps the ordinary
paper aesthetic rather than going dark. */
.paper.part { overflow: hidden; }
.parttitle { position: absolute; inset: 0; display: flex;
flex-direction: column; align-items: center; justify-content: center; }
.partanim { position: absolute; inset: 0; pointer-events: none; }
.part-label { position: relative; z-index: 2; text-align: center; padding: 0 14%;
font-family: Georgia,'Palatino Linotype',serif; color: #3a2f22; }
.part-label .pt-rule { display: block; height: 1px; width: 0; margin: 1.5em auto;
background: linear-gradient(to right, transparent, #b08d4c, transparent); }
/* The word sits small and widely tracked above a big display numeral. */
.part-label .pt-word { display: block; font-size: .95em; letter-spacing: .52em;
text-indent: .52em; text-transform: uppercase; color: #7a6440;
margin-bottom: .18em; }
.part-label .pt-num { display: block; font-size: 5.6em; line-height: 1;
letter-spacing: .10em; text-indent: .10em; font-weight: 700;
text-transform: uppercase;
background: linear-gradient(180deg, #6b5636 0%, #b08d4c 42%,
#e6cd92 62%, #8a6f42 100%);
-webkit-background-clip: text; background-clip: text;
color: #8a6f42; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 0 rgba(255,252,244,.55))
drop-shadow(0 -1px 0 rgba(74,58,32,.28)); }
/* The legend's name, under the numeral. Optional: only parts that carry a
"sub" get one. Set in italic at text size so it reads as a name rather
than competing with the display numeral above it. */
.part-label .pt-sub { display: block; margin-top: .70em; font-size: 1.06em;
font-style: italic; letter-spacing: .06em; line-height: 1.35;
color: #6b5636; }
/* A label with no numeral -- "Epilogue" -- is set as one modest line. */
.parttitle.solo .pt-num { font-size: 2.3em; letter-spacing: .30em; text-indent: .30em; }
/* ---- the animated stage behind the lettering ----
Three rings open outward from the centre and six motes drift up through
them. Every looping period is distinct, per the out-of-phase rule that
governs the covers; the one-shot reveals are staged so the rules draw,
then the word, then the numeral lands. */
.partanim .pa-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%;
border: 1px solid rgba(176,141,76,.42); opacity: 0;
transform: translate(-50%,-50%) scale(.2); }
.partanim .g0 { width: 34%; padding-bottom: 34%; }
.partanim .g1 { width: 52%; padding-bottom: 52%; border-color: rgba(176,141,76,.30); }
.partanim .g2 { width: 72%; padding-bottom: 72%; border-color: rgba(176,141,76,.20); }
.partanim .pa-mote { position: absolute; width: 5px; height: 5px; border-radius: 50%;
background: rgba(176,141,76,.55); opacity: 0; }
.partanim .m0 { left: 22%; bottom: 16%; }
.partanim .m1 { left: 37%; bottom: 10%; }
.partanim .m2 { left: 52%; bottom: 19%; }
.partanim .m3 { left: 66%; bottom: 12%; }
.partanim .m4 { left: 78%; bottom: 22%; }
.partanim .m5 { left: 45%; bottom: 26%; }
/* ---- a drawing in place of the rings ----
A book may hand its Book pages line art of their own, standing for the
chapters in that Book. It is a full-bleed stage under the lettering, like
.chapanim on a chapter half-title, and it REPLACES the rings rather than
joining them -- the engine emits one stage or the other, never both.
The drawings themselves live in the per-book scenes.css the builder
appends; all this rule does is give them a stage to hang in. */
.partart { position: absolute; inset: 0; pointer-events: none; }
.parttitle .pt-word, .parttitle .pt-num, .parttitle .pt-rule,
.parttitle .pt-sub { opacity: 0; }
.parttitle.play .pt-rule:first-child { animation: ptRule .60s ease-out .10s both; }
.parttitle.play .pt-word { animation: ptUp .70s ease-out .46s both; }
.parttitle.play .pt-num { animation: ptNum .95s cubic-bezier(.19,1,.22,1) .62s both; }
/* The legend's name arrives after the numeral has settled, and before
the closing rule draws itself. */
.parttitle.play .pt-sub { animation: ptUp .70s ease-out 1.16s both; }
.parttitle.play .pt-rule:last-child { animation: ptRule .60s ease-out 1.62s both; }
.parttitle.play .g0 { animation: ptRing 1.50s cubic-bezier(.22,.9,.3,1) .30s both,
ptBreathe 7.30s ease-in-out 1.9s infinite; }
.parttitle.play .g1 { animation: ptRing 1.70s cubic-bezier(.22,.9,.3,1) .48s both,
ptBreathe 9.10s ease-in-out 2.2s infinite; }
.parttitle.play .g2 { animation: ptRing 1.90s cubic-bezier(.22,.9,.3,1) .66s both,
ptBreathe 11.40s ease-in-out 2.6s infinite; }
.parttitle.play .m0 { animation: ptMote 6.20s ease-in-out 1.40s infinite; }
.parttitle.play .m1 { animation: ptMote 7.10s ease-in-out 1.95s infinite; }
.parttitle.play .m2 { animation: ptMote 8.30s ease-in-out 2.40s infinite; }
.parttitle.play .m3 { animation: ptMote 9.40s ease-in-out 1.70s infinite; }
.parttitle.play .m4 { animation: ptMote 10.60s ease-in-out 2.80s infinite; }
.parttitle.play .m5 { animation: ptMote 11.90s ease-in-out 3.20s infinite; }
/* ---------- the sand sequence on a part page ----------
Three stages, in this order: the Book's title fades in letter by letter,
the letters blow away downwind, and the numeral resolves in the space they
leave. build.py bakes each letter's two delays and its own drift into
inline custom properties, so the stagger is scaled to the length of the
title and every Book page runs to the same clock however long its title is.
The title is laid over the whole leaf rather than stacked above the label,
so the numeral appears exactly where the title was standing rather than
somewhere underneath it. Words are inline-block: a line may break between
words and never inside one.
Note on the two animations per letter. sandOut is declared with `both`, so
during its delay it holds its own first frame -- and its first frame is the
fully-arrived letter, which is precisely what sandIn finished on. That is
what lets the two run back to back on one element without the second one
wiping out the first while it waits. */
/* Tracking and word space have to be set against each other. These titles
are capitals, and tracked-out capitals need a word space that grows with
the tracking -- at .12em of tracking against a .42em gap the two readings
were close enough that the line ran together and you could not see where
one word ended. The tracking is now half what it was and the word space
two and a half times, which puts them an order of magnitude apart. */
.parttitle.sandseq .pt-sand { position: absolute; inset: 10% 11%; z-index: 3;
display: flex; flex-wrap: wrap; gap: .35em 0;
align-items: center; justify-content: center; align-content: center;
font-family: Georgia,'Palatino Linotype',serif; color: #3a2f22;
font-size: 1.06em; line-height: 1.85; letter-spacing: .06em;
pointer-events: none; }
/* The word-space, and why it is a margin rather than the flex gap above.
The letters are wrapped in one aria-hidden span so a screen reader gets the
title once from the container instead of spelling it out. That wrapper is
the ONLY child of the flex box, so flex gap had nothing to apply between --
and because the builder joins the word spans with no whitespace at all,
there was no word-space in the markup either. The words were separated by
precisely the trailing letter-spacing of their last letter, which is to say
by exactly the same distance as the letters inside them, which is exactly
what a reader reported: you could not see where one word ended.
display:contents lifts the words back out to be the flex items, and the
margin gives them a word-space that holds whatever layout context they end
up in. Belt and braces on purpose: this went wrong once already. */
.parttitle.sandseq .pt-sand .sandwrap { display: contents; }
.parttitle.sandseq .pt-sand .w { display: inline-block; white-space: nowrap;
margin-right: 1.05em; }
.parttitle.sandseq .pt-sand .w:last-child { margin-right: 0; }
.parttitle.sandseq .pt-sand .l { display: inline-block; opacity: 0;
will-change: transform, opacity, filter; }
/* The hold. The last letter of a title arrives at 1.55s -- one second of
stagger plus its own .55s -- so the hold is what is left for reading it,
not the whole of the number below. At 2.20s the assembled title stood for
two thirds of a second, which is not long enough to read a line that can
run to two hundred and fifty characters. At 5.60s it stands for four
seconds. Everything downstream is timed off this number. */
.parttitle.sandseq.play .pt-sand .l {
animation: sandIn .55s ease-out var(--fd) both,
sandOut 1.05s cubic-bezier(.42,0,.86,.24)
calc(5.60s + var(--bd)) both; }
/* The numeral waits for the title to be most of the way gone: the first
letters are still in the air when it starts to arrive. These four move with
the hold above -- 3.40s later than they were, because the hold is. */
.parttitle.sandseq.play .pt-rule:first-child { animation: ptRule .60s ease-out 7.26s both; }
.parttitle.sandseq.play .pt-word { animation: ptUp .70s ease-out 7.42s both; }
.parttitle.sandseq.play .pt-num { animation: ptNum .95s cubic-bezier(.19,1,.22,1) 7.58s both; }
.parttitle.sandseq.play .pt-rule:last-child { animation: ptRule .60s ease-out 8.00s both; }
@keyframes sandIn { from { opacity:0; transform: translateY(12px) scale(.94);
filter: blur(3px); }
to { opacity:1; transform:none; filter: blur(0); } }
@keyframes sandOut { 0% { opacity:1; transform:none; filter: blur(0); }
22% { opacity:.94;
transform: translate(calc(var(--dx) * .07), calc(var(--dy) * .07))
rotate(calc(var(--r) * .05)); filter: blur(.4px); }
100% { opacity:0;
transform: translate(var(--dx), var(--dy))
rotate(var(--r)) scale(.55); filter: blur(4px); } }
/* A reader who has asked for less motion gets the same three facts without
the weather: the title simply is there, and the numeral simply is there. */
@media (prefers-reduced-motion: reduce) {
.parttitle.sandseq .pt-sand .l,
.parttitle.sandseq.play .pt-sand .l { animation: none; opacity: 1; }
.parttitle.sandseq.play .pt-word,
.parttitle.sandseq.play .pt-num,
.parttitle.sandseq.play .pt-rule { animation-delay: 0s; }
/* the Book's drawing stays on the page, but stops being drawn */
.partart * { animation: none !important; }
}
@keyframes ptUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@keyframes ptRule { from { width:0; opacity:0; } to { width:46%; opacity:1; } }
@keyframes ptNum { 0% { opacity:0; transform: translateY(26px) scale(.82); letter-spacing:.34em; }
100% { opacity:1; transform:none; letter-spacing:.10em; } }
@keyframes ptRing { from { opacity:0; transform: translate(-50%,-50%) scale(.2); }
to { opacity:1; transform: translate(-50%,-50%) scale(1); } }
@keyframes ptBreathe { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes ptMote { 0% { opacity:0; transform: translateY(0) scale(.7); }
18% { opacity:.85; }
82% { opacity:.85; }
100% { opacity:0; transform: translateY(-190px) scale(1.25); } }
/* ---------- signature and subhead ----------
Both were emitted by the engine but never styled: 75 signature lines across
Little Women, Pride and Prejudice and The Jungle Book were rendering as
ordinary paragraphs. A signature closes a letter, so it sits right and
italic; a subhead is a minor division inside a chapter. */
.sig { text-align: right; font-style: italic; text-indent: 0;
margin: .35em 0 1.05em; padding-right: .4em; color: #40362a; }
.subhead { text-align: center; text-indent: 0; margin: 1.35em 0 .85em;
font-size: .93em; letter-spacing: .17em; text-transform: uppercase;
color: #5b4a33; }
/* ---------- per-page drawings ---------- */
/* The drawing fills the stage and sits under the type; the type's
own z-index keeps it on top. */
.chapanim svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* scene 0 -- the three night-lights, and the fourth that was wanting */
.chapanim .s0-stick0 { stroke-dasharray: 78.0 117.0; }
.chapanim .s0-stick0 { animation: s0Stick0 11.30s linear 0.00s infinite; }
@keyframes s0Stick0 { from { stroke-dashoffset: 194.9; } to { stroke-dashoffset: 0; } }
.chapanim .s0-wick0 { stroke-dasharray: 40.0 59.9; }
.chapanim .s0-wick0 { animation: s0Wick0 14.90s linear 0.80s infinite; }
@keyframes s0Wick0 { from { stroke-dashoffset: 99.9; } to { stroke-dashoffset: 0; } }
.chapanim .s0-stick1 { stroke-dasharray: 78.0 117.0; }
.chapanim .s0-stick1 { animation: s0Stick1 18.70s linear 1.60s infinite; }
@keyframes s0Stick1 { from { stroke-dashoffset: 194.9; } to { stroke-dashoffset: 0; } }
.chapanim .s0-wick1 { stroke-dasharray: 40.0 59.9; }
.chapanim .s0-wick1 { animation: s0Wick1 23.10s linear 2.40s infinite; }
@keyframes s0Wick1 { from { stroke-dashoffset: 99.9; } to { stroke-dashoffset: 0; } }
.chapanim .s0-stick2 { stroke-dasharray: 78.0 117.0; }
.chapanim .s0-stick2 { animation: s0Stick2 27.50s linear 3.20s infinite; }
@keyframes s0Stick2 { from { stroke-dashoffset: 194.9; } to { stroke-dashoffset: 0; } }
.chapanim .s0-wick2 { stroke-dasharray: 40.0 59.9; }
.chapanim .s0-wick2 { animation: s0Wick2 31.90s linear 4.00s infinite; }
@keyframes s0Wick2 { from { stroke-dashoffset: 99.9; } to { stroke-dashoffset: 0; } }
.chapanim .s0-empty { stroke-dasharray: 61.1 91.6; }
.chapanim .s0-empty { animation: s0Empty 37.30s linear 4.80s infinite; }
@keyframes s0Empty { from { stroke-dashoffset: 152.7; } to { stroke-dashoffset: 0; } }
.chapanim .s0-gnd { stroke-dasharray: 137.1 205.7; }
.chapanim .s0-gnd { animation: s0Gnd 11.59s linear 5.60s infinite; }
@keyframes s0Gnd { from { stroke-dashoffset: 342.8; } to { stroke-dashoffset: 0; } }
/* scene 1 -- the drawer the shadow was rolled up in */
.chapanim .s1-case { stroke-dasharray: 368.9 553.3; }
.chapanim .s1-case { animation: s1Case 11.30s linear 0.00s infinite; }
@keyframes s1Case { from { stroke-dashoffset: 922.1; } to { stroke-dashoffset: 0; } }
.chapanim .s1-upper { stroke-dasharray: 123.3 184.9; }
.chapanim .s1-upper { animation: s1Upper 14.90s linear 0.80s infinite; }
@keyframes s1Upper { from { stroke-dashoffset: 308.2; } to { stroke-dashoffset: 0; } }
.chapanim .s1-open { stroke-dasharray: 289.1 433.7; }
.chapanim .s1-open { animation: s1Open 18.70s linear 1.60s infinite; }
@keyframes s1Open { from { stroke-dashoffset: 722.9; } to { stroke-dashoffset: 0; } }
.chapanim .s1-front { stroke-dasharray: 116.5 174.7; }
.chapanim .s1-front { animation: s1Front 23.10s linear 2.40s infinite; }
@keyframes s1Front { from { stroke-dashoffset: 291.2; } to { stroke-dashoffset: 0; } }
.chapanim .s1-roll { stroke-dasharray: 61.0 91.5; }
.chapanim .s1-roll { animation: s1Roll 27.50s linear 3.20s infinite; }
@keyframes s1Roll { from { stroke-dashoffset: 152.4; } to { stroke-dashoffset: 0; } }
.chapanim .s1-rolled { stroke-dasharray: 65.3 98.0; }
.chapanim .s1-rolled { animation: s1Rolled 31.90s linear 4.00s infinite; }
@keyframes s1Rolled { from { stroke-dashoffset: 163.4; } to { stroke-dashoffset: 0; } }
.chapanim .s1-knob { stroke-dasharray: 24.2 36.3; }
.chapanim .s1-knob { animation: s1Knob 37.30s linear 4.80s infinite; }
@keyframes s1Knob { from { stroke-dashoffset: 60.5; } to { stroke-dashoffset: 0; } }
.chapanim .s1-gnd { stroke-dasharray: 145.6 218.4; }
.chapanim .s1-gnd { animation: s1Gnd 11.59s linear 5.60s infinite; }
@keyframes s1Gnd { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* scene 2 -- the acorn button on its chain */
.chapanim .s2-chain { stroke-dasharray: 126.8 190.2; }
.chapanim .s2-chain { animation: s2Chain 11.30s linear 0.00s infinite; }
@keyframes s2Chain { from { stroke-dashoffset: 316.9; } to { stroke-dashoffset: 0; } }
.chapanim .s2-lnk0 { stroke-dasharray: 20.9 31.3; }
.chapanim .s2-lnk0 { animation: s2Lnk0 14.90s linear 0.80s infinite; }
@keyframes s2Lnk0 { from { stroke-dashoffset: 52.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-lnk1 { stroke-dasharray: 20.9 31.3; }
.chapanim .s2-lnk1 { animation: s2Lnk1 18.70s linear 1.60s infinite; }
@keyframes s2Lnk1 { from { stroke-dashoffset: 52.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-lnk2 { stroke-dasharray: 20.9 31.3; }
.chapanim .s2-lnk2 { animation: s2Lnk2 23.10s linear 2.40s infinite; }
@keyframes s2Lnk2 { from { stroke-dashoffset: 52.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-lnk3 { stroke-dasharray: 20.9 31.3; }
.chapanim .s2-lnk3 { animation: s2Lnk3 27.50s linear 3.20s infinite; }
@keyframes s2Lnk3 { from { stroke-dashoffset: 52.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-lnk4 { stroke-dasharray: 20.9 31.3; }
.chapanim .s2-lnk4 { animation: s2Lnk4 31.90s linear 4.00s infinite; }
@keyframes s2Lnk4 { from { stroke-dashoffset: 52.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-lnk5 { stroke-dasharray: 20.9 31.3; }
.chapanim .s2-lnk5 { animation: s2Lnk5 37.30s linear 4.80s infinite; }
@keyframes s2Lnk5 { from { stroke-dashoffset: 52.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-lnk6 { stroke-dasharray: 20.9 31.3; }
.chapanim .s2-lnk6 { animation: s2Lnk6 11.59s linear 5.60s infinite; }
@keyframes s2Lnk6 { from { stroke-dashoffset: 52.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-nut { stroke-dasharray: 84.8 127.1; }
.chapanim .s2-nut { animation: s2Nut 15.19s linear 6.40s infinite; }
@keyframes s2Nut { from { stroke-dashoffset: 211.9; } to { stroke-dashoffset: 0; } }
.chapanim .s2-cup { stroke-dasharray: 55.2 82.8; }
.chapanim .s2-cup { animation: s2Cup 18.99s linear 7.20s infinite; }
@keyframes s2Cup { from { stroke-dashoffset: 138.0; } to { stroke-dashoffset: 0; } }
.chapanim .s2-cuplip { stroke-dasharray: 42.6 63.8; }
.chapanim .s2-cuplip { animation: s2Cuplip 23.39s linear 8.00s infinite; }
@keyframes s2Cuplip { from { stroke-dashoffset: 106.4; } to { stroke-dashoffset: 0; } }
.chapanim .s2-hatch0 { stroke-dasharray: 9.3 13.9; }
.chapanim .s2-hatch0 { animation: s2Hatch0 27.79s linear 8.80s infinite; }
@keyframes s2Hatch0 { from { stroke-dashoffset: 23.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-hatch1 { stroke-dasharray: 9.3 13.9; }
.chapanim .s2-hatch1 { animation: s2Hatch1 32.19s linear 9.60s infinite; }
@keyframes s2Hatch1 { from { stroke-dashoffset: 23.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-hatch2 { stroke-dasharray: 9.3 13.9; }
.chapanim .s2-hatch2 { animation: s2Hatch2 37.59s linear 10.40s infinite; }
@keyframes s2Hatch2 { from { stroke-dashoffset: 23.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-hatch3 { stroke-dasharray: 9.3 13.9; }
.chapanim .s2-hatch3 { animation: s2Hatch3 11.88s linear 11.20s infinite; }
@keyframes s2Hatch3 { from { stroke-dashoffset: 23.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-hatch4 { stroke-dasharray: 9.3 13.9; }
.chapanim .s2-hatch4 { animation: s2Hatch4 15.48s linear 12.00s infinite; }
@keyframes s2Hatch4 { from { stroke-dashoffset: 23.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-stalk { stroke-dasharray: 10.1 15.1; }
.chapanim .s2-stalk { animation: s2Stalk 19.28s linear 12.80s infinite; }
@keyframes s2Stalk { from { stroke-dashoffset: 25.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-gnd { stroke-dasharray: 145.6 218.4; }
.chapanim .s2-gnd { animation: s2Gnd 23.68s linear 13.60s infinite; }
@keyframes s2Gnd { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* scene 3 -- John's black topper */
.chapanim .s3-crown { stroke-dasharray: 172.6 258.9; }
.chapanim .s3-crown { animation: s3Crown 11.30s linear 0.00s infinite; }
@keyframes s3Crown { from { stroke-dashoffset: 431.4; } to { stroke-dashoffset: 0; } }
.chapanim .s3-top { stroke-dasharray: 70.6 105.8; }
.chapanim .s3-top { animation: s3Top 14.90s linear 0.80s infinite; }
@keyframes s3Top { from { stroke-dashoffset: 176.4; } to { stroke-dashoffset: 0; } }
.chapanim .s3-band { stroke-dasharray: 67.2 100.8; }
.chapanim .s3-band { animation: s3Band 18.70s linear 1.60s infinite; }
@keyframes s3Band { from { stroke-dashoffset: 168.0; } to { stroke-dashoffset: 0; } }
.chapanim .s3-band2 { stroke-dasharray: 67.2 100.8; }
.chapanim .s3-band2 { animation: s3Band2 23.10s linear 2.40s infinite; }
@keyframes s3Band2 { from { stroke-dashoffset: 168.0; } to { stroke-dashoffset: 0; } }
.chapanim .s3-brim { stroke-dasharray: 228.3 342.5; }
.chapanim .s3-brim { animation: s3Brim 27.50s linear 3.20s infinite; }
@keyframes s3Brim { from { stroke-dashoffset: 570.8; } to { stroke-dashoffset: 0; } }
.chapanim .s3-gnd { stroke-dasharray: 145.6 218.4; }
.chapanim .s3-gnd { animation: s3Gnd 31.90s linear 4.00s infinite; }
@keyframes s3Gnd { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* scene 4 -- the seven hollow trees */
.chapanim .s4-tr0 { stroke-dasharray: 84.7 127.1; }
.chapanim .s4-tr0 { animation: s4Tr0 11.30s linear 0.00s infinite; }
@keyframes s4Tr0 { from { stroke-dashoffset: 211.8; } to { stroke-dashoffset: 0; } }
.chapanim .s4-root0 { stroke-dasharray: 23.2 34.8; }
.chapanim .s4-root0 { animation: s4Root0 14.90s linear 0.80s infinite; }
@keyframes s4Root0 { from { stroke-dashoffset: 58.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-hole0 { stroke-dasharray: 28.1 42.1; }
.chapanim .s4-hole0 { animation: s4Hole0 18.70s linear 1.60s infinite; }
@keyframes s4Hole0 { from { stroke-dashoffset: 70.1; } to { stroke-dashoffset: 0; } }
.chapanim .s4-tr1 { stroke-dasharray: 121.5 182.2; }
.chapanim .s4-tr1 { animation: s4Tr1 23.10s linear 2.40s infinite; }
@keyframes s4Tr1 { from { stroke-dashoffset: 303.7; } to { stroke-dashoffset: 0; } }
.chapanim .s4-root1 { stroke-dasharray: 23.2 34.8; }
.chapanim .s4-root1 { animation: s4Root1 27.50s linear 3.20s infinite; }
@keyframes s4Root1 { from { stroke-dashoffset: 58.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-hole1 { stroke-dasharray: 28.1 42.1; }
.chapanim .s4-hole1 { animation: s4Hole1 31.90s linear 4.00s infinite; }
@keyframes s4Hole1 { from { stroke-dashoffset: 70.1; } to { stroke-dashoffset: 0; } }
.chapanim .s4-tr2 { stroke-dasharray: 109.2 163.8; }
.chapanim .s4-tr2 { animation: s4Tr2 37.30s linear 4.80s infinite; }
@keyframes s4Tr2 { from { stroke-dashoffset: 273.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-root2 { stroke-dasharray: 23.2 34.8; }
.chapanim .s4-root2 { animation: s4Root2 11.59s linear 5.60s infinite; }
@keyframes s4Root2 { from { stroke-dashoffset: 58.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-hole2 { stroke-dasharray: 28.1 42.1; }
.chapanim .s4-hole2 { animation: s4Hole2 15.19s linear 6.40s infinite; }
@keyframes s4Hole2 { from { stroke-dashoffset: 70.1; } to { stroke-dashoffset: 0; } }
.chapanim .s4-tr3 { stroke-dasharray: 96.9 145.4; }
.chapanim .s4-tr3 { animation: s4Tr3 18.99s linear 7.20s infinite; }
@keyframes s4Tr3 { from { stroke-dashoffset: 242.3; } to { stroke-dashoffset: 0; } }
.chapanim .s4-root3 { stroke-dasharray: 23.2 34.8; }
.chapanim .s4-root3 { animation: s4Root3 23.39s linear 8.00s infinite; }
@keyframes s4Root3 { from { stroke-dashoffset: 58.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-hole3 { stroke-dasharray: 28.1 42.1; }
.chapanim .s4-hole3 { animation: s4Hole3 27.79s linear 8.80s infinite; }
@keyframes s4Hole3 { from { stroke-dashoffset: 70.1; } to { stroke-dashoffset: 0; } }
.chapanim .s4-tr4 { stroke-dasharray: 84.7 127.1; }
.chapanim .s4-tr4 { animation: s4Tr4 32.19s linear 9.60s infinite; }
@keyframes s4Tr4 { from { stroke-dashoffset: 211.8; } to { stroke-dashoffset: 0; } }
.chapanim .s4-root4 { stroke-dasharray: 23.2 34.8; }
.chapanim .s4-root4 { animation: s4Root4 37.59s linear 10.40s infinite; }
@keyframes s4Root4 { from { stroke-dashoffset: 58.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-hole4 { stroke-dasharray: 28.1 42.1; }
.chapanim .s4-hole4 { animation: s4Hole4 11.88s linear 11.20s infinite; }
@keyframes s4Hole4 { from { stroke-dashoffset: 70.1; } to { stroke-dashoffset: 0; } }
.chapanim .s4-tr5 { stroke-dasharray: 121.5 182.2; }
.chapanim .s4-tr5 { animation: s4Tr5 15.48s linear 12.00s infinite; }
@keyframes s4Tr5 { from { stroke-dashoffset: 303.7; } to { stroke-dashoffset: 0; } }
.chapanim .s4-root5 { stroke-dasharray: 23.2 34.8; }
.chapanim .s4-root5 { animation: s4Root5 19.28s linear 12.80s infinite; }
@keyframes s4Root5 { from { stroke-dashoffset: 58.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-hole5 { stroke-dasharray: 28.1 42.1; }
.chapanim .s4-hole5 { animation: s4Hole5 23.68s linear 13.60s infinite; }
@keyframes s4Hole5 { from { stroke-dashoffset: 70.1; } to { stroke-dashoffset: 0; } }
.chapanim .s4-tr6 { stroke-dasharray: 109.2 163.8; }
.chapanim .s4-tr6 { animation: s4Tr6 28.08s linear 14.40s infinite; }
@keyframes s4Tr6 { from { stroke-dashoffset: 273.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-root6 { stroke-dasharray: 23.2 34.8; }
.chapanim .s4-root6 { animation: s4Root6 32.48s linear 15.20s infinite; }
@keyframes s4Root6 { from { stroke-dashoffset: 58.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-hole6 { stroke-dasharray: 28.1 42.1; }
.chapanim .s4-hole6 { animation: s4Hole6 37.88s linear 16.00s infinite; }
@keyframes s4Hole6 { from { stroke-dashoffset: 70.1; } to { stroke-dashoffset: 0; } }
.chapanim .s4-canopy { stroke-dasharray: 313.4 470.2; }
.chapanim .s4-canopy { animation: s4Canopy 12.17s linear 16.80s infinite; }
@keyframes s4Canopy { from { stroke-dashoffset: 783.6; } to { stroke-dashoffset: 0; } }
.chapanim .s4-gnd { stroke-dasharray: 143.1 214.7; }
.chapanim .s4-gnd { animation: s4Gnd 15.77s linear 17.60s infinite; }
@keyframes s4Gnd { from { stroke-dashoffset: 357.8; } to { stroke-dashoffset: 0; } }
/* scene 5 -- the little house, with a hat for a chimney */
.chapanim .s5-walls { stroke-dasharray: 291.2 436.8; }
.chapanim .s5-walls { animation: s5Walls 11.30s linear 0.00s infinite; }
@keyframes s5Walls { from { stroke-dashoffset: 728.0; } to { stroke-dashoffset: 0; } }
.chapanim .s5-roof { stroke-dasharray: 141.4 212.1; }
.chapanim .s5-roof { animation: s5Roof 14.90s linear 0.80s infinite; }
@keyframes s5Roof { from { stroke-dashoffset: 353.5; } to { stroke-dashoffset: 0; } }
.chapanim .s5-door { stroke-dasharray: 117.0 175.5; }
.chapanim .s5-door { animation: s5Door 18.70s linear 1.60s infinite; }
@keyframes s5Door { from { stroke-dashoffset: 292.5; } to { stroke-dashoffset: 0; } }
.chapanim .s5-knock { stroke-dasharray: 20.2 30.3; }
.chapanim .s5-knock { animation: s5Knock 23.10s linear 2.40s infinite; }
@keyframes s5Knock { from { stroke-dashoffset: 50.5; } to { stroke-dashoffset: 0; } }
.chapanim .s5-winL { stroke-dasharray: 72.8 109.2; }
.chapanim .s5-winL { animation: s5Winl 27.50s linear 3.20s infinite; }
@keyframes s5Winl { from { stroke-dashoffset: 182.0; } to { stroke-dashoffset: 0; } }
.chapanim .s5-winR { stroke-dasharray: 72.8 109.2; }
.chapanim .s5-winR { animation: s5Winr 31.90s linear 4.00s infinite; }
@keyframes s5Winr { from { stroke-dashoffset: 182.0; } to { stroke-dashoffset: 0; } }
.chapanim .s5-hat { stroke-dasharray: 65.1 97.6; }
.chapanim .s5-hat { animation: s5Hat 37.30s linear 4.80s infinite; }
@keyframes s5Hat { from { stroke-dashoffset: 162.7; } to { stroke-dashoffset: 0; } }
.chapanim .s5-hatbrim { stroke-dasharray: 72.9 109.3; }
.chapanim .s5-hatbrim { animation: s5Hatbrim 11.59s linear 5.60s infinite; }
@keyframes s5Hatbrim { from { stroke-dashoffset: 182.1; } to { stroke-dashoffset: 0; } }
.chapanim .s5-smoke { stroke-dasharray: 47.9 71.9; }
.chapanim .s5-smoke { animation: s5Smoke 15.19s linear 6.40s infinite; }
@keyframes s5Smoke { from { stroke-dashoffset: 119.9; } to { stroke-dashoffset: 0; } }
.chapanim .s5-gnd { stroke-dasharray: 145.6 218.4; }
.chapanim .s5-gnd { animation: s5Gnd 18.99s linear 7.20s infinite; }
@keyframes s5Gnd { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* scene 6 -- the sawn Never tree, with a door for a table */
.chapanim .s6-stump { stroke-dasharray: 75.3 113.0; }
.chapanim .s6-stump { animation: s6Stump 11.30s linear 0.00s infinite; }
@keyframes s6Stump { from { stroke-dashoffset: 188.4; } to { stroke-dashoffset: 0; } }
.chapanim .s6-rings { stroke-dasharray: 66.8 100.2; }
.chapanim .s6-rings { animation: s6Rings 14.90s linear 0.80s infinite; }
@keyframes s6Rings { from { stroke-dashoffset: 167.0; } to { stroke-dashoffset: 0; } }
.chapanim .s6-rings2 { stroke-dasharray: 35.8 53.7; }
.chapanim .s6-rings2 { animation: s6Rings2 18.70s linear 1.60s infinite; }
@keyframes s6Rings2 { from { stroke-dashoffset: 89.5; } to { stroke-dashoffset: 0; } }
.chapanim .s6-door { stroke-dasharray: 227.4 341.1; }
.chapanim .s6-door { animation: s6Door 23.10s linear 2.40s infinite; }
@keyframes s6Door { from { stroke-dashoffset: 568.4; } to { stroke-dashoffset: 0; } }
.chapanim .s6-cap0 { stroke-dasharray: 31.3 46.9; }
.chapanim .s6-cap0 { animation: s6Cap0 27.50s linear 3.20s infinite; }
@keyframes s6Cap0 { from { stroke-dashoffset: 78.2; } to { stroke-dashoffset: 0; } }
.chapanim .s6-rim0 { stroke-dasharray: 22.4 33.6; }
.chapanim .s6-rim0 { animation: s6Rim0 31.90s linear 4.00s infinite; }
@keyframes s6Rim0 { from { stroke-dashoffset: 56.0; } to { stroke-dashoffset: 0; } }
.chapanim .s6-stem0 { stroke-dasharray: 30.6 45.9; }
.chapanim .s6-stem0 { animation: s6Stem0 37.30s linear 4.80s infinite; }
@keyframes s6Stem0 { from { stroke-dashoffset: 76.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-cap1 { stroke-dasharray: 31.3 46.9; }
.chapanim .s6-cap1 { animation: s6Cap1 11.59s linear 5.60s infinite; }
@keyframes s6Cap1 { from { stroke-dashoffset: 78.2; } to { stroke-dashoffset: 0; } }
.chapanim .s6-rim1 { stroke-dasharray: 22.4 33.6; }
.chapanim .s6-rim1 { animation: s6Rim1 15.19s linear 6.40s infinite; }
@keyframes s6Rim1 { from { stroke-dashoffset: 56.0; } to { stroke-dashoffset: 0; } }
.chapanim .s6-stem1 { stroke-dasharray: 30.6 45.9; }
.chapanim .s6-stem1 { animation: s6Stem1 18.99s linear 7.20s infinite; }
@keyframes s6Stem1 { from { stroke-dashoffset: 76.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-cap2 { stroke-dasharray: 31.3 46.9; }
.chapanim .s6-cap2 { animation: s6Cap2 23.39s linear 8.00s infinite; }
@keyframes s6Cap2 { from { stroke-dashoffset: 78.2; } to { stroke-dashoffset: 0; } }
.chapanim .s6-rim2 { stroke-dasharray: 22.4 33.6; }
.chapanim .s6-rim2 { animation: s6Rim2 27.79s linear 8.80s infinite; }
@keyframes s6Rim2 { from { stroke-dashoffset: 56.0; } to { stroke-dashoffset: 0; } }
.chapanim .s6-stem2 { stroke-dasharray: 30.6 45.9; }
.chapanim .s6-stem2 { animation: s6Stem2 32.19s linear 9.60s infinite; }
@keyframes s6Stem2 { from { stroke-dashoffset: 76.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-cap3 { stroke-dasharray: 31.3 46.9; }
.chapanim .s6-cap3 { animation: s6Cap3 37.59s linear 10.40s infinite; }
@keyframes s6Cap3 { from { stroke-dashoffset: 78.2; } to { stroke-dashoffset: 0; } }
.chapanim .s6-rim3 { stroke-dasharray: 22.4 33.6; }
.chapanim .s6-rim3 { animation: s6Rim3 11.88s linear 11.20s infinite; }
@keyframes s6Rim3 { from { stroke-dashoffset: 56.0; } to { stroke-dashoffset: 0; } }
.chapanim .s6-stem3 { stroke-dasharray: 30.6 45.9; }
.chapanim .s6-stem3 { animation: s6Stem3 15.48s linear 12.00s infinite; }
@keyframes s6Stem3 { from { stroke-dashoffset: 76.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-gnd { stroke-dasharray: 145.6 218.4; }
.chapanim .s6-gnd { animation: s6Gnd 19.28s linear 12.80s infinite; }
@keyframes s6Gnd { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* scene 7 -- Marooners' Rock and the buccaneers' stave */
.chapanim .s7-rock { stroke-dasharray: 127.9 191.8; }
.chapanim .s7-rock { animation: s7Rock 11.30s linear 0.00s infinite; }
@keyframes s7Rock { from { stroke-dashoffset: 319.6; } to { stroke-dashoffset: 0; } }
.chapanim .s7-crack { stroke-dasharray: 36.0 53.9; }
.chapanim .s7-crack { animation: s7Crack 14.90s linear 0.80s infinite; }
@keyframes s7Crack { from { stroke-dashoffset: 89.9; } to { stroke-dashoffset: 0; } }
.chapanim .s7-stave { stroke-dasharray: 31.9 47.8; }
.chapanim .s7-stave { animation: s7Stave 18.70s linear 1.60s infinite; }
@keyframes s7Stave { from { stroke-dashoffset: 79.7; } to { stroke-dashoffset: 0; } }
.chapanim .s7-water { stroke-dasharray: 150.9 226.4; }
.chapanim .s7-water { animation: s7Water 23.10s linear 2.40s infinite; }
@keyframes s7Water { from { stroke-dashoffset: 377.4; } to { stroke-dashoffset: 0; } }
.chapanim .s7-water2 { stroke-dasharray: 147.6 221.4; }
.chapanim .s7-water2 { animation: s7Water2 27.50s linear 3.20s infinite; }
@keyframes s7Water2 { from { stroke-dashoffset: 368.9; } to { stroke-dashoffset: 0; } }
/* scene 8 -- the tarpaulin hat afloat, with the eggs in it */
.chapanim .s8-hat { stroke-dasharray: 91.0 136.6; }
.chapanim .s8-hat { animation: s8Hat 11.30s linear 0.00s infinite; }
@keyframes s8Hat { from { stroke-dashoffset: 227.6; } to { stroke-dashoffset: 0; } }
.chapanim .s8-brim { stroke-dasharray: 81.7 122.5; }
.chapanim .s8-brim { animation: s8Brim 14.90s linear 0.80s infinite; }
@keyframes s8Brim { from { stroke-dashoffset: 204.2; } to { stroke-dashoffset: 0; } }
.chapanim .s8-brimo { stroke-dasharray: 92.5 138.8; }
.chapanim .s8-brimo { animation: s8Brimo 18.70s linear 1.60s infinite; }
@keyframes s8Brimo { from { stroke-dashoffset: 231.3; } to { stroke-dashoffset: 0; } }
.chapanim .s8-egg1 { stroke-dasharray: 62.8 94.2; }
.chapanim .s8-egg1 { animation: s8Egg1 23.10s linear 2.40s infinite; }
@keyframes s8Egg1 { from { stroke-dashoffset: 157.0; } to { stroke-dashoffset: 0; } }
.chapanim .s8-egg2 { stroke-dasharray: 57.3 85.9; }
.chapanim .s8-egg2 { animation: s8Egg2 27.50s linear 3.20s infinite; }
@keyframes s8Egg2 { from { stroke-dashoffset: 143.1; } to { stroke-dashoffset: 0; } }
.chapanim .s8-water { stroke-dasharray: 150.7 226.0; }
.chapanim .s8-water { animation: s8Water 31.90s linear 4.00s infinite; }
@keyframes s8Water { from { stroke-dashoffset: 376.7; } to { stroke-dashoffset: 0; } }
.chapanim .s8-water2 { stroke-dasharray: 147.5 221.2; }
.chapanim .s8-water2 { animation: s8Water2 37.30s linear 4.80s infinite; }
@keyframes s8Water2 { from { stroke-dashoffset: 368.7; } to { stroke-dashoffset: 0; } }
/* scene 9 -- the hanging basket */
.chapanim .s9-cordL { stroke-dasharray: 87.8 131.6; }
.chapanim .s9-cordL { animation: s9Cordl 11.30s linear 0.00s infinite; }
@keyframes s9Cordl { from { stroke-dashoffset: 219.4; } to { stroke-dashoffset: 0; } }
.chapanim .s9-cordR { stroke-dasharray: 87.8 131.6; }
.chapanim .s9-cordR { animation: s9Cordr 14.90s linear 0.80s infinite; }
@keyframes s9Cordr { from { stroke-dashoffset: 219.4; } to { stroke-dashoffset: 0; } }
.chapanim .s9-knot { stroke-dasharray: 37.5 56.2; }
.chapanim .s9-knot { animation: s9Knot 18.70s linear 1.60s infinite; }
@keyframes s9Knot { from { stroke-dashoffset: 93.7; } to { stroke-dashoffset: 0; } }
.chapanim .s9-rim { stroke-dasharray: 280.5 420.7; }
.chapanim .s9-rim { animation: s9Rim 23.10s linear 2.40s infinite; }
@keyframes s9Rim { from { stroke-dashoffset: 701.2; } to { stroke-dashoffset: 0; } }
.chapanim .s9-body { stroke-dasharray: 213.0 319.5; }
.chapanim .s9-body { animation: s9Body 27.50s linear 3.20s infinite; }
@keyframes s9Body { from { stroke-dashoffset: 532.5; } to { stroke-dashoffset: 0; } }
.chapanim .s9-base { stroke-dasharray: 112.6 168.9; }
.chapanim .s9-base { animation: s9Base 31.90s linear 4.00s infinite; }
@keyframes s9Base { from { stroke-dashoffset: 281.4; } to { stroke-dashoffset: 0; } }
.chapanim .s9-stave0 { stroke-dasharray: 41.9 62.9; }
.chapanim .s9-stave0 { animation: s9Stave0 37.30s linear 4.80s infinite; }
@keyframes s9Stave0 { from { stroke-dashoffset: 104.8; } to { stroke-dashoffset: 0; } }
.chapanim .s9-stave1 { stroke-dasharray: 41.9 62.9; }
.chapanim .s9-stave1 { animation: s9Stave1 11.59s linear 5.60s infinite; }
@keyframes s9Stave1 { from { stroke-dashoffset: 104.8; } to { stroke-dashoffset: 0; } }
.chapanim .s9-stave2 { stroke-dasharray: 41.9 62.9; }
.chapanim .s9-stave2 { animation: s9Stave2 15.19s linear 6.40s infinite; }
@keyframes s9Stave2 { from { stroke-dashoffset: 104.8; } to { stroke-dashoffset: 0; } }
.chapanim .s9-stave3 { stroke-dasharray: 41.9 62.9; }
.chapanim .s9-stave3 { animation: s9Stave3 18.99s linear 7.20s infinite; }
@keyframes s9Stave3 { from { stroke-dashoffset: 104.8; } to { stroke-dashoffset: 0; } }
.chapanim .s9-stave4 { stroke-dasharray: 41.9 62.9; }
.chapanim .s9-stave4 { animation: s9Stave4 23.39s linear 8.00s infinite; }
@keyframes s9Stave4 { from { stroke-dashoffset: 104.8; } to { stroke-dashoffset: 0; } }
.chapanim .s9-weft { stroke-dasharray: 125.3 188.0; }
.chapanim .s9-weft { animation: s9Weft 27.79s linear 8.80s infinite; }
@keyframes s9Weft { from { stroke-dashoffset: 313.3; } to { stroke-dashoffset: 0; } }
.chapanim .s9-weft2 { stroke-dasharray: 118.7 178.1; }
.chapanim .s9-weft2 { animation: s9Weft2 32.19s linear 9.60s infinite; }
@keyframes s9Weft2 { from { stroke-dashoffset: 296.8; } to { stroke-dashoffset: 0; } }
/* scene 10 -- the nursery window, standing open */
.chapanim .s10-frame { stroke-dasharray: 382.8 574.2; }
.chapanim .s10-frame { animation: s10Frame 11.30s linear 0.00s infinite; }
@keyframes s10Frame { from { stroke-dashoffset: 957.0; } to { stroke-dashoffset: 0; } }
.chapanim .s10-sillx { stroke-dasharray: 122.1 183.2; }
.chapanim .s10-sillx { animation: s10Sillx 14.90s linear 0.80s infinite; }
@keyframes s10Sillx { from { stroke-dashoffset: 305.3; } to { stroke-dashoffset: 0; } }
.chapanim .s10-sash { stroke-dasharray: 108.0 162.0; }
.chapanim .s10-sash { animation: s10Sash 18.70s linear 1.60s infinite; }
@keyframes s10Sash { from { stroke-dashoffset: 270.1; } to { stroke-dashoffset: 0; } }
.chapanim .s10-mull { stroke-dasharray: 41.1 61.6; }
.chapanim .s10-mull { animation: s10Mull 23.10s linear 2.40s infinite; }
@keyframes s10Mull { from { stroke-dashoffset: 102.7; } to { stroke-dashoffset: 0; } }
.chapanim .s10-mull2 { stroke-dasharray: 42.3 63.4; }
.chapanim .s10-mull2 { animation: s10Mull2 27.50s linear 3.20s infinite; }
@keyframes s10Mull2 { from { stroke-dashoffset: 105.7; } to { stroke-dashoffset: 0; } }
.chapanim .s10-open { stroke-dasharray: 136.3 204.5; }
.chapanim .s10-open { animation: s10Open 31.90s linear 4.00s infinite; }
@keyframes s10Open { from { stroke-dashoffset: 340.8; } to { stroke-dashoffset: 0; } }
.chapanim .s10-stars { stroke-dasharray: 46.6 69.9; }
.chapanim .s10-stars { animation: s10Stars 37.30s linear 4.80s infinite; }
@keyframes s10Stars { from { stroke-dashoffset: 116.5; } to { stroke-dashoffset: 0; } }
.chapanim .s10-stars2 { stroke-dasharray: 34.9 52.3; }
.chapanim .s10-stars2 { animation: s10Stars2 11.59s linear 5.60s infinite; }
@keyframes s10Stars2 { from { stroke-dashoffset: 87.2; } to { stroke-dashoffset: 0; } }
.chapanim .s10-gnd { stroke-dasharray: 145.6 218.4; }
.chapanim .s10-gnd { animation: s10Gnd 15.19s linear 6.40s infinite; }
@keyframes s10Gnd { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* scene 11 -- the tom-tom */
.chapanim .s11-head { stroke-dasharray: 253.2 379.8; }
.chapanim .s11-head { animation: s11Head 11.30s linear 0.00s infinite; }
@keyframes s11Head { from { stroke-dashoffset: 633.1; } to { stroke-dashoffset: 0; } }
.chapanim .s11-shell { stroke-dasharray: 199.6 299.4; }
.chapanim .s11-shell { animation: s11Shell 14.90s linear 0.80s infinite; }
@keyframes s11Shell { from { stroke-dashoffset: 499.0; } to { stroke-dashoffset: 0; } }
.chapanim .s11-foot { stroke-dasharray: 216.1 324.1; }
.chapanim .s11-foot { animation: s11Foot 18.70s linear 1.60s infinite; }
@keyframes s11Foot { from { stroke-dashoffset: 540.1; } to { stroke-dashoffset: 0; } }
.chapanim .s11-lace0 { stroke-dasharray: 77.5 116.3; }
.chapanim .s11-lace0 { animation: s11Lace0 23.10s linear 2.40s infinite; }
@keyframes s11Lace0 { from { stroke-dashoffset: 193.8; } to { stroke-dashoffset: 0; } }
.chapanim .s11-lace1 { stroke-dasharray: 77.5 116.3; }
.chapanim .s11-lace1 { animation: s11Lace1 27.50s linear 3.20s infinite; }
@keyframes s11Lace1 { from { stroke-dashoffset: 193.8; } to { stroke-dashoffset: 0; } }
.chapanim .s11-lace2 { stroke-dasharray: 77.5 116.3; }
.chapanim .s11-lace2 { animation: s11Lace2 31.90s linear 4.00s infinite; }
@keyframes s11Lace2 { from { stroke-dashoffset: 193.8; } to { stroke-dashoffset: 0; } }
.chapanim .s11-lace3 { stroke-dasharray: 77.5 116.3; }
.chapanim .s11-lace3 { animation: s11Lace3 37.30s linear 4.80s infinite; }
@keyframes s11Lace3 { from { stroke-dashoffset: 193.8; } to { stroke-dashoffset: 0; } }
.chapanim .s11-lace4 { stroke-dasharray: 77.5 116.3; }
.chapanim .s11-lace4 { animation: s11Lace4 11.59s linear 5.60s infinite; }
@keyframes s11Lace4 { from { stroke-dashoffset: 193.8; } to { stroke-dashoffset: 0; } }
.chapanim .s11-lace5 { stroke-dasharray: 77.5 116.3; }
.chapanim .s11-lace5 { animation: s11Lace5 15.19s linear 6.40s infinite; }
@keyframes s11Lace5 { from { stroke-dashoffset: 193.8; } to { stroke-dashoffset: 0; } }
.chapanim .s11-stick { stroke-dasharray: 49.2 73.9; }
.chapanim .s11-stick { animation: s11Stick 18.99s linear 7.20s infinite; }
@keyframes s11Stick { from { stroke-dashoffset: 123.1; } to { stroke-dashoffset: 0; } }
.chapanim .s11-knob { stroke-dasharray: 36.1 54.2; }
.chapanim .s11-knob { animation: s11Knob 23.39s linear 8.00s infinite; }
@keyframes s11Knob { from { stroke-dashoffset: 90.3; } to { stroke-dashoffset: 0; } }
.chapanim .s11-gnd { stroke-dasharray: 144.3 216.5; }
.chapanim .s11-gnd { animation: s11Gnd 27.79s linear 8.80s infinite; }
@keyframes s11Gnd { from { stroke-dashoffset: 360.8; } to { stroke-dashoffset: 0; } }
/* scene 12 -- the cup on its ledge */
.chapanim .s12-ledge { stroke-dasharray: 264.2 396.2; }
.chapanim .s12-ledge { animation: s12Ledge 11.30s linear 0.00s infinite; }
@keyframes s12Ledge { from { stroke-dashoffset: 660.4; } to { stroke-dashoffset: 0; } }
.chapanim .s12-bracket { stroke-dasharray: 34.6 52.0; }
.chapanim .s12-bracket { animation: s12Bracket 14.90s linear 0.80s infinite; }
@keyframes s12Bracket { from { stroke-dashoffset: 86.6; } to { stroke-dashoffset: 0; } }
.chapanim .s12-bracket2 { stroke-dasharray: 34.6 52.0; }
.chapanim .s12-bracket2 { animation: s12Bracket2 18.70s linear 1.60s infinite; }
@keyframes s12Bracket2 { from { stroke-dashoffset: 86.6; } to { stroke-dashoffset: 0; } }
.chapanim .s12-cup { stroke-dasharray: 98.0 147.1; }
.chapanim .s12-cup { animation: s12Cup 23.10s linear 2.40s infinite; }
@keyframes s12Cup { from { stroke-dashoffset: 245.1; } to { stroke-dashoffset: 0; } }
.chapanim .s12-rim { stroke-dasharray: 66.3 99.4; }
.chapanim .s12-rim { animation: s12Rim 27.50s linear 3.20s infinite; }
@keyframes s12Rim { from { stroke-dashoffset: 165.7; } to { stroke-dashoffset: 0; } }
.chapanim .s12-level { stroke-dasharray: 54.4 81.6; }
.chapanim .s12-level { animation: s12Level 31.90s linear 4.00s infinite; }
@keyframes s12Level { from { stroke-dashoffset: 135.9; } to { stroke-dashoffset: 0; } }
.chapanim .s12-handle { stroke-dasharray: 43.8 65.8; }
.chapanim .s12-handle { animation: s12Handle 37.30s linear 4.80s infinite; }
@keyframes s12Handle { from { stroke-dashoffset: 109.6; } to { stroke-dashoffset: 0; } }
.chapanim .s12-gnd { stroke-dasharray: 145.6 218.4; }
.chapanim .s12-gnd { animation: s12Gnd 11.59s linear 5.60s infinite; }
@keyframes s12Gnd { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* scene 13 -- the plank */
.chapanim .s13-rail { stroke-dasharray: 55.5 83.2; }
.chapanim .s13-rail { animation: s13Rail 11.30s linear 0.00s infinite; }
@keyframes s13Rail { from { stroke-dashoffset: 138.7; } to { stroke-dashoffset: 0; } }
.chapanim .s13-post { stroke-dasharray: 23.4 35.1; }
.chapanim .s13-post { animation: s13Post 14.90s linear 0.80s infinite; }
@keyframes s13Post { from { stroke-dashoffset: 58.5; } to { stroke-dashoffset: 0; } }
.chapanim .s13-post2 { stroke-dasharray: 23.4 35.1; }
.chapanim .s13-post2 { animation: s13Post2 18.70s linear 1.60s infinite; }
@keyframes s13Post2 { from { stroke-dashoffset: 58.5; } to { stroke-dashoffset: 0; } }
.chapanim .s13-hull { stroke-dasharray: 83.7 125.5; }
.chapanim .s13-hull { animation: s13Hull 23.10s linear 2.40s infinite; }
@keyframes s13Hull { from { stroke-dashoffset: 209.1; } to { stroke-dashoffset: 0; } }
.chapanim .s13-plank { stroke-dasharray: 166.6 249.8; }
.chapanim .s13-plank { animation: s13Plank 27.50s linear 3.20s infinite; }
@keyframes s13Plank { from { stroke-dashoffset: 416.4; } to { stroke-dashoffset: 0; } }
.chapanim .s13-edge { stroke-dasharray: 78.1 117.1; }
.chapanim .s13-edge { animation: s13Edge 31.90s linear 4.00s infinite; }
@keyframes s13Edge { from { stroke-dashoffset: 195.2; } to { stroke-dashoffset: 0; } }
.chapanim .s13-water { stroke-dasharray: 96.9 145.3; }
.chapanim .s13-water { animation: s13Water 37.30s linear 4.80s infinite; }
@keyframes s13Water { from { stroke-dashoffset: 242.2; } to { stroke-dashoffset: 0; } }
.chapanim .s13-water2 { stroke-dasharray: 92.1 138.2; }
.chapanim .s13-water2 { animation: s13Water2 11.59s linear 5.60s infinite; }
@keyframes s13Water2 { from { stroke-dashoffset: 230.4; } to { stroke-dashoffset: 0; } }
/* scene 14 -- Long Tom */
.chapanim .s14-barrel { stroke-dasharray: 213.6 320.4; }
.chapanim .s14-barrel { animation: s14Barrel 11.30s linear 0.00s infinite; }
@keyframes s14Barrel { from { stroke-dashoffset: 534.0; } to { stroke-dashoffset: 0; } }
.chapanim .s14-muzzle { stroke-dasharray: 50.8 76.3; }
.chapanim .s14-muzzle { animation: s14Muzzle 14.90s linear 0.80s infinite; }
@keyframes s14Muzzle { from { stroke-dashoffset: 127.1; } to { stroke-dashoffset: 0; } }
.chapanim .s14-breech { stroke-dasharray: 37.1 55.7; }
.chapanim .s14-breech { animation: s14Breech 18.70s linear 1.60s infinite; }
@keyframes s14Breech { from { stroke-dashoffset: 92.8; } to { stroke-dashoffset: 0; } }
.chapanim .s14-trunn { stroke-dasharray: 33.8 50.7; }
.chapanim .s14-trunn { animation: s14Trunn 23.10s linear 2.40s infinite; }
@keyframes s14Trunn { from { stroke-dashoffset: 84.4; } to { stroke-dashoffset: 0; } }
.chapanim .s14-carrL { stroke-dasharray: 102.5 153.7; }
.chapanim .s14-carrL { animation: s14Carrl 27.50s linear 3.20s infinite; }
@keyframes s14Carrl { from { stroke-dashoffset: 256.2; } to { stroke-dashoffset: 0; } }
.chapanim .s14-wheel { stroke-dasharray: 80.2 120.3; }
.chapanim .s14-wheel { animation: s14Wheel 31.90s linear 4.00s infinite; }
@keyframes s14Wheel { from { stroke-dashoffset: 200.5; } to { stroke-dashoffset: 0; } }
.chapanim .s14-wheel2 { stroke-dasharray: 27.6 41.5; }
.chapanim .s14-wheel2 { animation: s14Wheel2 37.30s linear 4.80s infinite; }
@keyframes s14Wheel2 { from { stroke-dashoffset: 69.1; } to { stroke-dashoffset: 0; } }
.chapanim .s14-deck { stroke-dasharray: 145.6 218.4; }
.chapanim .s14-deck { animation: s14Deck 11.59s linear 5.60s infinite; }
@keyframes s14Deck { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* scene 15 -- the kennel */
.chapanim .s15-front { stroke-dasharray: 210.8 316.2; }
.chapanim .s15-front { animation: s15Front 11.30s linear 0.00s infinite; }
@keyframes s15Front { from { stroke-dashoffset: 527.1; } to { stroke-dashoffset: 0; } }
.chapanim .s15-mouth { stroke-dasharray: 123.2 184.8; }
.chapanim .s15-mouth { animation: s15Mouth 14.90s linear 0.80s infinite; }
@keyframes s15Mouth { from { stroke-dashoffset: 308.1; } to { stroke-dashoffset: 0; } }
.chapanim .s15-roofL { stroke-dasharray: 64.5 96.7; }
.chapanim .s15-roofL { animation: s15Roofl 18.70s linear 1.60s infinite; }
@keyframes s15Roofl { from { stroke-dashoffset: 161.2; } to { stroke-dashoffset: 0; } }
.chapanim .s15-roofR { stroke-dasharray: 64.5 96.7; }
.chapanim .s15-roofR { animation: s15Roofr 23.10s linear 2.40s infinite; }
@keyframes s15Roofr { from { stroke-dashoffset: 161.2; } to { stroke-dashoffset: 0; } }
.chapanim .s15-eaves { stroke-dasharray: 117.9 176.9; }
.chapanim .s15-eaves { animation: s15Eaves 27.50s linear 3.20s infinite; }
@keyframes s15Eaves { from { stroke-dashoffset: 294.8; } to { stroke-dashoffset: 0; } }
.chapanim .s15-board { stroke-dasharray: 103.5 155.2; }
.chapanim .s15-board { animation: s15Board 31.90s linear 4.00s infinite; }
@keyframes s15Board { from { stroke-dashoffset: 258.7; } to { stroke-dashoffset: 0; } }
.chapanim .s15-plank1 { stroke-dasharray: 33.7 50.5; }
.chapanim .s15-plank1 { animation: s15Plank1 37.30s linear 4.80s infinite; }
@keyframes s15Plank1 { from { stroke-dashoffset: 84.2; } to { stroke-dashoffset: 0; } }
.chapanim .s15-plank2 { stroke-dasharray: 33.7 50.5; }
.chapanim .s15-plank2 { animation: s15Plank2 11.59s linear 5.60s infinite; }
@keyframes s15Plank2 { from { stroke-dashoffset: 84.2; } to { stroke-dashoffset: 0; } }
.chapanim .s15-gnd { stroke-dasharray: 145.6 218.4; }
.chapanim .s15-gnd { animation: s15Gnd 15.19s linear 6.40s infinite; }
@keyframes s15Gnd { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* scene 16 -- the box she kept her toys in */
.chapanim .s16-box { stroke-dasharray: 286.6 429.9; }
.chapanim .s16-box { animation: s16Box 11.30s linear 0.00s infinite; }
@keyframes s16Box { from { stroke-dashoffset: 716.5; } to { stroke-dashoffset: 0; } }
.chapanim .s16-rim { stroke-dasharray: 212.5 318.7; }
.chapanim .s16-rim { animation: s16Rim 14.90s linear 0.80s infinite; }
@keyframes s16Rim { from { stroke-dashoffset: 531.2; } to { stroke-dashoffset: 0; } }
.chapanim .s16-lid { stroke-dasharray: 160.6 240.9; }
.chapanim .s16-lid { animation: s16Lid 18.70s linear 1.60s infinite; }
@keyframes s16Lid { from { stroke-dashoffset: 401.5; } to { stroke-dashoffset: 0; } }
.chapanim .s16-lidedge { stroke-dasharray: 99.8 149.8; }
.chapanim .s16-lidedge { animation: s16Lidedge 23.10s linear 2.40s infinite; }
@keyframes s16Lidedge { from { stroke-dashoffset: 249.6; } to { stroke-dashoffset: 0; } }
.chapanim .s16-hinge { stroke-dasharray: 21.4 32.0; }
.chapanim .s16-hinge { animation: s16Hinge 27.50s linear 3.20s infinite; }
@keyframes s16Hinge { from { stroke-dashoffset: 53.4; } to { stroke-dashoffset: 0; } }
.chapanim .s16-clasp { stroke-dasharray: 24.1 36.1; }
.chapanim .s16-clasp { animation: s16Clasp 31.90s linear 4.00s infinite; }
@keyframes s16Clasp { from { stroke-dashoffset: 60.2; } to { stroke-dashoffset: 0; } }
.chapanim .s16-dust { stroke-dasharray: 32.7 49.0; }
.chapanim .s16-dust { animation: s16Dust 37.30s linear 4.80s infinite; }
@keyframes s16Dust { from { stroke-dashoffset: 81.6; } to { stroke-dashoffset: 0; } }
.chapanim .s16-dust2 { stroke-dasharray: 21.8 32.8; }
.chapanim .s16-dust2 { animation: s16Dust2 11.59s linear 5.60s infinite; }
@keyframes s16Dust2 { from { stroke-dashoffset: 54.6; } to { stroke-dashoffset: 0; } }
.chapanim .s16-gnd { stroke-dasharray: 145.6 218.4; }
.chapanim .s16-gnd { animation: s16Gnd 15.19s linear 6.40s infinite; }
@keyframes s16Gnd { from { stroke-dashoffset: 364.0; } to { stroke-dashoffset: 0; } }
/* ---------- Peter Pan: the drawing above, the title below ----------
The division is made with padding rather than by pinning the label's top
edge. Pinned, a title sets more lines as the measure narrows and grows
downward out of the page, which is clipped stock; centred inside the lower
band it grows in both directions from the middle of the space it has, so
it has twice as far to go before it reaches an edge, and it reaches both
edges at once rather than silently losing its last line. */
.intropage { justify-content: center; padding-top: 66.4%; }
.intropage .intro-label { padding: 0 12%; }
.intropage .il-txt { font-size: 1.34em; line-height: 1.36; }
/* peterpan cover. Scoped under .cover-front. */
/* The reset every illustrated cover needs. Without it the engine
keeps its own 3px double gold border at inset 7%, which the
600x820 artwork overflows, and keeps rendering .cover-sub from
the book config, whose -joined words cannot wrap and run
off both edges. The SVG sets its own lettering. */
.cover-front .cover-frame { padding: 0; border: 0; }
.cover-front .cover-title { width: 100%; font-size: 1em; letter-spacing: 0; text-shadow: none; }
.cover-front svg.cvsvg { width: 100%; height: auto; display: block; }
.cover-front .cover-orn, .cover-front .cover-sub, .cover-front .cover-author { display: none; }
/* The engine also stamps an embossed border of its own on every
cover: .cover-inner::before repeats a diamond band along all
four edges at 2.2% inset, and ::after sets rosettes in the four
corners at 1.4%. Both are drawn as a dark copy offset against a
light one -- the emboss technique. On a full-bleed illustration
that reads as a frame the art is trapped inside, so it is off
here. The back cover keeps it. */
.cover-front .cover-inner::before,
.cover-front .cover-inner::after { display: none; }
.cover-front .cvsvg text { font-family: Georgia,'Times New Roman',serif; text-anchor: middle; }
.cover-front, .cover-back { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.055), rgba(255,255,255,0) 55%), linear-gradient(135deg, #182b1e 0%, #2c4a34 46%, #182b1e 100%); }
.cover-front .fay { transform-box: view-box; transform-origin: 50% 62%; }
.cover-front .m0 { transform-box: view-box; }
.cover-front .m1 { transform-box: view-box; }
.cover-front .m2 { transform-box: view-box; }
.cover-front .m3 { transform-box: view-box; }
.cover-front .m4 { transform-box: view-box; }
.cover-front .m5 { transform-box: view-box; }
.cover-front .m6 { transform-box: view-box; }
.cover-front .w0 { animation: cvBeat0 1.10s ease-in-out 0.00s infinite; }
@keyframes cvBeat0 { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.cover-front .w0 { transform-box: view-box; transform-origin: 286.0px 510.0px; }
.cover-front .w1 { animation: cvBeat1 1.10s ease-in-out 0.00s infinite; }
@keyframes cvBeat1 { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.cover-front .w1 { transform-box: view-box; transform-origin: 286.0px 510.0px; }
.cover-front .w2 { animation: cvBeat2 1.10s ease-in-out 0.00s infinite; }
@keyframes cvBeat2 { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.cover-front .w2 { transform-box: view-box; transform-origin: 301.0px 518.0px; }
.cover-front .w3 { animation: cvBeat3 1.10s ease-in-out 0.00s infinite; }
@keyframes cvBeat3 { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.cover-front .w3 { transform-box: view-box; transform-origin: 301.0px 518.0px; }
.cover-front .fay { animation: cvHover 3.70s ease-in-out 0.00s infinite; }
@keyframes cvHover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.cover-front .glint { animation: cvGlint 5.30s ease-in-out 0.00s infinite; }
@keyframes cvGlint { 0%,100% { opacity: .6; transform: scale(.84) rotate(0deg); } 50% { opacity: 1; transform: scale(1.14) rotate(24deg); } }
.cover-front .glint { transform-box: fill-box; transform-origin: center; }
.cover-front .halo { animation: cvHalo 9.70s ease-in-out 0.00s infinite; }
@keyframes cvHalo { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.cover-front .m0 { animation: cvMote0 2.30s cubic-bezier(.3,.5,.6,1) 0.00s infinite; }
@keyframes cvMote0 { 0% { transform: translate(406px, 428px) scale(.35); opacity: 0; } 18% { opacity: 1; } 72% { opacity: .85; } 100% { transform: translate(348px, 616px) scale(1.05); opacity: 0; } }
.cover-front .m1 { animation: cvMote1 2.90s cubic-bezier(.3,.5,.6,1) 0.61s infinite; }
@keyframes cvMote1 { 0% { transform: translate(406px, 428px) scale(.35); opacity: 0; } 18% { opacity: 1; } 72% { opacity: .85; } 100% { transform: translate(446px, 642px) scale(1.05); opacity: 0; } }
.cover-front .m2 { animation: cvMote2 3.30s cubic-bezier(.3,.5,.6,1) 1.22s infinite; }
@keyframes cvMote2 { 0% { transform: translate(406px, 428px) scale(.35); opacity: 0; } 18% { opacity: 1; } 72% { opacity: .85; } 100% { transform: translate(384px, 594px) scale(1.05); opacity: 0; } }
.cover-front .m3 { animation: cvMote3 4.10s cubic-bezier(.3,.5,.6,1) 1.83s infinite; }
@keyframes cvMote3 { 0% { transform: translate(406px, 428px) scale(.35); opacity: 0; } 18% { opacity: 1; } 72% { opacity: .85; } 100% { transform: translate(478px, 660px) scale(1.05); opacity: 0; } }
.cover-front .m4 { animation: cvMote4 4.70s cubic-bezier(.3,.5,.6,1) 2.44s infinite; }
@keyframes cvMote4 { 0% { transform: translate(406px, 428px) scale(.35); opacity: 0; } 18% { opacity: 1; } 72% { opacity: .85; } 100% { transform: translate(422px, 630px) scale(1.05); opacity: 0; } }
.cover-front .m5 { animation: cvMote5 5.90s cubic-bezier(.3,.5,.6,1) 3.05s infinite; }
@keyframes cvMote5 { 0% { transform: translate(406px, 428px) scale(.35); opacity: 0; } 18% { opacity: 1; } 72% { opacity: .85; } 100% { transform: translate(364px, 580px) scale(1.05); opacity: 0; } }
.cover-front .m6 { animation: cvMote6 6.70s cubic-bezier(.3,.5,.6,1) 3.66s infinite; }
@keyframes cvMote6 { 0% { transform: translate(406px, 428px) scale(.35); opacity: 0; } 18% { opacity: 1; } 72% { opacity: .85; } 100% { transform: translate(460px, 650px) scale(1.05); opacity: 0; } }
.cover-front .t0 { opacity:0; animation: cvT0 1.00s cubic-bezier(.22,.9,.3,1) 0.30s both; }
@keyframes cvT0 { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
.cover-front .t1 { opacity:0; animation: cvT1 1.00s cubic-bezier(.22,.9,.3,1) 0.50s both; }
@keyframes cvT1 { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
.cover-front .t2 { opacity:0; animation: cvT2 1.00s cubic-bezier(.22,.9,.3,1) 0.70s both; }
@keyframes cvT2 { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
.cover-front .rul { opacity:0; animation: cvRule 0.90s ease-out 0.90s both; }
@keyframes cvRule { from { opacity:0; transform:scaleX(.06); } to { opacity:.9; transform:none; } }
.cover-front .rul { transform-origin:center; }
.cover-front .byl { opacity:0; animation: cvByl 1.20s ease-out 2.60s both; }
@keyframes cvByl { from { opacity:0; } to { opacity:1; } }
.cover-front .ftr { opacity:0; animation: cvFtr 1.20s ease-out 3.00s both; }
@keyframes cvFtr { from { opacity:0; } to { opacity:1; } }
.cover-front .r2 { animation: cvRuleGlow 14.30s ease-in-out 1.40s infinite; }
@keyframes cvRuleGlow { 0%,100% { stroke-opacity:.75; } 50% { stroke-opacity:1; } }
.cover-front .d0 { animation: cvDot0 6.40s ease-in-out 1.10s infinite; }
@keyframes cvDot0 { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.cover-front .d1 { animation: cvDot1 7.23s ease-in-out 1.57s infinite; }
@keyframes cvDot1 { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.cover-front .d2 { animation: cvDot2 8.06s ease-in-out 2.04s infinite; }
@keyframes cvDot2 { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.cover-front .d3 { animation: cvDot3 8.89s ease-in-out 2.51s infinite; }
@keyframes cvDot3 { 0%,100% { opacity:.6; } 50% { opacity:1; } }