/* ============================================================
   PPLeds — animations.css
   Keyframes, transições, efeitos visuais e acessibilidade
   (prefers-reduced-motion, focus-visible).
   ============================================================ */

/* ---- ANIMATIONS ---- */
@keyframes pulse    { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes float    { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes ticker   { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin     { to { transform:rotate(360deg); } }
@keyframes panelIn  { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
@keyframes popIn    { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes stepIn   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.hero-tag::before    { animation: pulse 2s infinite; }
.ticker-inner        { animation: ticker 30s linear infinite; }
/* whatsapp-float animation definida junto com o seletor acima */
.page-fadein         { animation: fadeInUp 0.4s ease both; }
.spinner             { width:20px; height:20px; border:2px solid rgba(245,200,66,0.3); border-top-color:var(--gold); border-radius:50%; animation:spin 0.7s linear infinite; display:inline-block; }
.panel-fadein        { animation: panelIn 0.25s ease both; }
.pop-in              { animation: popIn 0.2s ease both; }
.step-in             { animation: stepIn 0.3s ease both; }



/* ---- ACESSIBILIDADE ---- */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--gold);
  color: var(--black);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-to-content:focus {
  top: 8px;
}

/* Nav link ativo */
nav a.active {
  color: var(--gold) !important;
  position: relative;
}
nav a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}