/* K-2173 phone frame: a generic modern smartphone (original design, not a copy of any
   brand's device art) that shows app screenshots and can rotate through them.

   Markup:
     <div class="phone-frame" data-rotate="3500">
       <div class="phone-screen">
         <img src="screens/today.png" alt="Today screen" class="on">
         <img src="screens/myths.png" alt="Myths screen">
       </div>
     </div>
   phone.js fades between the screens; with one image it just shows that image.
   Size it with width on .phone-frame; the 9:19.5 shape is kept by aspect-ratio. */
.phone-frame {
  --bezel: 3.2%;
  position: relative;
  width: 280px;
  aspect-ratio: 9 / 20.2;
  border-radius: 13% / 6%;
  background: linear-gradient(145deg, #2B3138 0%, #0E1114 55%, #23282E 100%);
  padding: var(--bezel);
  box-shadow:
    0 0 0 1.5px #3A4148 inset,
    0 30px 60px rgba(8, 40, 62, .28),
    0 10px 20px rgba(8, 40, 62, .18);
}
/* side buttons */
.phone-frame::before, .phone-frame::after {
  content: ""; position: absolute; width: 1.4%; background: #1A1F24; border-radius: 2px;
}
.phone-frame::before { left: -1.2%; top: 22%; height: 9%; box-shadow: 0 140% 0 #1A1F24; }
.phone-frame::after { right: -1.2%; top: 28%; height: 14%; }
.phone-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 10.5% / 4.9%; background: #F4F2EE;
}
/* small camera pill */
.phone-screen::after {
  content: ""; position: absolute; top: 1.6%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 3.6%; border-radius: 999px; background: #0E1114; z-index: 3;
}
/* status bar strip so the camera pill never covers the app's own header; --status-bg
   matches the app's top bar (Pocket Julie navy) */
.phone-screen::before {
  content: "9:41"; position: absolute; top: 0; left: 0; right: 0; height: 5.4%; z-index: 2;
  background: var(--status-bg, #0B2A3C); color: #fff;
  font: 700 4.6cqw/1 -apple-system, "Helvetica Neue", Arial, sans-serif;
  display: flex; align-items: center; padding-left: 9%; padding-top: 1.2%;
}
.phone-screen { container-type: inline-size; }
.phone-screen img {
  position: absolute; left: 0; right: 0; top: 5.4%; width: 100%; height: 94.6%;
  object-fit: fill;
  opacity: 0; transition: opacity .9s ease;
}
.phone-screen img.on { opacity: 1; }
.phone-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.phone-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(8, 40, 62, .2); transition: background .3s; }
.phone-dots i.on { background: var(--crimson, #A32035); }
@media (prefers-reduced-motion: reduce) { .phone-screen img { transition: none; } }