/*
 * animations.css — Animações, keyframes e scroll reveal
 */

/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL
   Elementos com .rev ficam invisíveis até entrar na
   viewport — o JS adiciona .in via IntersectionObserver
═══════════════════════════════════════════════════════ */
.rev {
  opacity:   0;
  transform: translateY(26px);
  transition:
    opacity   .65s var(--ease),
    transform .65s var(--ease);
}
.rev.in {
  opacity:   1;
  transform: none;
}

/* Delays escalonados para grupos de elementos */
.rev.d1 { transition-delay: .08s; }
.rev.d2 { transition-delay: .16s; }
.rev.d3 { transition-delay: .24s; }
.rev.d4 { transition-delay: .32s; }

/* ═══════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════ */

/* Flutuação suave — orbs decorativos do hero */
@keyframes drift {
  0%, 100% { transform: translate(0,  0);   }
  50%       { transform: translate(12px, -16px); }
}
@keyframes drift-rev {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-10px, 14px); }
}

/* Rotação lenta — símbolo SVG de fundo no hero */
@keyframes rotate-slow {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Pulso suave — elementos de destaque */
@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 185, 66, .35); }
  50%       { box-shadow: 0 0 0 8px rgba(245, 185, 66, 0);  }
}

/* Entrada de cima para baixo (header) */
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* ═══════════════════════════════════════════════════════
   SCROLL-TO-TOP BUTTON
═══════════════════════════════════════════════════════ */
#stt {
  position:      fixed;
  bottom:        28px;
  right:         28px;
  width:         42px;
  height:        42px;
  background:    linear-gradient(135deg, var(--amber), var(--green));
  border-radius: 12px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--charcoal);
  cursor:        pointer;
  opacity:       0;
  transform:     translateY(14px);
  transition:
    opacity   var(--t),
    transform var(--t),
    box-shadow var(--t);
  z-index:       800;
  box-shadow:    var(--sh-md);
  border:        none;
}
#stt.visible {
  opacity:   1;
  transform: translateY(0);
}
#stt:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 24px rgba(245, 185, 66, .38);
}