/* CoopMate: motion graphics (prefisso mo-, MOTION-1). Macro in templates/ui/motion.twig; si carica solo dove servono (home, onboarding, /_ds).
   Solo var(--ui-*). Si animano solo transform e opacity. Senza JavaScript e con prefers-reduced-motion: reduce resta lo stato finale statico:
   tutto ciò che nasconde o anima sta dentro @media (prefers-reduced-motion: no-preference). */

/* ---------- colori degli SVG (classi, mai attributi: i token cambiano col tema) ---------- */
.mo-f-pri { fill: var(--ui-primary); }
.mo-f-sec { fill: var(--ui-secondary); }
.mo-f-acc { fill: var(--ui-accent); }
.mo-f-ink { fill: var(--ui-ink); }
.mo-f-strong { fill: var(--ui-border-strong); }
.mo-f-line { fill: var(--ui-border); }
.mo-card, .mo-f-card { fill: var(--ui-surface-raised); stroke: var(--ui-border); stroke-width: 1.5; }
.mo-seat { fill: none; stroke: var(--ui-border-strong); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mo-star { fill: var(--ui-accent); stroke: var(--ui-accent-text); stroke-width: 1; stroke-linejoin: round; }
.mo-s-ink, .mo-s-card, .mo-s-link, .mo-s-ring, .mo-s-dots { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mo-s-ink { stroke: var(--ui-ink); stroke-width: 2.5; }
.mo-s-card { stroke: var(--ui-surface-raised); stroke-width: 4; }
.mo-s-link { stroke: var(--ui-ink); stroke-width: 2.5; stroke-dasharray: 2 6; }
.mo-s-ring { stroke: var(--ui-secondary); stroke-width: 2; stroke-dasharray: 4 7; }
.mo-s-dots { stroke: var(--ui-border-strong); stroke-width: 2.5; stroke-dasharray: 1 8; }
.mo-art { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- sequenza in 5 scene: full (home) ---------- */
.mo-steps { margin: 0; padding: 0; list-style: none; counter-reset: mo; }
.mo-steps--full { display: grid; gap: var(--ui-space-5); }
.mo-steps--full .mo-scene { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--ui-space-4); align-items: start; counter-increment: mo; }
.mo-scene__art { position: relative; padding: var(--ui-space-2); border-radius: var(--ui-radius-lg); background: var(--ui-surface-sunken); }
.mo-scene--match .mo-scene__art { background: var(--ui-danger-bg); }
.mo-scene--session .mo-scene__art { background: var(--ui-success-bg); }
.mo-scene--feedback .mo-scene__art { background: var(--ui-warning-bg); }
.mo-scene--group .mo-scene__art { background: var(--ui-info-bg); }
.mo-scene__body > * { margin: 0; }
.mo-scene__title { display: flex; align-items: center; gap: var(--ui-space-2); margin-bottom: var(--ui-space-1); font-size: var(--ui-text-lg); }
.mo-scene__title::before { content: counter(mo); display: grid; flex: none; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ui-surface-inverse); color: var(--ui-ink-inverse); font-size: var(--ui-text-sm); font-weight: 800; }
.mo-scene__body p { color: var(--ui-ink-muted); }

/* ---------- sequenza compatta (onboarding) ---------- */
.mo-steps--compact { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ui-space-2); }
.mo-steps--compact .mo-scene { display: grid; justify-items: center; gap: var(--ui-space-1); color: var(--ui-ink-muted); font-size: var(--ui-text-xs); font-weight: 700; text-align: center; }
.mo-steps--compact .mo-art { padding: var(--ui-space-1); border-radius: var(--ui-radius-sm); background: var(--ui-surface-sunken); opacity: .72; }
.mo-steps--compact [aria-current="step"] { color: var(--ui-ink); }
.mo-steps--compact [aria-current="step"] .mo-art { outline: 2px solid var(--ui-primary); outline-offset: 2px; background: var(--ui-surface-raised); opacity: 1; }

/* ---------- decorazione dell'hero (home) ---------- */
.mo-hero { position: absolute; inset: 0; pointer-events: none; }
.mo-hero svg { position: absolute; z-index: 1; overflow: visible; height: auto; }
.mo-hero__pad { top: 0; left: 0; width: 4.5rem; transform: rotate(-12deg); }
.mo-hero__spark { top: .75rem; right: .5rem; width: 1.75rem; }
.mo-hero__link { right: 0; bottom: 4.75rem; z-index: -1; width: 9rem; }

@media (min-width: 640px) {
    .mo-steps--full .mo-scene { grid-template-columns: 10rem minmax(0, 1fr); }
}

