/* ==========================================================================
   CAFÉ TRÊS LOBOS — ANIMAÇÕES E MICROINTERAÇÕES
   Toda animação do projeto fica centralizada aqui. Nenhum outro arquivo
   deve declarar @keyframes solto.
   ========================================================================== */

/* ---------- Fade + subida — entrada de seções ao rolar (via IntersectionObserver, ver main.js) ---------- */
@keyframes ctl-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.ctl-reveal {
  opacity: 0;
}

.ctl-reveal.is-visible {
  animation: ctl-fade-up var(--ctl-duration-slow) var(--ctl-ease) forwards;
}

/* Atraso escalonado para grids de card (aplicado via JS, nth-child de apoio) */
.ctl-reveal:nth-child(2).is-visible { animation-delay: 0.08s; }
.ctl-reveal:nth-child(3).is-visible { animation-delay: 0.16s; }
.ctl-reveal:nth-child(4).is-visible { animation-delay: 0.24s; }

/* ---------- Skeleton loading (shimmer) ---------- */
@keyframes ctl-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Loading spinner (dourado) ---------- */
@keyframes ctl-spin {
  to { transform: rotate(360deg); }
}

.ctl-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(191, 149, 63, 0.2);
  border-top-color: var(--ctl-gold-center);
  border-radius: 50%;
  animation: ctl-spin 0.7s linear infinite;
}

/* ---------- Pulso suave (badge de destaque, notificação) ---------- */
@keyframes ctl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.ctl-pulse {
  animation: ctl-pulse 1.8s ease-in-out infinite;
}

/* ---------- Brilho percorrendo (usado em .ctl-btn--primary, ver 04-buttons.css) ---------- */
@keyframes ctl-shine-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ---------- Contador/toast de "adicionado ao carrinho" ---------- */
@keyframes ctl-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.ctl-toast {
  animation: ctl-toast-in var(--ctl-duration-base) var(--ctl-ease) forwards;
}

/* ---------- Hover genérico de elevação (aplicado a cards, imagens clicáveis) ---------- */
.ctl-hover-lift {
  transition: transform var(--ctl-duration-base) var(--ctl-ease),
              box-shadow var(--ctl-duration-base) var(--ctl-ease);
}

.ctl-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--ctl-shadow-card-hover);
}

/* ---------- Underline dourado animado (links de texto corrido) ---------- */
.ctl-link-underline {
  position: relative;
  display: inline-block;
}

.ctl-link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--ctl-gold-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ctl-duration-base) var(--ctl-ease);
}

.ctl-link-underline:hover::after {
  transform: scaleX(1);
}