/* ============================================================ PHONE SKELETONS
   The frame the hero team draws and fills (Figma 1139:180155), and the grey blocks they carry
   in. Shared by the home page, where it is animated, and /screens.html, where every skeleton
   is laid out side by side. Geometry for the blocks themselves lives in screens.js, so one
   set of numbers feeds both. */

.screen{
  position:absolute;left:0;top:0;width:100%;height:100%;   /* the draw sets these in px */
  border-radius:24px;background:#fff;
  /* the same hairline the case cards carry; the two variables are what /hero-tuner.html turns */
  border:var(--screen-bw,.5px) solid var(--screen-bc,#d5d5d5);
  opacity:0;transform:scale(.985);
  transition:opacity .5s ease,transform .5s ease,border-color .25s ease;
}
.screen.is-on{opacity:1;transform:none}
/* under the pointer a finished frame darkens its hairline, the way a case card does on the
   way to being clicked -- no shadow, the frame stays flat on the page. Only in the hero: the
   gallery at /screens.html is for looking at. */
.hero__stage .screen.is-on:hover{border-color:#c4c4c4}
.hero__stage .screen.is-carrying:hover{border-color:var(--screen-bc,#d5d5d5)}
/* while a cursor drags it open, the box follows them, so no fade and no transition */
.screen.is-drawing{opacity:1;transform:none;transition:none}

/* Every block is carried in by a cursor: it fades up where it lands, ringed in that person's
   colour for as long as they are still holding it. One grey for all of them, nothing set
   apart by contrast. */
.screen__b{
  position:absolute;background:#f2f2f2;
  opacity:0;transform:scale(.94);
  transition:opacity .45s ease,transform .45s ease,box-shadow .35s ease;
}
.screen__b.is-on{opacity:1;transform:none}
/* a step darker for the bars that stand for text and for the big piece of media: which
   blocks those are is named per screen in screens.js */
.screen__b.is-ink,.screen__row>i.is-ink{background:#e2e2e2}
/* while a cursor is pulling it open the box follows them: no fade, no transition */
.screen__b.is-drawing,.screen__row>i.is-drawing{opacity:1;transform:none;transition:none}
.screen__b.is-landing,.screen__row>i.is-landing{box-shadow:0 0 0 1.5px var(--land,transparent)}
/* a row is only a box holding squares: it is always there, its squares arrive one at a time,
   and they are placed rather than flexed so one being drawn cannot shift its neighbours */
.screen__row{position:absolute;background:none;opacity:1;transform:none}
.screen__row>i{
  position:absolute;top:0;background:#f2f2f2;
  opacity:0;transform:scale(.94);
  transition:opacity .45s ease,transform .45s ease,box-shadow .35s ease;
}
.screen__row>i.is-on{opacity:1;transform:none}
/* the finished screen, picked up to be carried away: ringed in the colour of whoever has
   hold of it, the same way a square is while it is being drawn */
.screen.is-selected{outline:1.5px solid var(--sel,#1570EF);outline-offset:2px}
/* while it is being carried it is moved frame by frame, so the easing that smooths every
   other change would make it trail half a second behind the cursor holding it */
.screen.is-carrying{transition:none}