/* Tools: the animated pictures (lib/tool-art.mjs), visual cards on /tools/ and the picture at the top
   of each tool page. Always a dark sky window. Motion pauses off screen (tools.js) and stops with
   reduced motion. */
.art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #07090d; }
/* Shapes that scale or move about their own box; everything else keeps SVG's own transforms. */
.art :is(.grow, .fill-x, .pop, .ribbon, .rays, .drop, .notify, .tw, .glow, .phase, .drift, .set, .sun-bob, .shadow-sweep) { transform-box: fill-box; }
.art-paused .art *, .art-paused.art * { animation-play-state: paused !important; }

/* Shared motions */
.art .tw { animation: art-twinkle 3.6s ease-in-out infinite; }
.art .sun-travel { transform-box: view-box; offset-rotate: 0deg; animation: art-travel 9s linear infinite; }
.art .halo { animation-name: art-travel; }
.art .grow { transform-origin: bottom; animation: art-grow 6s cubic-bezier(.2,.7,.2,1) infinite; }
.art .slide-x { animation: art-slide 6s ease-in-out infinite; }
.art .fill-x { transform-origin: left; animation: art-fill 5s cubic-bezier(.2,.7,.2,1) infinite; }
.art .pop { transform-origin: center; animation: art-pop 5s cubic-bezier(.2,1.4,.4,1) infinite; }
.art .glow { animation: art-glow 3.2s ease-in-out infinite; }
.art .drift { animation: art-drift 14s ease-in-out infinite alternate; }
.art .drift.slow { animation-duration: 19s; animation-direction: alternate-reverse; }
.art .breathe { animation: art-breathe 5s ease-in-out infinite; }
.art .spin { transform-box: view-box; animation: art-spin 12s linear infinite; }
.art .sweep { transform-box: view-box; animation: art-sweep 8s ease-in-out infinite alternate; }
.art .phase { animation: art-phase 8s ease-in-out infinite alternate; }
.art .ribbon { animation: art-ribbon 9s ease-in-out infinite alternate; }
.art .ribbon.two { animation-duration: 12s; animation-direction: alternate-reverse; }
.art .rays { animation: art-rays 2.6s ease-in-out infinite alternate; }
.art .shadow-sweep { transform-origin: 0 0; animation: art-shadow 8s ease-in-out infinite alternate; }
.art .sun-bob { animation: art-bob 8s ease-in-out infinite alternate; }
.art .draw { stroke-dasharray: 420; animation: art-draw 6s ease-in-out infinite; }
.art .tape { animation: art-tape 10s linear infinite; }
.art .set { animation: art-set 7s ease-in-out infinite; }
.art .drop { animation: art-drop 6s cubic-bezier(.3,1.5,.5,1) infinite; }
.art .notify { animation: art-notify 6s cubic-bezier(.2,.9,.3,1) infinite; }
.art .ring { stroke-dashoffset: var(--len, 188.5); animation: art-ring 6s ease-in-out infinite; }
.art .tile { animation: art-tile 6s ease-out infinite; }

