/* ============================================
   TEMA ANIVERSARIO ZAPI - 33 ANOS
   Confetes POR CIMA do conteudo (z-index alto, opacidade baixa)
   + selo do lado do logo
   ============================================ */

/* ============= CONFETES CAINDO - CAMADA SUPERIOR ============= */
.confetes-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;  /* acima do conteudo, abaixo de modais */
  background-repeat: repeat;
  will-change: background-position;
}
.confetes-layer-1 {
  background-image: url('/static/img/confetes-dourados.webp');
  background-size: 700px auto;
  background-position: 0 -700px;
  opacity: .22;
  animation: confetes-cair 14s linear infinite;
}
.confetes-layer-2 {
  background-image: url('/static/img/confetes-dourados.webp');
  background-size: 1100px auto;
  background-position: 300px -1100px;
  opacity: .14;
  animation: confetes-cair-lento 26s linear infinite;
}
@keyframes confetes-cair {
  0%   { background-position: 0 -700px; }
  100% { background-position: 0 700px; }
}
@keyframes confetes-cair-lento {
  0%   { background-position: 300px -1100px; }
  100% { background-position: -100px 1100px; }
}

/* ============= SELO 33 ANOS (do lado do logo, no header) ============= */
.selo-33-header {
  display: inline-block;
  width: 94px;
  height: 94px;
  margin-left: 12px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .2));
  animation: selo-swing 4s ease-in-out infinite;
  transform-origin: center;
  flex-shrink: 0;
}
.selo-33-header img {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes selo-swing {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.navbar-brand:hover .selo-33-header {
  animation-play-state: paused;
  transform: scale(1.1) rotate(-6deg);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
@media (max-width: 768px) {
  .selo-33-header { width: 68px; height: 68px; margin-left: 8px; }
}

/* ============= REDUCED MOTION ============= */
@media (prefers-reduced-motion: reduce) {
  .confetes-layer, .selo-33-header { animation: none !important; }
}