/* ============================================================
   Amplify Health — Motion Layer (compartilhado)
   Vertical: Health · zero-build · movimento clínico / de precisão
   Carregado DEPOIS de tokens.css e ANTES do <style> de cada página.
   Ref: amplify-design-system.md §7.3 (Liquid Glass), §0.1
   Princípio: instrumento clínico — preciso, calmo, deliberado.
   Só usa !important onde PRECISA vencer estilo inline (guards a11y).
   ============================================================ */

/* ── 1. Fallback sem JS ───────────────────────────────────────
   Elementos .reveal só nascem escondidos quando há JS (.js no
   <html>). Sem JS, tudo permanece visível — nunca página branca. */
html:not(.js) .reveal,
html:not(.js) .reveal-scale,
html:not(.js) [data-am-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ── 2. Reduced motion (global, obrigatório) ──────────────────
   taste-skill §6.B — não-negociável acima de MOTION 3.
   Zera loops, transições e o smooth-scroll; força reveals visíveis. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto !important; }
  .reveal, .reveal-scale, [data-am-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .am-progress { display: none !important; }
  .bg-aurora .glow, .aurora .glow { animation: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── 3. Transições entre páginas (View Transitions cross-doc) ──
   O ecossistema navega como UM sistema contínuo, não páginas
   soltas. Progressive enhancement: navegadores sem suporte ignoram. */
@view-transition { navigation: auto; }

@keyframes am-vt-fade-out { to   { opacity: 0; } }
@keyframes am-vt-rise     { from { opacity: 0; transform: translateY(14px); } }

::view-transition-old(root) {
  animation: am-vt-fade-out .22s cubic-bezier(.22,1,.36,1) both;
}
::view-transition-new(root) {
  animation: am-vt-rise .34s cubic-bezier(.22,1,.36,1) both;
}

/* ── 4. Easing de precisão nos reveals (upgrade, opt-in .js) ───
   Mantém a API .reveal existente; só refina a curva para um
   assentamento mais calmo, de instrumento. Sem !important. */
.js .reveal,
.js .reveal-scale {
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
}

/* ── 5. Hairline de varredura (transição entre seções) ────────
   Um feixe bronze percorre a linha UMA vez ao entrar no viewport
   — evoca a varredura de um scanner. Só transform (compositor). */
.am-scan {
  position: relative;
  height: 1px;
  width: 100%;
  margin: 0 auto;
  background: var(--glass-border-parchment, rgba(247,245,240,.1));
  overflow: hidden;
}
.am-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, var(--bronze-light, #c9a47a), transparent);
  transform: translateX(-140%);
  opacity: .9;
}
.am-scan.am-in::after {
  animation: am-sweep 1.6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes am-sweep { to { transform: translateX(340%); } }

/* ── 6. Feedback tátil nos controles primários ────────────────
   O clique responde como um instrumento físico (afunda 1px). */
.btn-primary:active, .btn-secondary:active,
.cta-primary:active, .cta-secondary:active,
.nav-cta:active, .cta-final-btn:active,
.intel-cta:active, a.btn:active, .floating-badge:active {
  transform: translateY(1px) scale(.99);
}

/* ── 7. Sheen especular no glass (materialidade Liquid Glass) ──
   A luz cruza o vidro UMA vez no hover. Classe opt-in .am-sheen. */
.am-sheen { position: relative; overflow: hidden; isolation: isolate; }
.am-sheen::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 32%, rgba(247,245,240,.07) 48%, transparent 64%);
  transform: translateX(-120%);
  pointer-events: none;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.am-sheen:hover::after,
.am-sheen:focus-within::after { transform: translateX(120%); }

/* ── 8. Barra de progresso (CSS scroll-driven, sem listener) ───
   transform: scaleX conduzido pela timeline de scroll. Sem glow.
   Sem suporte → fica em scaleX(0) (invisível): é decorativa. */
.am-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 9999;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--sage-muted, #5c7a50), var(--bronze-light, #c9a47a));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .am-progress {
    animation: am-progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes am-progress-grow { to { transform: scaleX(1); } }

/* ── 9. Ripple de precisão (feedback de clique nos CTAs) ───────
   Injetado por motion.js; keyframe vive aqui (sem <style> em JS). */
@keyframes am-ripple { to { transform: scale(70); opacity: 0; } }

/* ── 10. Calibração do herói (opt-in via .am-boot) ────────────
   Revelação por clip, como uma lâmina posicionada com precisão. */
.js .am-boot {
  animation: am-boot-in .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes am-boot-in {
  from { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0 0); }
}

/* ── 11. Foco de teclado visível (acessibilidade) ─────────────
   Anel de foco só aparece na navegação por teclado. */
body.keyboard-nav :focus-visible {
  outline: 2px solid var(--bronze-light, #c9a47a);
  outline-offset: 3px;
  border-radius: 4px;
}
