/* Zeal Publishers — the per-service hero animations (templates/landing/_anims.html).
 * Loaded only on service landing pages. Inline SVG, transform/opacity/stroke only.
 * Each animation plays once and rests on its final frame ("both" fill); base.css turns
 * every animation into that final frame under prefers-reduced-motion.              */

/* ---------- The plate (A): parchment, ruled, double-ruled border ---------- */
.an {
  position: relative; aspect-ratio: 5 / 4; width: 100%; overflow: hidden; border-radius: 6px;
  background-color: var(--z-parchment);
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(6,69,48,.06) 27px 28px);
  box-shadow: inset 0 0 0 1px rgba(6,69,48,.28), inset 0 0 0 10px var(--z-parchment), inset 0 0 0 11px rgba(6,69,48,.3), var(--z-shadow-2);
}
.an svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- Primitives ---------- */
.an .draw { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: an-draw var(--t, .9s) var(--z-ease-out) var(--d, .4s) both; }
.an .pop { transform-box: fill-box; transform-origin: center; animation: an-pop .6s var(--z-ease-spring) var(--d, .4s) both; }
.an .fade { animation: an-fade .7s var(--z-ease-out) var(--d, .4s) both; }
.an .grow-x { transform-box: fill-box; transform-origin: left center; animation: an-grow-x var(--t, .8s) var(--z-ease-out) var(--d, .4s) both; }
.an .grow-y { transform-box: fill-box; transform-origin: center bottom; animation: an-grow-y var(--t, .9s) var(--z-ease-out) var(--d, .4s) both; }
@keyframes an-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes an-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes an-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes an-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes an-grow-y { from { transform: scaleY(0); } to { transform: none; } }

