/* Project illustrations (assets/js/art.js). */
.art { display: block; width: 100%; height: auto; overflow: visible; }
.art .soil { fill: color-mix(in srgb, var(--amber-ink) 45%, var(--paper-2)); }
.art .stem, .art .trunk { stroke: var(--olive); stroke-width: 4; stroke-linecap: round; fill: none; }
.art .trunk { stroke: color-mix(in srgb, var(--amber-ink) 70%, var(--ink)); stroke-width: 8; }
.art .leaf, .art .canopy { fill: var(--olive); }
.art .canopy { fill: color-mix(in srgb, var(--olive) 85%, var(--paper)); }
.art .fruit { fill: var(--rust); }
.art .sun { fill: var(--band-accent); }
.art .tool { fill: var(--teal); }
.art .spout, .art .handle { stroke: var(--teal); stroke-width: 4; fill: none; stroke-linecap: round; }
.art .drops circle { fill: var(--teal-2); }

.art-garden .sprout { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 4s ease-in-out infinite; }
.art-garden .s2 { animation-delay: .6s; } .art-garden .s3 { animation-delay: 1.2s; }
.art-garden .can { transform-box: fill-box; transform-origin: 80% 50%; animation: tilt 4s ease-in-out infinite; }
.art-garden .drops circle { animation: drip 1.4s linear infinite; }
.art-garden .drops circle:nth-child(2) { animation-delay: .45s; } .art-garden .drops circle:nth-child(3) { animation-delay: .9s; }
@keyframes grow { 0%, 100% { transform: scale(.94) rotate(-2deg); } 50% { transform: scale(1.05) rotate(2deg); } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes drip { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }

.art-bio .flower .petal { fill: var(--plum); } .art-bio .flower .core { fill: var(--band-accent); }
.art-bio .butterfly path:not(.body) { fill: var(--amber); }
.art-bio .butterfly .body { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.art-bio .butterfly { animation: flutter-path 6s ease-in-out infinite; }
.art-bio .wing { transform-box: fill-box; animation: flap .35s ease-in-out infinite alternate; }
.art-bio .wl { transform-origin: 100% 50%; } .art-bio .wr { transform-origin: 0% 50%; }
.art-bio .lens .glass { fill: color-mix(in srgb, var(--teal-soft) 60%, transparent); stroke: var(--ink); stroke-width: 4; }
.art-bio .lens .grip { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.art-bio .lens { animation: scan 6s ease-in-out infinite; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes flutter-path { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(10px, -10px); } 50% { transform: translate(-6px, -4px); } 75% { transform: translate(6px, 6px); } }
@keyframes scan { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 18px); } }

.art-maker .base { fill: var(--amber); }
.art-maker .beam { stroke: color-mix(in srgb, var(--amber-ink) 80%, var(--ink)); stroke-width: 6; stroke-linecap: round; }
.art-maker .cup { fill: none; stroke: var(--ink); stroke-width: 3; }
.art-maker .pivot { fill: var(--ink); }
.art-maker .ball { fill: var(--rust); animation: launch 3s cubic-bezier(.3,.1,.4,1) infinite; }
.art-maker .arm { transform-origin: 60px 96px; animation: swing 3s cubic-bezier(.3,.1,.4,1) infinite; }
.art-maker .gear path { fill: var(--teal); } .art-maker .gear .hole { fill: var(--card); }
.art-maker .gear { animation: spin 6s linear infinite; }
@keyframes swing { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-58deg); } 80% { transform: rotate(-58deg); } }
@keyframes launch { 0%, 58% { transform: translate(0, 0); opacity: 1; } 62% { transform: translate(-44px, -40px); } 75% { transform: translate(-90px, -64px); } 88% { transform: translate(-130px, -20px); opacity: 1; } 89%, 100% { opacity: 0; transform: translate(0,0); } }
@keyframes spin { to { transform: translate(160px, 54px) rotate(360deg); } }
.art-maker .gear { transform: translate(160px, 54px); }

