/**
 * Site-identiteit custom logo — premium effecten (Customizer).
 */

/* Basis-wrapper */
.petjes-logo-fx {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

.petjes-logo-fx .custom-logo-link {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.petjes-logo-fx .custom-logo,
.petjes-logo-fx img.custom-logo {
    display: block;
    max-height: 44px;
    width: auto;
    height: auto;
}

/* —— 1. Liquid Chrome Sweep (glint) —— */
.petjes-logo-fx--glint .custom-logo-link {
    overflow: hidden;
    border-radius: 2px;
}

.petjes-logo-fx--glint .custom-logo-link::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(
        118deg,
        transparent 0%,
        transparent 42%,
        rgba(255, 255, 255, 0.55) 48%,
        rgba(0, 255, 85, 0.45) 51%,
        rgba(255, 255, 255, 0.35) 54%,
        transparent 58%,
        transparent 100%
    );
    background-size: 220% 220%;
    animation: petjes-logo-glint-sweep 4.8s ease-in-out infinite;
    mix-blend-mode: soft-light;
    pointer-events: none;
    opacity: 0.95;
}

@keyframes petjes-logo-glint-sweep {
    0%,
    35% {
        transform: translate(-35%, 20%) rotate(18deg);
        opacity: 0;
    }
    42% {
        opacity: 1;
    }
    55%,
    100% {
        transform: translate(35%, -25%) rotate(18deg);
        opacity: 0;
    }
}

/* —— 2. Neon Pulse —— */
.petjes-logo-fx--neon .custom-logo-link img {
    animation: petjes-logo-neon-pulse 3.6s ease-in-out infinite;
}

@keyframes petjes-logo-neon-pulse {
    0%,
    100% {
        filter: drop-shadow(0 0 4px rgba(0, 255, 85, 0.45)) drop-shadow(0 0 12px rgba(0, 255, 85, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(0, 255, 85, 0.85)) drop-shadow(0 0 26px rgba(0, 255, 85, 0.45));
    }
}

/* Glint + neon: ruimte zodat gloed niet wordt geknipt */
.petjes-logo-fx--glint.petjes-logo-fx--neon {
    padding: 10px;
    margin: -10px;
    overflow: visible;
}

.petjes-logo-fx--glint.petjes-logo-fx--neon .custom-logo-link {
    overflow: hidden;
}

/* —— 3. Magnetic hover (CSS-variabelen zet logo-fx.js) —— */
.petjes-logo-fx--magnetic .custom-logo-link {
    transform: perspective(520px) rotateX(calc(var(--petjes-tilt-x, 0) * 0.65deg))
        rotateY(calc(var(--petjes-tilt-y, 0) * -0.65deg));
    transition: transform 0.12s ease-out;
    will-change: transform;
}

.petjes-logo-fx--magnetic .custom-logo-link img {
    transition: transform 0.15s ease-out, filter 0.2s ease;
    transform: skewX(calc(var(--petjes-tilt-y, 0) * 0.08deg)) scale(calc(1 + var(--petjes-dist, 0) * 0.002));
}

.petjes-logo-fx--magnetic:hover .custom-logo-link img {
    filter: saturate(1.08) contrast(1.04);
}

/* —— 4. Glitch entry (eenmalig bij load) —— */
.petjes-logo-fx--entry .custom-logo-link img {
    animation: petjes-logo-glitch-entry 0.95s steps(2, end) 1 both;
}

@keyframes petjes-logo-glitch-entry {
    0% {
        opacity: 0;
        transform: translate(6px, -3px);
        filter: hue-rotate(70deg) saturate(1.4);
    }
    15% {
        opacity: 1;
        transform: translate(-5px, 2px);
        filter: hue-rotate(-30deg) saturate(1.2);
    }
    30% {
        transform: translate(4px, 1px);
        filter: hue-rotate(20deg);
    }
    45% {
        transform: translate(-3px, -1px);
        filter: none;
    }
    60% {
        transform: translate(2px, 0);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .petjes-logo-fx--glint .custom-logo-link::after,
    .petjes-logo-fx--neon .custom-logo-link img {
        animation: none !important;
    }

    .petjes-logo-fx--entry .custom-logo-link img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .petjes-logo-fx--magnetic .custom-logo-link,
    .petjes-logo-fx--magnetic .custom-logo-link img {
        transform: none !important;
        transition: none !important;
    }
}