/* Novitto vivo: flutua, olha para o mouse, pula quando você clica. Respeita "reduzir movimento". */
.nv { position: relative; display: inline-block; perspective: 900px; -webkit-tap-highlight-color: transparent; }
.nv-corpo { position: relative; z-index: 1; display: block; transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }
.nv-corpo img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.nv-camada { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.nv-camada:first-child { position: relative; }
.nv-camada.ativa { opacity: 1; visibility: visible; }
.nv-fig { position: relative; filter: drop-shadow(0 18px 24px rgba(26, 10, 61, .35)); animation: nv-flutua 4.2s ease-in-out infinite; transform-origin: 50% 90%; }
/* olhos que seguem o mouse: a imagem vem com o olho em branco e a íris é desenhada por cima */
.nv-olho { position: absolute; border-radius: 50%; overflow: hidden; pointer-events: none; }
.nv-iris { position: absolute; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; transition: transform .12s ease-out;
  background: radial-gradient(circle at 34% 30%, #fff 0 9%, transparent 10%), radial-gradient(circle at 62% 66%, rgba(255,255,255,.55) 0 4%, transparent 5%),
              radial-gradient(circle, #120420 0 42%, #4A1F8A 46%, #6B3FC0 62%, #3A1A5E 78%, #22103A 100%);
  box-shadow: inset 0 3px 4px rgba(0,0,0,.35); }
.nv-palp { position: absolute; inset: -4px; background: linear-gradient(#6A3BD6 0, #5A2EC4 84%, #2A1060 84%, #2A1060 92%, #5A2EC4 92%); transform: scaleY(0); transform-origin: 50% 0; }
.nv-olho.pisca .nv-palp { animation: nv-pisca .16s ease-in-out 2 alternate; }
@keyframes nv-pisca { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.nv-sombra { position: absolute; z-index: 0; left: 22%; right: 22%; bottom: -2%; height: 7%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26, 10, 61, .45), rgba(26, 10, 61, 0)); animation: nv-sombra 4.2s ease-in-out infinite; }
.nv.entra .nv-corpo { animation: nv-entra .9s cubic-bezier(.34, 1.56, .64, 1) both; }
.nv.pulo .nv-fig { animation: nv-pulo .7s cubic-bezier(.3, .7, .4, 1) both; }
.nv-fala { position: absolute; z-index: 2; left: 74%; top: -8%; width: max-content; max-width: 200px; padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  background: #fff; color: #170B33; font: 600 14px/1.35 'Instrument Sans', system-ui, sans-serif; box-shadow: 0 14px 30px -12px rgba(23, 11, 51, .45);
  opacity: 0; transform: translateY(8px) scale(.92); transform-origin: 0 100%; transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.nv-fala.on { opacity: 1; transform: none; }
@keyframes nv-flutua { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes nv-sombra { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .6; } }
@keyframes nv-entra { 0% { transform: translateY(40px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes nv-pulo {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(4px) scale(1.08, .9); }
  45% { transform: translateY(-46px) scale(.95, 1.06) rotate(-6deg); }
  70% { transform: translateY(0) scale(1.06, .94); }
  85% { transform: translateY(-6px) scale(.98, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* logos das lojas "vazados" com volume */
.logo3d { display: block; height: auto; transform: perspective(500px) rotateX(12deg) rotateY(-14deg);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.28)) drop-shadow(0 1px 0 rgba(0,0,0,.28)) drop-shadow(0 1px 0 rgba(0,0,0,.28)) drop-shadow(0 2px 0 rgba(0,0,0,.25)) drop-shadow(0 16px 18px rgba(0,0,0,.45));
  animation: logo-flutua 5s ease-in-out infinite; transition: transform .3s ease; }
.logo3d.claro { filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 2px 0 rgba(255,255,255,.25)) drop-shadow(0 16px 18px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(201,181,255,.35)); }
li:hover > .logo3d { transform: perspective(500px) rotateX(0) rotateY(0) translateY(-4px); }
@keyframes logo-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* Quem pediu "menos animação" no computador: o Novitto só respira bem de leve e pula quando é clicado (movimento que a pessoa pediu). */
@media (prefers-reduced-motion: reduce) {
  .nv-fig { animation: nv-respira 6s ease-in-out infinite; }
  .nv-sombra, .logo3d, .nv.entra .nv-corpo { animation: none !important; }
  .nv.pulo .nv-fig { animation: nv-pulo .7s cubic-bezier(.3, .7, .4, 1) both; }
}
@keyframes nv-respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 640px) {
  .nv-fala, .nv-mini .nv-fala, .nv-fim .nv-fala { left: 50%; right: auto; top: -18%; translate: -50% 0; border-radius: 16px; max-width: 180px; }
}