.art-games .screen { fill: var(--ink); } .art-games .stage { fill: color-mix(in srgb, var(--teal-soft) 80%, var(--card)); }
.art-games .ground { fill: var(--olive); } .art-games .base { fill: var(--ink); }
.art-games .coin circle { fill: var(--band-accent); stroke: var(--amber-ink); stroke-width: 2; }
.art-games .coin { animation: bob 1.6s ease-in-out infinite; } .art-games .c2 { animation-delay: .3s; } .art-games .c3 { animation-delay: .6s; }
.art-games .sprite .bod { fill: var(--amber); } .art-games .sprite circle { fill: var(--ink); }
.art-games .sprite .ears { stroke: var(--amber); stroke-width: 3; fill: var(--amber); stroke-linejoin: round; }
.art-games .sprite { animation: hop 2.4s ease-in-out infinite; }
.art-games .flag path:not(.pole) { fill: var(--olive); } .art-games .pole { stroke: var(--ink-2); stroke-width: 2; }
.art-games .b1 { fill: var(--amber); } .art-games .b2 { fill: var(--plum); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hop { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(24px, -26px); } 50% { transform: translate(48px, 0); } 75% { transform: translate(24px, -14px); } }

.art-museum .roof, .art-museum .lintel, .art-museum .cols rect, .art-museum .step { fill: color-mix(in srgb, var(--ink-2) 25%, var(--paper-2)); stroke: var(--ink-2); stroke-width: 2; }
.art-museum .beam { fill: var(--band-accent); opacity: .28; transform-origin: 100px 54px; animation: sweep 5s ease-in-out infinite; }
.art-museum .plinth { fill: var(--ink-2); }
.art-museum .vase { fill: var(--rust); } .art-museum .band { stroke: var(--band-accent); stroke-width: 3; }
.art-museum .spark path { fill: var(--band-accent); }
.art-museum .spark { transform-box: fill-box; transform-origin: center; animation: twinkle 2.2s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.1); opacity: 1; } }

.art-cook .bowl { fill: var(--teal); }
.art-cook .whisk .handle { stroke: var(--ink-2); stroke-width: 4; stroke-linecap: round; }
.art-cook .whisk .loop { fill: none; stroke: var(--ink-2); stroke-width: 2.5; }
.art-cook .whisk { transform-origin: 96px 30px; animation: stir 1.2s ease-in-out infinite alternate; }
.art-cook .k1 { fill: var(--rust); } .art-cook .k2 { fill: var(--olive); } .art-cook .k3 { fill: var(--band-accent); }
.art-cook .bits circle { animation: bob 1.1s ease-in-out infinite; } .art-cook .k2 { animation-delay: .2s; } .art-cook .k3 { animation-delay: .4s; }
.art-cook .glass { fill: color-mix(in srgb, var(--card) 60%, transparent); stroke: var(--ink-2); stroke-width: 2.5; }
.art-cook .juice { fill: var(--plum); opacity: .8; }
.art-cook .straw { stroke: var(--amber); stroke-width: 4; stroke-linecap: round; }
.art-cook .fizz circle { fill: var(--card); animation: rise 1.8s linear infinite; } .art-cook .fizz circle:nth-child(2) { animation-delay: .6s; } .art-cook .fizz circle:nth-child(3) { animation-delay: 1.2s; }
@keyframes stir { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }

.ic { width: 20px; height: 20px; flex: none; }

/* ---- Grade 7 ---- */
.art-nursery .pole { stroke: var(--ink-2); stroke-width: 3; }
.art-nursery .net { fill: color-mix(in srgb, var(--olive) 55%, transparent); }
.art-nursery .tray { fill: var(--ink-2); } .art-nursery .cells rect { fill: color-mix(in srgb, var(--amber-ink) 50%, var(--paper-2)); }
.art-nursery .seedling { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 3.2s ease-in-out infinite; }
.art-nursery .sd1 { animation-delay: .3s; } .art-nursery .sd2 { animation-delay: .6s; } .art-nursery .sd3 { animation-delay: .9s; } .art-nursery .sd4 { animation-delay: 1.2s; }

