/* Shared playful theme + fruit character animations (used by home.html and index.html) */

/* Fredoka (SIL Open Font License), self-hosted latin subset so it looks the same on every phone */
@font-face {
    font-family: 'Fredoka';
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/fredoka-latin.woff2) format('woff2');
}

:root {
    --ink: #2b2b2b;
    --cream: #fff8ec;
    --paper: #fffdf8;
    --green: #2a9d6f;
    --green-dark: #1f7a55;
    --green-soft: #dff4e8;
    --orange: #ff9f1c;
    --red: #e63946;
    --yellow: #ffd93d;
    --yellow-soft: #fff3c4;
    --muted: #6b6259;
    --pop: 3px 3px 0 var(--ink);
    --font-fun: "Fredoka", ui-rounded, system-ui, sans-serif;
    --font-body: "Fredoka", ui-rounded, system-ui, sans-serif;
}

.fruit {
    display: inline-block;
    width: 80px;
    line-height: 0;
    flex-shrink: 0;
}

.fruit svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.fruit .leg,
.fruit .arm,
.fruit .eyes,
.fruit .bod {
    transform-box: fill-box;
}

.fruit .leg { transform-origin: 50% 0; }
.fruit .arm-l { transform-origin: 100% 0; }
.fruit .arm-r { transform-origin: 0 0; }

.fruit .eyes {
    transform-origin: center;
    animation: blink 4s infinite;
    animation-delay: var(--d, 0s);
}

.fruit.bob .bod { animation: bob 1.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.fruit.walk .bod { animation: hop 0.45s ease-in-out infinite alternate; }
.fruit.walk .leg-l { animation: step 0.45s ease-in-out infinite alternate; }
.fruit.walk .leg-r { animation: step 0.45s ease-in-out infinite alternate-reverse; }
.fruit.walk .arm-l { animation: swing 0.45s ease-in-out infinite alternate-reverse; }
.fruit.walk .arm-r { animation: swing 0.45s ease-in-out infinite alternate; }
.fruit.wave .arm-r { animation: wave 0.7s ease-in-out infinite alternate; }

@keyframes blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-6px) rotate(-3deg); }
    75% { transform: translateY(-6px) rotate(3deg); }
}

@keyframes hop { to { transform: translateY(-4px); } }
@keyframes step { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes swing { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes wave { from { transform: rotate(15deg); } to { transform: rotate(-45deg); } }
@keyframes stroll { from { left: -80px; } to { left: 100%; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}