/* Approved transparent PNGs stay intact. A small plane lift suggests paper peeling. */
/* Clip only the page's horizontal outer edge. Unlike hidden, clip creates no
   scroll container; sticker overlaps between sections and the sticky rail stay. */
.case-page{overflow-x:clip}
.case-sticker-field{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:clamp(12px,3vw,38px);
  width:100%;
  max-width:830px;
  margin:28px auto 40px;
  padding:22px 20px 28px;
  isolation:isolate;
}
.case-sticker{
  --sticker-rest-shadow:#20221f33;
  --sticker-lift-shadow:#20221f2e;
  --sticker-angle:-5deg;
  --sticker-peel:-9deg;
  --sticker-origin:28% 19%;
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  width:100%;
  height:clamp(180px,20vw,244px);
  margin:0;
  padding:0;
  perspective:760px;
  pointer-events:auto;
  outline-offset:5px;
}
.case-sticker img{
  display:block;
  width:100%;
  max-width:240px;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:var(--sticker-origin);
  transform:rotateZ(var(--sticker-angle));
  filter:drop-shadow(2px 3px 0 var(--sticker-rest-shadow));
  transition:transform 340ms cubic-bezier(.22,1,.36,1),filter 340ms cubic-bezier(.22,1,.36,1);
}
.case-sticker--scientist{--sticker-angle:-7deg;--sticker-peel:-10deg;--sticker-origin:24% 18%}
.case-sticker--friendly{--sticker-angle:5deg;--sticker-peel:9deg;--sticker-origin:76% 17%}
.case-sticker--doctor{--sticker-angle:-3deg;--sticker-peel:-8deg;--sticker-origin:30% 15%}
/* JS samples three paper pockets once. The approved graphics sit primarily in
   whitespace between blocks, while the original band remains a no-JS fallback. */
.case-sticker-pocket{position:relative;min-width:0;width:100%;height:190px;margin:14px 0 20px;background:var(--paper,#f4f1e8);isolation:isolate}
.case-feature.has-case-sticker-pocket{margin-bottom:0}
.case-sticker-pocket+.art-grid{margin-top:12px}
.case-sticker.is-scattered{
  position:absolute;
  top:var(--sticker-y,7%);
  left:var(--sticker-left,6%);
  right:var(--sticker-right,auto);
  width:clamp(120px,11vw,158px);
  height:clamp(120px,11vw,158px);
  z-index:5;
  margin:0;
}
.case-sticker.is-scattered img{max-width:none}
.case-sticker-field.stickers-scattered{display:none}
.case-sticker:focus-visible{outline:2px solid var(--accent,#f86c39)}
.case-sticker:is(:focus-visible,:focus-within) img{
  transform:translateY(-6px) rotateZ(calc(var(--sticker-angle) - 2deg)) rotateY(var(--sticker-peel)) rotateX(3deg);
  filter:drop-shadow(5px 11px 6px var(--sticker-lift-shadow));
}
@media(hover:hover) and (pointer:fine){
  .case-sticker:hover img{
    transform:translateY(-6px) rotateZ(calc(var(--sticker-angle) - 2deg)) rotateY(var(--sticker-peel)) rotateX(3deg);
    filter:drop-shadow(5px 11px 6px var(--sticker-lift-shadow));
  }
}
html[data-theme=dark] .case-sticker{--sticker-rest-shadow:#0008;--sticker-lift-shadow:#0007}
@media(max-width:760px){
  .case-sticker-field{gap:12px;margin-top:18px;margin-bottom:30px;padding:18px 12px 23px}
  .case-sticker{height:clamp(128px,23vw,180px);perspective:600px}
  .case-sticker img{max-width:180px}
  .case-sticker-pocket{height:140px;margin:10px 0 14px}
  .case-sticker.is-scattered{width:clamp(76px,20vw,96px);height:clamp(76px,20vw,96px)}
}
@media(max-width:460px){
  .case-sticker-field{gap:10px;padding-left:10px;padding-right:10px}
  .case-sticker{height:128px}
}
@media(prefers-reduced-motion:reduce){
  .case-sticker img,
  .case-sticker:hover img,
  .case-sticker:is(:focus-visible,:focus-within) img{transform:none;transition:none;filter:drop-shadow(2px 3px 0 var(--sticker-rest-shadow))}
}