/* Halloween Force ghosts. See .claude/halloween-ghosts.md; spawned by /js/halloween.js. */

.hg-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1100;
}

.hg-ghost {
    position: absolute;
    top: 100%;
    --hg-height: min(var(--hg-size), 28vw);
    left: calc((100% - var(--hg-height) * 400 / 520) * var(--hg-x));
    height: var(--hg-height);
    aspect-ratio: 400 / 520;
    opacity: 0;
    animation: hg-rise var(--hg-rise) linear forwards;
    will-change: transform, opacity;
}

.hg-ghost img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    filter: drop-shadow(0 0 8px rgba(140, 200, 255, 0.9)) drop-shadow(0 0 22px rgba(80, 160, 255, 0.55));
    animation: hg-sway var(--hg-sway) ease-in-out infinite alternate;
}

@keyframes hg-rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    8% {
        opacity: var(--hg-opacity);
    }
    88% {
        opacity: var(--hg-opacity);
    }
    100% {
        transform: translateY(calc(-100vh - 100% - 40px));
        opacity: 0;
    }
}

@keyframes hg-sway {
    from {
        transform: translateX(calc(var(--hg-amp) * -1)) rotate(calc(var(--hg-tilt) * -1));
    }
    to {
        transform: translateX(var(--hg-amp)) rotate(var(--hg-tilt));
    }
}

@media (prefers-reduced-motion: reduce) {
    .hg-layer {
        display: none;
    }
}

@media print {
    .hg-layer {
        display: none;
    }
}