/* ============================================================
   Braindeer Look-At – block styles (v6, atlas/canvas blink)
   ============================================================ */

/* ---- Outer wrapper (alignment) ------------------------------------ */
.bdla-logo-wrap {
    display: block;
    line-height: 0;
}
.bdla-logo-wrap.bdla-align-left   { text-align: left;   }
.bdla-logo-wrap.bdla-align-center { text-align: center; }
.bdla-logo-wrap.bdla-align-right  { text-align: right;  }

/* ---- Stage -------------------------------------------------------- */
.bdla-logo-stage {
    position:      relative;
    display:       inline-block;
    line-height:   0;
    /* width / max-width set inline */
}

/* ---- Height spacer ------------------------------------------------ */
/*
   A hidden <img> loaded from the atlas URL sits in normal flow and
   gives the stage its natural height. The canvas and pupil float on
   top of it as absolute layers.
*/
.bdla-height-spacer {
    display:    block;
    width:      100%;
    height:     auto;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---- Pupil image (z-index 1, below canvas) ------------------------ */
.bdla-pupil-img {
    position:   absolute;
    height:     auto;
    z-index:    1;
    pointer-events: none;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    /* width, left, top, transform set inline */
}

/* ---- Atlas canvas (z-index 2, on top of pupil) -------------------- */
/*
   Absolutely positioned, covers the stage exactly.
   JS draws the current frame into it via drawImage().
   pointer-events: none so iframe / link clicks pass through.
   image-rendering: auto for smooth scaling at any display size.
*/
.bdla-bg-canvas {
    display:          block;
    position:         absolute;
    top:              0;
    left:             0;
    width:            100%;
    height:           auto;   /* intrinsic aspect ratio governs height */
    z-index:          2;
    pointer-events:   none;
    image-rendering:  auto;
    user-select:      none;
    -webkit-user-select: none;
}

/* ---- Placeholder (no image chosen yet) ---------------------------- */
.bdla-stage-empty {
    min-height:    120px;
    background:    #f0f0f0;
    border:        1px dashed #ccc;
    border-radius: 4px;
}
.bdla-placeholder-wrap {
    position:        absolute;
    top:             0; left: 0;
    width:           100%; height: 100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
}
.bdla-placeholder {
    font-size:     13px;
    line-height:   1.4;
    color:         #888;
    text-align:    center;
    padding:       8px;
    white-space:   normal;
    background:    rgba(255,255,255,0.75);
    border-radius: 4px;
}

/* ---- Inspector image picker --------------------------------------- */
.bdla-image-picker {
    width:         100%;
    margin-bottom: 8px;
}
.bdla-image-picker__label {
    font-weight: 600;
    margin:      0 0 6px;
    font-size:   12px;
    display:     block;
}
.bdla-image-picker__preview img {
    border-radius: 3px;
    border:        1px solid #ddd;
    max-height:    100px;
    width:         auto;
    max-width:     100%;
}