/* Motion da abertura: o site se monta, aparece na busca e o cliente chama no WhatsApp.
   Roda uma vez (cerca de 4,5 s) e para. Só CSS, sem JavaScript. */

/* --- peças novas --- */
.browser { position: relative; }
.browser__view { position: relative; }
.m-skel {
  position: absolute; inset: 0; padding: 7% 8%;
  background: #1c3a2d; display: grid; grid-template-columns: 1.1fr 1fr; gap: 6%;
}
.m-skel__txt { display: grid; align-content: center; gap: 10px; }
.m-skel i { display: block; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, .14); }
.m-skel i:nth-child(1) { height: 18px; width: 90%; }
.m-skel i:nth-child(2) { height: 18px; width: 70%; }
.m-skel i:nth-child(3) { width: 95%; margin-top: 8px; }
.m-skel i:nth-child(4) { width: 80%; }
.m-skel i:nth-child(5) { width: 38%; height: 22px; border-radius: 99px; margin-top: 10px; }
.m-skel__img { border-radius: 999px 999px 0 0; background: rgba(255, 255, 255, .1); }

.m-search {
  position: absolute; z-index: 3; left: -3%; top: -22px;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 14px; border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  font-size: .9375rem; color: var(--ink); white-space: nowrap; max-width: 92%;
}
.m-search svg { width: 18px; height: 18px; color: var(--ink-2); flex: none; }
.m-search__q { position: relative; overflow: hidden; }
.m-search__caret { width: 1.5px; height: 1.1em; background: var(--navy); flex: none; margin-left: -6px; }

.m-notif {
  position: absolute; z-index: 3; right: 9%; top: 50%;
  display: flex; gap: 12px; align-items: flex-start;
  width: min(300px, 64%); padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .96); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  font-size: .8125rem; line-height: 1.35; color: var(--ink);
}
.m-notif__ico { width: 30px; height: 30px; border-radius: 8px; background: #25d366; color: #fff; display: grid; place-items: center; flex: none; }
.m-notif__ico svg { width: 18px; height: 18px; }
.m-notif b { display: block; font-size: .75rem; font-weight: 600; color: var(--ink-2); }

.hero h1 .serif { position: relative; display: inline-block; }
.hero h1 .serif::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: .06em; height: 3px; border-radius: 3px;
  background: var(--accent); transform-origin: left center;
}

/* --- animação --- */
@media (prefers-reduced-motion: no-preference) {
  .hero__grid > div > * { animation: m-rise .7s var(--ease) both; }
  .hero__grid > div > :nth-child(2) { animation-delay: .08s; }
  .hero__grid > div > :nth-child(3) { animation-delay: .16s; }
  .hero__grid > div > :nth-child(4) { animation-delay: .24s; }
  .hero__grid > div > :nth-child(5) { animation-delay: .32s; }
  .hero h1 .serif::after { animation: m-draw .7s var(--ease) 1.1s both; }

  .devices .browser { animation: m-rise .8s var(--ease) .2s both; }
  .devices .browser__view img { animation: m-paint 1.1s cubic-bezier(.65, 0, .35, 1) .9s both; }
  .m-skel i, .m-skel__img { animation: m-pulse .9s ease-in-out .3s 2 both; }
  .devices .phone { animation: m-phone .8s var(--ease) 1.7s both; }

  .m-search { animation: m-pop .5s var(--ease) 2.3s both; }
  .m-search__q { animation: m-type 1.2s steps(32, end) 2.6s both; }
  .m-search__caret { animation: m-blink .5s step-end 2.4s 6 both; }

  .m-notif { animation: m-notif .6s cubic-bezier(.2, 1.3, .4, 1) 4s both; }
  .devices figcaption { animation: m-fade .6s ease 4.4s both; }
}
@media (prefers-reduced-motion: reduce) {
  .m-search__caret { display: none; }
}

@keyframes m-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-paint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes m-phone { from { opacity: 0; transform: translateY(40px) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes m-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes m-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-blink { 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes m-notif { from { opacity: 0; transform: translateX(24px) scale(.94); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .m-search { left: 0; top: -20px; font-size: .8125rem; padding: 9px 14px 9px 12px; }
  .m-notif { right: 6%; top: 46%; width: 68%; font-size: .75rem; padding: 10px 12px; }
}