/* 3D laptop: it rotates and "pops" as you scroll (static/js/showcase.js sets --p from 0 to 1). */
.showcase{max-width:none;padding:0;height:300vh;border-top:1px solid var(--line);--p:.5}
.show-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-3);padding:80px var(--gutter) 24px;text-align:center}
.show-text h2{font-size:var(--text-h2);margin:0}
.laptop-wrap{position:relative;width:min(92vw,760px);perspective:1100px}
.glow{position:absolute;left:5%;right:5%;top:15%;bottom:-5%;background:var(--grad-accent);filter:blur(90px);border-radius:50%;
  opacity:calc(.25 + var(--p) * .5)}
.laptop{position:relative;display:block;width:100%;height:auto;transform-style:preserve-3d;will-change:transform;
  /* p = scroll progress (0 to 1). Scrolling down: the laptop moves DOWN, spins from -60deg to +60deg,
     tilts flat and pops toward you (bigger). Scrolling up does the exact reverse. */
  transform:translateY(calc((var(--p) - .5) * 160px)) rotateY(calc((var(--p) - .5) * 120deg))
            rotateX(calc((1 - var(--p)) * 18deg)) translateZ(calc(var(--p) * 140px)) scale(calc(.6 + var(--p) * .4));
  filter:drop-shadow(0 calc(20px + var(--p) * 40px) calc(30px + var(--p) * 30px) rgba(0,0,0,.55))}
@media (max-width:600px){
  /* phones: less "pop" so the laptop never gets wider than the screen */
  .laptop{transform:translateY(calc((var(--p) - .5) * 100px)) rotateY(calc((var(--p) - .5) * 120deg))
            rotateX(calc((1 - var(--p)) * 18deg)) translateZ(calc(var(--p) * 50px)) scale(calc(.6 + var(--p) * .4))}
}
@media (prefers-reduced-motion:reduce){
  .showcase{height:auto}
  .show-stage{position:relative;height:auto;padding:var(--space-5) var(--gutter)}
  .laptop{transform:rotateY(-12deg)}
}