/* v1.0.46 — restituição da experiência original das trilhas (v1.0.35).
   Mantém tipografia, cores, radius e estrutura existentes. */

/* O seletor responde ao ponteiro, mas só troca de trilha após um clique. */
#trilhas-tabs .animated-tabs-nav button {
  transition: color 220ms ease, background-color 220ms ease;
}
#trilhas-tabs .animated-tabs-nav button:not(.active):hover {
  color: var(--text-on-dark);
  background-color: rgba(230,45,146,.10);
}
#trilhas-tabs .animated-tabs-nav button:focus-visible,
#trilhas-tabs .tab-text .card-link:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

/* O indicador rosa preserva exatamente a cor e a animação deslizante original. */
#trilhas-tabs .animated-tabs-indicator {
  transition: left .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1);
}

/* Cada card volta a apresentar imagem e texto com entrada animada.
   A animação atua nos filhos para não interferir no cálculo do scroll-snap. */
@keyframes sefTrailImageEnter {
  from { opacity: .52; transform: translateY(12px) scale(.982); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes sefTrailTextEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
#trilhas-tabs .animated-tabs-content-panel.active.sef-trail-reveal .tab-image {
  animation: sefTrailImageEnter .55s cubic-bezier(.22,1,.36,1) both;
}
#trilhas-tabs .animated-tabs-content-panel.active.sef-trail-reveal .tab-text {
  animation: sefTrailTextEnter .55s .09s cubic-bezier(.22,1,.36,1) both;
}

/* Interação suave na imagem, sem mudar o card ou adicionar novos elementos. */
@media (hover: hover) and (pointer: fine) {
  #trilhas-tabs .animated-tabs-content-panel.active .tab-image {
    transition: transform 280ms ease, box-shadow 280ms ease;
  }
  #trilhas-tabs .animated-tabs-content-panel.active .tab-image:hover {
    transform: scale(1.018);
    box-shadow: 0 14px 36px rgba(10,10,10,.20);
  }
}

/* Tablet vertical/celular: a transição acontece nos filhos, sem mover o slide
   enquanto o usuário arrasta; o snap e o indicador continuam sincronizados. */
@media (max-width: 768px),
       (orientation: portrait) and (min-width: 641px) and (max-width: 1100px) {
  #trilhas-tabs .animated-tabs-content-panel.active {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #trilhas-tabs .animated-tabs-indicator,
  #trilhas-tabs .animated-tabs-nav button,
  #trilhas-tabs .animated-tabs-content-panel,
  #trilhas-tabs .animated-tabs-content-panel .tab-image,
  #trilhas-tabs .animated-tabs-content-panel .tab-text {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  #trilhas-tabs .animated-tabs-content { scroll-behavior: auto; }
}