/* =========================================================================
   Pajarraco Volador v1.3
   Decoración lateral pequeña + pajarito volador
   ========================================================================= */

/* -------- Capas decorativas -------- */
.pjr-layer {
    position: fixed;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
    /* Variables por capa (fijadas desde JS) */
    height: var(--pjr-h);
    width: calc(var(--pjr-h) * var(--pjr-ratio, 1));
}
.pjr-layer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12));
}

/* Anclas */
.pjr-layer.anchor-top-left     { top: 0; left: 0; }
.pjr-layer.anchor-top-right    { top: 0; right: 0; }
.pjr-layer.anchor-bottom-left  { bottom: 0; left: 0; }
.pjr-layer.anchor-bottom-right { bottom: 0; right: 0; }

.pjr-layer.back  { z-index: 99998; }
.pjr-layer.front { z-index: 100000; }

/* Transformaciones sobre la <img> para no romper el sway del contenedor */
.pjr-layer.flip img        { transform: scaleX(-1); }
.pjr-layer.rotate180 img   { transform: rotate(180deg); }
.pjr-layer.flip.rotate180 img { transform: rotate(180deg) scaleX(-1); }

/* Sway: rotación del contenedor */
.pjr-layer.sway {
    animation-name: pjr-sway;
    animation-duration: var(--pjr-dur, 7s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: var(--pjr-delay, 0s);
}
@keyframes pjr-sway {
    0%   { transform: rotate(calc(var(--pjr-amp, 2deg) * -1)); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(var(--pjr-amp, 2deg)); }
}

/* -------- Pajarito -------- */
#pajarraco-volador {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    transform: translate3d(0,0,0);
    user-select: none;
    -webkit-user-select: none;
}
#pajarraco-volador .pjr-bird {
    position: relative;
    display: block;
    transform-origin: center center;
}
#pajarraco-volador .pjr-bird img {
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}
#pajarraco-volador.pjr-facing-left .pjr-bird img { transform: scaleX(-1); }

/* -------- Móvil -------- */
@media (max-width: 900px) {
    /* Si el admin NO activó "mostrar en móvil", ocultar todo */
    body:not(.pjr-show-mobile) .pjr-layer { display: none !important; }

    /* Si SÍ lo activó: tamaño mini pegado a bordes */
    body.pjr-show-mobile .pjr-layer {
        /* Override de la altura usando la variable móvil */
        height: var(--pjr-h-mobile, var(--pjr-h));
    }
    body.pjr-show-mobile .pjr-layer.hide-mobile { display: none !important; }

    #pajarraco-volador.pjr-hide-mobile { display: none !important; }
}

/* Respetar reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #pajarraco-volador { display: none !important; }
    .pjr-layer.sway { animation: none !important; }
}