/* Above-the-fold treatments. Each one puts the real app screenshot inside a
   real device, and gives the device somewhere to be. */

.scene{position:relative;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;
  background-color:#eee;background-position:center;background-size:cover;
  box-shadow:0 2px 8px rgba(30,25,20,.10), 0 22px 44px rgba(30,25,20,.16)}
.scene--plain{background:none;box-shadow:none;overflow:visible}

/* the device, sitting in the scene */
.dev{position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--dev-w,70%);
  background:#20242b;border-radius:20px;padding:10px;
  box-shadow:0 3px 8px rgba(20,16,12,.35), 0 26px 46px rgba(20,16,12,.34)}
.dev__screen{border-radius:11px;overflow:hidden;background:#000;aspect-ratio:4/3;position:relative}
.dev__screen img{width:100%;height:100%;object-fit:cover;transform:scale(1.36) translateY(-3%)}
/* a soft sheen across the glass, so it reads as a screen and not a picture */
.dev__screen::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.22) 0 18%, rgba(255,255,255,.05) 30%,
    transparent 46%)}
.dev::after{content:'';position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:3px;height:42px;background:#3a3f47;border-radius:2px}

/* the contact shadow that puts it on a surface rather than over one */
.dev--grounded::before{content:'';position:absolute;left:6%;right:6%;bottom:-6%;height:9%;
  background:radial-gradient(ellipse at center, rgba(20,16,12,.42), transparent 72%);
  filter:blur(9px);z-index:-1}

/* tilts per scene */
.dev--flat{transform:rotate(-1.2deg)}
.dev--tilt{transform:rotate(-3.4deg)}
.dev--persp{transform:perspective(1400px) rotateY(-7deg) rotateX(2.5deg) rotate(-.6deg)}

/* stickers that break the frame */
.scene .float{position:absolute;z-index:3;filter:none}
.scene .float[src*="sticker"]{filter:drop-shadow(1px 1.5px .5px rgba(20,16,12,.34))}
.scene .float[src*="note-"]{filter:drop-shadow(1px 2px 1.5px rgba(20,16,12,.22))}
.scene .float--rainbow{width:18%;top:-3%;right:2%;transform:rotate(11deg)}
.scene .float--bulb{width:17%;bottom:-2%;left:1%;transform:rotate(-9deg)}

/* taped to the page, for the paper scene */
.tape{position:absolute;z-index:4;width:15%;height:5.5%;background:rgba(255,246,214,.72);
  box-shadow:0 1px 3px rgba(0,0,0,.16)}
.tape--tl{top:14%;left:16%;transform:rotate(-28deg)}
.tape--br{bottom:14%;right:16%;transform:rotate(-24deg)}

/* lab chrome */
.lab{padding:clamp(2rem,4vw,3rem) 0 clamp(2.6rem,5vw,4rem);border-top:1px solid var(--line)}
.lab:nth-child(even){background:#F7F9FC}
.lab__label{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.3rem;flex-wrap:wrap}
.lab__label h2{font-size:1.4rem}
.lab__label span.n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--text);padding:.25rem .6rem;
  border-radius:var(--r-pill)}
.lab__note{color:var(--text-muted);font-size:.95rem;max-width:62ch;margin-bottom:2rem}
.lab__note b{color:var(--text)}