/* HELIUMKING – animovana vianocna ciapocka na logu
   Verzia 4: desktop nizsie, mobil mensi a mierne viac doprava.
*/

/* Vypnutie pripadnej starej ciapocky na ikone oblubenych */
.favorite_icon::before,
.favorite_icon::after {
    content: none !important;
    animation: none !important;
}

a[data-testid="linkWebsiteLogo"] {
    position: relative !important;
    display: inline-block;
    overflow: visible !important;
}

/* DESKTOP – nizsie nad poslednym G */
a[data-testid="linkWebsiteLogo"]::before {
    content: "";
    position: absolute;
    z-index: 999;
    width: 43px;
    height: 34px;
    top: -5px;
    left: 85% !important;
    pointer-events: none;
    background: linear-gradient(145deg, #ff777b 0%, #e13b46 48%, #b91f31 100%);
    border-radius: 23px 22px 5px 5px;
    clip-path: polygon(2% 91%, 10% 67%, 29% 42%, 49% 22%, 70% 8%, 91% 0, 85% 39%, 100% 65%, 91% 91%);
    transform-origin: 52% 100%;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.16));
    animation: hkLogoHatSwingV4 2.8s ease-in-out infinite;
}

a[data-testid="linkWebsiteLogo"]::after {
    content: "";
    position: absolute;
    z-index: 1000;
    width: 43px;
    height: 9px;
    top: 20px;
    left: calc(85% - 1px) !important;
    pointer-events: none;
    background:
        radial-gradient(circle at 94% 0%, #fff 0 5px, transparent 5.5px),
        linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
    border-radius: 8px 8px 7px 7px;
    transform-origin: 52% 0%;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
    animation: hkLogoHatSwingV4 2.8s ease-in-out infinite;
}

@keyframes hkLogoHatSwingV4 {
    0%, 100% { transform: rotate(13deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(2px); }
}

/* MOBIL – mensia ciapocka a mierne posunuta doprava */
@media (max-width: 767px) {
    a[data-testid="linkWebsiteLogo"]::before {
        width: 21px;
        height: 18px;
        top: -9px;
        left: 89% !important;
    }

    a[data-testid="linkWebsiteLogo"]::after {
        width: 21px;
        height: 5px;
        top: 4px;
        left: calc(89% - 1px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    a[data-testid="linkWebsiteLogo"]::before,
    a[data-testid="linkWebsiteLogo"]::after {
        animation: none;
    }
}