/* pop · pictures that step out of their frames (js/pop.js moves them).
   figure[data-pop] > .pop-tilt (the frame, turned in 3D) > .pop-floor (its back wall, with the subject's shadow) + .pop-out (the cut-out subject, in front) */
.plate[data-pop]{background:none;border:0;box-shadow:none;overflow:visible;perspective:1300px;position:relative}
.pop-tilt{position:relative;aspect-ratio:var(--ar);background:var(--plate);border:2px solid var(--line);box-shadow:8px 8px 0 var(--shadow);
  transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.pop-floor{position:absolute;inset:0;overflow:hidden;box-shadow:inset 12px 14px 30px rgba(11,11,12,.13),inset -2px -2px 0 rgba(11,11,12,.04)}
.pop-floor>img,.pop-base{position:absolute;display:block;max-width:none}
.pop-base{inset:0;width:100%;height:100%;object-fit:cover}
.pop-shade{left:var(--x);top:var(--y);width:var(--w);height:auto;filter:brightness(0) blur(12px);opacity:.2;
  transform:translate(calc(var(--sh,.03) * 100%),calc(var(--sh,.03) * 80%)) scale(.97);transform-origin:50% 100%}
.pop-out{position:absolute;inset:0;pointer-events:none;transform-origin:50% 100%;transform:rotateX(var(--lean,0deg));transform-style:preserve-3d}
.pop-out.clip{clip-path:inset(-80% -60% 0 -60%)}
.pop-sub{position:absolute;display:block;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--ar);transform-origin:var(--o,50% 100%);will-change:transform}
.pop-sub>img{display:block;width:100%;height:100%;filter:drop-shadow(0 10px 14px rgba(11,11,12,.22))}

/* the lenticular jacket: a rainbow that slides and flips across its white stripes as the frame turns, and a glint over the black ones */
.pop-sheen,.pop-glint{position:absolute;inset:0;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat}
[data-pop="jacket"] .pop-sub{--m:url(../img/deck/pop/holagram-jacket.webp)}
.pop-sheen{background:repeating-linear-gradient(112deg,#ff7ccc 0,#ffe680 8%,#7cf5bf 16%,#7cd6ff 24%,#bf9cff 32%,#ff7ccc 40%) var(--sx,50%) 0/240% 100%;
  mix-blend-mode:multiply;opacity:var(--so,.6)}
.pop-glint{background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.7) 49%,rgba(190,255,240,.35) 53%,transparent 64%) var(--gx,50%) 0/280% 100%;
  mix-blend-mode:screen;opacity:.85}
.sec:has([data-pop]){overflow-x:clip}                            /* a cut-out may lean past the gutter; the page never scrolls sideways for it */
@media (max-width:1099px){
  .holagram .plate[data-pop]{margin-top:30px}
  [data-pop="cloud"]{width:86%;margin:64px auto 0}               /* stacked under its copy: room above for the cloud to rise, and its sides stay on screen */
}

/* 03 · the march of progress walks a ground line on the frame's wall; the vanishing point sits on that line, so feet stay on it */
[data-pop="evo"]{perspective-origin:50% 96.8%}
.pop-ground{position:absolute;left:2.6%;right:4.3%;top:95.4%;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(11,11,12,.5) 3%,rgba(11,11,12,.5) 97%,transparent)}
[data-pop="evo"] .pop-shade{opacity:.13;filter:brightness(0) blur(7px)}

/* the make-things collage: one stage over the panorama; under 620px (two crops, lab.css) the bulb rides the break half and the rest the make half */
[data-pop="make"] .pop-floor{position:relative}
[data-pop="make"] .pop-floor>img{position:relative}               /* the panorama sets the frame's height */
.mk-a,.mk-b{position:absolute;inset:0;transform-style:preserve-3d}
.mk-b .pop-sub>img{filter:drop-shadow(0 6px 8px rgba(11,11,12,.25))}
@media (max-width:619px){
  .mk-a{bottom:auto;aspect-ratio:760/941}
  .mk-b{top:auto;aspect-ratio:912/941}
  .mk-a .pop-sub,.mk-b .pop-sub{left:var(--xm);width:var(--wm)}
}

/* 10 · the toys stand up out of their boxes and float toward you */
.toy-body{inset:-14% 3% 15%;transform-style:preserve-3d}
.toy-body img,.toy-body canvas{translate:0 0 44px}
.toy-body img{filter:drop-shadow(0 8px 10px rgba(11,11,12,.2))}

@media (prefers-reduced-motion:reduce){ .pop-sub{will-change:auto} }