/* ============================================================
   Peeks globais — personagens espiando das laterais da viewport
   (ciclo alternado esq/dir) e personagem do rodapé que chacoalha.
   Elementos injetados por assets/js/peeks.js (sem JS, nada aparece).
   ============================================================ */

/* --- Bordas do header (barra de menu sticky) ---------------------
   O personagem espia pelas pontas esquerda/direita da barra amarela.
   Injetado dentro do .site-header (sticky = ancestral posicionado),
   então acompanha a barra ao rolar. -------------------------------- */
.side-peek {
  position: absolute;
  top: 50%;
  height: 64px; /* cabe na barra (min-height 84px) sem vazar */
  width: auto;
  pointer-events: none;
  transition: transform .7s cubic-bezier(.34,1.2,.64,1);
  /* estado padrão já escondido na borda direita — nunca aparece
     "solto" no meio da barra entre uma troca de classe e outra */
  right: 0;
  transform: translate(105%, -50%) rotate(-8deg);
}

.side-peek.lado-direito {
  right: 0;
  transform: translate(105%, -50%) rotate(-8deg);
  transform-origin: center right;
}

.side-peek.lado-esquerdo {
  left: 0;
  right: auto;
  transform: translate(-105%, -50%) rotate(8deg);
  transform-origin: center left;
}

/* Só a lateral do personagem aparece */
.side-peek.lado-direito.in { transform: translate(30%, -50%) rotate(-8deg); }
.side-peek.lado-esquerdo.in { transform: translate(-30%, -50%) rotate(8deg); }

/* Escondido, o personagem fica 100% fora da barra — o clip horizontal
   evita scroll lateral. Só no desktop (no mobile o peek nem existe e o
   painel do menu não pode ser clipado). */
@media (min-width: 961px) {
  /* clip nos dois eixos: personagem nunca passa da altura da barra */
  .site-header { overflow: clip; }
}

@media (max-width: 960px) {
  .side-peek { display: none; }
}

/* --- Personagem do rodapé ---------------------------------------- */
.footer { position: relative; }

.footer-char {
  position: absolute;
  right: 4%;
  bottom: 0;
  height: clamp(90px, 10vw, 130px);
  width: auto;
  pointer-events: none;
  transform-origin: bottom center;
  opacity: 0;
  translate: 0 24px;
  transition: opacity .6s ease, translate .6s ease;
}

.footer-char.in { opacity: 1; translate: 0 0; }

@keyframes chacoalhar {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -6deg; }
  75% { rotate: 6deg; }
}

.footer-char.shaking { animation: chacoalhar .45s ease-in-out 6; }

@media (max-width: 640px) {
  .footer-char { right: 2%; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .side-peek { display: none; }
  .footer-char { opacity: 1; translate: 0 0; transition: none; }
  .footer-char.shaking { animation: none; }
}