body.page-in { animation: fadeIn .6s var(--spring, cubic-bezier(.34,1.45,.48,1)) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.96);
}
.reveal.in {
  animation: bounceIn .72s cubic-bezier(.34, 1.56, .48, 1) forwards;
}
.reveal.d1 { animation-delay: .08s; }
.reveal.d2 { animation-delay: .16s; }
@keyframes bounceIn {
  to { opacity: 1; transform: none; }
}

.phones .p-main { animation: bob 5.6s ease-in-out infinite; }
.phones .p-side.left { animation: bob 6.4s ease-in-out .4s infinite; }
.phones .p-side.right { animation: bob 7s ease-in-out .8s infinite; }
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

.orb.o1 { animation: pulse 7s ease-in-out infinite; }
.orb.o2 { animation: pulse 8.4s ease-in-out .6s infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .28; }
  50% { transform: scale(1.18); opacity: .42; }
}

.bubbles span { animation: pop .7s cubic-bezier(.34, 1.7, .48, 1) both; }
.bubbles .b2 { animation-delay: .08s; }
.bubbles .b3 { animation-delay: .16s; }
.bubbles .b4 { animation-delay: .1s; }
.bubbles .b5 { animation-delay: .18s; }
.bubbles .b6 { animation-delay: .24s; }
.bubbles .b7 { animation-delay: .3s; }
@keyframes pop {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; }
}
.bubbles .b7 { animation-name: popCenter; }
@keyframes popCenter {
  from { opacity: 0; transform: translateX(-50%) scale(.4); }
  to { opacity: 1; transform: translateX(-50%); }
}

.btn {
  transition: transform .28s cubic-bezier(.34, 1.7, .48, 1), box-shadow .28s ease;
}
.btn:hover { transform: translateY(-3px) scale(1.04); }
.btn:active { transform: scale(.96); }

.port, .related a, .faq details, .tl {
  transition: transform .35s cubic-bezier(.34, 1.55, .48, 1), box-shadow .35s ease;
}
.port:hover, .related a:hover, .tl:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 48px rgba(31, 55, 99, .14);
}

.frame .phone {
  transition: transform .45s cubic-bezier(.34, 1.55, .48, 1);
}
.frame:hover .phone {
  transform: rotateY(0deg) rotateX(0deg) translateY(-14px) scale(1.06) !important;
}

.brand img { transition: transform .4s cubic-bezier(.34, 1.7, .48, 1); }
.brand:hover img { transform: rotate(-10deg) scale(1.08); }

.nav nav a { transition: transform .25s cubic-bezier(.34, 1.6, .48, 1), background .25s ease; }
.nav nav a:hover { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}