:root {
    --duration: 0.9s;   /* velocità della vibrazione */
    --angle: 10deg;     /* ampiezza rotazione */
}

.bell {
    display: inline-block;
    transform-origin: top right; /* 🔹 punto di fissaggio in alto a destra */
}
.bell:hover {
    transform-origin: top right; /* 🔹 punto di fissaggio in alto a destra */
    animation: ring var(--duration) ease-in-out infinite;
}
.bell.ring{
    transform-origin: top right; /* 🔹 punto di fissaggio in alto a destra */
    animation: ring var(--duration) ease-in-out infinite;
}

.bell img, .bell span  {
    display: inline-block;
}

/* Effetto oscillazione "sonaglio" */
@keyframes ring {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(var(--angle)); }
    20% { transform: rotate(calc(-1 * var(--angle))); }
    30% { transform: rotate(var(--angle)); }
    40% { transform: rotate(calc(-1 * var(--angle))); }
    50% { transform: rotate(var(--angle)); }
    60%, 100% { transform: rotate(0deg); }
}

/* Disattiva per chi preferisce ridurre il movimento */
@media (prefers-reduced-motion: reduce) {
    .bell {
        animation: none;
    }
}
.bee-wrapper {
    position: relative;
    animation: forwardback 6s ease-in-out infinite;
    width: 120px;
}

.bee {
    width: 140px;
    height: 140px;
    background: url("https://www.dindinbooks.com/images/bombo.png") center/contain no-repeat;
    animation: fly 4s ease-in-out infinite, flap 0.15s ease-in-out infinite alternate;
}

.shadow {
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 70px;
    height: 18px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent 70%);
    border-radius: 50%;
    filter: blur(2px);
    animation: shadow 4s ease-in-out infinite;
}

/* movimento "svolazzante" */
@keyframes fly {
    0%   { transform: translate(0, 0) rotate(-3deg); }
    25%  { transform: translate(12px, -15px) rotate(4deg); }
    50%  { transform: translate(0, -8px) rotate(-5deg); }
    75%  { transform: translate(-12px, -10px) rotate(3deg); }
    100% { transform: translate(0, 0) rotate(-3deg); }
}

/* leggera vibrazione */
@keyframes flap {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.03) translate(0, -1px); }
}

/* movimento avanti/indietro */
@keyframes forwardback {
    0%   { transform: translate(0px, 0px); }
    10%  { transform: translate(8px, -4px); }
    20%  { transform: translate(15px, 2px); }
    30%  { transform: translate(20px, -6px); }
    40%  { transform: translate(25px, -2px); }
    50%  { transform: translate(18px, 4px); }
    60%  { transform: translate(8px, -3px); }
    70%  { transform: translate(-5px, 2px); }
    80%  { transform: translate(-10px, -5px); }
    90%  { transform: translate(-4px, 3px); }
    100% { transform: translate(0px, 0px); }
}

/* ombra che si adatta al volo */
@keyframes shadow {
    0%   { transform: translateX(-50%) scale(0.9); opacity: 0.35; }
    25%  { transform: translateX(-50%) scale(0.75); opacity: 0.25; }
    50%  { transform: translateX(-50%) scale(0.85); opacity: 0.3; }
    75%  { transform: translateX(-50%) scale(0.7); opacity: 0.22; }
    100% { transform: translateX(-50%) scale(0.9); opacity: 0.35; }
}
.worm {
    display: block;
    position: relative;
    width: 270px;
    animation: crawl 10s linear infinite;
}

.worm img {
    width: 100%;
    display: block;
    transform-origin: center center;
    animation: wiggle 0.8s ease-in-out infinite;
}
/* Movimento in avanti (solo da sinistra a destra) */
@keyframes crawl {
    0% {
        transform: translateX(15vw) scaleX(1);    /* parte a sinistra, guarda a destra */
    }
    49.999% {
        transform: translateX(5vw) scaleX(1);    /* arriva a destra */
    }
    50% {
        transform: translateX(5vw) scaleX(-1);   /* si ribalta */
    }
    100% {
        transform: translateX(15vw) scaleX(-1);   /* torna indietro verso sinistra */
    }
}

/* Effetto “onda” del corpo */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg) scaleX(1); }
    25% { transform: rotate(3deg) scaleX(0.75); }
    50% { transform: rotate(-3deg) scaleX(1.04); }
    75% { transform: rotate(2deg) scaleX(0.97); }
}

/* Disattiva per utenti che preferiscono meno movimento */
@media (prefers-reduced-motion: reduce) {
    .worm, .worm img {
        animation: none;
    }
}