@media (min-width: 900px) {
    .mo-steps--full { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ui-space-4); }
    .mo-steps--full .mo-scene { grid-template-columns: none; align-content: start; }
    /* Freccia tra una scena e la successiva, nello spazio fra le colonne. */
    .mo-steps--full .mo-scene + .mo-scene .mo-scene__art::before { content: ""; position: absolute; top: 50%; right: 100%; width: var(--ui-space-4); height: 2px; background: var(--ui-border-strong); transform-origin: left; }
    .mo-hero__pad { top: -.5rem; left: -.75rem; width: 5.5rem; }
    .mo-hero__link { bottom: 5.25rem; width: 12rem; }
}

/* ---------- movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
    .mo-a { transform-box: fill-box; transform-origin: center; }
    .mo-grow { transform-origin: left; }
    [data-motion="ready"] .mo-a, [data-motion="ready"] .mo-scene__art::before { opacity: 0; }
    [data-motion="play"] .mo-a { animation: .6s var(--ui-ease-spring) calc(var(--_s, 0s) + var(--_e, 0s)) both; }
    [data-motion="play"] .mo-pop { animation-name: mo-pop; }
    [data-motion="play"] .mo-up { animation-name: mo-up; }
    [data-motion="play"] .mo-in-l { animation-name: mo-in-l; }
    [data-motion="play"] .mo-in-r { animation-name: mo-in-r; }
    [data-motion="play"] .mo-in-t { animation-name: mo-in-t; }
    [data-motion="play"] .mo-in-b { animation-name: mo-in-b; }
    [data-motion="play"] .mo-grow, [data-motion="play"] .mo-grow-c { animation-name: mo-grow; animation-timing-function: var(--ui-ease-out); }
    [data-motion="play"] .mo-spin { animation-name: mo-spin; animation-duration: 1.4s; animation-timing-function: var(--ui-ease-out); }
    [data-motion="play"] .mo-scene__art::before { animation: mo-grow .4s var(--ui-ease-out) calc(var(--_s) - .2s) both; }
    .mo-d1 { --_e: .1s; } .mo-d2 { --_e: .22s; } .mo-d3 { --_e: .34s; } .mo-d4 { --_e: .46s; } .mo-d5 { --_e: .58s; } .mo-d6 { --_e: .7s; }

    /* Scene affiancate (compatta sempre, full da 900 px): entrano in sequenza, una dopo l'altra. */
    .mo-steps--compact .mo-scene:nth-child(2) { --_s: .35s; }
    .mo-steps--compact .mo-scene:nth-child(3) { --_s: .7s; }
    .mo-steps--compact .mo-scene:nth-child(4) { --_s: 1.05s; }
    .mo-steps--compact .mo-scene:nth-child(5) { --_s: 1.4s; }

    .mo-hero__pad { animation: mo-drop .7s var(--ui-ease-spring) .35s both; }
    .mo-hero__float { transform-box: fill-box; transform-origin: center; animation: mo-float 5s ease-in-out 1.1s infinite alternate; }
    .mo-hero__spark { animation: mo-twinkle 4s ease-in-out .8s infinite; }
    .mo-hero__link { animation: mo-fade .8s var(--ui-ease-out) .5s both; }
    .mo-hero__dot { transform-box: fill-box; transform-origin: center; animation: mo-pulse 3s ease-in-out 1.3s infinite; }
    .mo-hero__dot--b { animation-delay: 2.8s; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .mo-steps--full .mo-scene:nth-child(2) { --_s: .6s; }
    .mo-steps--full .mo-scene:nth-child(3) { --_s: 1.2s; }
    .mo-steps--full .mo-scene:nth-child(4) { --_s: 1.8s; }
    .mo-steps--full .mo-scene:nth-child(5) { --_s: 2.4s; }
}

@keyframes mo-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes mo-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes mo-in-l { from { opacity: 0; transform: translateX(-22px); } }
@keyframes mo-in-r { from { opacity: 0; transform: translateX(22px); } }
@keyframes mo-in-t { from { opacity: 0; transform: translateY(-16px); } }
@keyframes mo-in-b { from { opacity: 0; transform: translateY(16px); } }
@keyframes mo-grow { from { opacity: 0; transform: scaleX(0); } }
@keyframes mo-spin { from { opacity: 0; transform: rotate(-120deg) scale(.7); } }
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-drop { from { opacity: 0; transform: translateY(-1.5rem) rotate(-40deg) scale(.6); } }
@keyframes mo-float { to { transform: translateY(-6px) rotate(4deg); } }
@keyframes mo-twinkle { 0%, 70%, 100% { transform: scale(1) rotate(0); } 85% { transform: scale(1.3) rotate(45deg); } }
@keyframes mo-pulse { 0%, 60%, 100% { transform: scale(1); } 80% { transform: scale(1.35); } }