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; } /* A PROSE EPIGRAPH -- the motto at the head of a chapter when it is a paragraph rather than a line of verse. Indented on both sides so the measure is visibly narrower than the text it stands over, which is what tells the eye it is a quotation and not the chapter's first paragraph. */ .epig { margin: 1.15em 7% 1.5em; text-indent: 0; font-style: italic; font-size: .9em; line-height: 1.6; color: #4a3b28; text-align: justify; } .epig + .epig { margin-top: -.7em; } /* a quotation and its translation */ .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; } /* ---------- full-page plate ---------- A leaf given over entirely to one picture. No folio, no text envelope, nothing beside it. object-fit: contain is what keeps the plate honest: the image is fitted INSIDE the leaf whatever its proportions, so a wide plan and a tall portrait are both shown whole rather than cropped to fill. The inset leaves the paper's own margin showing as a mount. */ .paper.plateleaf { overflow: hidden; } .fullimg { position: absolute; inset: 7% 8%; display: flex; align-items: center; justify-content: center; } /* A CAPTIONED PLATE. The uncaptioned rules above are left exactly as they were; these only take effect when the block carries a caption, so the plates in the two earlier books render identically. The figure becomes the flex child and stacks picture over caption, and the picture's own max-height is reduced to leave the caption room on the leaf. */ .fullimg.hascap figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; } .fullimg.hascap img { max-height: 86%; } .platecap { margin-top: .9em; padding: 0 4%; text-align: center; font-style: italic; font-family: Georgia,'Palatino Linotype',serif; font-size: .84em; line-height: 1.45; color: #6b5a3e; } .fullimg img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* the plates in this series are line blocks on white; a soft border and a little shadow sit them on the cream stock instead of letting them float as a bright rectangle */ background: #fdfaf2; padding: 2.2%; border: 1px solid rgba(122, 100, 60, .45); box-shadow: 0 2px 10px rgba(84, 26, 18, .18); } .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; } /* A SECTION HEAD -- the third level of division, added for The Theory of Moral Sentiments, which sets Part over Section over Chapter. It has to read as LARGER than a chapter head and SMALLER than a Part leaf, and the way it does that is by being ruled rather than by being loud: rules above and below mark it as a boundary, while the type stays close to the chapter head's size so the page does not acquire a second shouting voice. */ .sect { margin: 1.6em 4% 1.4em; text-align: center; border-top: 1.2px solid #c3b291; border-bottom: 1.2px solid #c3b291; padding: .55em 0 .6em; } .sect-num { display: block; font-variant: small-caps; letter-spacing: .16em; font-size: .82em; color: #8a7350; margin-bottom: .18em; } .sect-ttl { display: block; font-style: italic; font-size: 1.02em; line-height: 1.45; color: #4a3b28; } /* AN EPIGRAPH WITH ITS SOURCE, SET AS ONE OBJECT. Udolpho heads every one of its 57 chapters with a quotation and names the poet under it, and eight more stand inside the prose. The lines are centred italic like .verse; the rule beneath is what separates the quotation from the chapter it stands over, and the source is set small and spaced so that it reads as a signature rather than as a last line of the poem. Measured as one block by the paginator, so a poet is never left stranded at the top of the following page. */ .motto { margin: 1.15em 8% 1.6em; text-indent: 0; } .motto-v { text-align: center; font-style: italic; font-size: .93em; line-height: 1.6; color: #4a3b28; } .motto-src { margin-top: .45em; padding-top: .4em; border-top: 1px solid rgba(150,124,74,.42); text-align: center; font-style: normal; font-variant: small-caps; letter-spacing: .15em; text-indent: .15em; font-size: .74em; color: #8a7350; } /* Directly under a chapter head the motto wants a little more air above it and a shade less below, so the quotation sits with the heading rather than floating between the heading and the first paragraph. */ .chead + .motto { margin-top: 1.5em; margin-bottom: 1.9em; } /* ---------- 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 winter fire he sits over, and swears by */ .chapanim .s0-mantel { stroke-dasharray: 144.0 216.0; } .chapanim .s0-mantel { animation: s0Mantel 12.10s linear 0.00s infinite; } @keyframes s0Mantel { from { stroke-dashoffset: 360.0; } to { stroke-dashoffset: 0; } } .chapanim .s0-shelf { stroke-dasharray: 133.2 199.8; } .chapanim .s0-shelf { animation: s0Shelf 15.70s linear 0.80s infinite; } @keyframes s0Shelf { from { stroke-dashoffset: 333.0; } to { stroke-dashoffset: 0; } } .chapanim .s0-jambL { stroke-dasharray: 112.5 168.8; } .chapanim .s0-jambL { animation: s0Jambl 19.30s linear 1.60s infinite; } @keyframes s0Jambl { from { stroke-dashoffset: 281.2; } to { stroke-dashoffset: 0; } } .chapanim .s0-jambR { stroke-dasharray: 112.5 168.8; } .chapanim .s0-jambR { animation: s0Jambr 24.50s linear 2.40s infinite; } @keyframes s0Jambr { from { stroke-dashoffset: 281.2; } to { stroke-dashoffset: 0; } } .chapanim .s0-hearth { stroke-dasharray: 129.6 194.4; } .chapanim .s0-hearth { animation: s0Hearth 28.90s linear 3.20s infinite; } @keyframes s0Hearth { from { stroke-dashoffset: 324.0; } to { stroke-dashoffset: 0; } } .chapanim .s0-grate { stroke-dasharray: 254.7 382.1; } .chapanim .s0-grate { animation: s0Grate 33.10s linear 4.00s infinite; } @keyframes s0Grate { from { stroke-dashoffset: 636.8; } to { stroke-dashoffset: 0; } } .chapanim .s0-basket { stroke-dasharray: 110.2 165.3; } .chapanim .s0-basket { animation: s0Basket 38.70s linear 4.80s infinite; } @keyframes s0Basket { from { stroke-dashoffset: 275.5; } to { stroke-dashoffset: 0; } } .chapanim .s0-flameA { stroke-dasharray: 68.9 103.4; } .chapanim .s0-flameA { animation: s0Flamea 12.41s linear 5.60s infinite; } @keyframes s0Flamea { from { stroke-dashoffset: 172.3; } to { stroke-dashoffset: 0; } } .chapanim .s0-flameB { stroke-dasharray: 82.9 124.3; } .chapanim .s0-flameB { animation: s0Flameb 16.01s linear 6.40s infinite; } @keyframes s0Flameb { from { stroke-dashoffset: 207.2; } to { stroke-dashoffset: 0; } } .chapanim .s0-flameC { stroke-dasharray: 47.7 71.5; } .chapanim .s0-flameC { animation: s0Flamec 19.61s linear 7.20s infinite; } @keyframes s0Flamec { from { stroke-dashoffset: 119.2; } to { stroke-dashoffset: 0; } } /* scene 1 -- the letter from Paris, folded in three and unsigned */ .chapanim .s1-sheet { stroke-dasharray: 462.1 693.1; } .chapanim .s1-sheet { animation: s1Sheet 12.17s linear 0.00s infinite; } @keyframes s1Sheet { from { stroke-dashoffset: 1155.2; } to { stroke-dashoffset: 0; } } .chapanim .s1-fold1 { stroke-dasharray: 104.6 157.0; } .chapanim .s1-fold1 { animation: s1Fold1 15.77s linear 0.80s infinite; } @keyframes s1Fold1 { from { stroke-dashoffset: 261.6; } to { stroke-dashoffset: 0; } } .chapanim .s1-fold2 { stroke-dasharray: 104.6 157.0; } .chapanim .s1-fold2 { animation: s1Fold2 19.37s linear 1.60s infinite; } @keyframes s1Fold2 { from { stroke-dashoffset: 261.6; } to { stroke-dashoffset: 0; } } .chapanim .s1-lines { stroke-dasharray: 347.4 521.1; } .chapanim .s1-lines { animation: s1Lines 24.57s linear 2.40s infinite; } @keyframes s1Lines { from { stroke-dashoffset: 868.5; } to { stroke-dashoffset: 0; } } .chapanim .s1-more { stroke-dasharray: 317.3 475.9; } .chapanim .s1-more { animation: s1More 28.97s linear 3.20s infinite; } @keyframes s1More { from { stroke-dashoffset: 793.1; } to { stroke-dashoffset: 0; } } .chapanim .s1-short { stroke-dasharray: 34.3 51.5; } .chapanim .s1-short { animation: s1Short 33.17s linear 4.00s infinite; } @keyframes s1Short { from { stroke-dashoffset: 85.8; } to { stroke-dashoffset: 0; } } /* scene 2 -- the bull's-eye lantern William puts in his pocket */ .chapanim .s2-body { stroke-dasharray: 307.2 460.8; } .chapanim .s2-body { animation: s2Body 12.24s linear 0.00s infinite; } @keyframes s2Body { from { stroke-dashoffset: 768.0; } to { stroke-dashoffset: 0; } } .chapanim .s2-foot { stroke-dasharray: 197.2 295.8; } .chapanim .s2-foot { animation: s2Foot 15.84s linear 0.80s infinite; } @keyframes s2Foot { from { stroke-dashoffset: 493.1; } to { stroke-dashoffset: 0; } } .chapanim .s2-dome { stroke-dasharray: 101.7 152.6; } .chapanim .s2-dome { animation: s2Dome 19.44s linear 1.60s infinite; } @keyframes s2Dome { from { stroke-dashoffset: 254.3; } to { stroke-dashoffset: 0; } } .chapanim .s2-vent { stroke-dasharray: 60.8 91.2; } .chapanim .s2-vent { animation: s2Vent 24.64s linear 2.40s infinite; } @keyframes s2Vent { from { stroke-dashoffset: 152.0; } to { stroke-dashoffset: 0; } } .chapanim .s2-bail { stroke-dasharray: 95.9 143.8; } .chapanim .s2-bail { animation: s2Bail 29.04s linear 3.20s infinite; } @keyframes s2Bail { from { stroke-dashoffset: 239.7; } to { stroke-dashoffset: 0; } } .chapanim .s2-lens { stroke-dasharray: 155.5 233.3; } .chapanim .s2-lens { animation: s2Lens 33.24s linear 4.00s infinite; } @keyframes s2Lens { from { stroke-dashoffset: 388.8; } to { stroke-dashoffset: 0; } } .chapanim .s2-lensin { stroke-dasharray: 120.4 180.6; } .chapanim .s2-lensin { animation: s2Lensin 38.77s linear 4.80s infinite; } @keyframes s2Lensin { from { stroke-dashoffset: 301.0; } to { stroke-dashoffset: 0; } } .chapanim .s2-barV { stroke-dasharray: 49.6 74.4; } .chapanim .s2-barV { animation: s2Barv 12.48s linear 5.60s infinite; } @keyframes s2Barv { from { stroke-dashoffset: 124.0; } to { stroke-dashoffset: 0; } } .chapanim .s2-barH { stroke-dasharray: 49.6 74.4; } .chapanim .s2-barH { animation: s2Barh 16.08s linear 6.40s infinite; } @keyframes s2Barh { from { stroke-dashoffset: 124.0; } to { stroke-dashoffset: 0; } } .chapanim .s2-slide { stroke-dasharray: 56.0 84.0; } .chapanim .s2-slide { animation: s2Slide 19.68s linear 7.20s infinite; } @keyframes s2Slide { from { stroke-dashoffset: 140.0; } to { stroke-dashoffset: 0; } } /* scene 3 -- the laudanum bottle, and the sixty drops counted out */ .chapanim .s3-body { stroke-dasharray: 213.5 320.3; } .chapanim .s3-body { animation: s3Body 12.24s linear 0.00s infinite; } @keyframes s3Body { from { stroke-dashoffset: 533.8; } to { stroke-dashoffset: 0; } } .chapanim .s3-shoulder { stroke-dasharray: 90.8 136.2; } .chapanim .s3-shoulder { animation: s3Shoulder 15.91s linear 0.80s infinite; } @keyframes s3Shoulder { from { stroke-dashoffset: 227.1; } to { stroke-dashoffset: 0; } } .chapanim .s3-neck { stroke-dasharray: 52.1 78.2; } .chapanim .s3-neck { animation: s3Neck 19.51s linear 1.60s infinite; } @keyframes s3Neck { from { stroke-dashoffset: 130.3; } to { stroke-dashoffset: 0; } } .chapanim .s3-stopper { stroke-dasharray: 91.7 137.6; } .chapanim .s3-stopper { animation: s3Stopper 24.71s linear 2.40s infinite; } @keyframes s3Stopper { from { stroke-dashoffset: 229.3; } to { stroke-dashoffset: 0; } } .chapanim .s3-label { stroke-dasharray: 173.8 260.7; } .chapanim .s3-label { animation: s3Label 29.11s linear 3.20s infinite; } @keyframes s3Label { from { stroke-dashoffset: 434.5; } to { stroke-dashoffset: 0; } } .chapanim .s3-lettering { stroke-dasharray: 131.1 196.7; } .chapanim .s3-lettering { animation: s3Lettering 33.31s linear 4.00s infinite; } @keyframes s3Lettering { from { stroke-dashoffset: 327.9; } to { stroke-dashoffset: 0; } } .chapanim .s3-level { stroke-dasharray: 69.5 104.3; } .chapanim .s3-level { animation: s3Level 38.84s linear 4.80s infinite; } @keyframes s3Level { from { stroke-dashoffset: 173.8; } to { stroke-dashoffset: 0; } } .chapanim .s3-grads { stroke-dasharray: 82.9 124.4; } .chapanim .s3-grads { animation: s3Grads 12.55s linear 5.60s infinite; } @keyframes s3Grads { from { stroke-dashoffset: 207.4; } to { stroke-dashoffset: 0; } } /* scene 4 -- the carriage lamp that came up the road at last */ .chapanim .s4-case { stroke-dasharray: 186.1 279.2; } .chapanim .s4-case { animation: s4Case 12.31s linear 0.00s infinite; } @keyframes s4Case { from { stroke-dashoffset: 465.3; } to { stroke-dashoffset: 0; } } .chapanim .s4-glass { stroke-dasharray: 170.1 255.2; } .chapanim .s4-glass { animation: s4Glass 15.98s linear 0.80s infinite; } @keyframes s4Glass { from { stroke-dashoffset: 425.4; } to { stroke-dashoffset: 0; } } .chapanim .s4-bevelA { stroke-dasharray: 64.1 96.2; } .chapanim .s4-bevelA { animation: s4Bevela 19.58s linear 1.60s infinite; } @keyframes s4Bevela { from { stroke-dashoffset: 160.4; } to { stroke-dashoffset: 0; } } .chapanim .s4-flame { stroke-dasharray: 52.1 78.2; } .chapanim .s4-flame { animation: s4Flame 24.78s linear 2.40s infinite; } @keyframes s4Flame { from { stroke-dashoffset: 130.3; } to { stroke-dashoffset: 0; } } .chapanim .s4-cap { stroke-dasharray: 55.0 82.4; } .chapanim .s4-cap { animation: s4Cap 29.18s linear 3.20s infinite; } @keyframes s4Cap { from { stroke-dashoffset: 137.4; } to { stroke-dashoffset: 0; } } .chapanim .s4-vent { stroke-dasharray: 31.5 47.3; } .chapanim .s4-vent { animation: s4Vent 33.38s linear 4.00s infinite; } @keyframes s4Vent { from { stroke-dashoffset: 78.8; } to { stroke-dashoffset: 0; } } .chapanim .s4-finial { stroke-dasharray: 27.2 40.8; } .chapanim .s4-finial { animation: s4Finial 38.91s linear 4.80s infinite; } @keyframes s4Finial { from { stroke-dashoffset: 67.9; } to { stroke-dashoffset: 0; } } .chapanim .s4-arm { stroke-dasharray: 62.2 93.3; } .chapanim .s4-arm { animation: s4Arm 12.62s linear 5.60s infinite; } @keyframes s4Arm { from { stroke-dashoffset: 155.6; } to { stroke-dashoffset: 0; } } .chapanim .s4-bolt { stroke-dasharray: 19.8 29.6; } .chapanim .s4-bolt { animation: s4Bolt 16.15s linear 6.40s infinite; } @keyframes s4Bolt { from { stroke-dashoffset: 49.4; } to { stroke-dashoffset: 0; } } .chapanim .s4-plate { stroke-dasharray: 55.1 82.7; } .chapanim .s4-plate { animation: s4Plate 19.75s linear 7.20s infinite; } @keyframes s4Plate { from { stroke-dashoffset: 137.8; } to { stroke-dashoffset: 0; } } .chapanim .s4-snow { stroke-dasharray: 114.1 171.1; } .chapanim .s4-snow { animation: s4Snow 24.81s linear 8.00s infinite; } @keyframes s4Snow { from { stroke-dashoffset: 285.1; } to { stroke-dashoffset: 0; } } /* scene 5 -- the thermometer outside the window, at twelve degrees of frost */ .chapanim .s5-plate { stroke-dasharray: 353.9 530.9; } .chapanim .s5-plate { animation: s5Plate 12.38s linear 0.00s infinite; } @keyframes s5Plate { from { stroke-dashoffset: 884.8; } to { stroke-dashoffset: 0; } } .chapanim .s5-tube { stroke-dasharray: 92.7 139.0; } .chapanim .s5-tube { animation: s5Tube 16.05s linear 0.80s infinite; } @keyframes s5Tube { from { stroke-dashoffset: 231.7; } to { stroke-dashoffset: 0; } } .chapanim .s5-bulb { stroke-dasharray: 63.4 95.1; } .chapanim .s5-bulb { animation: s5Bulb 19.65s linear 1.60s infinite; } @keyframes s5Bulb { from { stroke-dashoffset: 158.5; } to { stroke-dashoffset: 0; } } .chapanim .s5-column { stroke-dasharray: 25.3 37.9; } .chapanim .s5-column { animation: s5Column 24.85s linear 2.40s infinite; } @keyframes s5Column { from { stroke-dashoffset: 63.2; } to { stroke-dashoffset: 0; } } .chapanim .s5-scaleL { stroke-dasharray: 188.8 283.1; } .chapanim .s5-scaleL { animation: s5Scalel 29.25s linear 3.20s infinite; } @keyframes s5Scalel { from { stroke-dashoffset: 471.9; } to { stroke-dashoffset: 0; } } .chapanim .s5-scaleR { stroke-dasharray: 128.9 193.4; } .chapanim .s5-scaleR { animation: s5Scaler 33.45s linear 4.00s infinite; } @keyframes s5Scaler { from { stroke-dashoffset: 322.3; } to { stroke-dashoffset: 0; } } /* scene 6 -- icicles going off the eave as the thaw begins */ .chapanim .s6-eave { stroke-dasharray: 135.5 203.3; } .chapanim .s6-eave { animation: s6Eave 12.45s linear 0.00s infinite; } @keyframes s6Eave { from { stroke-dashoffset: 338.8; } to { stroke-dashoffset: 0; } } .chapanim .s6-course { stroke-dasharray: 135.5 203.3; } .chapanim .s6-course { animation: s6Course 16.12s linear 0.80s infinite; } @keyframes s6Course { from { stroke-dashoffset: 338.8; } to { stroke-dashoffset: 0; } } .chapanim .s6-ice0 { stroke-dasharray: 146.1 219.2; } .chapanim .s6-ice0 { animation: s6Ice0 19.72s linear 1.60s infinite; } @keyframes s6Ice0 { from { stroke-dashoffset: 365.4; } to { stroke-dashoffset: 0; } } .chapanim .s6-ice1 { stroke-dasharray: 205.8 308.7; } .chapanim .s6-ice1 { animation: s6Ice1 24.92s linear 2.40s infinite; } @keyframes s6Ice1 { from { stroke-dashoffset: 514.4; } to { stroke-dashoffset: 0; } } .chapanim .s6-ice2 { stroke-dasharray: 109.7 164.6; } .chapanim .s6-ice2 { animation: s6Ice2 29.32s linear 3.20s infinite; } @keyframes s6Ice2 { from { stroke-dashoffset: 274.3; } to { stroke-dashoffset: 0; } } .chapanim .s6-ice3 { stroke-dasharray: 174.3 261.4; } .chapanim .s6-ice3 { animation: s6Ice3 33.52s linear 4.00s infinite; } @keyframes s6Ice3 { from { stroke-dashoffset: 435.7; } to { stroke-dashoffset: 0; } } .chapanim .s6-ice4 { stroke-dasharray: 129.5 194.3; } .chapanim .s6-ice4 { animation: s6Ice4 38.98s linear 4.80s infinite; } @keyframes s6Ice4 { from { stroke-dashoffset: 323.8; } to { stroke-dashoffset: 0; } } .chapanim .s6-drip { stroke-dasharray: 27.3 41.0; } .chapanim .s6-drip { animation: s6Drip 12.69s linear 5.60s infinite; } @keyframes s6Drip { from { stroke-dashoffset: 68.4; } to { stroke-dashoffset: 0; } } /* scene 7 -- the drawstring bag of sovereigns changed at the bankers' */ .chapanim .s7-bag { stroke-dasharray: 262.1 393.1; } .chapanim .s7-bag { animation: s7Bag 12.52s linear 0.00s infinite; } @keyframes s7Bag { from { stroke-dashoffset: 655.2; } to { stroke-dashoffset: 0; } } .chapanim .s7-neck { stroke-dasharray: 69.7 104.6; } .chapanim .s7-neck { animation: s7Neck 16.19s linear 0.80s infinite; } @keyframes s7Neck { from { stroke-dashoffset: 174.3; } to { stroke-dashoffset: 0; } } .chapanim .s7-tie { stroke-dasharray: 67.0 100.5; } .chapanim .s7-tie { animation: s7Tie 19.79s linear 1.60s infinite; } @keyframes s7Tie { from { stroke-dashoffset: 167.5; } to { stroke-dashoffset: 0; } } .chapanim .s7-coin0 { stroke-dasharray: 65.4 98.1; } .chapanim .s7-coin0 { animation: s7Coin0 24.99s linear 2.40s infinite; } @keyframes s7Coin0 { from { stroke-dashoffset: 163.5; } to { stroke-dashoffset: 0; } } .chapanim .s7-coin1 { stroke-dasharray: 65.4 98.1; } .chapanim .s7-coin1 { animation: s7Coin1 29.39s linear 3.20s infinite; } @keyframes s7Coin1 { from { stroke-dashoffset: 163.5; } to { stroke-dashoffset: 0; } } .chapanim .s7-coin2 { stroke-dasharray: 65.4 98.1; } .chapanim .s7-coin2 { animation: s7Coin2 33.59s linear 4.00s infinite; } @keyframes s7Coin2 { from { stroke-dashoffset: 163.5; } to { stroke-dashoffset: 0; } } /* scene 8 -- the open-work iron gate into the patio */ .chapanim .s8-frame { stroke-dasharray: 391.3 587.0; } .chapanim .s8-frame { animation: s8Frame 12.59s linear 0.00s infinite; } @keyframes s8Frame { from { stroke-dashoffset: 978.4; } to { stroke-dashoffset: 0; } } .chapanim .s8-arch { stroke-dasharray: 103.7 155.5; } .chapanim .s8-arch { animation: s8Arch 16.26s linear 0.80s infinite; } @keyframes s8Arch { from { stroke-dashoffset: 259.2; } to { stroke-dashoffset: 0; } } .chapanim .s8-bar0 { stroke-dasharray: 94.3 141.4; } .chapanim .s8-bar0 { animation: s8Bar0 19.86s linear 1.60s infinite; } @keyframes s8Bar0 { from { stroke-dashoffset: 235.7; } to { stroke-dashoffset: 0; } } .chapanim .s8-bar1 { stroke-dasharray: 94.3 141.4; } .chapanim .s8-bar1 { animation: s8Bar1 25.06s linear 2.40s infinite; } @keyframes s8Bar1 { from { stroke-dashoffset: 235.7; } to { stroke-dashoffset: 0; } } .chapanim .s8-bar2 { stroke-dasharray: 94.3 141.4; } .chapanim .s8-bar2 { animation: s8Bar2 29.46s linear 3.20s infinite; } @keyframes s8Bar2 { from { stroke-dashoffset: 235.7; } to { stroke-dashoffset: 0; } } .chapanim .s8-bar3 { stroke-dasharray: 94.3 141.4; } .chapanim .s8-bar3 { animation: s8Bar3 33.66s linear 4.00s infinite; } @keyframes s8Bar3 { from { stroke-dashoffset: 235.7; } to { stroke-dashoffset: 0; } } .chapanim .s8-bar4 { stroke-dasharray: 94.3 141.4; } .chapanim .s8-bar4 { animation: s8Bar4 39.05s linear 4.80s infinite; } @keyframes s8Bar4 { from { stroke-dashoffset: 235.7; } to { stroke-dashoffset: 0; } } .chapanim .s8-railA { stroke-dasharray: 82.8 124.3; } .chapanim .s8-railA { animation: s8Raila 12.76s linear 5.60s infinite; } @keyframes s8Raila { from { stroke-dashoffset: 207.1; } to { stroke-dashoffset: 0; } } .chapanim .s8-railB { stroke-dasharray: 82.8 124.3; } .chapanim .s8-railB { animation: s8Railb 16.22s linear 6.40s infinite; } @keyframes s8Railb { from { stroke-dashoffset: 207.1; } to { stroke-dashoffset: 0; } } /* scene 9 -- the Giralda, standing over Seville */ .chapanim .s9-shaft { stroke-dasharray: 204.6 307.0; } .chapanim .s9-shaft { animation: s9Shaft 12.66s linear 0.00s infinite; } @keyframes s9Shaft { from { stroke-dashoffset: 511.6; } to { stroke-dashoffset: 0; } } .chapanim .s9-winL0 { stroke-dasharray: 35.3 53.0; } .chapanim .s9-winL0 { animation: s9Winl0 16.33s linear 0.80s infinite; } @keyframes s9Winl0 { from { stroke-dashoffset: 88.3; } to { stroke-dashoffset: 0; } } .chapanim .s9-winR0 { stroke-dasharray: 35.3 53.0; } .chapanim .s9-winR0 { animation: s9Winr0 19.93s linear 1.60s infinite; } @keyframes s9Winr0 { from { stroke-dashoffset: 88.3; } to { stroke-dashoffset: 0; } } .chapanim .s9-winL1 { stroke-dasharray: 35.3 53.0; } .chapanim .s9-winL1 { animation: s9Winl1 25.13s linear 2.40s infinite; } @keyframes s9Winl1 { from { stroke-dashoffset: 88.3; } to { stroke-dashoffset: 0; } } .chapanim .s9-winR1 { stroke-dasharray: 35.3 53.0; } .chapanim .s9-winR1 { animation: s9Winr1 29.53s linear 3.20s infinite; } @keyframes s9Winr1 { from { stroke-dashoffset: 88.3; } to { stroke-dashoffset: 0; } } .chapanim .s9-winL2 { stroke-dasharray: 35.3 53.0; } .chapanim .s9-winL2 { animation: s9Winl2 33.73s linear 4.00s infinite; } @keyframes s9Winl2 { from { stroke-dashoffset: 88.3; } to { stroke-dashoffset: 0; } } .chapanim .s9-winR2 { stroke-dasharray: 35.3 53.0; } .chapanim .s9-winR2 { animation: s9Winr2 39.12s linear 4.80s infinite; } @keyframes s9Winr2 { from { stroke-dashoffset: 88.3; } to { stroke-dashoffset: 0; } } .chapanim .s9-cornice { stroke-dasharray: 54.2 81.3; } .chapanim .s9-cornice { animation: s9Cornice 12.83s linear 5.60s infinite; } @keyframes s9Cornice { from { stroke-dashoffset: 135.4; } to { stroke-dashoffset: 0; } } .chapanim .s9-belfry { stroke-dasharray: 75.2 112.9; } .chapanim .s9-belfry { animation: s9Belfry 16.29s linear 6.40s infinite; } @keyframes s9Belfry { from { stroke-dashoffset: 188.1; } to { stroke-dashoffset: 0; } } .chapanim .s9-bellop { stroke-dasharray: 43.7 65.5; } .chapanim .s9-bellop { animation: s9Bellop 19.82s linear 7.20s infinite; } @keyframes s9Bellop { from { stroke-dashoffset: 109.2; } to { stroke-dashoffset: 0; } } .chapanim .s9-step { stroke-dasharray: 37.6 56.4; } .chapanim .s9-step { animation: s9Step 24.88s linear 8.00s infinite; } @keyframes s9Step { from { stroke-dashoffset: 94.0; } to { stroke-dashoffset: 0; } } .chapanim .s9-lantern { stroke-dasharray: 31.6 47.4; } .chapanim .s9-lantern { animation: s9Lantern 29.21s linear 8.80s infinite; } @keyframes s9Lantern { from { stroke-dashoffset: 79.0; } to { stroke-dashoffset: 0; } } .chapanim .s9-vane { stroke-dasharray: 9.8 14.7; } .chapanim .s9-vane { animation: s9Vane 33.41s linear 9.60s infinite; } @keyframes s9Vane { from { stroke-dashoffset: 24.5; } to { stroke-dashoffset: 0; } } .chapanim .s9-vanefig { stroke-dasharray: 25.1 37.6; } .chapanim .s9-vanefig { animation: s9Vanefig 39.01s linear 10.40s infinite; } @keyframes s9Vanefig { from { stroke-dashoffset: 62.6; } to { stroke-dashoffset: 0; } } /* scene 10 -- the louvred shutters of the room, half closed */ .chapanim .s10-caseL { stroke-dasharray: 366.1 549.1; } .chapanim .s10-caseL { animation: s10Casel 12.73s linear 0.00s infinite; } @keyframes s10Casel { from { stroke-dashoffset: 915.2; } to { stroke-dashoffset: 0; } } .chapanim .s10-caseR { stroke-dasharray: 366.1 549.1; } .chapanim .s10-caseR { animation: s10Caser 16.40s linear 0.80s infinite; } @keyframes s10Caser { from { stroke-dashoffset: 915.2; } to { stroke-dashoffset: 0; } } .chapanim .s10-slatsL { stroke-dasharray: 621.3 932.0; } .chapanim .s10-slatsL { animation: s10Slatsl 20.00s linear 1.60s infinite; } @keyframes s10Slatsl { from { stroke-dashoffset: 1553.3; } to { stroke-dashoffset: 0; } } .chapanim .s10-slatsR { stroke-dasharray: 621.3 932.0; } .chapanim .s10-slatsR { animation: s10Slatsr 25.20s linear 2.40s infinite; } @keyframes s10Slatsr { from { stroke-dashoffset: 1553.3; } to { stroke-dashoffset: 0; } } .chapanim .s10-hingeA { stroke-dasharray: 23.2 34.7; } .chapanim .s10-hingeA { animation: s10Hingea 29.60s linear 3.20s infinite; } @keyframes s10Hingea { from { stroke-dashoffset: 57.9; } to { stroke-dashoffset: 0; } } .chapanim .s10-hingeB { stroke-dasharray: 23.2 34.7; } .chapanim .s10-hingeB { animation: s10Hingeb 33.80s linear 4.00s infinite; } @keyframes s10Hingeb { from { stroke-dashoffset: 57.9; } to { stroke-dashoffset: 0; } } .chapanim .s10-latch { stroke-dasharray: 8.2 12.3; } .chapanim .s10-latch { animation: s10Latch 39.19s linear 4.80s infinite; } @keyframes s10Latch { from { stroke-dashoffset: 20.5; } to { stroke-dashoffset: 0; } } /* scene 11 -- the newspaper, folded, with the paragraph set apart in it */ .chapanim .s11-sheet { stroke-dasharray: 501.5 752.3; } .chapanim .s11-sheet { animation: s11Sheet 12.17s linear 0.00s infinite; } @keyframes s11Sheet { from { stroke-dashoffset: 1253.8; } to { stroke-dashoffset: 0; } } .chapanim .s11-spine { stroke-dasharray: 126.4 189.6; } .chapanim .s11-spine { animation: s11Spine 16.47s linear 0.80s infinite; } @keyframes s11Spine { from { stroke-dashoffset: 316.0; } to { stroke-dashoffset: 0; } } .chapanim .s11-head { stroke-dasharray: 113.3 170.0; } .chapanim .s11-head { animation: s11Head 20.07s linear 1.60s infinite; } @keyframes s11Head { from { stroke-dashoffset: 283.3; } to { stroke-dashoffset: 0; } } .chapanim .s11-colA { stroke-dasharray: 511.7 767.6; } .chapanim .s11-colA { animation: s11Cola 25.27s linear 2.40s infinite; } @keyframes s11Cola { from { stroke-dashoffset: 1279.3; } to { stroke-dashoffset: 0; } } .chapanim .s11-colB { stroke-dasharray: 274.6 411.9; } .chapanim .s11-colB { animation: s11Colb 29.67s linear 3.20s infinite; } @keyframes s11Colb { from { stroke-dashoffset: 686.5; } to { stroke-dashoffset: 0; } } .chapanim .s11-para { stroke-dasharray: 167.4 251.1; } .chapanim .s11-para { animation: s11Para 33.87s linear 4.00s infinite; } @keyframes s11Para { from { stroke-dashoffset: 418.4; } to { stroke-dashoffset: 0; } } .chapanim .s11-paraln { stroke-dasharray: 190.0 285.1; } .chapanim .s11-paraln { animation: s11Paraln 39.26s linear 4.80s infinite; } @keyframes s11Paraln { from { stroke-dashoffset: 475.1; } to { stroke-dashoffset: 0; } } /* scene 12 -- the fountain and the white marble basin */ .chapanim .s12-basin { stroke-dasharray: 239.3 359.0; } .chapanim .s12-basin { animation: s12Basin 12.80s linear 0.00s infinite; } @keyframes s12Basin { from { stroke-dashoffset: 598.4; } to { stroke-dashoffset: 0; } } .chapanim .s12-basinin { stroke-dasharray: 199.9 299.8; } .chapanim .s12-basinin { animation: s12Basinin 16.54s linear 0.80s infinite; } @keyframes s12Basinin { from { stroke-dashoffset: 499.7; } to { stroke-dashoffset: 0; } } .chapanim .s12-stem { stroke-dasharray: 54.7 82.1; } .chapanim .s12-stem { animation: s12Stem 20.14s linear 1.60s infinite; } @keyframes s12Stem { from { stroke-dashoffset: 136.8; } to { stroke-dashoffset: 0; } } .chapanim .s12-bowl { stroke-dasharray: 52.4 78.6; } .chapanim .s12-bowl { animation: s12Bowl 25.34s linear 2.40s infinite; } @keyframes s12Bowl { from { stroke-dashoffset: 131.0; } to { stroke-dashoffset: 0; } } .chapanim .s12-jetA { stroke-dasharray: 68.6 102.9; } .chapanim .s12-jetA { animation: s12Jeta 29.74s linear 3.20s infinite; } @keyframes s12Jeta { from { stroke-dashoffset: 171.5; } to { stroke-dashoffset: 0; } } .chapanim .s12-jetB { stroke-dasharray: 44.4 66.6; } .chapanim .s12-jetB { animation: s12Jetb 33.94s linear 4.00s infinite; } @keyframes s12Jetb { from { stroke-dashoffset: 110.9; } to { stroke-dashoffset: 0; } } .chapanim .s12-carpA { stroke-dasharray: 37.6 56.3; } .chapanim .s12-carpA { animation: s12Carpa 39.33s linear 4.80s infinite; } @keyframes s12Carpa { from { stroke-dashoffset: 93.9; } to { stroke-dashoffset: 0; } } .chapanim .s12-carpB { stroke-dasharray: 31.3 46.9; } .chapanim .s12-carpB { animation: s12Carpb 12.90s linear 5.60s infinite; } @keyframes s12Carpb { from { stroke-dashoffset: 78.2; } to { stroke-dashoffset: 0; } } /* scene 13 -- the dock, and the stair coming up into it */ .chapanim .s13-front { stroke-dasharray: 283.8 425.7; } .chapanim .s13-front { animation: s13Front 12.87s linear 0.00s infinite; } @keyframes s13Front { from { stroke-dashoffset: 709.6; } to { stroke-dashoffset: 0; } } .chapanim .s13-side { stroke-dasharray: 188.6 283.0; } .chapanim .s13-side { animation: s13Side 16.61s linear 0.80s infinite; } @keyframes s13Side { from { stroke-dashoffset: 471.6; } to { stroke-dashoffset: 0; } } .chapanim .s13-cap { stroke-dasharray: 107.2 160.8; } .chapanim .s13-cap { animation: s13Cap 20.21s linear 1.60s infinite; } @keyframes s13Cap { from { stroke-dashoffset: 268.0; } to { stroke-dashoffset: 0; } } .chapanim .s13-railF { stroke-dasharray: 82.0 123.0; } .chapanim .s13-railF { animation: s13Railf 25.41s linear 2.40s infinite; } @keyframes s13Railf { from { stroke-dashoffset: 205.0; } to { stroke-dashoffset: 0; } } .chapanim .s13-railS { stroke-dasharray: 30.9 46.4; } .chapanim .s13-railS { animation: s13Rails 29.81s linear 3.20s infinite; } @keyframes s13Rails { from { stroke-dashoffset: 77.3; } to { stroke-dashoffset: 0; } } .chapanim .s13-std0 { stroke-dasharray: 20.8 31.2; } .chapanim .s13-std0 { animation: s13Std0 34.01s linear 4.00s infinite; } @keyframes s13Std0 { from { stroke-dashoffset: 52.0; } to { stroke-dashoffset: 0; } } .chapanim .s13-std1 { stroke-dasharray: 20.8 31.2; } .chapanim .s13-std1 { animation: s13Std1 39.40s linear 4.80s infinite; } @keyframes s13Std1 { from { stroke-dashoffset: 52.0; } to { stroke-dashoffset: 0; } } .chapanim .s13-std2 { stroke-dasharray: 20.8 31.2; } .chapanim .s13-std2 { animation: s13Std2 12.97s linear 5.60s infinite; } @keyframes s13Std2 { from { stroke-dashoffset: 52.0; } to { stroke-dashoffset: 0; } } .chapanim .s13-std3 { stroke-dasharray: 21.6 32.5; } .chapanim .s13-std3 { animation: s13Std3 16.36s linear 6.40s infinite; } @keyframes s13Std3 { from { stroke-dashoffset: 54.1; } to { stroke-dashoffset: 0; } } .chapanim .s13-steps { stroke-dasharray: 234.5 351.8; } .chapanim .s13-steps { animation: s13Steps 19.89s linear 7.20s infinite; } @keyframes s13Steps { from { stroke-dashoffset: 586.3; } to { stroke-dashoffset: 0; } } .chapanim .s13-stepside { stroke-dasharray: 47.0 70.5; } .chapanim .s13-stepside { animation: s13Stepside 24.95s linear 8.00s infinite; } @keyframes s13Stepside { from { stroke-dashoffset: 117.5; } to { stroke-dashoffset: 0; } } /* scene 14 -- the judge's empty chair, and the bouquets beside it */ .chapanim .s14-back { stroke-dasharray: 196.6 294.9; } .chapanim .s14-back { animation: s14Back 12.94s linear 0.00s infinite; } @keyframes s14Back { from { stroke-dashoffset: 491.5; } to { stroke-dashoffset: 0; } } .chapanim .s14-panel { stroke-dasharray: 188.0 282.0; } .chapanim .s14-panel { animation: s14Panel 16.68s linear 0.80s infinite; } @keyframes s14Panel { from { stroke-dashoffset: 470.0; } to { stroke-dashoffset: 0; } } .chapanim .s14-crest { stroke-dasharray: 47.9 71.9; } .chapanim .s14-crest { animation: s14Crest 20.28s linear 1.60s infinite; } @keyframes s14Crest { from { stroke-dashoffset: 119.8; } to { stroke-dashoffset: 0; } } .chapanim .s14-seat { stroke-dasharray: 172.6 258.9; } .chapanim .s14-seat { animation: s14Seat 25.48s linear 2.40s infinite; } @keyframes s14Seat { from { stroke-dashoffset: 431.5; } to { stroke-dashoffset: 0; } } .chapanim .s14-armL { stroke-dasharray: 30.8 46.2; } .chapanim .s14-armL { animation: s14Arml 29.88s linear 3.20s infinite; } @keyframes s14Arml { from { stroke-dashoffset: 77.0; } to { stroke-dashoffset: 0; } } .chapanim .s14-armR { stroke-dasharray: 30.8 46.2; } .chapanim .s14-armR { animation: s14Armr 34.08s linear 4.00s infinite; } @keyframes s14Armr { from { stroke-dashoffset: 77.0; } to { stroke-dashoffset: 0; } } .chapanim .s14-legL { stroke-dasharray: 28.4 42.7; } .chapanim .s14-legL { animation: s14Legl 39.47s linear 4.80s infinite; } @keyframes s14Legl { from { stroke-dashoffset: 71.1; } to { stroke-dashoffset: 0; } } .chapanim .s14-legR { stroke-dasharray: 28.4 42.7; } .chapanim .s14-legR { animation: s14Legr 13.04s linear 5.60s infinite; } @keyframes s14Legr { from { stroke-dashoffset: 71.1; } to { stroke-dashoffset: 0; } } .chapanim .s14-rail { stroke-dasharray: 69.5 104.3; } .chapanim .s14-rail { animation: s14Rail 16.43s linear 6.40s infinite; } @keyframes s14Rail { from { stroke-dashoffset: 173.8; } to { stroke-dashoffset: 0; } } .chapanim .s14-vase0 { stroke-dasharray: 57.3 85.9; } .chapanim .s14-vase0 { animation: s14Vase0 19.96s linear 7.20s infinite; } @keyframes s14Vase0 { from { stroke-dashoffset: 143.1; } to { stroke-dashoffset: 0; } } .chapanim .s14-posy0 { stroke-dasharray: 69.5 104.2; } .chapanim .s14-posy0 { animation: s14Posy0 25.02s linear 8.00s infinite; } @keyframes s14Posy0 { from { stroke-dashoffset: 173.6; } to { stroke-dashoffset: 0; } } .chapanim .s14-stems0 { stroke-dasharray: 34.8 52.1; } .chapanim .s14-stems0 { animation: s14Stems0 29.28s linear 8.80s infinite; } @keyframes s14Stems0 { from { stroke-dashoffset: 86.9; } to { stroke-dashoffset: 0; } } .chapanim .s14-vase1 { stroke-dasharray: 57.3 85.9; } .chapanim .s14-vase1 { animation: s14Vase1 33.48s linear 9.60s infinite; } @keyframes s14Vase1 { from { stroke-dashoffset: 143.1; } to { stroke-dashoffset: 0; } } .chapanim .s14-posy1 { stroke-dasharray: 69.5 104.2; } .chapanim .s14-posy1 { animation: s14Posy1 39.08s linear 10.40s infinite; } @keyframes s14Posy1 { from { stroke-dashoffset: 173.6; } to { stroke-dashoffset: 0; } } .chapanim .s14-stems1 { stroke-dasharray: 34.8 52.1; } .chapanim .s14-stems1 { animation: s14Stems1 12.72s linear 11.20s infinite; } @keyframes s14Stems1 { from { stroke-dashoffset: 86.9; } to { stroke-dashoffset: 0; } } /* scene 15 -- a bound sheaf standing in the harvested field */ .chapanim .s15-left { stroke-dasharray: 128.7 193.0; } .chapanim .s15-left { animation: s15Left 13.01s linear 0.00s infinite; } @keyframes s15Left { from { stroke-dashoffset: 321.6; } to { stroke-dashoffset: 0; } } .chapanim .s15-right { stroke-dasharray: 128.7 193.0; } .chapanim .s15-right { animation: s15Right 16.75s linear 0.80s infinite; } @keyframes s15Right { from { stroke-dashoffset: 321.6; } to { stroke-dashoffset: 0; } } .chapanim .s15-midA { stroke-dasharray: 121.3 182.0; } .chapanim .s15-midA { animation: s15Mida 20.35s linear 1.60s infinite; } @keyframes s15Mida { from { stroke-dashoffset: 303.3; } to { stroke-dashoffset: 0; } } .chapanim .s15-midB { stroke-dasharray: 121.3 182.0; } .chapanim .s15-midB { animation: s15Midb 25.55s linear 2.40s infinite; } @keyframes s15Midb { from { stroke-dashoffset: 303.3; } to { stroke-dashoffset: 0; } } .chapanim .s15-bandA { stroke-dasharray: 106.0 159.0; } .chapanim .s15-bandA { animation: s15Banda 29.95s linear 3.20s infinite; } @keyframes s15Banda { from { stroke-dashoffset: 265.1; } to { stroke-dashoffset: 0; } } .chapanim .s15-bandB { stroke-dasharray: 98.2 147.3; } .chapanim .s15-bandB { animation: s15Bandb 34.15s linear 4.00s infinite; } @keyframes s15Bandb { from { stroke-dashoffset: 245.4; } to { stroke-dashoffset: 0; } } .chapanim .s15-ground { stroke-dasharray: 115.1 172.6; } .chapanim .s15-ground { animation: s15Ground 39.54s linear 4.80s infinite; } @keyframes s15Ground { from { stroke-dashoffset: 287.7; } to { stroke-dashoffset: 0; } } /* scene 16 -- the packet that came by the post, tied with string */ .chapanim .s16-wrap { stroke-dasharray: 496.7 745.0; } .chapanim .s16-wrap { animation: s16Wrap 13.08s linear 0.00s infinite; } @keyframes s16Wrap { from { stroke-dashoffset: 1241.7; } to { stroke-dashoffset: 0; } } .chapanim .s16-tieH { stroke-dasharray: 144.0 216.0; } .chapanim .s16-tieH { animation: s16Tieh 16.82s linear 0.80s infinite; } @keyframes s16Tieh { from { stroke-dashoffset: 360.0; } to { stroke-dashoffset: 0; } } .chapanim .s16-tieV { stroke-dasharray: 104.3 156.5; } .chapanim .s16-tieV { animation: s16Tiev 20.42s linear 1.60s infinite; } @keyframes s16Tiev { from { stroke-dashoffset: 260.9; } to { stroke-dashoffset: 0; } } .chapanim .s16-knot { stroke-dasharray: 55.6 83.4; } .chapanim .s16-knot { animation: s16Knot 25.62s linear 2.40s infinite; } @keyframes s16Knot { from { stroke-dashoffset: 139.1; } to { stroke-dashoffset: 0; } } .chapanim .s16-bowA { stroke-dasharray: 71.8 107.7; } .chapanim .s16-bowA { animation: s16Bowa 30.02s linear 3.20s infinite; } @keyframes s16Bowa { from { stroke-dashoffset: 179.4; } to { stroke-dashoffset: 0; } } .chapanim .s16-bowB { stroke-dasharray: 71.8 107.7; } .chapanim .s16-bowB { animation: s16Bowb 34.22s linear 4.00s infinite; } @keyframes s16Bowb { from { stroke-dashoffset: 179.4; } to { stroke-dashoffset: 0; } } .chapanim .s16-addr { stroke-dasharray: 161.7 242.6; } .chapanim .s16-addr { animation: s16Addr 39.61s linear 4.80s infinite; } @keyframes s16Addr { from { stroke-dashoffset: 404.3; } to { stroke-dashoffset: 0; } } .chapanim .s16-seal { stroke-dasharray: 49.1 73.6; } .chapanim .s16-seal { animation: s16Seal 13.11s linear 5.60s infinite; } @keyframes s16Seal { from { stroke-dashoffset: 122.7; } to { stroke-dashoffset: 0; } } /* ---------- Dark Days: 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: 63.6%; } .intropage .intro-label { padding: 0 11%; } .intropage .il-txt { font-size: 1.26em; line-height: 1.34; } /* darkdays 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, #0e2830 0%, #14343d 46%, #0e2830 100%); } .cover-front .dd-drift { transform-box: view-box; transform-origin: 300px 640px; } .cover-front .dd-drift { animation: ddLevel 21.30s ease-in-out 0.00s infinite; } @keyframes ddLevel { 0%,100%{transform:scaleY(1)} 22%{transform:scaleY(1.45)} 48%{transform:scaleY(1.45)} 78%{transform:scaleY(0.50)} } .cover-front .dd-cast { animation: ddCast 21.30s ease-out 0.00s infinite; } @keyframes ddCast { 0%,100%{transform:translateY(0px)} 22%{transform:translateY(-67.5px)} 48%{transform:translateY(-67.5px)} 78%{transform:translateY(75.0px)} } .cover-front .dd-fall.c0 { animation: ddFall0 6.90s linear 0.00s infinite; } @keyframes ddFall0 { 0%{transform:translateY(-70px);opacity:0} 12%{opacity:.85} 88%{opacity:.85} 100%{transform:translateY(300px);opacity:0} } .cover-front .dd-fall.c1 { animation: ddFall1 7.70s linear 0.55s infinite; } @keyframes ddFall1 { 0%{transform:translateY(-70px);opacity:0} 12%{opacity:.85} 88%{opacity:.85} 100%{transform:translateY(300px);opacity:0} } .cover-front .dd-fall.c2 { animation: ddFall2 8.90s linear 1.10s infinite; } @keyframes ddFall2 { 0%{transform:translateY(-70px);opacity:0} 12%{opacity:.85} 88%{opacity:.85} 100%{transform:translateY(300px);opacity:0} } .cover-front .dd-fall.c3 { animation: ddFall3 9.90s linear 1.65s infinite; } @keyframes ddFall3 { 0%{transform:translateY(-70px);opacity:0} 12%{opacity:.85} 88%{opacity:.85} 100%{transform:translateY(300px);opacity:0} } .cover-front .dd-fall.c4 { animation: ddFall4 11.30s linear 2.20s infinite; } @keyframes ddFall4 { 0%{transform:translateY(-70px);opacity:0} 12%{opacity:.85} 88%{opacity:.85} 100%{transform:translateY(300px);opacity:0} } .cover-front .dd-fall.c5 { animation: ddFall5 12.70s linear 2.75s infinite; } @keyframes ddFall5 { 0%{transform:translateY(-70px);opacity:0} 12%{opacity:.85} 88%{opacity:.85} 100%{transform:translateY(300px);opacity:0} } .cover-front .dd-sheen { animation: ddSheen 14.50s ease-in-out 0.00s infinite; } @keyframes ddSheen { 0%{transform:translateX(0px)} 60%{transform:translateX(1060px)} 100%{transform:translateX(1060px)} } .cover-front .dd-crown { animation: ddCrown 13.10s ease-in-out 0.00s infinite; } @keyframes ddCrown { 0%,100%{opacity:.55} 46%{opacity:1} 74%{opacity:.7} } .cover-front .dd-stone { animation: ddStone 24.70s ease-in-out 0.00s infinite; } @keyframes ddStone { 0%,100%{opacity:1} 50%{opacity:.94} } .cover-front .dd-road { animation: ddRoad 27.50s ease-in-out 0.00s infinite; } @keyframes ddRoad { 0%,100%{opacity:.55} 50%{opacity:.34} } .cover-front .dd-frost.f0 { animation: ddFrost0 17.50s ease-in-out 0.00s infinite; } @keyframes ddFrost0 { 0%,100%{opacity:.34} 44%{opacity:.86} 70%{opacity:.5} } .cover-front .dd-frost.f1 { animation: ddFrost1 18.90s ease-in-out 0.80s infinite; } @keyframes ddFrost1 { 0%,100%{opacity:.34} 44%{opacity:.86} 70%{opacity:.5} } .cover-front .dd-frost.f2 { animation: ddFrost2 20.10s ease-in-out 1.60s infinite; } @keyframes ddFrost2 { 0%,100%{opacity:.34} 44%{opacity:.86} 70%{opacity:.5} } .cover-front .dd-writ.w0 { animation: ddWrit0 15.30s ease-in-out 0.00s infinite; } @keyframes ddWrit0 { 0%,100%{opacity:.62} 50%{opacity:.84} } .cover-front .dd-writ.w1 { animation: ddWrit1 16.10s ease-in-out 0.60s infinite; } @keyframes ddWrit1 { 0%,100%{opacity:.62} 50%{opacity:.84} } .cover-front .dd-writ.w2 { animation: ddWrit2 19.50s ease-in-out 1.20s infinite; } @keyframes ddWrit2 { 0%,100%{opacity:.62} 50%{opacity:.84} } .cover-front .dd-writ.w3 { animation: ddWrit3 22.70s ease-in-out 1.80s infinite; } @keyframes ddWrit3 { 0%,100%{opacity:.62} 50%{opacity:.84} } .cover-front .dd-corner.c0 { animation: ddCorner0 23.90s ease-in-out 0.00s infinite; } @keyframes ddCorner0 { 0%,100%{opacity:.52} 50%{opacity:1} } .cover-front .dd-corner.c1 { animation: ddCorner1 25.10s ease-in-out 0.70s infinite; } @keyframes ddCorner1 { 0%,100%{opacity:.52} 50%{opacity:1} } .cover-front .dd-corner.c2 { animation: ddCorner2 28.30s ease-in-out 1.40s infinite; } @keyframes ddCorner2 { 0%,100%{opacity:.52} 50%{opacity:1} } .cover-front .dd-corner.c3 { animation: ddCorner3 29.70s ease-in-out 2.10s infinite; } @keyframes ddCorner3 { 0%,100%{opacity:.52} 50%{opacity:1} } .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 .rul { opacity:0; animation: cvRule 0.90s ease-out 0.70s 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; } }