/* ── Social floating menu ─────────────────────────────── */

@keyframes social-toggle-spin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.12); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes social-toggle-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(232, 185, 35, 0.55),
            0 6px 8px rgba(0, 0, 0, 0.15),
            0 0 2px 3px #8b1515,
            0 0 5px 8px #e8b923;
    }
    50% {
        box-shadow:
            0 0 0 10px rgba(232, 185, 35, 0),
            0 6px 12px rgba(0, 0, 0, 0.2),
            0 0 3px 4px #8b1515,
            0 0 8px 14px rgba(232, 185, 35, 0.45);
    }
}

@keyframes social-icon-pop {
    0% {
        scale: 0;
        opacity: 0;
        filter: blur(4px);
    }
    55% {
        scale: 1.18;
        opacity: 1;
        filter: blur(0);
    }
    75% {
        scale: 0.94;
    }
    100% {
        scale: 1;
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes social-icon-wiggle {
    0%, 100% { transform: rotate(calc(360deg / -8 * var(--i))) scale(1); }
    25%      { transform: rotate(calc(360deg / -8 * var(--i) - 6deg)) scale(1.06); }
    75%      { transform: rotate(calc(360deg / -8 * var(--i) + 6deg)) scale(1.06); }
}

@keyframes social-icon-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -3px; }
}

@keyframes social-img-shine {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    50%      { filter: brightness(1.15) drop-shadow(0 0 6px rgba(232, 185, 35, 0.7)); }
}

@media only screen and (min-width: 600px) {
    .menu-toggle {
        position: fixed;
        bottom: 150px;
        left: 10px;
        z-index: 100;
        width: 60px;
        height: 60px;
    }

    .toggle-icon img {
        width: 26px;
        height: 26px;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .menu-area .toggle-icon {
        position: absolute;
        height: 60px;
        width: 60px;
        background: linear-gradient(120deg, #8b1515 0%, #e8b923 49%, #8b1515);
        border-radius: 50%;
        box-shadow: 0 0 2px 3px #e8b923;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eaeaea;
        font-size: 2rem;
        cursor: pointer;
        transition: box-shadow 0.4s ease;
        z-index: 5;
    }

    .menu-area.active .toggle-icon {
        animation:
            social-toggle-spin 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) forwards,
            social-toggle-pulse 2s ease-in-out 0.7s infinite;
    }

    .menu-area.active .toggle-icon img {
        transform: scale(1.1) rotate(-12deg);
    }

    .menu-area li {
        position: absolute;
        left: -110px;
        list-style: none;
        transform: rotate(calc(360deg / 8 * var(--i)));
        transform-origin: 140px;
        scale: 0;
        opacity: 0;
        transition:
            scale 0.35s cubic-bezier(0.55, 0.06, 0.68, 0.19),
            opacity 0.25s ease,
            filter 0.25s ease;
        transition-delay: calc(0.04s * (8 - var(--i)));
    }

    .menu-area.active li {
        scale: 1;
        opacity: 1;
        animation: social-icon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        animation-delay: calc(0.09s * (var(--i) - 1));
        transition-delay: 0s;
    }

    .menu-area.active li a {
        animation: social-icon-wiggle 0.65s ease-out both;
        animation-delay: calc(0.09s * (var(--i) - 1) + 0.15s);
    }

    .menu-area.active li a img {
        animation: social-img-shine 2.4s ease-in-out infinite;
        animation-delay: calc(0.15s * var(--i));
    }

    .menu-area li a {
        position: relative;
        display: flex;
        transform: rotate(calc(360deg / -8 * var(--i)));
        width: 60px;
        height: 60px;
        background-color: transparent;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.75rem;
        color: var(--clr);
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
        transition:
            transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.3s ease,
            scale 0.3s ease;
    }

    .menu-area li:hover a {
        scale: 1.12;
        box-shadow:
            0 0 2px 2px var(--clr),
            0 0 10px 8px rgba(232, 185, 35, 0.45);
    }

    .menu-area li a img {
        width: 60px;
        height: 60px;
        object-fit: contain;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .menu-area li:hover a img {
        animation: social-icon-float 1.2s ease-in-out infinite;
    }
}

@media only screen and (max-width: 601px) {
    .menu-toggle {
        position: fixed;
        bottom: 170px;
        left: 10px;
        z-index: 100;
        width: 50px;
        height: 50px;
    }

    .toggle-icon img {
        width: 22px;
        height: 22px;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .menu-area .toggle-icon {
        position: absolute;
        height: 50px;
        width: 50px;
        background: linear-gradient(120deg, #8b1515 0%, #e8b923 49%, #8b1515);
        border-radius: 50%;
        box-shadow: 0 0 2px 3px #e8b923;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eaeaea;
        font-size: 1.8rem;
        cursor: pointer;
        transition: box-shadow 0.4s ease;
        z-index: 99;
    }

    .menu-area.active .toggle-icon {
        animation:
            social-toggle-spin 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) forwards,
            social-toggle-pulse 2s ease-in-out 0.7s infinite;
    }

    .menu-area.active .toggle-icon img {
        transform: scale(1.1) rotate(-12deg);
    }

    .menu-area .toggle-icon:active {
        box-shadow: none;
    }

    .menu-area li {
        position: absolute;
        left: -90px;
        list-style: none;
        transform: rotate(calc(360deg / 8 * var(--i)));
        transform-origin: 115px;
        scale: 0;
        opacity: 0;
        transition:
            scale 0.35s cubic-bezier(0.55, 0.06, 0.68, 0.19),
            opacity 0.25s ease;
        transition-delay: calc(0.04s * (8 - var(--i)));
    }

    .menu-area.active li {
        scale: 1;
        opacity: 1;
        animation: social-icon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        animation-delay: calc(0.09s * (var(--i) - 1));
        transition-delay: 0s;
    }

    .menu-area.active li a {
        animation: social-icon-wiggle 0.65s ease-out both;
        animation-delay: calc(0.09s * (var(--i) - 1) + 0.15s);
    }

    .menu-area.active li a img {
        animation: social-img-shine 2.4s ease-in-out infinite;
        animation-delay: calc(0.15s * var(--i));
    }

    .menu-area li a {
        position: relative;
        display: flex;
        transform: rotate(calc(360deg / -8 * var(--i)));
        width: 50px;
        height: 50px;
        background-color: transparent;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.35rem;
        color: var(--clr);
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
        transition:
            transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.3s ease,
            scale 0.3s ease;
    }

    .menu-area li:hover a {
        scale: 1.1;
        box-shadow:
            0 0 2px 2px var(--clr),
            0 0 8px 6px rgba(232, 185, 35, 0.4);
    }

    .menu-area li a img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .menu-area li:hover a img {
        animation: social-icon-float 1.2s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-area.active .toggle-icon,
    .menu-area.active li,
    .menu-area.active li a,
    .menu-area.active li a img,
    .menu-area li:hover a img {
        animation: none !important;
    }

    .menu-area.active .toggle-icon {
        transform: rotate(360deg);
    }

    .menu-area.active li {
        scale: 1;
        opacity: 1;
    }
}