/* =========================================================
   MUTARI PRO — motion.css
   keyframes, entrada, reveal, ripple, reduced-motion
   ========================================================= */

/* ---------- status dot ---------- */
@keyframes statusPulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(193,97,59,.5)}
  50%{opacity:.55;box-shadow:0 0 0 5px rgba(193,97,59,0)}
}

/* ---------- hero title: entrada palavra/linha por linha ---------- */
.hero-title.loaded .line-inner{
  transition:transform 1s var(--ease),opacity 1s var(--ease);
  transform:translateY(0);opacity:1;
}
.hero-title.loaded .line:nth-child(1) .line-inner{transition-delay:.05s}
.hero-title.loaded .line:nth-child(2) .line-inner{transition-delay:.2s}
.hero-title.loaded .line:nth-child(3) .line-inner{transition-delay:.35s}

/* ---------- reveal genérico (IntersectionObserver) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* leve stagger dentro de grades, via nth-child */
.solutions-list .solution.reveal.in-view{transition-delay:calc(var(--i,0) * 60ms)}
.method-grid .step.reveal.in-view{transition-delay:calc(var(--i,0) * 50ms)}
.projects-grid .project-card.reveal.in-view{transition-delay:calc(var(--i,0) * 45ms)}
.testimonials .testimonial.reveal.in-view{transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- título com split por palavra (JS injeta spans) ---------- */
[data-split].split-in .split-word span{
  transition:transform .7s var(--ease),opacity .7s var(--ease);
  transition-delay:calc(var(--wi,0) * 45ms);
  transform:translateY(0);opacity:1;
}

/* ---------- ticker ---------- */
.ticker-track{animation:tickerScroll 32s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- parede de bastidores ---------- */
.wall-tile{animation:wallDrift 14s ease-in-out infinite}
.wall-tile:nth-child(2n){animation-duration:18s;animation-delay:-4s}
.wall-tile:nth-child(3n){animation-duration:22s;animation-delay:-9s}
.wall-tile:nth-child(5n){animation-duration:16s;animation-delay:-2s}
@keyframes wallDrift{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.04);opacity:.62}
}

/* ---------- case cards flutuantes ---------- */
.case-card{animation:cardFloat 7s ease-in-out infinite}
.case-card-2{animation-duration:8.5s;animation-delay:-2s}
.case-card-3{animation-duration:6.2s;animation-delay:-4s}
@keyframes cardFloat{
  0%,100%{transform:translateY(0) rotate(var(--r,0))}
  50%{transform:translateY(-10px) rotate(var(--r,0))}
}
.case-card-1{--r:-4deg}
.case-card-2{--r:3deg}
.case-card-3{--r:-1deg}

/* ---------- ripple de botão ---------- */
.btn .ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.45);
  transform:scale(0);opacity:.6;pointer-events:none;
  animation:rippleEffect .6s ease-out forwards;
}
@keyframes rippleEffect{
  to{transform:scale(3.4);opacity:0}
}

/* ---------- parallax (classe aplicada via JS a partir de transform inline) ---------- */
.hero-lines,.hero-vignette{will-change:transform}

/* ---------- video play pulse sutil ---------- */
@media(prefers-reduced-motion:no-preference){
  .video-play{animation:playPulse 3.2s ease-in-out infinite}
}
@keyframes playPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(250,249,245,.35)}
  50%{box-shadow:0 0 0 10px rgba(250,249,245,0)}
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .hero-title .line-inner,
  .split-word span{transform:none;opacity:1}
  .reveal{opacity:1;transform:none}
  .ticker-track{animation:none}
}