/* Mavex photo system (BRAND.md §6). Loaded after each page's own styles.
   Every photo is pre-graded into the palette (images/CREDITS.md), so no CSS
   colour filters here. What this file does is take the frame away: photos
   dissolve into whatever tint the section has, their colour bleeds past the
   edge, and the UI cards sit half outside, over the paper. */

/* Washes and break-outs may pass the photo, never the viewport. */
main section{overflow-x:clip}

/* 1. Soft frame. A radial feather instead of a rounded rectangle. */
.vf,.pv-media,.hphoto{border-radius:0;box-shadow:none;background:none;overflow:visible}
.vf>img,.pv-media>img,.hphoto>img,.mx-soft{
  -webkit-mask-image:radial-gradient(ellipse farthest-side at var(--mx-at,50% 50%),#000 56%,rgba(0,0,0,.62) 76%,transparent 100%);
          mask-image:radial-gradient(ellipse farthest-side at var(--mx-at,50% 50%),#000 56%,rgba(0,0,0,.62) 76%,transparent 100%);
  filter:none}

/* 2. Colour bleed. A blurred wash of the grade (gold-soft into accent) that
   continues past the photo into the section background. */
.vf::after,.pv-media::before,.hphoto::after{content:"";position:absolute;inset:-14%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 46% 56%,rgba(189,125,44,.30),rgba(189,125,44,.10) 55%,transparent 100%),
             radial-gradient(closest-side at 70% 28%,rgba(30,64,175,.16),transparent 100%);
  filter:blur(26px)}

/* 3. Cards break out of the photo by a step. */
@media (min-width:761px){
  .vf .uc-tl{inset-block-start:-18px;inset-inline-start:-22px}
  .vf .uc-tr{inset-block-start:-18px;inset-inline-end:-22px}
  .vf .uc-bl{inset-block-end:-18px;inset-inline-start:-22px}
  .vf .uc-br{inset-block-end:-18px;inset-inline-end:-22px}
}

/* 4. Photo to line drawing: a traced blueprint of the same frame sits under
   the photo; scrolling wipes the photo across it (mx-photo.js sets --p). */
.mx-wipe{position:relative;margin:0;isolation:isolate;--wdir:90deg}
[dir=rtl] .mx-wipe{--wdir:270deg}
.mx-wipe-art{position:absolute;inset:0}
.mx-wipe-art img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover;display:block}
.mx-wipe-photo{
  -webkit-mask-image:linear-gradient(var(--wdir),#000 calc(var(--p,1) * 52% - 14%),transparent calc(var(--p,1) * 52% + 12%));
          mask-image:linear-gradient(var(--wdir),#000 calc(var(--p,1) * 52% - 14%),transparent calc(var(--p,1) * 52% + 12%))}
.mx-wipe-edge{position:absolute;top:8%;bottom:8%;width:2px;inset-inline-start:calc(var(--p,1) * 52%);pointer-events:none;
  background:linear-gradient(180deg,transparent,#BD7D2C 22%,#BD7D2C 78%,transparent);opacity:.75}
.mx-wipe-edge::after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#3B82F6;box-shadow:0 0 0 6px rgba(59,130,246,.16)}

/* 5. Depth. mx-photo.js moves [data-depth] layers at their own speed. */
[data-depth]{will-change:transform}

@media (prefers-reduced-motion:reduce){[data-depth]{transform:none!important}}
@media (prefers-reduced-motion:reduce){.orbit-dot{display:none}}