/* Animações da landing page Mundo Pet ACIM */
.motion-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

.motion-reveal.motion-visible {
  opacity: 1;
  transform: translateY(0);
}

.card,
.segment,
.logo-slot,
.step,
.stat,
.quote,
.visual-card,
.logo-box,
.cta,
.btn {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover,
.logo-slot:hover,
.step:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 44px rgba(15,79,121,.13);
  border-color: rgba(19,93,139,.24);
}

.segment:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.22);
}

.stat:hover {
  transform: translateY(-4px);
  background: linear-gradient(180deg,#fff,#f5fbfe);
}

.btn:hover {
  transform: translateY(-2px);
}

.hero {
  background-size: 130% 130%;
  animation: motionHeroBackground 12s ease-in-out infinite alternate;
}

.visual-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .25s ease;
}

.visual-card::before,
.visual-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.visual-card::before {
  width: 280px;
  height: 280px;
  top: -120px;
  right: -100px;
  background: radial-gradient(circle,rgba(19,93,139,.18),transparent 68%);
  animation: motionBlob 9s ease-in-out infinite;
}

.visual-card::after {
  width: 230px;
  height: 230px;
  bottom: -100px;
  left: -80px;
  background: radial-gradient(circle,rgba(108,173,49,.22),transparent 68%);
  animation: motionBlob 11s ease-in-out infinite reverse;
}

.logo-box {
  position: relative;
  z-index: 2;
  animation: motionLogoBreath 5s ease-in-out infinite;
}

.motion-float-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 15px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(19,93,139,.10);
  box-shadow: 0 14px 32px rgba(15,79,121,.16);
  color: var(--azul-esc,#0b3958);
  font-size: .84rem;
  font-weight: 800;
  pointer-events: none;
  animation: motionFloat 5.4s ease-in-out infinite;
}

.motion-float-card i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eef7e5;
  color: #5f9d28;
  font-style: normal;
}

.motion-float-1 { top: 11%; left: -5%; }
.motion-float-2 { top: 21%; right: -6%; animation-delay: -1.4s; }
.motion-float-3 { bottom: 20%; left: -7%; animation-delay: -2.8s; }
.motion-float-4 { right: -5%; bottom: 10%; animation-delay: -4.1s; }

.tag::before {
  animation: motionPulse 2.4s ease-in-out infinite;
}

.floating a {
  animation: motionContact 3.2s ease-in-out infinite;
}

.floating a:nth-child(2) {
  animation-delay: -1.6s;
}

@keyframes motionFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-11px) rotate(.5deg); }
}

@keyframes motionHeroBackground {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 35%; }
}

@keyframes motionBlob {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(16px,12px,0) scale(1.08); }
}

@keyframes motionLogoBreath {
  0%,100% { transform: translateY(0); box-shadow: 0 18px 45px rgba(15,79,121,.12); }
  50% { transform: translateY(-5px); box-shadow: 0 25px 54px rgba(15,79,121,.17); }
}

@keyframes motionPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(108,173,49,.26); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(108,173,49,0); }
}

@keyframes motionContact {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 940px) {
  .motion-float-card { font-size: .75rem; padding: 9px 11px; }
  .motion-float-1,.motion-float-3 { left: 0; }
  .motion-float-2,.motion-float-4 { right: 0; }
}

@media (max-width: 620px) {
  .motion-float-card { transform: scale(.88); }
  .motion-float-1 { top: 5%; }
  .motion-float-2 { top: 16%; }
  .motion-float-3 { bottom: 15%; }
  .motion-float-4 { bottom: 4%; }
}

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