/* Digitization page: overhead book scanner animation */
.scanart { margin-top: 28px; max-width: 460px; }
.scanart svg { width: 100%; height: auto; display: block; overflow: visible; }
.sa-paper { fill: #FFFFFF; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.sa-cover { fill: var(--blue); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.sa-edge { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .5; }
.sa-ink { fill: none; stroke: var(--ink); stroke-width: 1.3; opacity: .4; }
.sa-stand { fill: #EEF4FB; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.sa-led { fill: #5AA0E8; stroke: none; }
.sa-sweep { fill: #5AA0E8; opacity: 0; filter: drop-shadow(0 0 6px #5AA0E8); }
.sa-cone { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; }
.sa-sheetbg { fill: #FFFFFF; stroke: var(--blue); stroke-width: 1.6; }
.sa-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: .55; stroke-dasharray: 120; stroke-dashoffset: 120; }
.sa-sheet { opacity: 0; transform-box: fill-box; }
.sa-sheet text { font: 700 11px var(--font); fill: var(--blue); text-anchor: middle; }

/* 7 s loop: light on, the beam sweeps the open book, the page lifts out as text */
.scanart.is-on .sa-cone { animation: sa-cone 7s ease-out infinite; }
.scanart.is-on .sa-sweep { animation: sa-sweep 7s ease-in-out infinite; }
.scanart.is-on .sa-led { animation: sa-led 7s linear infinite; }
.scanart.is-on .sa-sheet { animation: sa-sheet 7s cubic-bezier(.2,.8,.25,1) infinite; }
.scanart.is-on .sa-line { animation: sa-type 7s linear infinite; }
.scanart.is-on .sa-l2 { animation-name: sa-type2; }
.scanart.is-on .sa-l3 { animation-name: sa-type3; }
.scanart.is-on .sa-l4 { animation-name: sa-type4; }
.scanart.is-on .sa-l5 { animation-name: sa-type5; }
.scanart.is-paused * { animation-play-state: paused !important; }
@keyframes sa-cone { 0%, 6% { opacity: 0; transform: scaleY(.4); } 14%, 52% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; } }
@keyframes sa-led { 0%, 8% { opacity: .3; } 12%, 52% { opacity: 1; } 58%, 100% { opacity: .3; } }
@keyframes sa-sweep { 0%, 14% { opacity: 0; transform: translateX(0); } 18% { opacity: .9; } 48% { opacity: .9; transform: translateX(316px); } 52%, 100% { opacity: 0; transform: translateX(316px); } }
@keyframes sa-sheet { 0%, 50% { opacity: 0; transform: translateY(30px); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sa-type  { 0%, 60% { stroke-dashoffset: 120; } 65%, 100% { stroke-dashoffset: 0; } }
@keyframes sa-type2 { 0%, 63% { stroke-dashoffset: 120; } 68%, 100% { stroke-dashoffset: 0; } }
@keyframes sa-type3 { 0%, 66% { stroke-dashoffset: 120; } 71%, 100% { stroke-dashoffset: 0; } }
@keyframes sa-type4 { 0%, 69% { stroke-dashoffset: 120; } 74%, 100% { stroke-dashoffset: 0; } }
@keyframes sa-type5 { 0%, 72% { stroke-dashoffset: 120; } 77%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sa-cone, .sa-sheet { opacity: 1; }
  .sa-line { stroke-dashoffset: 0; }
}