/* JR TOMBO LP · animations.css */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 14px 40px rgba(245,158,11,.35), 0 0 0 0 rgba(245,158,11,.45); }
  50%      { box-shadow: 0 14px 40px rgba(245,158,11,.45), 0 0 0 14px rgba(245,158,11,0); }
}

/* versao mais simples pro LED do mockup */
.mb-led { animation: ledPulse 2s ease-in-out infinite; }
@keyframes ledPulse {
  0%, 100% { box-shadow: 0 0 8px var(--gold), 0 0 0 0 rgba(245,158,11,.5); }
  50%      { box-shadow: 0 0 16px var(--gold), 0 0 0 8px rgba(245,158,11,0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* v0.1.54 — radar sweep (feixe conic girando) */
@keyframes radar-spin {
  to { transform: rotate(360deg); }
}
/* blip pisca quando o feixe passa por cima */
@keyframes blip-fade {
  0%, 100% { opacity: .25; transform: translate(-50%, -50%) scale(.85); }
  10%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.25); }
  35%      { opacity: .35; transform: translate(-50%, -50%) scale(.9); }
}

/* v0.1.54 — kinetic typography (letras/palavras sobem com stagger) */
@keyframes kt-rise {
  from { opacity: 0; transform: translateY(0.5em) rotate(2deg); }
  to   { opacity: 1; transform: translateY(0)     rotate(0); }
}

/* Stagger reveal (aplicar .stagger no container, filhos sao revelados em cascata) */
.stagger > * {
  opacity: 0;
  animation: fadeUp .8s cubic-bezier(.2,.6,.2,1) forwards;
}
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .20s; }
.stagger > *:nth-child(3) { animation-delay: .35s; }
.stagger > *:nth-child(4) { animation-delay: .50s; }
.stagger > *:nth-child(5) { animation-delay: .65s; }
.stagger > *:nth-child(6) { animation-delay: .80s; }

/* Reveal-on-scroll (JS adiciona .in quando entra no viewport, ou ja vem assim em fallback) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ================================================================
   v0.1.54 SCROLL-DRIVEN ANIMATIONS NATIVAS (animation-timeline: view())
   Onde o browser suporta, o reveal vira scroll-linked puro (sem JS,
   sem jank). Onde NÃO suporta, o fallback acima (.reveal + IO) segura.
   ================================================================ */
@supports (animation-timeline: view()) {
  @keyframes scroll-reveal {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* aplica só em quem ainda não foi revelado pelo IO */
  .reveal {
    opacity: 1;
    transform: none;
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }
  /* parallax sutil no radar conforme rola */
  @keyframes radar-parallax {
    from { transform: translateY(26px) scale(.97); }
    to   { transform: translateY(-18px) scale(1); }
  }
  .radar-stage {
    animation: radar-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  /* barra de progresso de leitura no topo (preenche conforme scroll do doc) */
  .read-progress {
    position: fixed; left: 0; top: 0;
    height: 3px; width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--purple-hi), var(--gold));
    z-index: 80;
    animation: read-fill linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes read-fill { to { transform: scaleX(1); } }
}
/* sem suporte: a barra fica escondida (o JS não a alimenta) */
@supports not (animation-timeline: view()) {
  .read-progress { display: none; }
}

/* respeita preferencia do usuario */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .stagger > *, .reveal { opacity: 1; transform: none; }
  .mockup-banner { animation: none; }
  .btn-primary { animation: none; }

  /* v0.1.54 — neutraliza animações novas */
  .radar-sweep { animation: none; opacity: .5; }
  .radar-blip { animation: none; opacity: .8; transform: translate(-50%, -50%); }
  .radar-core { animation: none; }
  .radar-stage { animation: none !important; transform: none !important; }
  .kinetic .kt { opacity: 1; transform: none; animation: none; }
  .read-progress { display: none; }
}