/* The Lab's device keynote (docs/venture-lab/device-keynote-kit.md, js/device.js). Each app opens on a studio stage where
   generated hands hold a phone or a laptop with the app on its screen. The plate is a photo with the screen keyed out;
   the screenshot sits behind it, mapped onto the screen's corners, so the fingers stay in front of it. Three shows,
   never two alike side by side:
     a · flyover   pinned and scrubbed by scroll (--p): the device rises, one line of copy per stop
     b · lineup    a launch tile: a giant word, a pun, an availability line, two pills; the device rises once (.dk-in)
     c · hand-off  pinned and scrubbed: the screen passes from one device to the next
   The base rules are the still version (no script, reduced motion): every line showing, every device at rest.
   .dk-live (set by device.js) turns the shows on. No blur and no backdrop-filter anywhere in here. */

#lab .dk{--p:0;--rx:0;--ry:0;--ar:.78;--bg:#2a2622;--dh:min(68svh,620px);position:relative;margin:clamp(18px,3cqi,28px) 0 0;color:#f3f2ea}
#lab .dk-stage{position:relative;isolation:isolate;display:grid;grid-template-rows:auto auto;justify-items:center;align-content:start;
  gap:clamp(18px,3cqi,32px);padding:clamp(30px,6cqi,64px) 16px 0;overflow:hidden;border-radius:18px;
  background:radial-gradient(ellipse 80% 70% at 50% 100%,rgba(255,226,190,.1),transparent 70%),var(--bg)}

/* the giant word, behind everything, tinted by the app's own colour */
#lab .dk-word{position:absolute;left:50%;top:56%;z-index:-1;margin:0;transform:translate(-50%,-50%);pointer-events:none;
  font:900 clamp(80px,25cqi,300px)/.8 "Archivo",system-ui,sans-serif;font-stretch:125%;letter-spacing:-.05em;white-space:nowrap;
  color:rgba(243,242,234,.08);color:color-mix(in srgb,var(--acc) 22%,transparent)}

/* the copy: stops in the shows, a tile in b */
#lab .dk-copy{display:grid;gap:18px;width:100%;max-width:36ch;text-align:center}
#lab .dk-stop,#lab .dk-copy p{margin:0}
#lab .dk-stop b,#lab .dk-tag{display:block;font:900 clamp(30px,6.4cqi,66px)/.98 "Archivo",system-ui,sans-serif;font-stretch:112%;letter-spacing:-.025em;text-wrap:balance}
#lab .dk-stop span{display:block;margin-top:10px;font-size:clamp(16px,2cqi,20px);line-height:1.35;color:#cfcdc4;text-wrap:balance}
#lab .dk-avail{font:400 13px/1.4 var(--mono);color:#cfcdc4}
#lab .dk-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
#lab .dk-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;font:700 15px/1 var(--mono);text-decoration:none;
  transition:transform .2s ease}
#lab .dk-pill.go{background:var(--acc);color:#0b0b0c}
#lab .dk-pill.alt{color:#f3f2ea;box-shadow:inset 0 0 0 1.5px #f3f2ea}
#lab .dk-pill:hover{transform:translateY(-2px)}
#lab .dk-pill:focus-visible{outline:3px solid #f3f2ea;outline-offset:3px}

/* the devices: a plate with its screen(s) behind it */
#lab .dk-devs{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:16px;width:100%}
#lab .dk-dev{position:relative;flex:none;width:min(100%,calc(var(--dh) * var(--ar)));
  transform:perspective(1600px) rotateX(calc(var(--rx) * -3deg)) rotateY(calc(var(--ry) * 4deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#lab .dk-dev[style*="--ar"]{--dh:inherit}
#lab .dk-plate{--fx:6%;--fy:8%;position:relative;z-index:1;display:block;width:100%;height:auto;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 var(--fx),#000 calc(100% - var(--fx)),transparent),linear-gradient(transparent,#000 var(--fy));-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 var(--fx),#000 calc(100% - var(--fx)),transparent),linear-gradient(transparent,#000 var(--fy));mask-composite:intersect}
#lab .dk-shot{position:absolute;left:var(--l);top:var(--t);z-index:0;width:var(--w);height:var(--hh);overflow:hidden;transform-origin:0 0;background:#050506;container-type:inline-size}
#lab .dk-shot.dk-mapped{left:0;top:0}
#lab .dk-shot>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
#lab .dk-shot::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.13) 46%,rgba(255,255,255,.04) 52%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:calc(90% - var(--p) * 80% + var(--ry) * 20%) 0}
#lab .dk-shot .kn-moment{z-index:2;border-radius:0}
/* a moment that spans every screen on the plate (the lineup, the duo) sits over the whole device */
#lab .dk-dev>.kn-moment{z-index:2}
#lab .dk-dev.dk-full{width:min(100%,960px)}
/* a phone-sized screen is small: the moment's words wrap instead of running off it */
@container (max-width:160px){
  #lab .dk-shot .kn-save{font-size:10px;padding:5px 7px}
  #lab .dk-shot :is(.kn-hold,.kn-one){white-space:normal;width:84%;text-align:center;font-size:12px}
  #lab .dk-shot .kn-label{font-size:11px}
  #lab .dk-shot .kn-card{width:84%;font-size:11px}
}

/* the screenshots that left for the stage leave one wide plate behind */
#lab .lab-shots.wide{padding-bottom:0}
#lab .lab-shots.wide .lab-plate{width:100%;margin:0}

/* the old hero plate gives way to the stage; its copy runs full width under it */
#lab .dk+.lab-hero{display:block;margin-top:clamp(22px,3.4cqi,36px)}
#lab .dk+.lab-hero .lab-copy{text-align:center}
#lab .dk+.lab-hero .lab-blurb{margin-inline:auto}

/* ─ a · c: pinned stages, scrubbed by --p ─ */
#lab .dk-live:is([data-dk=a],[data-dk=c]){height:280svh}
/* the stage pins just under the sticky nav (--dk-top, measured by device.js), so the nav never covers a headline */
#lab .dk-live:is([data-dk=a],[data-dk=c]) .dk-stage{position:sticky;top:var(--dk-top,0px);height:calc(100svh - var(--dk-top,0px));
  grid-template-rows:auto minmax(0,1fr);--dh:calc(100svh - var(--dk-top,0px) - clamp(210px,30svh,280px))}
#lab .dk-live:is([data-dk=a],[data-dk=c]) .dk-copy{grid-template-areas:"s";min-height:clamp(120px,20svh,190px);align-items:start}
#lab .dk-live .dk-stop{--o:clamp(0,min(calc((var(--p) - var(--a)) * 14),calc((var(--b) - var(--p)) * 14)),1);grid-area:s;
  opacity:var(--o);translate:0 calc((1 - var(--o)) * 16px)}
