/*!
 * Dpgalerie carousel module
 * (C) 2026 Denis Poirel. GNU GPL v2 or later.
 * Original, dependency-free styles.
 */
.dpgalerie-carousel {
    --pk-cols: 3;
    --pk-cols-m: 1;
    --pk-gap: 12px;
    --pk-radius: 0px;
    --pk-ratio: 4 / 3;
    position: relative;
    margin: 1rem 0;
}
.dpgalerie-carousel * { box-sizing: border-box; }

.pk-viewport { overflow: hidden; width: 100%; }

.pk-track {
    display: flex;
    gap: var(--pk-gap);
    will-change: transform;
    transition: transform var(--pk-speed, .55s) cubic-bezier(.4, .0, .2, 1);
}

.pk-cell {
    flex: 0 0 calc((100% - (var(--pk-cols) - 1) * var(--pk-gap)) / var(--pk-cols));
    max-width: calc((100% - (var(--pk-cols) - 1) * var(--pk-gap)) / var(--pk-cols));
}

.pk-media { display: block; overflow: hidden; border-radius: var(--pk-radius); }
.pk-media img {
    display: block;
    width: 100%;
    aspect-ratio: var(--pk-ratio);
    object-fit: cover;
    border-radius: var(--pk-radius);
    transition: transform .4s ease;
}
a.pk-media { cursor: zoom-in; }
a.pk-media:hover img { transform: scale(1.05); }

/* Arrows */
.pk-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.5rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: background .2s, opacity .2s;
}
.pk-arrow:hover { background: rgba(0, 0, 0, .75); }
.pk-arrow.is-disabled { opacity: .35; cursor: default; }
.pk-prev { left: 6px; } .pk-next { right: 6px; }

/* Dots */
.pk-dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.pk-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: currentColor; opacity: .3; cursor: pointer; transition: opacity .2s, transform .2s; }
.pk-dot.is-active { opacity: .9; transform: scale(1.25); }

.dpgalerie-empty { padding: 1rem; color: #888; font-style: italic; }

/* Responsive columns */
@media (max-width: 782px) {
    .pk-cell {
        flex-basis: calc((100% - (var(--pk-cols-m) - 1) * var(--pk-gap)) / var(--pk-cols-m));
        max-width: calc((100% - (var(--pk-cols-m) - 1) * var(--pk-gap)) / var(--pk-cols-m));
    }
}

/* ---------------------------------------------------------------- Effects */

/* fade */
.pk-effect-fade .pk-cell.pk-in .pk-media { animation: pk-fade var(--pk-speed, .6s) ease both; }
@keyframes pk-fade { from { opacity: 0; } to { opacity: 1; } }

/* zoom */
.pk-effect-zoom .pk-cell.pk-in .pk-media { animation: pk-zoom var(--pk-speed, .6s) cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pk-zoom { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }

/* flip */
.pk-effect-flip .pk-track { perspective: 1200px; }
.pk-effect-flip .pk-cell.pk-in .pk-media { animation: pk-flip var(--pk-speed, .7s) ease both; transform-origin: center; }
@keyframes pk-flip { from { opacity: 0; transform: rotateY(-75deg); } to { opacity: 1; transform: rotateY(0); } }

/* slide-up */
.pk-effect-slideup .pk-cell.pk-in .pk-media { animation: pk-slideup var(--pk-speed, .6s) ease both; }
@keyframes pk-slideup { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

/* kenburns (continuous, on visible images) */
.pk-effect-kenburns .pk-media { overflow: hidden; }
.pk-effect-kenburns .pk-media img { animation: pk-kenburns 14s ease-in-out infinite alternate; }
@keyframes pk-kenburns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.14) translate(-2%, -2%); }
}

/* coverflow (transforms set per-cell by JS) */
.pk-effect-coverflow .pk-track { perspective: 1400px; }
.pk-effect-coverflow .pk-cell { transition: transform .5s ease, opacity .5s ease; }

/* --- Extra effects ------------------------------------------------------- */

/* slide-down */
.pk-effect-slidedown .pk-cell.pk-in .pk-media { animation: pk-slidedown var(--pk-speed, .6s) ease both; }
@keyframes pk-slidedown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }

/* slide-left (enters from the right) */
.pk-effect-slideleft .pk-cell.pk-in .pk-media { animation: pk-slideleft var(--pk-speed, .6s) ease both; }
@keyframes pk-slideleft { from { opacity: 0; transform: translateX(45px); } to { opacity: 1; transform: translateX(0); } }

/* slide-right (enters from the left) */
.pk-effect-slideright .pk-cell.pk-in .pk-media { animation: pk-slideright var(--pk-speed, .6s) ease both; }
@keyframes pk-slideright { from { opacity: 0; transform: translateX(-45px); } to { opacity: 1; transform: translateX(0); } }

/* rotate */
.pk-effect-rotate .pk-cell.pk-in .pk-media { animation: pk-rotate var(--pk-speed, .6s) cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pk-rotate { from { opacity: 0; transform: rotate(-10deg) scale(.85); } to { opacity: 1; transform: rotate(0) scale(1); } }

/* flip vertical (rotateX) */
.pk-effect-flipx .pk-track { perspective: 1200px; }
.pk-effect-flipx .pk-cell.pk-in .pk-media { animation: pk-flipx var(--pk-speed, .7s) ease both; }
@keyframes pk-flipx { from { opacity: 0; transform: rotateX(-80deg); } to { opacity: 1; transform: rotateX(0); } }

/* fold (rotateY from the left edge) */
.pk-effect-fold .pk-track { perspective: 1200px; }
.pk-effect-fold .pk-cell.pk-in .pk-media { animation: pk-fold var(--pk-speed, .6s) ease both; transform-origin: left center; }
@keyframes pk-fold { from { opacity: 0; transform: rotateY(-90deg); } to { opacity: 1; transform: rotateY(0); } }

/* swing */
.pk-effect-swing .pk-cell.pk-in .pk-media { animation: pk-swing var(--pk-speed, .6s) ease both; transform-origin: top center; }
@keyframes pk-swing { 0% { opacity: 0; transform: rotate(12deg); } 55% { opacity: 1; transform: rotate(-6deg); } 100% { transform: rotate(0); } }

/* blur */
.pk-effect-blur .pk-cell.pk-in .pk-media { animation: pk-blur var(--pk-speed, .6s) ease both; }
@keyframes pk-blur { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }

/* bounce */
.pk-effect-bounce .pk-cell.pk-in .pk-media { animation: pk-bounce var(--pk-speed, .7s) cubic-bezier(.28, .84, .42, 1) both; }
@keyframes pk-bounce { 0% { opacity: 0; transform: translateY(-42px); } 60% { opacity: 1; transform: translateY(9px); } 80% { transform: translateY(-4px); } 100% { transform: translateY(0); } }

/* skew */
.pk-effect-skew .pk-cell.pk-in .pk-media { animation: pk-skew var(--pk-speed, .6s) ease both; }
@keyframes pk-skew { from { opacity: 0; transform: skewX(14deg) translateX(30px); } to { opacity: 1; transform: skewX(0) translateX(0); } }

/* pop (elastic scale) */
.pk-effect-pop .pk-cell.pk-in .pk-media { animation: pk-pop var(--pk-speed, .6s) cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes pk-pop { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }

/* reveal (horizontal wipe) */
.pk-effect-reveal .pk-cell.pk-in .pk-media { animation: pk-reveal var(--pk-speed, .6s) ease both; }
@keyframes pk-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* circle (iris) */
.pk-effect-circle .pk-cell.pk-in .pk-media { animation: pk-circle var(--pk-speed, .6s) ease both; }
@keyframes pk-circle { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }

/* cube (3D quarter turn) */
.pk-effect-cube .pk-track { perspective: 1400px; }
.pk-effect-cube .pk-cell.pk-in .pk-media { animation: pk-cube var(--pk-speed, .7s) cubic-bezier(.3, .7, .3, 1) both; transform-origin: left center; }
@keyframes pk-cube { from { opacity: 0; transform: rotateY(90deg) translateZ(60px); } to { opacity: 1; transform: rotateY(0) translateZ(0); } }

/* mosaic (staggered tile assembly — stagger index set by JS via --pk-i) */
.pk-effect-mosaic .pk-cell.pk-in .pk-media { animation: pk-mosaic var(--pk-speed, .5s) ease both; animation-delay: calc(var(--pk-i, 0) * 90ms); }
@keyframes pk-mosaic { from { opacity: 0; transform: scale(.55) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

/* parallax (pointer-reactive depth — image translate driven by JS) */
.pk-effect-parallax .pk-media { overflow: hidden; }
.pk-effect-parallax .pk-media img { transform: scale(1.12); transition: transform .25s ease-out; will-change: transform; }
.pk-effect-parallax a.pk-media:hover img { transform: scale(1.12); }
.pk-effect-parallax .pk-cell.pk-in .pk-media { animation: pk-fade var(--pk-speed, .6s) ease both; }

/* Autoplay progress "hourglass" (top-left, fills over the interval) */
.pk-autoprogress {
    position: absolute; top: 8px; left: 8px; z-index: 4; width: 22px; height: 22px;
    pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
.pk-autoprogress.is-hidden { display: none; }
.pk-autoprogress svg { display: block; transform: rotate(-90deg); }
.pk-ap-bg { fill: rgba(0, 0, 0, .45); stroke: rgba(255, 255, 255, .75); stroke-width: 1.5; }
.pk-ap-pie {
    fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 10;
    stroke-dasharray: 31.42; stroke-dashoffset: 31.42; /* filled from JS (rAF) */
}

/* Lightbox */
.pk-no-scroll { overflow: hidden; }
.pk-lightbox { position: fixed; inset: 0; z-index: 99999; display: none;
    align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); }
.pk-lightbox.is-open { display: flex; }
.pk-lb-stage { max-width: 92vw; max-height: 92vh; text-align: center; }
.pk-lb-stage img { max-width: 92vw; max-height: 84vh; border-radius: 4px; }
.pk-lb-cap { color: #eee; margin-top: .6rem; }
.pk-lb-close, .pk-lb-prev, .pk-lb-next { position: absolute; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #fff; }
.pk-lb-close { top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; font-size: 1.8rem; }
.pk-lb-prev, .pk-lb-next { top: 50%; transform: translateY(-50%); width: 54px; height: 54px;
    border-radius: 50%; font-size: 2rem; }
.pk-lb-prev { left: 20px; } .pk-lb-next { right: 20px; }
.pk-lb-close:hover, .pk-lb-prev:hover, .pk-lb-next:hover { background: rgba(255, 255, 255, .28); }

@media (prefers-reduced-motion: reduce) {
    .pk-track, .pk-media img, .pk-cell { transition: none !important; animation: none !important; }
}