/* ---------- Shared shapes ---------- */
.an-sheet, .an-paper rect { fill: #FBF8F1; filter: drop-shadow(0 14px 18px rgba(2,29,19,.22)); }
.an-ln { fill: rgba(40,40,40,.3); }
.an-ln--dark { fill: var(--z-green); }
.an-ln--screen { fill: rgba(250,249,245,.7); }
.an-ln--fn { fill: rgba(40,40,40,.22); }
.an-chap { font-family: var(--z-font-display); font-style: italic; font-size: 22px; fill: var(--z-green); text-anchor: middle; }
.an-chapn { font-family: var(--z-font-display); font-size: 40px; font-weight: 500; fill: var(--z-green); text-anchor: middle; }
.an-label { font-family: var(--z-font-body); font-size: 12px; font-weight: 600; letter-spacing: .16em; fill: var(--z-ink-muted); text-anchor: middle; }
.an-arrow { stroke: var(--z-amber); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.an-axis { stroke: rgba(6,69,48,.45); stroke-width: 2; stroke-linecap: round; }
.an-amberbar { fill: var(--z-amber); }
.an-track { fill: rgba(6,69,48,.14); }
.an-progress, .an-trackfill { fill: var(--z-amber); }
.an-book { fill: #FBF8F1; filter: drop-shadow(0 16px 20px rgba(2,29,19,.25)); }
.an-gutter { stroke: rgba(40,40,40,.18); stroke-width: 2; fill: none; }
.an-cover-base { fill: var(--z-green); }
.an-cover-frame { fill: none; stroke: rgba(239,154,16,.7); stroke-width: 1.5; }
.an-cover-k { font-family: var(--z-font-body); font-size: 10px; font-weight: 600; letter-spacing: .28em; fill: var(--z-amber); text-anchor: middle; }
.an-cover-k--sm { font-size: 7px; }
.an-cover-t { font-family: var(--z-font-display); font-size: 28px; font-weight: 500; fill: var(--z-cream); text-anchor: middle; }
.an-cover-t--sm { font-size: 30px; }
.an-cover-a { font-family: var(--z-font-display); font-style: italic; font-size: 13px; fill: var(--z-parchment); text-anchor: middle; }
.an-thumb-t { font-family: var(--z-font-display); font-size: 8px; fill: var(--z-cream); text-anchor: middle; }
.an-thumb-t--lg { font-size: 15px; }
.an-sun { fill: var(--z-amber); }
.an-hill { fill: var(--z-sage); }
.an-box { fill: var(--z-white); stroke: rgba(6,69,48,.35); stroke-width: 1.5; }
.an-check, .an-tick { fill: none; stroke: var(--z-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- edit: the red pen ---------- */
.an-red { stroke: var(--z-red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.an-redtx { font-family: var(--z-font-display); font-style: italic; font-size: 21px; fill: var(--z-red-ink); }
.an-rot { transform-box: fill-box; transform-origin: left center; rotate: -7deg; }
.an-rot2 { transform-box: fill-box; transform-origin: left center; rotate: -4deg; }

/* ---------- cover ---------- */
.an-cover-base.fade { filter: drop-shadow(0 18px 22px rgba(2,29,19,.35)); }
.an-guide { stroke: rgba(6,69,48,.4); stroke-width: 1.5; stroke-dasharray: 1; }

/* ---------- write / memoir: handwriting ---------- */
.an-hand { stroke: #2B3A55; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation-timing-function: linear; }
.an-quillmove { animation: an-quill 5.4s cubic-bezier(.5, 0, .5, 1) .4s both; }
.an-quill { fill: var(--z-amber); }
@keyframes an-quill {
  0% { transform: translate(94px, 112px); } 46% { transform: translate(226px, 308px); }
  50% { transform: translate(282px, 112px); } 100% { transform: translate(380px, 308px); }
}
.an-ribbon { fill: var(--z-red); }
.an-tilt { rotate: -4deg; }
.an-photo { fill: var(--z-white); filter: drop-shadow(0 8px 10px rgba(2,29,19,.25)); }
.an-photo-in { fill: #D8C6A6; }
.an-photo-sun { fill: #F3D08A; }
.an-photo-hill { fill: #9C8664; }

/* ---------- voice: interview -> chapter ---------- */
.an-vbar { fill: var(--z-amber); transform-box: fill-box; transform-origin: center; transform: scaleY(var(--h)); animation: an-vb 1.1s ease-in-out calc(.2s + var(--i) * 70ms) 3; }
@keyframes an-vb { 0%, 100% { transform: scaleY(var(--h)); } 50% { transform: scaleY(.18); } }

/* ---------- wave: audiobook ---------- */
.an-playbtn { fill: var(--z-green); }
.an-playtri { fill: var(--z-amber); }
.an-abar { fill: var(--z-sage); opacity: .55; animation: an-lit .3s linear calc(.4s + var(--i) * 110ms) both; }
@keyframes an-lit { to { fill: var(--z-amber); opacity: 1; } }
.an-playhead { fill: var(--z-green); animation: an-play 2.9s linear .4s both; }
@keyframes an-play { from { transform: translateX(0); } to { transform: translateX(338px); } }
.an-trackfill { transform-box: fill-box; transform-origin: left center; animation: an-grow-x 2.9s linear .4s both; }

/* ---------- chart: the book climbs ---------- */
.an-cbar { fill: rgba(6,69,48,.16); }
.an-cbar:last-of-type { fill: rgba(6,69,48,.28); }
.an-minibook { fill: var(--z-green); }
.an-minispine { fill: #0A5A3F; }
.an-climb { animation: an-climb 2s var(--z-ease-in-out) 1.6s both; }
@keyframes an-climb {
  0% { transform: translate(102px, 280px); opacity: 0; } 10% { opacity: 1; }
  25% { transform: translate(172px, 228px); } 50% { transform: translate(242px, 176px); }
  75% { transform: translate(312px, 124px); } 100% { transform: translate(382px, 72px); opacity: 1; }
}
.an-trend { stroke: var(--z-amber); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.an-flag { fill: none; stroke: var(--z-red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- rescue: flat, relaunch, rise ---------- */
.an-flat { stroke: rgba(40,40,40,.35); stroke-width: 3; stroke-linecap: round; }
.an-relaunch { stroke: var(--z-amber); stroke-width: 2; stroke-dasharray: 1; }
.an-rise { stroke: var(--z-green); stroke-width: 4; stroke-linecap: round; }
.an-chip { fill: var(--z-white); stroke: rgba(6,69,48,.2); }
.an-chiptx { font-family: var(--z-font-body); font-size: 14px; font-weight: 600; fill: var(--z-green); }

/* ---------- publish: barcode + stamp ---------- */
.an-bcbox { fill: var(--z-white); stroke: rgba(40,40,40,.18); }
.an-bc { fill: var(--z-charcoal); }
.an-isbn { font-family: var(--z-font-body); font-size: 10px; font-weight: 600; letter-spacing: .2em; fill: var(--z-charcoal); text-anchor: middle; }
.an-stamp { animation: an-stamp .5s var(--z-ease-spring) 2.5s both; }
.an-stamp rect { fill: rgba(239,154,16,.12); stroke: var(--z-amber-press); stroke-width: 3; }
.an-stamp text { font-family: var(--z-font-body); font-size: 19px; font-weight: 600; letter-spacing: .2em; fill: var(--z-amber-ink); text-anchor: middle; }
@keyframes an-stamp {
  from { opacity: 0; transform: translate(332px, 118px) rotate(-11deg) scale(1.7); }
  to { opacity: 1; transform: translate(332px, 118px) rotate(-11deg) scale(1); }
}

/* ---------- kdp: the checklist ---------- */
.an-panel { fill: var(--z-white); filter: drop-shadow(0 16px 22px rgba(2,29,19,.2)); }
.an-rowtx { font-family: var(--z-font-body); font-size: 16px; font-weight: 500; fill: var(--z-charcoal); }
.an--kdp .an-chap { font-size: 20px; }

/* ---------- reflow: print -> e-reader ---------- */
.an-device { fill: var(--z-charcoal); filter: drop-shadow(0 16px 20px rgba(2,29,19,.3)); }
.an-screen { fill: #3A4A44; }
.an-aa-bg { fill: var(--z-amber); }
.an-aa { font-family: var(--z-font-display); font-size: 16px; font-weight: 600; fill: var(--z-green-950); text-anchor: middle; }

/* ---------- picture: a picture-book spread ---------- */
.an--picture .an-book { fill: #FFFDF7; }
.an-hill2 { fill: #8DB596; }
.an-trunk { fill: #8C5A2B; }
.an-leaf { fill: var(--z-sage); }
.an-cloud { stroke: var(--z-purple); stroke-width: 2.5; stroke-linejoin: round; }
.an-kidtx { font-family: var(--z-font-display); font-size: 30px; font-weight: 600; fill: var(--z-green); text-anchor: middle; }
.an-squig { stroke: var(--z-purple); stroke-width: 4; stroke-linecap: round; }

/* ---------- recipe ---------- */
.an-card { fill: var(--z-white); filter: drop-shadow(0 16px 22px rgba(2,29,19,.2)); }
.an-box--sm { stroke-width: 1.3; }
.an-bowl { fill: var(--z-green); }
.an-bowlrim { fill: #0A5A3F; }
.an-steam { stroke: rgba(6,69,48,.4); stroke-width: 2.5; stroke-linecap: round; }

/* ---------- verse ---------- */
.an--verse .an-ln { fill: rgba(40,40,40,.34); }
.an-fleuron { font-size: 30px; fill: var(--z-amber); text-anchor: middle; }

/* ---------- novel: pages turning ---------- */
.an-page { fill: #F7F1E4; stroke: rgba(40,40,40,.08); }
.an-leafturn { transform-origin: 250px 0; animation: an-flip .95s var(--z-ease-in-out) var(--d, .5s) both; }
@keyframes an-flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); } 100% { transform: scaleX(-1); } }
.an--novel .an-chap { font-size: 26px; }

/* ---------- figure: academic ---------- */
.an-figbox { fill: #F6F1E6; stroke: rgba(40,40,40,.14); }
.an-dot { fill: var(--z-green); }
.an-fit { stroke: var(--z-amber); stroke-width: 2.5; stroke-linecap: round; }
.an-figcap { font-family: var(--z-font-display); font-style: italic; font-weight: 600; font-size: 14px; fill: var(--z-green); }
.an-rule { stroke: rgba(40,40,40,.3); stroke-width: 1.5; }
.an-fn { font-family: var(--z-font-body); font-size: 10px; font-weight: 600; fill: var(--z-amber-ink); }

/* ---------- method: contents of an authority book ---------- */
.an-contents { font-family: var(--z-font-display); font-style: italic; font-size: 30px; fill: var(--z-green); }
.an-tocn { font-family: var(--z-font-display); font-style: italic; font-size: 18px; fill: var(--z-amber-ink); }
.an-toct { font-family: var(--z-font-display); font-size: 18px; fill: var(--z-charcoal); }
.an-leader { stroke: rgba(40,40,40,.4); stroke-width: 2; stroke-dasharray: 1; }
.an--method .an-cover-base { filter: drop-shadow(0 18px 22px rgba(2,29,19,.35)); }

/* ---------- storefront ---------- */
.an-wall { fill: #E5D3B8; }
.an-aw-a { fill: var(--z-amber); }
.an-aw-b { fill: var(--z-cream); }
.an-awning { animation: an-drop .7s var(--z-ease-spring) .35s both; }
@keyframes an-drop { from { opacity: 0; transform: translateY(-36px); } to { opacity: 1; transform: none; } }
.an-window { fill: #DCEAE3; stroke: var(--z-green); stroke-width: 6; }
.an-sill { fill: var(--z-green); }
.an-standin { animation: an-fade .8s var(--z-ease-out) 1.2s both; }
.an-stand { fill: none; stroke: var(--z-charcoal); stroke-width: 3; }
.an-door { fill: var(--z-green); }
.an-sign { transform-origin: 370px 136px; animation: an-swing 1.4s ease-out 1.6s both; }
@keyframes an-swing { 0% { opacity: 0; transform: rotate(-16deg); } 20% { opacity: 1; } 45% { transform: rotate(9deg); } 70% { transform: rotate(-4deg); } 100% { transform: rotate(0); opacity: 1; } }
.an-signstring { fill: none; stroke: var(--z-charcoal); stroke-width: 1.5; }
.an-signbox { fill: var(--z-cream); stroke: var(--z-charcoal); stroke-width: 1.5; }
.an-signtx { font-family: var(--z-font-body); font-size: 13px; font-weight: 600; letter-spacing: .18em; fill: var(--z-green); text-anchor: middle; }

/* ---------- timeline: a company's story ---------- */
.an-line { stroke: var(--z-green); stroke-width: 3; stroke-linecap: round; }
.an-mile { fill: var(--z-amber); stroke: var(--z-cream); stroke-width: 4; }
.an-miletx { font-family: var(--z-font-display); font-size: 15px; font-style: italic; fill: var(--z-green); text-anchor: middle; }
.an--timeline .an-cover-base { filter: drop-shadow(0 14px 18px rgba(2,29,19,.3)); }

/* ---------- site: an author website ---------- */
.an-chrome { fill: var(--z-cream); }
.an-dotc { fill: var(--z-parchment-300); }
.an-url { fill: var(--z-white); stroke: rgba(40,40,40,.12); }
.an-urltx { font-family: var(--z-font-body); font-size: 11px; fill: var(--z-ink-muted); text-anchor: middle; }
.an-avatar { fill: var(--z-amber-tint); stroke: var(--z-amber); stroke-width: 2; }
.an-btnr { fill: var(--z-amber); }
.an-btntx { font-family: var(--z-font-body); font-size: 13px; font-weight: 600; fill: var(--z-green-950); text-anchor: middle; }

/* ---------- trailer: title cards ---------- */
.an-screenbg { fill: var(--z-green-950); }
.an-letterbox { fill: #000; opacity: .55; }
.an-perf { fill: rgba(6,69,48,.28); }
.an-card1, .an-card2, .an-card3 { text-anchor: middle; opacity: 0; }
.an-card1 { font-family: var(--z-font-display); font-style: italic; font-size: 30px; fill: var(--z-amber); animation: an-card1 1.6s ease .5s both; }
.an-card2 { font-family: var(--z-font-display); font-size: 46px; font-weight: 500; fill: var(--z-cream); animation: an-fadein 1s ease 2.2s both; }
.an-card3 { font-family: var(--z-font-body); font-size: 12px; font-weight: 600; letter-spacing: .3em; fill: var(--z-amber); animation: an-fadein .8s ease 3.1s both; }
@keyframes an-card1 { 0% { opacity: 0; transform: translateY(6px); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes an-fadein { from { opacity: 0; } to { opacity: 1; } }
.an-playring { animation: an-fadein .6s ease 3.6s both; }
.an-playring circle { fill: var(--z-amber); }
.an-playring path { fill: var(--z-green-950); }

/* Reduced motion: the trailer's first card would end hidden; show the final cards only. */
@media (prefers-reduced-motion: reduce) { .an-card1 { display: none; } }