/*
 * Before After Layout Shift & Performance Fix
 * Loads after ptc-ba-frontend-styles to override safely.
 */

/**
 * 1. Hide the section instantly on paint so users never see the
 *    unstyled/overlapping state. JS will reveal it once the DOM is ready.
 */
.ptc-ba-section {
    opacity: 0;
    transition: opacity 0.25s ease;
    contain: layout style;   /* prevent repaint from leaking outside the widget */
}

.ptc-ba-section.ptc-ba-ready {
    opacity: 1;
}

/**
 * 2. GPU-accelerate the image transitions so the before → after
 *    crossfade is handled on the compositor thread (no layout thrash).
 */
.ptc-ba-image {
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/**
 * 3. Force correct stacking from the very first paint.
 *    Explicitly declare z-index on every state so the browser
 *    never has to recalculate during the transition.
 */
.ptc-ba-before {
    z-index: 2;
    opacity: 1;
}

.ptc-ba-after {
    z-index: 1;
    opacity: 0;
}

/**
 * 4. Hover/active: promote the after image above before cleanly.
 *    Both z-index AND opacity change happen in the same frame.
 */
.ptc-ba-image-container:hover .ptc-ba-after,
.ptc-ba-image-container.ptc-active .ptc-ba-after {
    z-index: 3;
    opacity: 1;
}

.ptc-ba-image-container:hover .ptc-ba-before,
.ptc-ba-image-container.ptc-active .ptc-ba-before {
    z-index: 2;
    opacity: 0;
}

/**
 * 5. Contain each card so hover repaints don't cascade up the tree.
 */
.ptc-ba-card {
    contain: layout style;
}

/**
 * 6. Image container isolation — creates a new stacking context
 *    so z-index changes inside never bleed to siblings.
 */
.ptc-ba-image-container {
    isolation: isolate;
}