/* Motion for the נטו מייל site - CSS only. With "reduce motion" (or no animation support) every
   element simply shows in its final state; nothing depends on an animation to become visible. */

/* the live-call card in the hero */
.call-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 1.25rem; box-shadow: 0 30px 60px -34px rgba(18,32,58,.45); display: grid; gap: 1rem; max-width: 420px; width: 100%; justify-self: center; }
.call-head { display: flex; align-items: center; gap: .85rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.ring { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; }
.ring svg { width: 24px; height: 24px; }
.ring::before, .ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; }
.call-head strong { display: block; font-size: 1.08rem; }
.call-head span { color: var(--muted); font-size: .92rem; }
.bubbles { display: grid; gap: .6rem; min-height: 16.5rem; align-content: start; }
.bubble { background: var(--key-soft); border-radius: 16px 16px 16px 4px; padding: .65rem .9rem; font-size: 1rem; justify-self: start; max-width: 92%; }
.bubble.me { justify-self: end; background: transparent; padding: 0; border-radius: 0; display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .92rem; }
.bubble.ok { background: color-mix(in srgb, #1f9d55 14%, var(--surface)); font-weight: 600; }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 20px; vertical-align: middle; margin-inline-start: .4rem; }
.wave i { width: 3px; height: 30%; background: var(--brand); border-radius: 2px; }
.addr-line { font-family: var(--font-mono); direction: ltr; text-align: left; font-size: 1.02rem; padding-top: .9rem; border-top: 1px solid var(--line); word-break: break-all; }
.addr-line b { color: var(--brand); font-weight: 500; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: var(--ink); vertical-align: -0.15em; margin-inline-start: 2px; }

/* hover micro-motion */
.feature .ico { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.feature:hover .ico { transform: translateY(-4px) rotate(-6deg); }
.card, .steps li { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover, .steps li:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(18,32,58,.35); }

@media (prefers-reduced-motion: no-preference) {
  .ring::before { animation: nm-ring 2.2s ease-out infinite; }
  .ring::after { animation: nm-ring 2.2s ease-out 1.1s infinite; }
  .ring svg { animation: nm-shake 2.2s ease-in-out infinite; }
  .wave i { animation: nm-wave 1s ease-in-out infinite; }
  .wave i:nth-child(2) { animation-delay: -.8s; }
  .wave i:nth-child(3) { animation-delay: -.6s; }
  .wave i:nth-child(4) { animation-delay: -.4s; }
  .wave i:nth-child(5) { animation-delay: -.2s; }
  .caret { animation: nm-blink 1s steps(1) infinite; }

  /* the call plays as a 14-second loop, one line after another */
  .bubbles > :nth-child(1) { animation: nm-b1 14s infinite both; }
  .bubbles > :nth-child(2) { animation: nm-b2 14s infinite both; }
  .bubbles > :nth-child(3) { animation: nm-b3 14s infinite both; }
  .bubbles > :nth-child(4) { animation: nm-b4 14s infinite both; }
  .bubbles > :nth-child(5) { animation: nm-b5 14s infinite both; }
  .bubbles > :nth-child(6) { animation: nm-b6 14s infinite both; }
  .bubbles > :nth-child(2) .k { animation: nm-press2 14s infinite; }
  .bubbles > :nth-child(4) .k { animation: nm-press4 14s infinite; }

  /* main-menu keys light up in turn, as if someone is pressing them */
  .keys .keyrow .k.solid { animation: nm-key 10s infinite; }
  .keys .keyrow:nth-child(2) .k.solid { animation-delay: 2s; }
  .keys .keyrow:nth-child(3) .k.solid { animation-delay: 4s; }
  .keys .keyrow:nth-child(4) .k.solid { animation-delay: 6s; }
  .keys .keyrow:nth-child(5) .k.solid { animation-delay: 8s; }

  .brand .mark { animation: nm-pop .7s cubic-bezier(.3,1.6,.5,1) both; }
  .hero h1, .hero .lead, .hero .actions { animation: nm-rise .8s cubic-bezier(.2,.8,.2,1) both; }
  .hero .lead { animation-delay: .08s; }
  .hero .actions { animation-delay: .16s; }

  /* scroll reveal - site.js adds rv-ready only when it can also reveal */
  html.rv-ready .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
  html.rv-ready .rv.in { opacity: 1; transform: none; }
}

@keyframes nm-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes nm-shake { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-14deg); } 68% { transform: rotate(12deg); } 72% { transform: rotate(-8deg); } 76% { transform: rotate(5deg); } }
@keyframes nm-wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@keyframes nm-blink { 50% { opacity: 0; } }
@keyframes nm-pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nm-key { 0%, 12%, 100% { transform: none; box-shadow: 0 0 0 0 transparent; } 3% { transform: scale(.86); box-shadow: 0 0 0 7px color-mix(in srgb, var(--key) 45%, transparent); } 7% { transform: scale(1.06); } }
@keyframes nm-b1 { 0% { opacity: 0; transform: translateY(8px); } 3%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes nm-b2 { 0%, 16% { opacity: 0; transform: translateY(8px); } 19%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes nm-b3 { 0%, 26% { opacity: 0; transform: translateY(8px); } 29%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes nm-b4 { 0%, 46% { opacity: 0; transform: translateY(8px); } 49%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes nm-b5 { 0%, 56% { opacity: 0; transform: translateY(8px); } 59%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes nm-b6 { 0%, 74% { opacity: 0; transform: scale(.9); } 78%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes nm-press2 { 0%, 19% { transform: none; } 21% { transform: scale(.8); background: var(--key); } 24%, 100% { transform: none; } }
@keyframes nm-press4 { 0%, 49% { transform: none; } 51% { transform: scale(.8); background: var(--key); } 54%, 100% { transform: none; } }