/* =========================================================
   Fattor-IA — hint glass interazioni
   ========================================================= */

.fattoria-interactive-target {
    position: relative;
}

.fattoria-interaction-glass {
    position: absolute;
    z-index: 20;

    left: 50%;
    top: 18px;

    transform: translateX(-50%);

    width: max-content;
    max-width: calc(100% - 28px);

    padding: 10px 15px;

    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;

    background:
        rgba(255,255,255,.68);

    -webkit-backdrop-filter:
        blur(14px) saturate(145%);

    backdrop-filter:
        blur(14px) saturate(145%);

    box-shadow:
        0 8px 26px rgba(22,61,46,.14),
        inset 0 1px 0 rgba(255,255,255,.8);

    color: #163D2E;

    font-size: .82rem;
    line-height: 1.2;
    font-weight: 700;

    text-align: center;

    pointer-events: none;

    animation:
        fattoria-glass-float 1.6s ease-in-out infinite,
        fattoria-glass-arrive .38s ease-out both;
}

.fattoria-interaction-glass-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fattoria-interaction-glass-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    background: #D6A928;
    color: #163D2E;

    font-size: .9rem;

    animation:
        fattoria-glass-icon 1.15s ease-in-out infinite;
}

.fattoria-interaction-glass.is-leaving {
    animation:
        fattoria-glass-out .22s ease forwards;
}

@keyframes fattoria-glass-arrive {
    from {
        opacity: 0;
        transform:
            translate(-50%, 7px)
            scale(.96);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, 0)
            scale(1);
    }
}

@keyframes fattoria-glass-float {
    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: 5px;
    }
}

@keyframes fattoria-glass-icon {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

@keyframes fattoria-glass-out {
    to {
        opacity: 0;
        transform:
            translate(-50%, -5px)
            scale(.96);
    }
}

@media (prefers-reduced-motion: reduce) {

    .fattoria-interaction-glass,
    .fattoria-interaction-glass-icon {
        animation: none;
    }

}

@media (max-width: 760px) {

    .fattoria-interaction-glass {
        top: 10px;

        max-width: calc(100% - 20px);

        padding: 9px 13px;

        font-size: .76rem;
    }

}