/* ============================================
   ART FRAMED VIEW — Styles
   Companion to art-framed-view.js
   ============================================

   All selectors are either:
     • new class names (.frame-*), or
     • scoped under .enlarged-artwork-modal so they can only
       affect the framed-view UI, never any other part of the site.

   No existing site styles are touched.
   ============================================ */

/* ---------- Toolbar toggle: active state ---------- */
.enlarged-artwork-modal .viewer-btn#toggle-framed.is-active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Overlay shell ---------- */
.enlarged-artwork-modal .frame-overlay {
    position: absolute;
    inset: 0;
    /* Sits above the standard image container; the viewer-controls
       and bottom bar both have z-index 10001 in the host styles, so
       they remain on top of this overlay. */
    z-index: 5;
    background: #1f1f1f;
}

/* ---------- Stage (the picture-on-wall area) ---------- */
.enlarged-artwork-modal .frame-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.enlarged-artwork-modal .frame-stage.is-dragging {
    cursor: grabbing;
}

/* ---------- Disclaimer note (overlaid at bottom of wall) ---------- */
.enlarged-artwork-modal .frame-disclaimer {
    /* Pinned to the bottom of the stage so it stays on the wall
       background regardless of what the 3D scene is doing.
       pointer-events: none lets drag-to-tilt pass through, but
       individual <span> children re-enable selection on the text. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 24px 14px;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.2px;
    color: rgba(19, 16, 12, 0.7);    /* muted warm tone, sits on wall */
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 600px) {
    .enlarged-artwork-modal .frame-disclaimer {
        font-size: 12px;
        padding: 8px 14px 10px;
        line-height: 1.4;
    }
}

.enlarged-artwork-modal .frame-wall {
    /* Wall fills the stage. The "frame" sits centered on top of
       it. Subtle vignette mimics ambient room light falling off
       toward the corners. The disclaimer floats above it, pinned
       to the bottom. */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d9d2c4;
    background-image:
        radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(0, 0, 0, 0.18) 100%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* ---------- 3D perspective container ---------- */
/* The frame tilts in 3D when the user drags. Perspective lives
   on this wrapper so the rotation depth feels natural without
   distorting the wall behind it. */
.enlarged-artwork-modal .frame-perspective {
    perspective: 1800px;
    perspective-origin: 50% 50%;
    /* Centered by the .frame-wall flexbox above. */
}

/* The scene is what actually rotates. transform-style: preserve-3d
   makes its children (frame face + side walls) participate in the
   same 3D space rather than being flattened to a 2D plane. */
.enlarged-artwork-modal .frame-scene {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    /* width/height are set inline by the renderer. */
}

/* ---------- Frame ---------- */
.enlarged-artwork-modal .frame-outer {
    /* padding (frame width) and background (frame finish) are
       set inline by the renderer. */
    box-sizing: content-box;
    position: relative;
    /* Side walls are absolutely-positioned children that need to
       render in 3D space alongside this front face. */
    transform-style: preserve-3d;
}

/* ---------- Side walls (give the frame real depth) ---------- */
/* All four sides share this base. Their size, position, and
   transform are set inline per-side by the renderer. They use the
   same dark gradient as the front face so they read as the same
   piece of molding. */
.enlarged-artwork-modal .frame-side {
    position: absolute;
    background: linear-gradient(135deg,
        #2a2a2a 0%,
        #1a1a1a 50%,
        #000000 100%);
    backface-visibility: hidden;
    pointer-events: none;
}

/* ---------- Mat ---------- */
.enlarged-artwork-modal .frame-mat {
    /* padding (mat width) and background (mat color) are
       set inline by the renderer. */
    box-sizing: content-box;
    position: relative;
}

/* ---------- Window (the cropped artwork) ---------- */
.enlarged-artwork-modal .frame-art-window {
    /* width/height are set inline by the renderer. The window holds
       an <img> child that fills it with object-fit: cover and gets
       the grid's transform: scale(S) translate(X%, Y%) applied —
       same DOM/CSS pattern as the public grid card, so the framed
       view shows pixel-for-pixel what the customer saw. */
    position: relative;
    overflow: hidden;
    background-color: #fff;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
}

/* The artwork image itself. object-fit: cover fills the 4:3 window,
   then the inline transform scales/translates the same way the grid
   does. transform-origin: center matches the grid's behavior. */
.enlarged-artwork-modal .frame-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Glass reflection: a diagonal highlight that reads as glazing. */
.enlarged-artwork-modal .frame-glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.06) 28%,
            rgba(255, 255, 255, 0)    45%,
            rgba(255, 255, 255, 0)    68%,
            rgba(255, 255, 255, 0.08) 90%);
    mix-blend-mode: screen;
}