/* ==========================================================================
   Photo Stack — pila de fotos que se abre en abanico
   Modos:
     .lps--load   aparece con fundido al entrar en pantalla y se abre sola
                  (photo-stack.js añade .is-in y luego .is-open)
     .lps--hover  se abre al pasar el ratón
   Variables por foto (las pone el widget en style=""):
     grandes:  --rx --ry --rr (reposo) · --p --arc (abanico) · --z
     pequeñas: --ox --oy --or (posición abierta) · --d (orden)
   ========================================================================== */

.lps {
    --lps-card-w: 240px;
    --lps-ratio: 1.333;
    --lps-spread: 0.5;
    --lps-fan-rot: 9;
    --lps-sat: 0.42;
    --lps-sat-dist: 1;
    --lps-radius: 12px;
    --lps-duration: 550ms;
    --lps-fade: 450ms;
    --lps-ease: cubic-bezier(0.34, 1.3, 0.64, 1);
    --lps-card-h: calc(var(--lps-card-w) * var(--lps-ratio));

    position: relative;
    height: var(--lps-height, calc(var(--lps-card-h) * 1.35));
    outline: none;
}

/* ---- Base común ---- */
.lps__item {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: var(--lps-radius);
    overflow: hidden;
    background: #e9ecee;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    transition:
        transform var(--lps-duration) var(--lps-ease),
        opacity var(--lps-fade) ease;
    will-change: transform, opacity;
}

.lps__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    user-select: none;
}

/* ---- Fotos grandes (pila) ---- */
.lps__item--main {
    width: var(--lps-card-w);
    height: var(--lps-card-h);
    margin: calc(var(--lps-card-h) / -2) 0 0 calc(var(--lps-card-w) / -2);
    z-index: var(--z);
    transform:
        translate(calc(var(--rx) * var(--lps-card-w)), calc(var(--ry) * var(--lps-card-w)))
        rotate(calc(var(--rr) * 1deg));
    /* Posición en abanico, usada por los estados abiertos */
    --lps-open-t:
        translate(
            calc(var(--p) * var(--lps-spread) * var(--lps-card-w)),
            calc(var(--arc) * var(--lps-card-w))
        )
        rotate(calc(var(--p) * var(--lps-fan-rot) * 1deg));
}

/* ---- Fotos pequeñas (aparecen alrededor) ---- */
.lps__item--sat {
    --sat-w: calc(var(--lps-card-w) * var(--lps-sat));
    --sat-h: calc(var(--sat-w) * var(--lps-ratio));
    width: var(--sat-w);
    height: var(--sat-h);
    margin: calc(var(--sat-h) / -2) 0 0 calc(var(--sat-w) / -2);
    z-index: 20;
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.3);
    --lps-open-t:
        translate(
            calc(var(--ox) * var(--lps-sat-dist) * var(--lps-card-w)),
            calc(var(--oy) * var(--lps-sat-dist) * var(--lps-card-w))
        )
        rotate(calc(var(--or) * 1deg))
        scale(1);
}

/* ==========================================================================
   Modo «al cargar»: fundido de la pila y apertura automática
   ========================================================================== */

/* Antes de entrar en pantalla: invisible y algo más abajo */
.lps--load .lps__item--main {
    opacity: 0;
    transform:
        translate(calc(var(--rx) * var(--lps-card-w)), calc(var(--ry) * var(--lps-card-w) + 24px))
        rotate(calc(var(--rr) * 1deg));
}

/* Fundido: la pila se va formando de abajo arriba */
.lps--load.is-in .lps__item--main {
    opacity: 1;
    transform:
        translate(calc(var(--rx) * var(--lps-card-w)), calc(var(--ry) * var(--lps-card-w)))
        rotate(calc(var(--rr) * 1deg));
    /* La de abajo (--z: 1) aparece primero y la de arriba la última */
    transition-delay: calc((var(--z) - 1) * 90ms);
}

/* Apertura en escritorio/tablet (en móvil solo si se activa la opción) */
@media (min-width: 768px) {
    .lps--load.is-open .lps__item--main {
        transform: var(--lps-open-t);
        transition-delay: 0ms;
    }

    .lps--load.is-open .lps__item--sat {
        opacity: 1;
        transform: var(--lps-open-t);
        transition-delay: calc(80ms + var(--d) * 45ms);
    }
}

.lps--load.lps--open-mobile.is-open .lps__item--main {
    transform: var(--lps-open-t);
    transition-delay: 0ms;
}

.lps--load.lps--open-mobile.is-open .lps__item--sat {
    opacity: 1;
    transform: var(--lps-open-t);
    transition-delay: calc(80ms + var(--d) * 45ms);
}

/* ==========================================================================
   Modo «al pasar el ratón» (solo con ratón; en táctil queda apilada)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

    .lps--hover:hover .lps__item--main,
    .lps--hover:focus-within .lps__item--main {
        transform: var(--lps-open-t);
    }

    .lps--hover:hover .lps__item--sat,
    .lps--hover:focus-within .lps__item--sat {
        opacity: 1;
        transform: var(--lps-open-t);
        transition-delay: calc(80ms + var(--d) * 45ms);
    }
}

.lps--hover:focus-visible {
    outline: 3px solid #323e48;
    outline-offset: 6px;
    border-radius: 4px;
}

.lps__empty {
    padding: 24px;
    border: 1px dashed #b5bcc2;
    text-align: center;
    color: #323e48;
}

@media (prefers-reduced-motion: reduce) {
    .lps__item {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}