/* CashPlan brand deck motion layer. Loaded after deck.css and brand.css.
   Rule (same as the Pill deck): the hidden start state exists only under .anim, which deck.js adds unless
   prefers-reduced-motion is set. Without JS, under reduced motion and in print every slide shows its end state.
   Only transform, opacity and stroke-dashoffset move. Tokens: enter 320-900 ms out-curve, 60 ms stagger,
   the sprout curve only for the leaf, one brand moment per slide. */

/* ---------- Panels and description rise in order ---------- */
.anim .slide:not(.in) .content > .pn { opacity: 0; translate: 0 1.1cqw; }
.anim .content > .pn { transition: opacity 0.6s var(--e-out), translate 0.9s var(--e-out); transition-delay: calc(var(--pi, 0) * 60ms + 160ms); }
.anim .slide:not(.in) .desc > *, .anim .slide:not(.in) .toc .cols a { opacity: 0; translate: 0 0.7cqw; }
.anim .desc > *, .anim .toc .cols a { transition: opacity 0.6s var(--e-out), translate 0.8s var(--e-out); transition-delay: calc(var(--di, 0) * 55ms + 80ms); }

/* ---------- Symbol reveal: the coin ring draws clockwise, then the leaf sprouts from the opening, then the wordmark rises ---------- */
.rv .draw { fill: none; stroke: var(--ring, currentColor); stroke-width: 21; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.rv .sprout { transform-box: view-box; transform-origin: 61.517px 44.275px; }
.rv .syl { transform-box: view-box; }
.anim .slide:not(.in) .rv .draw { stroke-dashoffset: 100; }
.anim .slide:not(.in) .rv .sprout { transform: scale(0) rotate(-35deg); }
.anim .slide:not(.in) .rv .syl { transform: translateY(24px); }
.anim .in .rv .draw { animation: ring-draw 0.8s var(--e-io) both 0.15s; }
.anim .in .rv .sprout { animation: leaf-sprout 0.65s var(--e-sprout) both 0.8s; }
.anim .in .rv .syl { animation: syl-rise 0.9s var(--e-out) both; animation-delay: calc(var(--k, 0) * 70ms + 0.79s); }
@keyframes ring-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes leaf-sprout { from { transform: scale(0) rotate(-35deg); } to { transform: scale(1) rotate(0); } }
@keyframes syl-rise { from { transform: translateY(24px); } to { transform: translateY(0); } }

/* Loop version for the motion slide: build, hold, fold back, 6 s */
.anim .in .rv.loop .draw { animation: ring-loop 6s var(--e-io) infinite; }
.anim .in .rv.loop .sprout { animation: leaf-loop 6s var(--e-out) infinite; }
.anim .in .rv.loop .syl { animation: syl-loop 6s var(--e-out) infinite; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes ring-loop { 0% { stroke-dashoffset: 100; } 14%, 82% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 100; } }
@keyframes leaf-loop { 0%, 12% { transform: scale(0) rotate(-35deg); animation-timing-function: var(--e-sprout); } 24%, 80% { transform: scale(1) rotate(0); } 90%, 100% { transform: scale(0) rotate(-35deg); } }
@keyframes syl-loop { 0%, 16% { transform: translateY(24px); } 30%, 80% { transform: translateY(0); } 92%, 100% { transform: translateY(24px); } }

/* ---------- Construction drawing: guides appear one by one, the ring fills, the leaf grows where two circles overlap ---------- */
/* Each step lasts from its own start (--d) to the 11 s mark, so all steps fade out together; deck.js restarts the pass. */
.cons .st-leaf { transform-box: view-box; transform-origin: 61.517px 44.275px; }
.cons .st-draw { stroke-dasharray: 100 100; }
.anim .in .cons.play .st { animation: st-once calc(11s - var(--d, 0s)) var(--e-out) both; animation-delay: var(--d, 0s); }
.anim .in .cons.play .st-leaf { animation: stl-once calc(11s - var(--d, 0s)) var(--e-sprout) both; animation-delay: var(--d, 0s); }
.anim .in .cons.play .st-draw { animation: std-once calc(11s - var(--d, 0s)) var(--e-io) both; animation-delay: var(--d, 0s); }
@keyframes st-once { 0% { opacity: 0; } 7%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes stl-once { 0% { transform: scale(0) rotate(-35deg); opacity: 1; } 10%, 88% { transform: scale(1) rotate(0); opacity: 1; } 96%, 100% { transform: scale(1); opacity: 0; } }
@keyframes std-once { 0% { stroke-dashoffset: 100; opacity: 1; } 10%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ---------- Section openers: the giant symbol slides in and settles; then floats slowly ---------- */
.anim .slide.opener:not(.in) .shape { opacity: 0; translate: 5cqw 2cqw; scale: 0.94; }
.anim .opener .shape { transition: opacity 0.9s var(--e-out), translate 1.5s var(--e-out), scale 1.5s var(--e-out); }
.anim .slide.opener:not(.in) .no, .anim .slide.opener:not(.in) .mini { opacity: 0; }
.anim .opener .no, .anim .opener .mini { transition: opacity 0.8s var(--e-out) 0.5s; }
.anim .in.opener .shape { animation: shape-float 9s var(--e-io) 1.6s infinite; }
@keyframes shape-float { 50% { translate: -0.6cqw 0.5cqw; } }

/* ---------- Motion demos ---------- */
.anim .in .demo .presser { animation: press-loop 2.4s var(--e-out) infinite; }
@keyframes press-loop { 0%, 60% { transform: scale(1); } 66% { transform: scale(0.98); } 74%, 100% { transform: scale(1); } }
.anim .in .prog .bar2 i { animation: prog-loop 5s var(--e-out) infinite; }
@keyframes prog-loop { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0.3; } }
.pt .sym .lf { transform-box: view-box; transform-origin: 61.517px 44.275px; }
.pt.tick .sym .lf { animation: leaf-wiggle 0.6s var(--e-sprout); }
@keyframes leaf-wiggle { 0% { transform: rotate(0); } 35% { transform: rotate(-14deg) scale(1.08); } 100% { transform: rotate(0); } }
.pt .plus { opacity: 0; }
.pt.tick .plus { animation: plus-pop 1.2s var(--e-out); }
@keyframes plus-pop { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }

@media (max-width: 820px) {
  .anim .slide:not(.in) .content > .pn { translate: 0 12px; }
}

@media print {
  .anim .slide:not(.in) .content > .pn, .anim .slide:not(.in) .desc > *, .anim .slide:not(.in) .toc .cols a { opacity: 1; translate: none; transition: none; }
  .anim .slide:not(.in) .rv .draw { stroke-dashoffset: 0; }
  .anim .slide:not(.in) .rv .sprout, .anim .slide:not(.in) .rv .syl { transform: none; }
  .anim .slide.opener:not(.in) .shape, .anim .slide.opener:not(.in) .no, .anim .slide.opener:not(.in) .mini { opacity: 1; translate: none; scale: none; }
  .anim .cons .st, .anim .cons .st-leaf, .anim .cons .st-draw, .anim .rv .draw, .anim .rv .sprout, .anim .rv .syl { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
}