/* ════════════════════════════════════════════════════════════════════ MOTION — micro-interacções de scroll (progresso, reveal, navbar, contadores) Carregado por último. Nada aqui altera o layout estático: só comportamento. ════════════════════════════════════════════════════════════════════ */ /* ── Barra de progresso de scroll (linha fina dourada no topo) ── */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; pointer-events: none; background: transparent; } .scroll-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--champagne)); box-shadow: 0 0 10px rgba(184, 147, 90, 0.55); } /* ── Navbar: estado "scrolled" (acompanha o utilizador, mais compacta) ── */ .navbar { transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; } .navbar__inner { transition: height .35s ease; } .navbar.is-scrolled { background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 30px rgba(15, 15, 15, 0.08); border-bottom-color: transparent; backdrop-filter: blur(16px); } .navbar.is-scrolled .navbar__inner { height: 60px; } /* ── Reveal: fade-in-up controlado por scroll ── Só oculta quando está presente (JS activo, sem prefers-reduced-motion). Sem JS, o conteúdo aparece normalmente. */ html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--rd, 0) * 75ms); will-change: opacity, transform; } html.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; } /* ── Entrada suave do conteúdo do hero (no carregamento, não por scroll) ── */ .hero__content > * { animation: heroIn .9s cubic-bezier(.22, .61, .36, 1) backwards; } .hero__content > *:nth-child(1) { animation-delay: .05s; } .hero__content > *:nth-child(2) { animation-delay: .15s; } .hero__content > *:nth-child(3) { animation-delay: .25s; } .hero__content > *:nth-child(4) { animation-delay: .35s; } .hero__content > *:nth-child(5) { animation-delay: .45s; } @keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* Nota: estes efeitos são pedidos explicitamente pelo site-owner e mantêm-se activos mesmo com prefers-reduced-motion, por opção de design. */