/*
 * Gebaande Paden Swipe Image
 * Alles is bewust gescoped onder .gpsi-swipe-image zodat andere afbeeldingen
 * en WordPress-blokken niet worden beïnvloed.
 */

.gpsi-swipe-image {
    margin-left: 0;
    margin-right: 0;
}

.gpsi-swipe-image .gpsi-viewport {
    width: 100%;
}

.gpsi-swipe-image .gpsi-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Editor preview blijft bewust normaal en beïnvloedt alleen ons eigen blok. */
.gpsi-block-editor .gpsi-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.gpsi-block-editor .gpsi-editor-note {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

@media (max-width: 767px) {
    .gpsi-swipe-image .gpsi-viewport {
        aspect-ratio: 4 / 5;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .gpsi-swipe-image .gpsi-viewport::-webkit-scrollbar {
        display: none;
    }

    .gpsi-swipe-image .gpsi-image {
        width: auto;
        max-width: none;
        height: 100%;
        min-width: 100%;
        object-fit: contain;
    }

    .gpsi-swipe-image .gpsi-viewport:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* Editor-only position controls */
.gpsi-position-controls {
    margin-top: 12px;
}

.gpsi-position-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
}

.gpsi-position-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Mobiele scroll-indicatoren. Ze bestaan alleen binnen ons eigen blok. */
.gpsi-swipe-image {
    position: relative;
}

.gpsi-scroll-hints {
    display: none;
}

@media (max-width: 767px) {
    /*
     * De pijlen staan bewust BUITEN de foto, in de vrije zijruimte van het thema.
     * Zo blijft het beeld zelf volledig schoon. Alleen mobiel zichtbaar.
     */
    .gpsi-scroll-hints {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: visible;
        z-index: 2;
    }

    .gpsi-scroll-hint {
        position: absolute;
        top: 50%;
        width: 18px;
        height: 28px;
        margin-top: -14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 0;
        color: #b8b8b8;
        font-family: Arial, sans-serif;
        font-size: 22px;
        font-weight: 400;
        line-height: 1;
        opacity: 0;
        transition: opacity 160ms ease;
        text-shadow: none;
    }

    .gpsi-scroll-hint-left {
        left: -18px;
    }

    .gpsi-scroll-hint-right {
        right: -18px;
    }

    .gpsi-swipe-image.gpsi-has-scroll-left .gpsi-scroll-hint-left,
    .gpsi-swipe-image.gpsi-has-scroll-right .gpsi-scroll-hint-right {
        opacity: 0.9;
    }


    /* Eenmalige subtiele hint zodra de foto volledig in beeld staat. */
    .gpsi-swipe-image.gpsi-hint-pulse.gpsi-has-scroll-left .gpsi-scroll-hint-left {
        animation: gpsi-pulse-left 800ms ease-in-out 1;
    }

    .gpsi-swipe-image.gpsi-hint-pulse.gpsi-has-scroll-right .gpsi-scroll-hint-right {
        animation: gpsi-pulse-right 800ms ease-in-out 1;
    }

    @keyframes gpsi-pulse-left {
        0%, 100% { opacity: 0.9; transform: translateX(0); }
        50% { opacity: 0.45; transform: translateX(3px); }
    }

    @keyframes gpsi-pulse-right {
        0%, 100% { opacity: 0.9; transform: translateX(0); }
        50% { opacity: 0.45; transform: translateX(-3px); }
    }

    @media (prefers-reduced-motion: reduce) {
        .gpsi-scroll-hint {
            transition: none;
            animation: none !important;
        }
    }
}


/* Onderschriften blijven bij een omzetting van een gewoon Afbeelding-blok behouden. */
.gpsi-swipe-image .gpsi-caption,
.gpsi-block-editor .gpsi-caption {
    margin-top: 0.5em;
}

/* Mobiele dubbeltik-zoom voor gewone contentfoto's op berichten en portfolio-items. */
@media (max-width: 767px) {
    .gpsi-zoom-frame {
        position: relative;
        overflow: hidden;
        max-width: 100%;
        touch-action: pan-y pinch-zoom;
    }

    .gpsi-zoom-frame > img.gpsi-zoom-image {
        display: block;
        transform-origin: 50% 50%;
        will-change: transform;
        transition: transform 220ms ease-out;
    }

    .gpsi-zoom-frame.gpsi-is-zoomed {
        touch-action: none;
        cursor: grab;
    }

    .gpsi-zoom-frame.gpsi-is-panning {
        cursor: grabbing;
    }

    .gpsi-zoom-frame.gpsi-is-panning > img.gpsi-zoom-image {
        transition: none;
    }

    /* Eenmalige uitleg-hint op alleen de eerste gewone zoomfoto van de pagina. */
    .gpsi-doubletap-hint {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 76px;
        height: 76px;
        margin-left: -38px;
        margin-top: -38px;
        pointer-events: none;
        opacity: 0;
        z-index: 5;
        color: #f1f1f1;
        filter: grayscale(1);
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
    }

    .gpsi-doubletap-finger {
        position: absolute;
        left: 22px;
        top: 24px;
        font-size: 38px;
        line-height: 1;
        opacity: 0.96;
        transform-origin: 55% 80%;
    }

    .gpsi-doubletap-ring {
        position: absolute;
        left: 35px;
        top: 10px;
        width: 16px;
        height: 16px;
        border: 2px solid #f1f1f1;
        border-radius: 50%;
        opacity: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    }

    .gpsi-doubletap-hint.gpsi-doubletap-hint-show {
        opacity: 1;
        transition: opacity 220ms ease;
    }

    .gpsi-doubletap-hint.gpsi-doubletap-hint-show .gpsi-doubletap-finger {
        animation: gpsi-doubletap-finger 920ms ease-in-out 1;
    }

    .gpsi-doubletap-hint.gpsi-doubletap-hint-show .gpsi-doubletap-ring-one {
        animation: gpsi-doubletap-ring 460ms ease-out 1 100ms;
    }

    .gpsi-doubletap-hint.gpsi-doubletap-hint-show .gpsi-doubletap-ring-two {
        animation: gpsi-doubletap-ring 460ms ease-out 1 560ms;
    }

    .gpsi-doubletap-hint.gpsi-doubletap-hint-hide {
        opacity: 0;
    }

    @keyframes gpsi-doubletap-finger {
        0%, 18%, 50%, 68%, 100% { transform: translateY(0) scale(1); }
        32%, 82% { transform: translateY(-3px) scale(0.94); }
    }

    @keyframes gpsi-doubletap-ring {
        0% { opacity: 0.72; transform: scale(0.55); }
        100% { opacity: 0; transform: scale(1.8); }
    }



    /* Duidelijke onboarding op alleen de eerste Swipe foto van de pagina. */
    .gpsi-swipe-intro-hint {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 118px;
        height: 70px;
        margin-left: -59px;
        margin-top: -35px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        z-index: 6;
    }

    .gpsi-swipe-intro-arrow {
        display: block;
        font-family: Arial, sans-serif;
        font-size: 58px;
        font-weight: 400;
        line-height: 1;
        color: #f1f1f1;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.62);
    }

    .gpsi-swipe-intro-hint.gpsi-swipe-intro-show {
        opacity: 1;
        transition: opacity 220ms ease;
    }

    .gpsi-swipe-intro-hint.gpsi-swipe-intro-show .gpsi-swipe-intro-arrow {
        animation: gpsi-swipe-intro-arrow 1050ms ease-in-out 1;
    }

    .gpsi-swipe-intro-hint.gpsi-swipe-intro-hide {
        opacity: 0;
    }

    @keyframes gpsi-swipe-intro-arrow {
        0%, 100% { transform: translateX(0) scale(1); }
        25% { transform: translateX(-13px) scale(1.04); }
        50% { transform: translateX(0) scale(1); }
        75% { transform: translateX(13px) scale(1.04); }
    }

    /*
     * Swipe foto: dubbeltik toont de volledige landscape-foto binnen hetzelfde
     * 4:5-frame. De lege ruimte boven/onder blijft transparant.
     */
    .gpsi-swipe-image.gpsi-fit-full .gpsi-viewport {
        overflow: hidden;
        touch-action: pan-y;
    }

    .gpsi-swipe-image.gpsi-fit-full .gpsi-image {
        width: 100%;
        height: 100%;
        min-width: 0;
        max-width: 100%;
        object-fit: contain;
    }

    .gpsi-swipe-image.gpsi-fit-full .gpsi-scroll-hints {
        opacity: 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .gpsi-zoom-frame > img.gpsi-zoom-image {
            transition: none;
        }

        .gpsi-doubletap-hint,
        .gpsi-swipe-intro-hint {
            display: none;
        }
    }
}

/* v0.3.5: onboarding-demo voor de eerste Swipe foto. */
@media (max-width: 767px) {
    .gpsi-swipe-intro-draghand {
        display: block;
        position: relative;
        font-size: 48px;
        line-height: 1;
        color: #f1f1f1;
        filter: grayscale(1);
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.62);
        transform-origin: 55% 80%;
    }

    .gpsi-swipe-intro-hint.gpsi-intro-drag-right .gpsi-swipe-intro-draghand {
        animation: gpsi-drag-hand-right 1050ms ease-in-out 1;
    }

    .gpsi-swipe-intro-hint.gpsi-intro-drag-left .gpsi-swipe-intro-draghand {
        animation: gpsi-drag-hand-left 1050ms ease-in-out 1;
    }

    @keyframes gpsi-drag-hand-right {
        0%, 100% { transform: translateX(0) rotate(-8deg) scale(1); }
        18% { transform: translateX(0) rotate(-8deg) scale(0.92); }
        55% { transform: translateX(30px) rotate(-8deg) scale(0.92); }
        78% { transform: translateX(30px) rotate(-8deg) scale(1); }
    }

    @keyframes gpsi-drag-hand-left {
        0%, 100% { transform: translateX(0) rotate(-8deg) scale(1); }
        18% { transform: translateX(0) rotate(-8deg) scale(0.92); }
        55% { transform: translateX(-30px) rotate(-8deg) scale(0.92); }
        78% { transform: translateX(-30px) rotate(-8deg) scale(1); }
    }

    .gpsi-swipe-intro-doubletap {
        display: none;
        position: relative;
        width: 76px;
        height: 76px;
        color: #f1f1f1;
        filter: grayscale(1);
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
    }

    .gpsi-swipe-intro-hint.gpsi-swipe-intro-tap .gpsi-swipe-intro-draghand {
        display: none;
    }

    .gpsi-swipe-intro-hint.gpsi-swipe-intro-tap .gpsi-swipe-intro-doubletap {
        display: block;
    }

    .gpsi-swipe-intro-finger {
        position: absolute;
        left: 22px;
        top: 24px;
        font-size: 38px;
        line-height: 1;
        opacity: 0.96;
        transform-origin: 55% 80%;
        animation: gpsi-doubletap-finger 920ms ease-in-out 1;
    }

    .gpsi-swipe-intro-ring {
        position: absolute;
        left: 35px;
        top: 10px;
        width: 16px;
        height: 16px;
        border: 2px solid #f1f1f1;
        border-radius: 50%;
        opacity: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    }

    .gpsi-swipe-intro-ring-one {
        animation: gpsi-doubletap-ring 460ms ease-out 1 100ms;
    }

    .gpsi-swipe-intro-ring-two {
        animation: gpsi-doubletap-ring 460ms ease-out 1 560ms;
    }

    /* Exact dezelfde full-fit geometrie als de echte dubbeltik-uitzoom. */
    .gpsi-swipe-image.gpsi-intro-fit-full .gpsi-viewport {
        overflow: hidden;
        touch-action: pan-y;
    }

    .gpsi-swipe-image.gpsi-intro-fit-full .gpsi-image {
        width: 100%;
        height: 100%;
        min-width: 0;
        max-width: 100%;
        object-fit: contain;
    }

    .gpsi-swipe-image.gpsi-intro-fit-full .gpsi-scroll-hints {
        opacity: 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .gpsi-swipe-intro-draghand,
        .gpsi-swipe-intro-finger,
        .gpsi-swipe-intro-ring {
            animation: none !important;
        }
    }
}