/*
 * A/B Testing Gutenberg — front-end styles.
 *
 * CLS prevention strategy:
 *   BEFORE JS (.abtg-wrapper без .abtg-loaded):
 *     - Variant 0 (`:first-child`) — display:block + content-visibility:hidden.
 *       Елемент бере участь у layout (займає місце), вміст не рендериться — без CLS.
 *     - Решта варіантів — display:none.
 *
 *   AFTER JS (.abtg-wrapper.abtg-loaded):
 *     - CSS ховає всі; JS показує правильний через inline style.display='block'.
 */

/* Default: hide all variants */
.abtg-variant {
    display: none;
}

/* Before JS: show variant 0 as the default — full layout, images load, no CLS */
.abtg-wrapper:not(.abtg-loaded) .abtg-variant:first-child {
    display: block;
}

/* After JS resolved — CSS hands off control to inline JS styles */
.abtg-wrapper.abtg-loaded .abtg-variant {
    display: none;
}

/* Fade-in animation */
@keyframes abtgFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.abtg-variant.abtg-animated {
    animation: abtgFadeIn 0.4s ease-in-out forwards;
}