/* Photo depth -- reader side. Transforms and opacity only: no filter / backdrop-filter (some GPUs
   paint those as the element's rectangle). The cutouts are inserted by depth.js on first hover. */

.uvu-depth-box { position: relative; }

img.uvu-depth,
img.uvu-depth-plate,
img.uvu-depth-graphic {
    position: absolute;
    display: block;
    max-width: none;
    margin: 0;
    /* Visual only. Right-click, "Save image as", "Copy image" and drag all go through to the
       original photo underneath -- downloads are always the untouched 2D photo. */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    opacity: 0;
    transform: scale(1);
    /* fade out only after the scale has settled back, so leaving never shows a seam */
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .15s linear .45s;
    will-change: transform;
}

.uvu-depth-on img.uvu-depth {
    opacity: 1;
    transform: scale(1.06);   /* Adam 2026-10-08: half as much movement as the first cut (1.12) */
    /* Shown INSTANTLY, in the same frame as the plate and while both still sit exactly on the photo.
       A fade-in (1.0.0-dev) showed the photo's own subject through the half-transparent layer while the
       two grew at different rates -- a double image that read as the foreground flickering. */
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity 0s;
}

/* The plate (subject erased) replaces the photo while lifted and moves exactly like it; it appears in
   the same frame as the layer (see above). */
.uvu-depth-on img.uvu-depth-plate {
    opacity: 1;
    transform: scale(1.025);  /* half of the first cut's 1.05 */
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity 0s;
}

/* Designed graphics (data-depth-mode="graphic"): the design elements -- text, logos, banners, borders,
   letterbox bars. On top of the layer and the plate, and they never move or change size: no transform
   in any state, over the theme's hover zooms (.image-hover:hover img, .strip-card:hover
   .strip-card-thumb img, .popular-thumb:hover img ...) and every rule above. They appear and fade
   exactly with the other two (instantly on; out only once those are back at scale 1). */
.uvu-depth-box > img.uvu-depth-graphic {
    transform: none !important;
    /* the individual transform properties apply on top of 'transform': none of those either */
    scale: none !important;
    translate: none !important;
    rotate: none !important;
    transition: opacity .15s linear .45s;
    /* opacity, not transform: measured in Chrome, a will-change: transform layer at a fractional
       device-pixel offset lands 1 device px off the photo; this one stays pixel-exact with it */
    will-change: opacity;
}

.uvu-depth-box.uvu-depth-on > img.uvu-depth-graphic {
    opacity: 1;
    transition: opacity 0s;
}

/* Until a photo's layers are in (its first hover, while they load), the photo and the not-yet-shown layers
   stay at rest. Before (recorded frame by frame on the live site, 2026-10-09): the theme's own hover zoom
   started on the photo (towards 1.05) and also caught the hidden layers, then the layers appeared at 1.05
   and everything pulled back to 1.025 / 1.06 -- a zoom-snap-pull-back that read as the effect flickering.
   Leaving a lifted photo also lands here: everything eases back to 1 together. */
.uvu-depth-box:not(.uvu-depth-on) img[data-depth][src],
.uvu-depth-box:not(.uvu-depth-on) img.uvu-depth,
.uvu-depth-box:not(.uvu-depth-on) img.uvu-depth-plate,
.uvu-depth-box:not(.uvu-depth-on) img.uvu-depth-graphic { transform: scale(1) !important; }

/* The photo itself moves exactly like the plate on top of it (1.025), around the subject (inline
   transform-origin from depth.js). This must beat the theme's own hover zooms (1.05, up to 0-3-1
   specificity: .strip-card:hover .strip-card-thumb img), or the photo would peek out round the smaller
   plate where it is contained, not cropped (Watch & Listen). */
.uvu-depth-box img[data-depth] { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.uvu-depth-box.uvu-depth-on img[data-depth][src] { transform: scale(1.025); }

/* Layering per context (measured against main.css / inc/home-order.php). The graphic always comes
   after the layer in the DOM, so where the two share a z-index it still paints above the layer. */

/* The plate always sits directly over the photo (positioned, no z-index: above the static photo,
   below every z-indexed layer -- including the theme's hover scrim, so the background still dims). */

/* Cards, sections, hero grid, sidebar list: the front layer goes above the theme's hover scrim
   (.image-hover::before, z-index 1), so the subject stays bright while the background dims; a
   graphic goes above the layer, never darkened either. */
.post-thumbnail > img.uvu-depth,
.hero-small-thumbnail > img.uvu-depth,
.entry-image-frame > img.uvu-depth { z-index: 2; }

.post-thumbnail > img.uvu-depth-graphic,
.hero-small-thumbnail > img.uvu-depth-graphic,
.entry-image-frame > img.uvu-depth-graphic { z-index: 3; }

/* The theme's hover darkening (.image-hover::before, a 30% black wash) per photo: the full spotlight
   indoors, lighter outdoors (--uvu-dim from data-depth-dim; 1 = unchanged). */
.image-hover.uvu-depth-on::before { opacity: var(--uvu-dim, 1) !important; }
/* 2D photos -- no cutouts, or not lifted (yet) -- get no hover darkening at all (Adam, 2026-10-09: "don't
   darken the 2d photos at all"). Beats the theme's .image-hover:hover::before { opacity: 1 } (0-2-1);
   a lifted photo keeps its own through --uvu-dim (above). */
.image-hover:not(.uvu-depth-on):hover::before { opacity: 0; }
/* Designed graphics: no hover darkening at all (Adam, 2026-10-08). From the first hover on, not only
   once the layers are in, so the theme's 0.45 s wash never starts. */
.image-hover.uvu-depth-nodim::before { opacity: 0 !important; }

/* Hero carousel slide: under the bottom gradient and the blur bands so the headline stays
   legible; the hover scrim is held off while the subject is lifted. */
.hero-thumbnail > img.uvu-depth,
.hero-thumbnail > img.uvu-depth-graphic { z-index: auto; }
.hero-thumbnail.uvu-depth-on::before { opacity: 0 !important; }

/* Cards under the carousel: above the photo box (z 1), below the gradient overlay (z 2) and
   the text (z 3). */
.hero-post-below > img.uvu-depth,
.hero-post-below > img.uvu-depth-plate,
.hero-post-below > img.uvu-depth-graphic { z-index: 1; }

/* Watch & Listen strip: the photo is contained, not cropped; same layer as the photo, under the
   badge (z 2). The theme's own hover zoom here (.strip-card:hover .strip-card-thumb img: 1.05)
   outranks the general rule above, which left the layer at the theme's 1.05; this one outranks it. */
.strip-card-thumb > img.uvu-depth,
.strip-card-thumb > img.uvu-depth-plate,
.strip-card-thumb > img.uvu-depth-graphic { z-index: 1; }
.strip-card-thumb.uvu-depth-box.uvu-depth-on > img.uvu-depth { transform: scale(1.06); }
.strip-card-thumb.uvu-depth-box.uvu-depth-on > img.uvu-depth-plate { transform: scale(1.025); }

/* Small sidebar thumbnails: a gentler lift. */
.popular-thumb.uvu-depth-on img.uvu-depth,
.recommended-thumb.uvu-depth-on img.uvu-depth { transform: scale(1.04); }

/* Article top: the new frame clips the growing photo above its caption. */
.entry-image-frame { position: relative; overflow: hidden; border-radius: var(--theme-border-radius, 0); }