/* Sun on the spot: the pin and the chip turn gold while the sun is above the ridge (11–75 % of the path). */
.art-sun-on-the-spot .pin-flip { color: #88adfe; animation: art-pin 9s linear infinite; }
.art-sun-on-the-spot .chip-sun { animation: art-on 9s linear infinite; }
.art-sun-on-the-spot .chip-shade { animation: art-off 9s linear infinite; }
.art-widgets-and-watch .ring { --len: 138; }

@keyframes art-twinkle { 50% { opacity: .25; } }
@keyframes art-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes art-pin { 0%, 10.5% { color: #88adfe; } 11.5%, 74.5% { color: #ffb944; } 75.5%, 100% { color: #88adfe; } }
@keyframes art-on { 0%, 10.5% { opacity: 0; } 11.5%, 74.5% { opacity: 1; } 75.5%, 100% { opacity: 0; } }
@keyframes art-off { 0%, 10.5% { opacity: 1; } 11.5%, 74.5% { opacity: 0; } 75.5%, 100% { opacity: 1; } }
@keyframes art-grow { 0% { transform: scaleY(0); } 25%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes art-slide { 0%, 10% { transform: translateX(0); } 50% { transform: translateX(240px); } 90%, 100% { transform: translateX(0); } }
@keyframes art-fill { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes art-pop { 0% { transform: scale(0); opacity: 0; } 12%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } }
@keyframes art-glow { 50% { opacity: .35; } }
@keyframes art-drift { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes art-breathe { 50% { stroke-opacity: .2; } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-sweep { from { transform: rotate(-70deg); } to { transform: rotate(70deg); } }
@keyframes art-phase { from { transform: translateX(-4px); } to { transform: translateX(-28px); } }
@keyframes art-ribbon { from { transform: translateX(-26px) skewX(-4deg); } to { transform: translateX(22px) skewX(5deg); } }
@keyframes art-rays { from { transform: translateX(0); opacity: .5; } to { transform: translateX(3px); opacity: 1; } }
@keyframes art-shadow { from { transform: translateX(-40px) skewX(-25deg); } to { transform: translateX(80px) skewX(20deg); } }
@keyframes art-bob { from { transform: translate(0, 10px); } to { transform: translate(180px, -8px); } }
@keyframes art-draw { 0% { stroke-dashoffset: 420; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -420; } }
@keyframes art-tape { from { transform: translateX(0); } to { transform: translateX(-160px); } }
@keyframes art-set { 0% { transform: translateY(-40px); } 70%, 82% { transform: translateY(26px); } 100% { transform: translateY(-40px); } }
@keyframes art-drop { 0% { transform: translateY(-30px); opacity: 0; } 12%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes art-notify { 0% { transform: translateY(40px); opacity: 0; } 14%, 80% { transform: none; opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@keyframes art-ring { 0% { stroke-dashoffset: var(--len, 188.5); } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: var(--len, 188.5); } }
@keyframes art-tile { 0% { opacity: .08; } 20%, 90% { opacity: 1; } 100% { opacity: .08; } }

/* /tools/: visual cards */
.tool-grid.visual { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.tool-card.visual { min-width: 0; display: grid; gap: 14px; padding: 12px 12px 18px; align-content: start; transition: transform .25s ease, box-shadow .25s ease, background .2s; }
.tool-card.visual:hover { transform: translateY(-3px); box-shadow: 0 18px 40px #0003; }
.tool-card.visual .card-copy { padding: 0 8px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; }
.tool-card.visual .tool-icon { width: 36px; height: 36px; border-radius: 10px; grid-row: span 2; }
.tool-card.visual .tool-icon svg { width: 20px; height: 20px; }
.tool-card.visual h3 { margin: 2px 0 0; }

/* Tool page: the picture under the header */
.tool-art { margin: 34px 0 6px; padding: 10px; border-radius: 22px; background: #07090d; box-shadow: 0 24px 60px #0003; }
.tool-art .art { border-radius: 14px; }
.tool-art figcaption { color: #ffffffa6; font-size: 13px; padding: 10px 6px 2px; }

/* Steps appear as they scroll in, with a line joining them */
.tool-steps.reveal li { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.tool-steps.reveal li.seen { opacity: 1; transform: none; }
.tool-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: -14px; width: 1px; background: var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .art *, .art { animation: none !important; }
  .art .sun-travel { offset-distance: 50%; }
  .art-sun-on-the-spot .pin-flip { color: #ffb944; }
  .art-sun-on-the-spot .chip-shade { opacity: 0; }
  .art .draw, .art .ring { stroke-dashoffset: 0; }
  .tool-steps.reveal li { opacity: 1; transform: none; transition: none; }
  .tool-card.visual { transition: none; }
}