#lab .dk-live:is([data-dk=a],[data-dk=c]) .dk-devs{align-self:end;height:100%;align-items:flex-end}
#lab .dk-live:is([data-dk=a],[data-dk=c]) .dk-word{translate:calc((.5 - var(--p)) * 24%) 0}
/* a: the device rises out of the floor in the first quarter, then holds and leans */
#lab .dk-live[data-dk=a] .dk-dev{--r:clamp(0,calc(var(--p) * 4.5),1);translate:0 calc((1 - var(--r)) * 42%);scale:calc(.88 + var(--r) * .12);
  rotate:calc((var(--p) - .6) * 3deg)}
/* c: two devices in one place, the second taking over; or one plate whose second screen lights up */
#lab .dk-live[data-dk=c] .dk-devs{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center}
#lab .dk-live[data-dk=c] .dk-dev{grid-area:1/1;align-self:end;--x:clamp(0,calc((var(--p) - .56) * 7),1)}
#lab .dk-live[data-dk=c] .dk-dev.dk-1{opacity:calc(1 - var(--x));translate:calc(var(--x) * -34%) 0;scale:calc(1 - var(--x) * .12)}
#lab .dk-live[data-dk=c] .dk-dev.dk-2{opacity:var(--x);translate:calc((1 - var(--x)) * 34%) 0;scale:calc(.88 + var(--x) * .12)}
#lab .dk-live[data-dk=c] .dk-shot.dk-2{--x:clamp(0,calc((var(--p) - .62) * 7),1);filter:brightness(calc(.08 + var(--x) * .92))}

/* ─ b: the tile ─ */
#lab .dk[data-dk=b] .dk-stage{min-height:min(calc(100svh - var(--dk-top,0px)),900px);grid-template-rows:auto 1fr}
#lab .dk[data-dk=b] .dk-devs{align-self:end}
#lab .dk-live[data-dk=b] :is(.dk-tag,.dk-avail,.dk-pills,.dk-dev){opacity:0;translate:0 24px;
  transition:opacity .8s ease,translate 1.1s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
#lab .dk-live[data-dk=b] .dk-dev{translate:0 38%;transition-duration:.9s,1.3s,.6s}
#lab .dk-live[data-dk=b] .dk-avail{transition-delay:.15s}
#lab .dk-live[data-dk=b] .dk-pills{transition-delay:.3s}
#lab .dk-live[data-dk=b] .dk-dev{transition-delay:.2s,.2s,0s}
#lab .dk-in[data-dk=b] :is(.dk-tag,.dk-avail,.dk-pills,.dk-dev){opacity:1;translate:0 0}

/* the lineup and the hand-off plates are landscape: let them run wide */
#lab .dk-wide{--dh:min(52svh,600px)}

@media (max-width:619px){
  #lab .dk-stage{padding-inline:12px;border-radius:12px}
  #lab .dk-live:is([data-dk=a],[data-dk=c]) .dk-stage{--dh:calc(100svh - var(--dk-top,0px) - 220px)}
  #lab .dk-devs{gap:10px}
  /* a narrow stage zooms a landscape plate in on its screens (--z, --zx in the markup); the stage crops the rest */
  #lab .dk-dev[style*="--z"]{width:calc(var(--z) * 100%);margin-inline:calc((1 - var(--z)) * 50%);left:calc(var(--zx) * 1%)}
  /* …and a moment over the whole device keeps to the part of it still on stage */
  #lab .dk-dev[style*="--z"]>.kn-moment{right:auto;width:calc(100% / var(--z));left:calc(((var(--z) - 1) / 2 - var(--zx) / 100) / var(--z) * 100%)}
}
@media (prefers-reduced-motion:reduce){#lab .dk-dev,#lab .dk-pill{transition:none;transform:none}}