/* =========================================================
   Header skull mascot
   animation/skull/skull.css

   NOTE: float lives on .header-skull (the wrapper) while interaction
   states live on .header-skull img - so the idle float and any image
   effects never fight over the same element. Interactions do NOT move
   the image (no translateX), so clicking never shifts it.
   ========================================================= */

.header-skull {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: none;

    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    animation: skullFloat 6s ease-in-out infinite;
}

.header-skull img {
    width: 100%;
    height: 100%;

    display: block;

    transition: filter 0.2s ease;
}

/* blink is frame-driven (skull.js swaps the image through icon_blink_00..06),
   so there is no CSS blink animation. The .blink class is unused. */

/* dizzy - spin the wrapper 5 full turns. This REPLACES the idle float while
   active (one element can only run one `animation` at a time), then JS swaps
   to the dizzy frame when this animation ends. 5 turns over 1.5s. */
.header-skull.dizzy {
    animation: skullSpin 1.5s linear 1;
}

@keyframes skullFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes skullSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1800deg); /* 5 full turns */
    }
}

/* Respect reduced-motion: kill the idle float and the spin (JS still swaps to
   the dizzy frame, so the gag still reads, just without the motion). */
@media (prefers-reduced-motion: reduce) {
    .header-skull,
    .header-skull.dizzy {
        animation: none;
    }
}