/* Animated tool illustrations (templates/portal/_tool_art.html). Gentle loops by default, livelier on hover;
   everything stops for prefers-reduced-motion. Colours are per tool and have dark-mode values. */
.tool-art{display:block;width:100%;line-height:0;--a:#e8552f;--s:#ffe7df;--g:#2e9a4e;--paper:#fff;--ink-line:#c9c6c0;--dark:#2c2d2f}
.tool-art svg{width:100%;height:auto;overflow:visible}
.tool-art *{transform-box:fill-box;transform-origin:center}
.ta-soft{fill:var(--s)}
.ta-main{fill:var(--a)}
.ta-green{fill:var(--g)}
.ta-dark{fill:var(--dark)}
.ta-paper{fill:var(--paper)}
.ta-line,.ta-type{stroke:var(--ink-line);fill:none}
.ta-track{stroke:color-mix(in srgb,var(--a) 22%,transparent)}
.ta-sweep{stroke:var(--a);stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);animation:ta-sweep 6s linear infinite}
.ta-wave,.ta-hand,.ta-glass,.ta-drip,.ta-check{stroke:var(--a)}
.ta-hand{stroke:var(--dark);transform-origin:50% 100%}
:root[data-theme=dark] .tool-art{--paper:#2a2a2d;--ink-line:#55555a;--dark:#ececee}
:root[data-theme=dark] .tool-art .ta-soft{fill:color-mix(in srgb,var(--a) 18%,#1c1c1e)}

.art-pomodoro{--a:#e8452f;--s:#ffe5dc}
.art-dictation{--a:#2f74e0;--s:#e2eeff}
.art-typing{--a:#1a8f57;--s:#dff5e9}
.art-exam-timer{--a:#7c4ddb;--s:#ede6ff}
.art-comic{--a:#ff8a1f;--s:#fff0dc}
.art-notice{--a:#2563eb;--s:#e5edff}
.art-groups{--a:#0f9d8a;--s:#dcf5f0}
.art-timer{--a:#d97706;--s:#fff1d6}
.art-quiz-roulette{--a:#db2777;--s:#fde4f0}
.art-name-wheel{--a:#6d28d9;--s:#efe7ff}
.art-noise-meter{--a:#16a34a;--s:#e0f6e7}
.art-scoreboard{--a:#ea580c;--s:#ffe8d9}
.art-rubric{--a:#0e7490;--s:#dff3f7}
.art-prompts{--a:#4f46e5;--s:#e8e7ff}

/* pomodoro */
.ta-bob{animation:ta-bob 3.2s ease-in-out infinite}
.ta-leaf{transform-origin:50% 100%;animation:ta-wiggle 2.4s ease-in-out infinite}
/* dictation */
.ta-wave{opacity:.25;animation:ta-wave 1.6s ease-out infinite}
.ta-wave.w2{animation-delay:.25s}
.ta-line.l1,.ta-line.l2,.ta-line.l3{stroke:var(--a);stroke-dasharray:30;stroke-dashoffset:30;animation:ta-write 3.6s ease-in-out infinite}
.ta-line.l2{animation-delay:.5s}.ta-line.l3{animation-delay:1s}
/* typing */
.ta-keyboard{fill:var(--paper);stroke:color-mix(in srgb,var(--a) 30%,transparent);stroke-width:2}
.ta-key{fill:color-mix(in srgb,var(--a) 22%,var(--paper));animation:ta-press 2.8s ease-in-out infinite}
.ta-key.k2{animation-delay:.3s}.ta-key.k5{animation-delay:.7s}.ta-key.k7{animation-delay:1.1s}.ta-key.k9{animation-delay:1.5s}
.ta-key.k1,.ta-key.k3,.ta-key.k4,.ta-key.k6,.ta-key.k8,.ta-key.k10{animation:none}
.ta-chip{animation:ta-bob 2.6s ease-in-out infinite}
.ta-char{fill:#fff;font:800 20px/1 "PingFang HK","Microsoft JhengHei",sans-serif}
/* exam timer */
.ta-paper.tilt{transform:rotate(-6deg);stroke:var(--ink-line);stroke-width:1.5}
.ta-hand{animation:ta-tick 8s steps(8) infinite}
/* comic */
.ta-panel{fill:var(--paper);stroke:var(--dark);stroke-width:2;opacity:.9}
.ta-panel.p1{animation:ta-in 4s ease infinite}.ta-panel.p2{animation:ta-in 4s .3s ease infinite}.ta-panel.p3{animation:ta-in 4s .6s ease infinite}.ta-panel.p4{animation:ta-in 4s .9s ease infinite}
.ta-pop{animation:ta-pop 4s 1.2s ease infinite}
/* notice */
.ta-type{stroke:color-mix(in srgb,var(--a) 55%,var(--ink-line));stroke-dasharray:100;stroke-dashoffset:100;animation:ta-typeline 5s ease infinite}
.ta-type.t2{animation-delay:.4s}.ta-type.t3{animation-delay:.8s}.ta-type.t4{animation-delay:1.2s}
.ta-spark{fill:#ffc23d;animation:ta-twinkle 2.2s ease-in-out infinite}
/* groups */
.ta-ring{fill:none;stroke:color-mix(in srgb,var(--a) 35%,transparent);stroke-width:2;stroke-dasharray:4 4}
.ta-dot{fill:var(--a)}
.ta-team.g1 .ta-dot{fill:#0f9d8a}.ta-team.g2 .ta-dot{fill:#f59e0b}.ta-team.g3 .ta-dot{fill:#6366f1}
.ta-team .d1{animation:ta-hop 2.4s ease-in-out infinite}.ta-team .d2{animation:ta-hop 2.4s .2s ease-in-out infinite}.ta-team .d3{animation:ta-hop 2.4s .4s ease-in-out infinite}
.ta-team.g2 .ta-dot{animation-delay:.6s}.ta-team.g3 .ta-dot{animation-delay:1.2s}
/* timer */
.ta-flip{animation:ta-flip 6s ease-in-out infinite}
.ta-sand{fill:var(--a)}
.ta-sand.top{transform-origin:50% 0;animation:ta-drain 6s linear infinite}
.ta-sand.bottom{transform-origin:50% 100%;animation:ta-fill 6s linear infinite}
.ta-drip{animation:ta-drip .6s linear infinite}
/* quiz roulette */
.ta-card.back{fill:color-mix(in srgb,var(--a) 35%,var(--paper))}
.ta-card-flip{animation:ta-cardflip 4s ease-in-out infinite}
.ta-q{fill:#fff;font:900 30px/1 system-ui,sans-serif}
/* name wheel */
.ta-spin{animation:ta-spin 6s cubic-bezier(.2,.8,.2,1) infinite}
.seg.s1{fill:#6d28d9}.seg.s2{fill:#f59e0b}.seg.s3{fill:#10b981}.seg.s4{fill:#3b82f6}.seg.s5{fill:#ef4444}.seg.s6{fill:#ec4899}
.ta-tick{animation:ta-wiggle 1s ease-in-out infinite}
/* noise meter */
.ta-bar{fill:var(--a);transform-origin:50% 100%;animation:ta-eq 1.2s ease-in-out infinite}
.ta-bar.b2{animation-delay:.15s;fill:#22c55e}.ta-bar.b3{animation-delay:.3s;fill:#84cc16}.ta-bar.b4{animation-delay:.45s;fill:#eab308}
.ta-bar.b5{animation-delay:.6s;fill:#f59e0b}.ta-bar.b6{animation-delay:.75s;fill:#f97316}.ta-bar.b7{animation-delay:.9s;fill:#ef4444}
/* scoreboard */
.ta-grow{transform-origin:50% 100%;animation:ta-growbar 3.6s ease-in-out infinite}
.ta-grow.g1{fill:#3b82f6;animation-delay:.2s}.ta-grow.g2{fill:var(--a)}.ta-grow.g3{fill:#10b981;animation-delay:.4s}
.ta-star{fill:#ffc23d;animation:ta-twinkle 2s ease-in-out infinite}
/* rubric */
.ta-cell{fill:var(--paper);stroke:color-mix(in srgb,var(--a) 30%,transparent);stroke-width:1.5}
.ta-check{stroke-dasharray:100;stroke-dashoffset:100;animation:ta-check 4.5s ease infinite}
.ta-check.c2{animation-delay:.5s}.ta-check.c3{animation-delay:1s}
/* prompts */
.ta-msg{animation:ta-msg 5s ease infinite}
.ta-msg.m2{animation-delay:.5s}.ta-msg.m3{animation-delay:1s}

/* livelier when the card is hovered */
:is(.ft-card,.ti-card,.fam-tool,.quick-tool):hover .tool-art svg{transform:scale(1.04);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}

/* teacher home 「課堂好幫手」: the art replaces the small icon tile */
.quick-tool .tool-icon.quick-art,:root[data-theme] .quick-tool .tool-icon.quick-art,:root[data-theme] .quick-tool:hover .tool-icon.quick-art{width:3.6rem;height:2.9rem;padding:0;background:transparent;border-radius:.8rem;overflow:hidden;box-shadow:none}
.quick-art .tool-art{width:100%;height:100%;display:grid;place-items:center;background:var(--s)}
:root[data-theme=dark] .quick-art .tool-art{background:color-mix(in srgb,var(--a) 16%,#1c1c1e)}
.quick-art .tool-art svg{width:112%;height:auto}

@keyframes ta-bob{50%{transform:translateY(-5px)}}
@keyframes ta-wiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes ta-sweep{to{stroke-dashoffset:0}}
@keyframes ta-wave{0%{opacity:.15;transform:translateX(-3px)}40%{opacity:1}100%{opacity:.15;transform:translateX(4px)}}
@keyframes ta-write{0%{stroke-dashoffset:30}40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes ta-press{0%,20%,100%{transform:none;fill:color-mix(in srgb,var(--a) 22%,var(--paper))}10%{transform:translateY(2px) scale(.9);fill:var(--a)}}
@keyframes ta-tick{to{transform:rotate(360deg)}}
@keyframes ta-in{0%{opacity:0;transform:scale(.85)}15%,85%{opacity:.95;transform:none}100%{opacity:0}}
@keyframes ta-pop{0%,20%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.12)}36%,80%{transform:none;opacity:1}100%{opacity:0}}
@keyframes ta-typeline{0%{stroke-dashoffset:100}30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@keyframes ta-twinkle{50%{transform:scale(1.35) rotate(20deg)}}
@keyframes ta-hop{50%{transform:translateY(-6px)}}
@keyframes ta-flip{0%,80%{transform:none}95%,100%{transform:rotate(180deg)}}
@keyframes ta-drain{0%{transform:scaleY(1)}80%,100%{transform:scaleY(.1)}}
@keyframes ta-fill{0%{transform:scaleY(.1)}80%,100%{transform:scaleY(1)}}
@keyframes ta-drip{to{stroke-dashoffset:-7}}
@keyframes ta-cardflip{0%,30%{transform:rotateY(0)}45%{transform:rotateY(90deg)}60%,100%{transform:rotateY(0)}}
@keyframes ta-spin{0%{transform:rotate(0)}70%,100%{transform:rotate(1080deg)}}
@keyframes ta-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes ta-growbar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes ta-check{0%,10%{stroke-dashoffset:100}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@keyframes ta-msg{0%{opacity:0;transform:translateY(8px)}15%,80%{opacity:1;transform:none}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tool-art *{animation:none!important}.ta-sweep{stroke-dashoffset:35}.ta-type,.ta-check{stroke-dashoffset:0}.ta-line.l1,.ta-line.l2,.ta-line.l3{stroke-dashoffset:0}}