/* ---------- PHONE · the app on an iPhone, walking one way in (home) ----------
   site.js initFlows walks data-flow: one screen at a time (.ph-s), sheets
   (.ph-s[data-over]) rising over the screen they name under the app's own
   scrim (.ph-dim), a fingertip (.ph-tap) where the next press lands.

   The screens are the app's own, captured at 390x844 @3x (assets/flow), so
   the device is drawn in the same points: every size below is N points of an
   iPhone 15 Pro times --u, one point at the size the screen is shown. The
   screen is never wider than 390 CSS px, so the 1170px captures are shown at
   3x or denser and stay sharp on a retina display. */
.phone{
  --sw:min(246px,calc(100vw - 112px));   /* the screen's width */
  --u:calc(var(--sw) / 390);
  --bz:calc(10 * var(--u));               /* black border under the glass */
  --rim:calc(4.2 * var(--u));             /* titanium band seen from the front */
  --rs:calc(55 * var(--u));               /* display corner radius */
  position:relative;flex:none;box-sizing:content-box;
  width:var(--sw);margin:28px auto 36px;padding:calc(var(--bz) + var(--rim));
  border-radius:calc(var(--rs) + var(--bz) + var(--rim));
  /* graphite titanium: brushed, catching the light at the corners */
  background:
    linear-gradient(180deg,rgb(255 255 255/.16),rgb(255 255 255/0) 12%,rgb(255 255 255/0) 88%,rgb(255 255 255/.1)),
    linear-gradient(90deg,#9A9993 0%,#4C4B46 1.6%,#2F2E2B 5%,#403F3B 50%,#2F2E2B 95%,#4C4B46 98.4%,#9A9993 100%);
  box-shadow:
    inset 0 0 0 calc(.7 * var(--u)) rgb(255 255 255/.26),
    inset 0 0 0 calc(1.4 * var(--u)) rgb(0 0 0/.35),
    0 0 0 .5px rgb(20 20 18/.55),
    0 1px 2px rgb(24 22 14/.14),
    0 10px 22px -10px rgb(24 22 14/.28),
    0 34px 54px -26px rgb(24 22 14/.36),
    0 70px 90px -50px rgb(24 22 14/.22);
}
/* the black border, under the same glass as the screen */
.phone::before{content:'';position:absolute;inset:var(--rim);border-radius:calc(var(--rs) + var(--bz));
  background:#050505;box-shadow:inset 0 0 0 calc(.5 * var(--u)) rgb(255 255 255/.07)}
/* side keys: Action, volume up and down on the left, the side button on the right */
.ph-k{position:absolute;width:calc(3.4 * var(--u));border-radius:calc(1.4 * var(--u)) 0 0 calc(1.4 * var(--u));
  background:linear-gradient(90deg,#2A2925,#6F6E68 35%,#A3A29C 55%,#55544F 80%,#2E2D2A);
  box-shadow:0 0 0 .5px rgb(20 20 18/.45)}
.ph-k1,.ph-k2,.ph-k3{left:calc(-2.6 * var(--u))}
.ph-k1{top:18%;height:3.6%}
.ph-k2{top:25.6%;height:7%}
.ph-k3{top:34.2%;height:7%}
.ph-k4{right:calc(-2.6 * var(--u));top:28.4%;height:11.4%;transform:scaleX(-1)}

.ph-scr{position:relative;z-index:1;overflow:hidden;isolation:isolate;
  border-radius:var(--rs);clip-path:inset(0 round var(--rs));background:#FAFAF8}
.ph-v{position:relative;aspect-ratio:390 / 844}
/* screens: the next fades in over the last, which goes once it is covered,
   so the two never show the plate through each other halfway */
.ph-s{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;
  opacity:0;transition:opacity 0s linear .32s}
.ph-s[data-on]{z-index:1;opacity:1;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
/* the app's scrim (components.css .scrim) and its sheets, rising from the foot */
.ph-dim{position:absolute;inset:0;z-index:2;background:rgb(16 15 15/.4);opacity:0;transition:opacity .3s;pointer-events:none}
.ph-dim.is-on{opacity:1}
.ph-s[data-over]{inset:auto 0 0;z-index:3;height:auto;opacity:1;transform:translateY(101%);
  transition:transform .26s cubic-bezier(.4,0,1,1)}
.ph-s[data-over][data-on]{transform:none;transition:transform .44s cubic-bezier(.22,.68,.24,1) .08s}
/* a fingertip: a soft press, pushed in and lifted */
.ph-tap{position:absolute;left:0;top:0;z-index:5;width:calc(42 * var(--u));height:calc(42 * var(--u));
  margin:calc(-21 * var(--u)) 0 0 calc(-21 * var(--u));border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(118 117 110/.5),rgb(118 117 110/.42) 64%,rgb(118 117 110/.14) 88%,rgb(118 117 110/0));
  box-shadow:inset 0 0 0 calc(.8 * var(--u)) rgb(255 255 255/.45),0 0 0 .5px rgb(16 15 15/.1);
  opacity:0;transform:scale(1.3);transition:opacity .26s ease-out,transform .32s ease-out}
.ph-tap.is-on{opacity:1;transform:scale(1);transition:opacity .12s ease-out,transform .16s cubic-bezier(.3,.7,.4,1)}

/* the system over the app: status bar, Dynamic Island, home indicator, glass */
.ph-sb{position:absolute;left:0;top:0;z-index:6;width:100%;height:auto;aspect-ratio:390 / 54;color:#000;pointer-events:none}
.ph-island{position:absolute;z-index:9;top:calc(11 * var(--u));left:50%;width:calc(125 * var(--u));height:calc(37 * var(--u));
  margin-left:calc(-62.5 * var(--u));border-radius:calc(18.5 * var(--u));background:#000;pointer-events:none}
/* the front camera, barely there in the island's right end */
.ph-island::after{content:'';position:absolute;top:50%;right:calc(13 * var(--u));width:calc(11 * var(--u));height:calc(11 * var(--u));
  margin-top:calc(-5.5 * var(--u));border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#1C1F28 0,#0C0D11 45%,#030304 72%)}
.ph-home{position:absolute;z-index:7;bottom:calc(8 * var(--u));left:50%;width:calc(134 * var(--u));height:calc(5 * var(--u));
  margin-left:calc(-67 * var(--u));border-radius:calc(3 * var(--u));background:#0B0B0B;pointer-events:none}
.ph-scr::after{content:'';position:absolute;inset:0;z-index:8;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgb(255 255 255/.10) 0%,rgb(255 255 255/.03) 26%,rgb(255 255 255/0) 42%);
  box-shadow:inset 0 0 0 .5px rgb(0 0 0/.35)}

@media (min-width:640px){.phone{--sw:258px}}
@media (min-width:900px){.phone{--sw:276px;margin-top:40px;margin-bottom:48px}}