/* Mascotte Claspy: colori e stati. I colori si cambiano con --cl-body / --cl-accent / --cl-eye sul contenitore. */
[data-claspy] { --cl-body: var(--navy); --cl-accent: var(--gold); --cl-eye: var(--navy); display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-claspy] .cl { display: block; width: 100%; height: auto; overflow: visible; }
.cl-stroke { fill: none; stroke: var(--cl-body); stroke-linecap: round; stroke-linejoin: round; }
.cl-accent { fill: var(--cl-accent); }
.cl-eye { fill: var(--cl-eye); }

.cl-all, .cl-arm, .cl-eyes, .cl-body, .cl-mouth, .cl-belly { transform-box: view-box; }
.cl-all { transform-origin: 22px 59px; }
.cl-arm-l { transform-origin: 10px 33px; }
.cl-arm-r { transform-origin: 34px 30px; }
.cl-eyes { transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .18s ease-out; }
.cl-eye { transform-box: fill-box; transform-origin: center; animation: cl-blink 5.2s infinite; }
.cl-eye + .cl-eye { animation-delay: 0s; }
.cl-mouth { transform-origin: 22px 29.5px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }

@keyframes cl-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes cl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.1px); } }
@keyframes cl-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-26deg); } 55% { transform: rotate(8deg); } 80% { transform: rotate(-20deg); } }
@keyframes cl-wave-idle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-24deg); } 86% { transform: rotate(6deg); } 94% { transform: rotate(-18deg); } }
@keyframes cl-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(1px) scale(1.05, .93); } 50% { transform: translateY(-9px) scale(.96, 1.05); } 80% { transform: translateY(0) scale(1.04, .95); } }
@keyframes cl-read { 0%, 100% { transform: translate(-1.3px, 0); } 50% { transform: translate(1.3px, 0); } }
@keyframes cl-think { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes cl-cheer { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }
@keyframes cl-cheer-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(38deg); } }

[data-claspy] .cl-all { animation: cl-float 4.2s ease-in-out infinite; }
[data-claspy] .cl-arm-r { animation: cl-wave-idle 6s ease-in-out infinite; }

[data-state="wave"] .cl-arm-r { animation: cl-wave 1.5s ease-in-out infinite; }
[data-state="read"] .cl-eyes { animation: cl-read 1.1s ease-in-out infinite; transition: none; }
[data-state="read"] .cl-arm-r { animation: none; }
[data-state="think"] .cl-body { animation: cl-think 1.8s ease-in-out infinite; transform-origin: 22px 59px; }
[data-state="think"] .cl-arm-r { animation: cl-cheer 1.8s ease-in-out infinite; }
[data-state="happy"] .cl-all { animation: cl-hop 1.2s ease-in-out infinite; }
[data-state="happy"] .cl-arm-r { animation: cl-cheer 1.2s ease-in-out infinite; }
[data-state="happy"] .cl-arm-l { animation: cl-cheer-l 1.2s ease-in-out infinite; }
[data-state="happy"] .cl-mouth { transform: scale(1.5, 1.5); }

.is-hop .cl-all { animation: cl-hop .7s cubic-bezier(.3, .7, .3, 1) 1; }
.is-hop .cl-arm-r { animation: cl-cheer .7s ease-in-out 1; }

/* sguardo a terra: la mascotte nella colonna "Oggi" */
[data-state="down"] .cl-all { animation: none !important; transform: rotate(-4deg); }
[data-state="down"] .cl-eyes { transform: translate(0, 1.7px); }
[data-state="down"] .cl-arm-l { transform: rotate(-14deg); }
[data-state="down"] .cl-arm-r { animation: none !important; transform: rotate(14deg); }
[data-state="down"] .cl-mouth { transform: scaleY(-1); }

@media (prefers-reduced-motion: reduce) {
  [data-claspy] .cl-all, [data-claspy] .cl-arm, [data-claspy] .cl-eye, [data-claspy] .cl-body, [data-claspy] .cl-eyes { animation: none !important; }
}