/* The laptop screen UI (Boo paying a bill), shared by the home page and the shop page.
   Positioned over a photo by the page; type scales with the screen (cqw). */
.screen { position: absolute; z-index: 2; container-type: inline-size; }
.screen__in {
  position: absolute; inset: 0; overflow: hidden; border-radius: .9cqw .9cqw 0 0;
  background: linear-gradient(160deg, #e6edf3 0%, #d9e2ea 55%, #d3dbe4 100%); color: var(--ink);
  font-size: 3cqw; letter-spacing: -0.01em; line-height: 1.2;
}
.screen__notch { position: absolute; z-index: 4; left: 50%; top: 0; width: 10.6%; height: 2.7cqw; transform: translateX(-50%); background: #0b0b0c; border-radius: 0 0 1cqw 1cqw; }
.screen__boo {
  position: absolute; z-index: 3; left: 50%; top: 4.4cqw; display: flex; align-items: center; gap: 1.6cqw;
  height: 6.4cqw; padding: 0 2.8cqw 0 2.4cqw; border-radius: 99px; background: rgba(18, 18, 20, .9); color: #fff;
  font-size: 2.8cqw; white-space: nowrap; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .18);
  opacity: 0; transform: translate(-50%, -2cqw) scale(.9); transition: opacity .4s ease, transform .5s var(--ease);
}
.screen__boo .dots { gap: .6cqw; }
.screen__boo .dots i { width: 1.1cqw; height: 1.1cqw; animation: listen 1.2s ease-in-out infinite; }
.screen__boo .dots i:nth-child(2) { animation-delay: .15s; }
.screen__boo .dots i:nth-child(3) { animation-delay: .3s; }
.screen__boo b { font-weight: 600; }
.screen__boo-done { display: none; }
.screen__win {
  position: absolute; z-index: 2; left: 7%; right: 7%; top: 14.5cqw; bottom: 0; border-radius: 1.6cqw 1.6cqw 0 0; overflow: hidden;
  background: #fff; box-shadow: 0 .4cqw 3cqw rgba(0, 0, 0, .14);
  opacity: 0; transform: translateY(3cqw) scale(.97); transition: opacity .45s ease, transform .6s var(--ease);
}
.screen__bar { display: flex; align-items: center; gap: .9cqw; height: 6cqw; padding: 0 2.4cqw; background: #f1f1f3; border-bottom: 1px solid #e3e3e6; }
.screen__bar i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #d1d1d6; }
.screen__bar span { flex: 1; margin-right: 4cqw; text-align: center; font-size: 2.4cqw; color: var(--grey-2); }
.screen__page { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3cqw; padding: 4.2cqw 4cqw; transition: opacity .35s ease; }
.screen__eyebrow, .screen__due { font-size: 2.5cqw; color: var(--grey-2); }
.screen__amount { margin: .5cqw 0 .4cqw; font-size: 7.4cqw; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.screen__row {
  display: flex; flex-direction: column; gap: .3cqw; padding: 1.6cqw 2.2cqw; border-radius: 1.4cqw; border: 1px solid #e3e3e6;
  font-size: 2.6cqw; transition: box-shadow .3s ease, border-color .3s ease;
}
.screen__row span { font-size: 2.2cqw; color: var(--grey-2); }
.screen__row b { font-weight: 600; }
.screen__pay {
  margin-top: 1.8cqw; height: 6.6cqw; border-radius: 99px; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2.8cqw; font-weight: 600;
  transition: transform .18s ease, background .18s ease, box-shadow .3s ease;
}
.screen__done {
  position: absolute; inset: 6cqw 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw;
  background: #fff; opacity: 0; transition: opacity .4s ease;
}
.screen__check { width: 8cqw; height: 8cqw; margin-bottom: 1.2cqw; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; transform: scale(.6); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.screen__done-t { font-size: 4.6cqw; font-weight: 600; letter-spacing: -0.03em; }
.screen__done-s { font-size: 2.5cqw; color: var(--grey-2); }
/* steps */
.screen.s1 .screen__boo { opacity: 1; transform: translate(-50%, 0) scale(1); }
.screen.s2 .screen__win { opacity: 1; transform: none; }
.screen.s3 .screen__row { border-color: var(--blue); box-shadow: 0 0 0 .5cqw rgba(10, 132, 255, .18); }
.screen.s4 .screen__pay { transform: scale(.95); background: #0060df; box-shadow: 0 0 0 1cqw rgba(10, 132, 255, .2); }
.screen.s5 .screen__page { opacity: 0; }
.screen.s5 .screen__done { opacity: 1; }
.screen.s5 .screen__check { transform: scale(1); }
.screen.s5 .screen__boo-work, .screen.s5 .screen__boo .dots { display: none; }
.screen.s5 .screen__boo-done { display: inline; }
.screen.s5 .screen__boo::before { content: ""; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #30d158; }
@keyframes listen { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.35); opacity: 1; } }