/**
 * Yayah Core · @keyframes globais (arquivo unico).
 * Regra: animacao de movimento padrao vem do Velora (velora-motion-core.css); aqui so entra o que e proprio da marca
 * e precisa de @keyframes. As classes/estilos ficam no Elementor (Kit e classes globais) e chamam estes nomes.
 * Carregado em todas as paginas (cabecalho, menu e rodape sao globais), por isso fica enxuto.
 */

/* Cabecalho: vidro que aparece conforme a rolagem (animation-timeline: scroll) */
@keyframes yy-hd-glass {
  0%   { background-color: rgba(17, 21, 26, 0); backdrop-filter: blur(0) saturate(1); border-bottom-color: transparent; }
  100% { background-color: rgba(17, 21, 26, .72); backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: rgba(242, 242, 242, .12); }
}

/* Menu mobile: entrada escalonada dos itens */
@keyframes yy-mnu-in {
  from { opacity: 0; translate: 0 36px; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* Rodape: palavra gigante que corre com a rolagem (animation-timeline: view) */
@keyframes yy-counter {
  from { transform: translateX(8%); }
  to   { transform: translateX(-34%); }
}

/* Troca de tema: circulo que se abre a partir do clique (View Transition) */
@keyframes yy-iris {
  from { clip-path: circle(0 at var(--yy-x, 50%) var(--yy-y, 50%)); }
  to   { clip-path: circle(150vmax at var(--yy-x, 50%) var(--yy-y, 50%)); }
}