/* ========================================================================== RSAF v2 — "Monografia Clínica" · Motion Um único momento autoral: a fórmula estrutural que se desenha (Fig. 01) com o traçado de monitor em varredura contida. Reveals orquestrados por IntersectionObserver. prefers-reduced-motion: tudo estático e visível. ========================================================================== */ /* ---- Reveal de entrada (default já quase visível; ease exponencial). Só esconde quando JS está ativo (.js no ) — sem JS, tudo visível. ---- */ .js .reveal { opacity: 0.001; transform: translateY(14px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js .reveal.is-in { opacity: 1; transform: none; } /* ---- Fig. 01 · desenho da fórmula estrutural ---- */ .molecule path, .molecule circle { stroke-dasharray: var(--dash, 300); stroke-dashoffset: var(--dash, 300); } .is-drawn .molecule path, .is-drawn .molecule circle { animation: draw-line var(--dur-4) var(--ease-out) forwards; animation-delay: var(--draw-delay, 0ms); } @keyframes draw-line { to { stroke-dashoffset: 0; } } /* ---- Traçado de monitor: varredura contida dentro do painel ---- */ .monitor-sweep { opacity: 0; } .is-drawn .monitor-sweep { opacity: 1; animation: sweep 5.2s linear infinite; animation-delay: 1.1s; } @keyframes sweep { 0% { transform: translateX(0); } 100% { transform: translateX(320px); } } /* ---- Timeline do protocolo: entrada sequencial ---- */ .js .proto__step.reveal { transform: translateY(10px); } /* ---- Hover refinado ---- */ .bula, .quote-card, .fig { transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); } .bula:hover, .quote-card:hover, .fig:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-1); } .partners__item { transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .partners__item:hover { background: rgba(18, 58, 58, 0.30); border-color: rgba(242, 250, 250, 0.45); } /* ---- prefers-reduced-motion: página completa sem movimento ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } .molecule path, .molecule circle { stroke-dashoffset: 0; } .monitor-sweep { display: none; } .quotes__track { transition: none; } }