/* KOMENDANT — ANIMOWANE K */

body.v3 .hero .v3-symbol-stage.k-clean-stage {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    height: 382px !important;
    min-height: 382px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    isolation: isolate;
}

body.v3 .hero .k-clean-mark {
    width: min(78%, 332px) !important;
    max-width: 332px !important;
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    animation: km-k-float 7s ease-in-out infinite !important;
    transition: scale .45s ease !important;
}

/* Delikatna poświata za K */
body.v3 .hero .k-clean-mark::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 18% !important;
    border-radius: 50% !important;
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.801),
        rgba(118,67,192,.10) 48%,
        transparent 74%
    ) !important;
    filter: blur(28px) !important;
    animation: km-k-glow 6.5s ease-in-out infinite !important;
    pointer-events: none;
}

/* Oryginalna litera K */
body.v3 .hero .k-clean-mark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter:
        drop-shadow(0 0 13px rgba(160,101,230,.20))
        drop-shadow(0 15px 24px rgba(0,0,0,.20)) !important;
    transition: filter .4s ease !important;
    animation: km-k-enter .85s ease-out both !important;
}

/* Błysk ograniczony maską do kształtu K */
body.v3 .hero .k-clean-mark::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(
        108deg,
        transparent 40%,
        rgba(236,201,255,.08) 45%,
        rgba(160, 10, 160, 0.377) 50%,
        rgba(186, 129, 255, 0.178) 55%,
        transparent 60%
    ) !important;
    background-size: 260% 100% !important;
    background-position: 125% center;
    -webkit-mask:
        url('/assets/komendant-k.svg')
        center / contain no-repeat !important;
    mask:
        url('/assets/komendant-k.svg')
        center / contain no-repeat !important;
    mix-blend-mode: screen;
    opacity: 0;
    transform: none !important;
    animation: km-k-sheen 8.5s ease-in-out 1.4s infinite !important;
}

/* Wyłączenie starego błysku z metalowego logo */
body.v3 .hero .km3-logo-sweep {
    display: none !important;
    animation: none !important;
}

/* Reakcja na najechanie */
body.v3 .hero .k-clean-mark:hover {
    scale: 1.035 !important;
}

body.v3 .hero .k-clean-mark:hover img {
    filter:
        drop-shadow(0 0 22px rgba(178,112,247,.43))
        drop-shadow(0 17px 23px rgba(238, 11, 11, 0.89)) !important;
}

@keyframes km-k-enter {
    from { opacity: 0; transform: translateY(13px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes km-k-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

@keyframes km-k-glow {
    0%, 100% { opacity: .64; scale: .96; }
    50%      { opacity: .96; scale: 1.05; }
}

@keyframes km-k-sheen {
    0%, 49%, 100% {
        background-position: 125% center;
        opacity: 0;
    }
    56% { opacity: .55; }
    66% {
        background-position: -125% center;
        opacity: .8;
    }
    70% {
        background-position: -125% center;
        opacity: 0;
    }
}

@media (max-width: 900px) {
    body.v3 .hero .v3-symbol-stage.k-clean-stage {
        height: 325px !important;
        min-height: 325px !important;
    }
    body.v3 .hero .k-clean-mark {
        width: min(75%,270px) !important;
    }
}

@media (max-width: 700px) {
    body.v3 .hero .v3-symbol-stage.k-clean-stage {
        grid-row: 1 !important;
        height: 270px !important;
        min-height: 270px !important;
        width: min(100%,370px) !important;
    }
    body.v3 .hero .hero-copy {
        grid-row: 2 !important;
    }
    body.v3 .hero .k-clean-mark {
        width: min(72%,220px) !important;
    }
}

@media (max-width: 420px) {
    body.v3 .hero .v3-symbol-stage.k-clean-stage {
        height: 225px !important;
        min-height: 225px !important;
    }
    body.v3 .hero .k-clean-mark {
        width: min(70%,188px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.v3 .hero .k-clean-mark,
    body.v3 .hero .k-clean-mark::before,
    body.v3 .hero .k-clean-mark::after,
    body.v3 .hero .k-clean-mark img {
        animation: none !important;
        transition: none !important;
    }
    body.v3 .hero .k-clean-mark::after {
        opacity: 0 !important;
    }
}