.art-habitat .post { stroke: color-mix(in srgb, var(--amber-ink) 70%, var(--ink)); stroke-width: 6; }
.art-habitat .roof { fill: var(--rust); } .art-habitat .box { fill: var(--amber); } .art-habitat .hole { fill: var(--ink); }
.art-habitat .bbody { fill: var(--teal); } .art-habitat .beak { fill: var(--band-accent); } .art-habitat .eye { fill: #fff; }
.art-habitat .bird { animation: peck 2.4s ease-in-out infinite; transform-origin: 104px 60px; }
.art-habitat .flower .petal { fill: var(--plum); } .art-habitat .flower .core { fill: var(--band-accent); }
.art-habitat .bee { animation: buzz 5s ease-in-out infinite; }
.art-habitat .bee-b { fill: var(--band-accent); } .art-habitat .stripe { stroke: var(--ink); stroke-width: 1.6; }
.art-habitat .wing { fill: color-mix(in srgb, #fff 70%, transparent); animation: flap .15s linear infinite alternate; transform-box: fill-box; transform-origin: bottom; }
.art-habitat .bath { fill: none; stroke: var(--teal-2); stroke-width: 4; stroke-linecap: round; }
@keyframes peck { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(0); } 88% { transform: rotate(14deg); } }
@keyframes buzz { 0% { transform: translate(150px, 60px); } 25% { transform: translate(176px, 40px); } 50% { transform: translate(130px, 30px); } 75% { transform: translate(170px, 72px); } 100% { transform: translate(150px, 60px); } }

.art-tiedye .shirt { fill: var(--card); stroke: var(--ink-2); stroke-width: 2.5; stroke-linejoin: round; }
.art-tiedye .r1 { fill: var(--plum); } .art-tiedye .r2 { fill: var(--amber); } .art-tiedye .r3 { fill: var(--teal-2); } .art-tiedye .r4 { fill: var(--card); }
.art-tiedye .swirl { transform-origin: 100px 78px; animation: spin-c 12s linear infinite; }
.art-tiedye .swirl circle { stroke: var(--card); stroke-width: 2; stroke-dasharray: 3 4; }
.art-tiedye .dots circle { fill: var(--plum); animation: twinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.art-tiedye .dots circle:nth-child(2n) { animation-delay: .6s; fill: var(--rust); }
.art-tiedye .knot path:first-child { fill: var(--band-accent); } .art-tiedye .thread { stroke: var(--ink-2); stroke-width: 2; fill: none; }
@keyframes spin-c { to { transform: rotate(360deg); } }

.art-ai .screen { fill: var(--ink); } .art-ai .photo { fill: color-mix(in srgb, var(--olive-soft) 80%, var(--card)); }
.art-ai .mango { fill: var(--amber); } .art-ai .mstem { stroke: var(--olive); stroke-width: 3; fill: none; }
.art-ai .scan { fill: var(--teal-2); opacity: .7; animation: scan-y 2.2s ease-in-out infinite; }
.art-ai .base { fill: var(--ink); }
.art-ai .labels rect { fill: var(--teal); transform-box: fill-box; transform-origin: left; animation: grow-x 2.2s ease-out infinite; }
.art-ai .l2 { fill: var(--amber) !important; animation-delay: .2s !important; } .art-ai .l3 { fill: var(--rust) !important; animation-delay: .4s !important; }
.art-ai .nodes circle { fill: var(--plum); animation: twinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.art-ai .nodes circle:nth-child(2) { animation-delay: .4s; } .art-ai .nodes circle:nth-child(3) { animation-delay: .8s; }
.art-ai .link { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
@keyframes scan-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(62px); } }
@keyframes grow-x { 0% { transform: scaleX(.2); } 40%, 100% { transform: scaleX(1); } }

.art-puppets .rod { fill: var(--ink-2); } .art-puppets .curtain { fill: var(--rust); }
.art-puppets .spot { fill: var(--band-accent); opacity: .25; transform-origin: 100px 24px; animation: sweep 6s ease-in-out infinite; }
.art-puppets .stage { fill: color-mix(in srgb, var(--amber-ink) 60%, var(--ink)); }
.art-puppets .sockb { fill: var(--teal); } .art-puppets .eye { fill: #fff; } .art-puppets .pupil { fill: var(--ink); }
.art-puppets .mouth { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; }
.art-puppets .sock { animation: talk 1.2s ease-in-out infinite; transform-origin: 104px 104px; }
.art-puppets .str { stroke: var(--ink-2); stroke-width: 1.2; } .art-puppets .mhead { fill: var(--amber); } .art-puppets .mbody { fill: var(--plum); }
.art-puppets .strings { animation: dangle 2s ease-in-out infinite; transform-origin: 60px 24px; }
@keyframes talk { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-4px); } }
@keyframes dangle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.art-health .kit { fill: var(--card); stroke: var(--rust); stroke-width: 3; } .art-health .handle { fill: none; stroke: var(--rust); stroke-width: 3; }
.art-health .cross { stroke: var(--rust); stroke-width: 6; stroke-linecap: round; fill: none; }
.art-health .heart path { fill: var(--plum); } .art-health .heart { transform-origin: 150px 70px; animation: beat 1.1s ease-in-out infinite; }
.art-health .ecg { fill: none; stroke: var(--teal-2); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 260; animation: ecg 2.2s linear infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes ecg { from { stroke-dashoffset: 260; } to { stroke-dashoffset: -260; } }

/* ---- Grade 8 ---- */
.art-hydro .bottle { fill: color-mix(in srgb, var(--card) 70%, transparent); stroke: var(--ink-2); stroke-width: 2.5; }
.art-hydro .water { fill: color-mix(in srgb, var(--teal-2) 45%, transparent); }
.art-hydro .neck { fill: none; stroke: var(--ink-2); stroke-width: 2.5; }
.art-hydro .roots { fill: none; stroke: var(--card); stroke-width: 2; stroke-linecap: round; }
.art-hydro .plant { transform-origin: 80px 64px; animation: grow 3.4s ease-in-out infinite; transform-box: view-box; }
.art-hydro .bub circle { fill: var(--card); animation: rise 2s linear infinite; } .art-hydro .bub circle:nth-child(2) { animation-delay: .5s; } .art-hydro .bub circle:nth-child(3) { animation-delay: 1s; } .art-hydro .bub circle:nth-child(4) { animation-delay: 1.5s; }
.art-hydro .strip { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.5; } .art-hydro .tip { fill: var(--olive); animation: ph 4s ease-in-out infinite; }
.art-hydro .phlbl { font: 600 12px var(--mono); fill: var(--ink-2); }
@keyframes ph { 0%, 100% { fill: var(--olive); } 50% { fill: var(--amber); } }

.art-animals .cbody { fill: var(--card); stroke: var(--ink-2); stroke-width: 2.5; } .art-animals .spot { fill: var(--ink-2); }
.art-animals .leg { stroke: var(--ink-2); stroke-width: 7; stroke-linecap: round; } .art-animals .snout { fill: var(--rust-soft); }
.art-animals .eye { fill: var(--ink); } .art-animals .horn { stroke: var(--amber-ink); stroke-width: 4; stroke-linecap: round; }
.art-animals .tail { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; transform-origin: 52px 76px; animation: wag 1.4s ease-in-out infinite; }
.art-animals .chead { transform-origin: 130px 74px; animation: graze 4s ease-in-out infinite; }
.art-animals .tapeline { fill: none; stroke: var(--band-accent); stroke-width: 4; stroke-dasharray: 4 3; animation: dashmove 1.5s linear infinite; }
.art-animals .tapebox { fill: var(--amber); }
.art-animals .grass path { fill: none; stroke: var(--olive); stroke-width: 3; stroke-linecap: round; }
@keyframes wag { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
@keyframes graze { 0%, 55%, 100% { transform: rotate(0); } 65%, 85% { transform: rotate(22deg); } }
@keyframes dashmove { to { stroke-dashoffset: -14; } }

.art-wood .bench { fill: color-mix(in srgb, var(--amber-ink) 75%, var(--ink)); } .art-wood .legs { stroke: color-mix(in srgb, var(--amber-ink) 75%, var(--ink)); stroke-width: 6; }
.art-wood .plank { fill: var(--amber); } .art-wood .grain { stroke: var(--amber-ink); stroke-width: 1.5; fill: none; opacity: .6; }
.art-wood .cut { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 3; }
.art-wood .blade { fill: color-mix(in srgb, var(--ink-2) 30%, var(--card)); stroke: var(--ink-2); stroke-width: 1.5; } .art-wood .shandle { fill: var(--rust); }
.art-wood .saw { animation: sawing .6s ease-in-out infinite alternate; }
.art-wood .dust circle { fill: var(--amber-ink); animation: fall 1.2s linear infinite; } .art-wood .dust circle:nth-child(2) { animation-delay: .4s; } .art-wood .dust circle:nth-child(3) { animation-delay: .8s; }
.art-wood .bamboo rect { fill: var(--olive); } .art-wood .node { stroke: var(--olive-soft); stroke-width: 2; }
@keyframes sawing { from { transform: translate(-6px, -6px); } to { transform: translate(6px, 6px); } }
@keyframes fall { from { transform: translateY(0); opacity: 1; } to { transform: translateY(18px); opacity: 0; } }

.art-auto .board { fill: var(--teal); } .art-auto .chip { fill: var(--ink); } .art-auto .pins rect { fill: var(--band-accent); }
.art-auto .wire { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 4; animation: dashmove .8s linear infinite; }
.art-auto .w1 { stroke: var(--rust); } .art-auto .w2 { stroke: var(--plum); }
.art-auto .pirbox { fill: var(--card); stroke: var(--ink-2); stroke-width: 2; } .art-auto .dome { fill: color-mix(in srgb, var(--card) 40%, var(--paper-2)); stroke: var(--ink-2); stroke-width: 1.5; }
.art-auto .waves path { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; animation: pulse-o 1.6s ease-out infinite; }
.art-auto .waves path:nth-child(2) { animation-delay: .3s; }
.art-auto .ledbulb { fill: var(--band-accent); animation: blink 1.6s steps(1) infinite; } .art-auto .leg { stroke: var(--ink-2); stroke-width: 2; }
.art-auto .glow { fill: var(--band-accent); opacity: 0; animation: glow 1.6s steps(1) infinite; }
@keyframes pulse-o { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes blink { 0%, 49% { fill: var(--paper-2); } 50%, 100% { fill: var(--band-accent); } }
@keyframes glow { 0%, 49% { opacity: 0; } 50%, 100% { opacity: .25; } }

.art-water .tap, .art-water .knob { fill: color-mix(in srgb, var(--ink-2) 40%, var(--paper-2)); stroke: var(--ink-2); stroke-width: 2; }
.art-water .drop path { fill: var(--teal-2); } .art-water .drop { animation: drip2 1.4s ease-in infinite; } .art-water .d2 { animation-delay: .7s; }
.art-water .jar { fill: color-mix(in srgb, var(--card) 60%, transparent); stroke: var(--ink-2); stroke-width: 2.5; }
.art-water .fill { fill: color-mix(in srgb, var(--teal-2) 55%, transparent); transform-origin: 82px 126px; animation: fillup 4s ease-in-out infinite; }
.art-water .tick { stroke: var(--ink-2); stroke-width: 2; }
.art-water .dial { fill: var(--card); stroke: var(--ink-2); stroke-width: 3; } .art-water .hub { fill: var(--ink); }
.art-water .needle { stroke: var(--rust); stroke-width: 3; stroke-linecap: round; transform-origin: 154px 70px; animation: needle 4s ease-in-out infinite; }
@keyframes drip2 { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }
@keyframes fillup { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1.6); } }
@keyframes needle { 0%, 100% { transform: rotate(-60deg); } 50% { transform: rotate(50deg); } }

.art-ads .board { fill: var(--card); stroke: var(--ink-2); stroke-width: 3; } .art-ads .post { stroke: var(--ink-2); stroke-width: 5; }
.art-ads .burst path { fill: var(--band-accent); } .art-ads .burst { transform-origin: 74px 56px; animation: spin-c 8s linear infinite; }
.art-ads .line { fill: var(--ink-2); opacity: .5; } .art-ads .cta { fill: var(--rust); animation: beat 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.art-ads .horn { fill: var(--plum); } .art-ads .mouth { fill: var(--ink-2); }
.art-ads .mega { transform-origin: 150px 102px; animation: dangle 1.8s ease-in-out infinite; }
.art-ads .sound path { fill: none; stroke: var(--plum); stroke-width: 2.5; stroke-linecap: round; animation: pulse-o 1.4s ease-out infinite; } .art-ads .sound path:nth-child(2) { animation-delay: .3s; }