/* The iPhone that runs Loop. Shared by index.html (work stop) and phone.html (the app on its own page).
   Needs --accent and --sans from the page; --k scales it to fit. */
.iphone { position: absolute; left: 50%; top: 50%; width: 360px; height: 780px; margin: -390px 0 0 -180px; scale: var(--k, .6); border-radius: 52px; background: #000; overflow: hidden;
  box-shadow: 0 0 0 2px #2a2f3a, 0 0 0 9px #0b0d12, 0 0 0 10px #2a2f3a; font-family: var(--sans); color: #fff; }
.ios-status { position: absolute; inset: 0 0 auto; height: 48px; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; font: 600 15px var(--sans); pointer-events: none; }
.island { position: absolute; left: 50%; top: 11px; width: 104px; height: 28px; margin-left: -52px; border-radius: 16px; background: #000; }
.ios-sig { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.ios-sig i { width: 3px; border-radius: 1px; background: #fff; } .ios-sig i:nth-child(1) { height: 4px; } .ios-sig i:nth-child(2) { height: 6px; } .ios-sig i:nth-child(3) { height: 9px; } .ios-sig i:nth-child(4) { height: 12px; }
.ios-sig em { width: 24px; height: 12px; margin-left: 6px; border-radius: 4px; border: 1px solid rgb(255 255 255 / .5); background: linear-gradient(#fff, #fff) 1px 1px / 16px 8px no-repeat; }
.ios-home { position: absolute; inset: 0; padding: 70px 24px 0; transition: scale .55s cubic-bezier(.2, .9, .25, 1), filter .55s;
  background: radial-gradient(120% 70% at 20% 0%, #1b4266, transparent 62%), radial-gradient(110% 70% at 100% 100%, #123a6b, transparent 60%), #05080e; }
.ios-clock { text-align: center; margin-bottom: 30px; }
.ios-clock span { font-size: 15px; opacity: .85; }
.ios-clock b { display: block; font: 600 78px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 20px; }
.ios-grid > *, .ios-dock i { aspect-ratio: 1; border-radius: 16px; background: rgb(255 255 255 / .09); }
.ios-icon { position: relative; border: 0; padding: 0; cursor: pointer; background: linear-gradient(160deg, #10324f, #04060a) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); transition: scale .15s; }
.ios-icon:active { scale: .92; }
.ios-icon span { position: absolute; top: calc(100% + 6px); left: -12px; right: -12px; text-align: center; font: 500 12px var(--sans); color: #fff; }
.loop-mark { position: absolute; inset: 22%; border-radius: 50%; border: 6px solid #1e2633; border-top-color: var(--accent); border-right-color: var(--accent); rotate: 25deg; }
.iphone:not(.used) .ios-icon::after { content: ""; position: absolute; inset: -5px; border-radius: 20px; border: 2px solid var(--accent); animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.35; } }
.ios-dock { position: absolute; left: 14px; right: 14px; bottom: 26px; height: 86px; border-radius: 30px; background: rgb(255 255 255 / .1); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 13px 18px; }
/* the app grows out of its icon, like on the phone */
.ios-app { position: absolute; inset: 0; padding: 48px 0 24px; background: #04060a; overflow: hidden; opacity: 0; scale: .16; border-radius: 80px; pointer-events: none;
  transform-origin: var(--ox, 50%) var(--oy, 50%); transition: scale .55s cubic-bezier(.2, .9, .25, 1), opacity .25s, border-radius .55s; }
.ios-app iframe { display: block; width: 100%; height: 100%; border: 0; background: #04060a; }
.iphone.open .ios-app { opacity: 1; scale: 1; border-radius: 0; pointer-events: auto; }
.iphone.open .ios-home { scale: 1.15; filter: blur(10px); }
.ios-bar { position: absolute; left: 50%; bottom: 2px; width: 150px; height: 22px; margin-left: -75px; z-index: 6; background: none; border: 0; padding: 0; cursor: pointer; }
.ios-bar::after { content: ""; position: absolute; left: 8px; right: 8px; top: 9px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .85); }
/* the mouse is a finger here: a round touch point instead of the arrow (the app draws its own inside) */
.iphone, .iphone * { cursor: none !important; -webkit-user-select: none; user-select: none; }
.touch-dot { position: fixed; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgb(255 255 255 / .26); border: 1px solid rgb(255 255 255 / .55);
  pointer-events: none; z-index: 96; opacity: 0; transition: opacity .15s, scale .12s; }
/* while a finger drags the home bar up, the app follows it without easing */
.iphone.swiping .ios-app, .iphone.swiping .ios-home { transition: none; }