/* «ציור שזז» ג׳: סצנת המוצר מ-onimli.com מתחת לכותרת החדר, באותו חלון ובאותה תנועה כמו בעמוד הבית של האתר (family-hub.css) */
.ink-scene { --s-ink: var(--ink); --s-paper: var(--ivory); --s-white: var(--sheet); display: block; overflow: hidden; margin: 14px 0 18px; background: var(--s-paper); border-radius: var(--leaf); }
.ink-scene svg { display: block; width: 100%; height: auto; }
.ink-scene .o > * { fill: var(--s-ink); stroke: var(--s-ink); }
.ink-scene .o > .w { fill: none; }
.ink-scene .p > * { fill: var(--s-paper); stroke: none; }
.ink-scene .p > .w { fill: none; stroke: var(--s-paper); }
.ink-scene .p > .wh { fill: var(--s-white); }
.ink-scene .k > * { fill: var(--s-ink); stroke: none; }
.ink-scene .k > .w { fill: none; stroke: var(--s-ink); }
.ink-scene .gr { fill: var(--s-ink); }
.ink-scene :is(image, g, .gr) { transform-box: fill-box; }
.ink-scene:not(.is-in) * { animation-play-state: paused !important; }
.ink-scene :is(.o, .p, .k) > * { stroke-dasharray: 1; }
.ink-scene :is(.o > .w, .p > .w, .k > .w) { animation: sc-draw 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--i, 0) * 0.14s) both; }
.ink-scene .o > :not(.w) { animation: sc-draw 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--i, 0) * 0.14s) both, sc-ink 0.8s steps(1, end) calc(0.15s + var(--i, 0) * 0.14s) both; }
.ink-scene :is(.k > :not(.w), .p > .wh) { animation: sc-fade 0.3s ease calc(0.6s + var(--i, 0) * 0.14s) both; }
.ink-scene .gr { transform-origin: 100% 50%; animation: sc-floor 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ink-scene[data-p="phone"] .roll { transform-origin: 83.3% 100%; animation: sc-roll 1.5s ease-in-out 0.9s both; }
.ink-scene[data-p="phone"] .ring { transform-origin: 50% 100%; animation: sc-drop 0.55s cubic-bezier(0.3, 1.25, 0.5, 1) 0.95s both, sc-shake 1s ease-in-out 1.6s; }
.ink-scene[data-p="phone"] .live { animation: sc-blink 1.1s linear 1.6s both; }
.ink-scene[data-p="tasks"] .th { transform-origin: 50% 50%; animation: sc-pop 0.4s cubic-bezier(0.3, 1.3, 0.5, 1) calc(0.9s + var(--n) * 0.16s) both; }
.ink-scene[data-p="tasks"] .note > .base { animation: sc-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.35s both; }
.ink-scene[data-p="tasks"] .tick { animation: sc-pop 0.3s cubic-bezier(0.3, 1.3, 0.5, 1) calc(1.95s + var(--n) * 0.42s) both; }
.ink-scene[data-p="tasks"] .pen { animation: sc-pen 1.3s ease-in-out 1.6s both; }
.ink-scene[data-p="agent"] .base { animation: sc-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1s both; }
.ink-scene[data-p="agent"] .live { animation: sc-stamp 0.45s cubic-bezier(0.3, 1.3, 0.5, 1) 1.7s both; }
@keyframes sc-draw { from { stroke-dashoffset: 1; } }
@keyframes sc-ink { from { fill-opacity: 0; } }
@keyframes sc-fade { from { opacity: 0; } }
@keyframes sc-floor { from { transform: scaleX(0); } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes sc-pop { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes sc-drop { from { opacity: 0; transform: translateY(-30px); } }
@keyframes sc-stamp { from { opacity: 0; transform: scale(1.7) rotate(-10deg); } }
@keyframes sc-roll { 0%, 100% { transform: none; } 30% { transform: rotate(-7deg); } 65% { transform: rotate(3deg); } }
@keyframes sc-shake { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: rotate(-4deg); } 20%, 40%, 60%, 80% { transform: rotate(4deg); } }
@keyframes sc-blink { 0% { opacity: 0; } 12%, 40%, 70%, 100% { opacity: 1; } 26%, 55% { opacity: 0.25; } }
@keyframes sc-pen {
  0% { opacity: 0; transform: translate(calc(var(--dx) * -2), calc(var(--dy) * -2)); }
  15%, 30% { opacity: 1; transform: translate(calc(var(--dx) * -2), calc(var(--dy) * -2)); }
  48%, 62% { opacity: 1; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)); }
  82%, 100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ink-scene * { animation: none !important; } }
html.a11y-no-motion .ink-scene * { animation: none !important; }