/* ─── BLIS ASCII PRODUCT ──────────────────────────────────────
   Overlay that sits on top of the main product gallery image.
   Phase 1: ASCII renders (pre visible, img hidden under)
   Phase 2: ASCII fades out, photo is already loaded underneath
   ─────────────────────────────────────────────────────────── */

/* Wrapper we inject */
.bap-wrap {
    position: relative;
    display: block;
    line-height: 0;
    /* kill ghost space under inline img */
}

/* The ASCII pre layer */
.bap-ascii {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    /* font-size set via JS based on container width */
    line-height: 1;
    white-space: pre;
    color: #333;
    /* neutral — overrides via .void theme below */
    background: #f5f5f0;
    z-index: 2;
    pointer-events: none;
    text-align: left;
    letter-spacing: 0;

    /* Fade out transition */
    opacity: 1;
    transition: opacity 1400ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
}

/* After class triggers the fade */
.bap-ascii.bap-reveal {
    opacity: 0;
}

/* Dark / void theme */
.theme-void .bap-ascii,
body.void .bap-ascii {
    color: #D9E028;
    background: #0a0a0a;
}

/* Ensure the real image sits below the ascii overlay */
.bap-wrap>img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}