/* ============================================================
   Korea Care – assets/css/animations.css
   Animações sutis da página inicial.

   Para DESATIVAR todas as animações basta remover o enqueue
   de 'kc-animations' em inc/enqueue.php (uma linha só).
   ============================================================ */

/* ── Base: elementos com data-kc-anim esperam sua vez ── */
[data-kc-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
[data-kc-anim].kc-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes de direção */
[data-kc-anim="fade-left"]  { transform: translateX(-24px); }
[data-kc-anim="fade-right"] { transform: translateX(24px); }
[data-kc-anim="fade-left"].kc-visible,
[data-kc-anim="fade-right"].kc-visible { transform: translateX(0); }

[data-kc-anim="scale"] { transform: scale(.95); }
[data-kc-anim="scale"].kc-visible { transform: scale(1); }

/* Delays escalonados para grupos de cards */
[data-kc-delay="1"] { transition-delay: .08s; }
[data-kc-delay="2"] { transition-delay: .16s; }
[data-kc-delay="3"] { transition-delay: .24s; }
[data-kc-delay="4"] { transition-delay: .32s; }
[data-kc-delay="5"] { transition-delay: .40s; }

/* ── Hero: entra imediatamente no load ── */
.hero-left  { animation: kc-hero-in .70s cubic-bezier(.22,1,.36,1) both; }
.hero-right { animation: kc-hero-in .70s .15s cubic-bezier(.22,1,.36,1) both; }

@keyframes kc-hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Score card: pequena entrada lateral */
.score-card {
  animation: kc-card-in .80s .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes kc-card-in {
  from { opacity: 0; transform: translateY(-40%) translateX(18px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ── Ann-bar shimmer ── */
.ann-bar {
  position: relative; overflow: hidden;
}
.ann-bar::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,164,106,.12), transparent);
  animation: ann-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ann-shimmer {
  0%   { left: -80%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}