/* ───────────────────────────────────────────────
   Product CTA Block – Frontend Styles
   ─────────────────────────────────────────────── */

/* ── Wrapper & Sticky Container ── */
main .entry-content .pcta-wrapper {
    position: relative;
    padding: 0 !important;
    margin-top: var(--wp--preset--spacing--100) !important;

    height: 300vh; /* ← NEU: gibt Scroll-Raum */
}

.pcta-sticky-container {
    position: sticky;       /* ← NEU */
    top: 0;                 /* ← NEU */

    width: 100dvw;
    height: 100dvh;
    background-color: var(--wp--preset--color--black);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pcta-button-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    padding-bottom: var(--wp--preset--spacing--100);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.pcta-button-wrap.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.pcta-button::before {
    content: "";
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-left: var(--wp--preset--spacing--10);
    background-image: var(--icon--button-arrow);
    background-repeat: no-repeat;
    background-position: center;
}

.pcta-button {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
    font-size: calc(var(--wp--preset--font-size--small) + 1px) Im !important;
    border: 1px var(--wp--preset--color--black) solid;
    transition: var(--transition);
}

.pcta-button::after {
    content: none;
}

.pcta-button:hover {
    filter: invert(1);
}

.pcta-button:active {
    transform: translateY(0);
}

/* Keep sticky during animation */
.pcta-wrapper.is-animating .pcta-sticky-container {
    pointer-events: auto;
}

/* ── Scene: centered stage area ── */
.pcta-scene {
    width: min(90vw, 900px);
    height: min(90vh, 700px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Three pictures ── */
.pcta-images {
    position: absolute;
    inset: 0;
}

.pcta-img {
    position: absolute;
    width: clamp(25%, 30dvw, 28%);
    overflow: hidden;
    transition: transform 0.05s linear, opacity 0.3s ease;
    will-change: transform;
}

.pcta-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pcta-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #718096;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Starting positions: all three on top of each other in the middle (joined together) */
.pcta-img--1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    z-index: 3;
}

.pcta-img--2 {
    top: 50%;
    left: 50%;
    transform: translate(-45%, -51%) rotate(13deg) scale(0.98);
    z-index: 2;
}

.pcta-img--3 {
    top: 50%;
    left: 50%;
    transform: translate(-53%, -45%) rotate(-12deg) scale(0.96);
    z-index: 1;
}

/*
 * End positions are set via JS as CSS custom properties.
 * The JS file interpolates between 0 and 1 (progress).
 */

/* ── Content (centered, invisible at the beginning) ── */
.pcta-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    width: max-content;
    text-align: center;
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    filter: invert(1);
    z-index: -1;
}

.pcta-content.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.pcta-content-image img {
    width: 33%;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .pcta-img {
        width: clamp(200px, 70dvw, 45%);
    }
}