/* tokn.id | moldura de iPhone com tela viva. A geometria é a mesma aprovada nas landings dos
   criadores (aro de metal de 1,2%, vidro preto, tela 390 x 844, ilha dinâmica), tudo em proporção
   da largura: pra mudar o tamanho, basta a largura. A tela é um container (cqw), então o app que
   mora dentro escala sozinho: 1cqw = 1% da largura da tela. */
.celular {
  position: relative; width: 100%; aspect-ratio: 1000 / 2059; border-radius: 16% / 7.77%;
  background: linear-gradient(135deg, #5b5e64 0%, #2a2c30 16%, #17181b 50%, #2c2e32 84%, #575a60 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -24px rgba(0, 0, 0, .75);
  animation: flutuar 6.5s ease-in-out infinite; animation-delay: var(--fl, 0s);
}
.celular::before { content: ''; position: absolute; inset: .58% 1.2%; border-radius: 15.16% / 7.27%; background: #050506; }
.celular > .tela {
  position: absolute; left: 4.5%; top: 2.19%; width: 91%; height: 95.63%;
  border-radius: 12.64% / 5.84%; overflow: hidden; background: var(--navy); container-type: inline-size;
}
.celular::after {
  content: ''; position: absolute; z-index: 2; top: 3.42%; left: 50%; width: 29.2%; height: 4.15%;
  translate: -50% 0; border-radius: 999px; background: #000;
}
@keyframes flutuar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }