/* ============================================================ SUPRA. — CAMADA DE MOTION Carregada só no front-end (nunca no editor). O JS (motion.js) adiciona .supra-reveal aos alvos e .is-revealed ao entrar na viewport; sem JS nada é escondido. ============================================================ */ :root { --supra-motion-ease: cubic-bezier(0.22, 1, 0.36, 1); --supra-motion-reveal: 600ms; } /* ------------------------------------------------------------ ENTRADA DE PÁGINA — fade/rise sutil a cada carregamento. Animação (não classe-toggle): se o JS falhar, nada fica preso invisível. Gate .js-motion setado por script inline no . ------------------------------------------------------------ */ @keyframes supra-page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } html.js-motion body { animation: supra-page-enter 350ms ease-out both; } /* ------------------------------------------------------------ SCROLL-REVEAL com stagger (--reveal-delay setado pelo JS). ------------------------------------------------------------ */ .supra-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--supra-motion-reveal) var(--supra-motion-ease), transform var(--supra-motion-reveal) var(--supra-motion-ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .supra-reveal.is-revealed { opacity: 1; transform: none; will-change: auto; } /* ------------------------------------------------------------ OVERLAY DE LOADING entre páginas — véu glass escuro com o logo e três pontos pulsando em vermelho. Markup injetado via wp_body_open (#supra-loader); .is-active ativado no clique. ------------------------------------------------------------ */ .supra-loader { position: fixed; inset: 0; z-index: 9999; /* acima do header sticky */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background-color: rgba(0, 0, 2, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; pointer-events: none; } .supra-loader.is-active { opacity: 1; visibility: visible; transition-delay: 0s; pointer-events: auto; } .supra-loader img { width: 190px; height: auto; } .supra-loader__dots { display: flex; gap: 0.625rem; } .supra-loader__dots i { width: 10px; height: 10px; border-radius: 50%; background-color: var(--wp--preset--color--vermelho); animation: supra-dot-pulse 900ms ease-in-out infinite; } .supra-loader__dots i:nth-child(2) { animation-delay: 150ms; } .supra-loader__dots i:nth-child(3) { animation-delay: 300ms; } @keyframes supra-dot-pulse { 0%, 100% { transform: scale(0.6); opacity: 0.35; } 50% { transform: scale(1); opacity: 1; } } /* ------------------------------------------------------------ GLOW INTERATIVO nos cards — spotlight vermelho seguindo o cursor (--glow-x/--glow-y setados pelo JS). Só para ponteiro fino; nunca em touch. Não interfere no translateY(-4px) do hover existente (fica no ::after, camada própria). ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .supra-card, .supra-pill { position: relative; } .supra-card::after, .supra-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 240px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(237, 28, 36, 0.14), transparent 70% ); opacity: 0; transition: opacity 250ms ease; pointer-events: none; } .supra-card:hover::after, .supra-pill:hover::after { opacity: 1; } /* ------------------------------------------------------------ HEADER GLOW — holofote menor que ilumina toda a barra ------------------------------------------------------------ */ .supra-header { position: relative; isolation: isolate; } .supra-header::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 150px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(237, 28, 36, 0.14), transparent 70% ); opacity: 0; opacity: var(--glow-opacity, 0); transition: opacity 250ms ease; pointer-events: none; z-index: -1; } /* O header inteiro perde a opacidade se o mouse não estiver no header (evita luz presa) */ .supra-header:not(:hover)::after { opacity: 0; } } /* ------------------------------------------------------------ HOVER TEXTO MENU E BOTÕES CTA ------------------------------------------------------------ */ .wp-block-navigation-item a { transition: color 250ms ease; } .wp-block-navigation-item a:hover, .wp-block-navigation-item a:focus { color: var(--wp--preset--color--vermelho) !important; } /* Efeito de Proximidade Dinâmica nos Botões */ .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; } .wp-block-button__link::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 120px circle at var(--glow-x, 50%) var(--glow-y, 50%), currentColor, transparent 70% ); opacity: var(--glow-opacity, 0); transition: opacity 250ms ease; pointer-events: none; z-index: -1; } /* ------------------------------------------------------------ GRADIENTE VIVO nos heros — duas luzes radiais (marinho e sálvia) driftando lentamente sobre o fundo do hero, atrás do conteúdo (isolation + z-index:-1 mantém acima do bg próprio do hero e abaixo de tudo que é clicável). ------------------------------------------------------------ */ .supra-hero--full { position: relative; overflow: hidden; isolation: isolate; } .supra-hero--full::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(38% 42% at 22% 30%, rgba(29, 58, 95, 0.5), transparent 70%), radial-gradient(30% 36% at 78% 72%, rgba(151, 193, 185, 0.12), transparent 70%); animation: supra-hero-drift 24s ease-in-out infinite alternate; pointer-events: none; } @keyframes supra-hero-drift { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } } /* Números da stat bar: dígitos tabulares evitam "dança" da largura durante o count-up. */ .supra-stat__number { font-variant-numeric: tabular-nums; line-height: 1; } /* ------------------------------------------------------------ SCANNER DO MAPA — varredura vermelha ativada por scroll ------------------------------------------------------------ */ .supra-map-scanner { position: relative; width: 100%; max-width: 320px; margin: 0 auto; -webkit-mask-image: url('../images/mapa-brasil.svg?v=8'); mask-image: url('../images/mapa-brasil.svg?v=8'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .supra-map-scanner svg { width: 100%; height: auto; display: block; } .supra-map-scanner svg path, .supra-map-scanner svg polygon { fill: var(--wp--preset--color--ardosia, #414056); stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.5px; } .supra-map-scanner::after { content: ""; position: absolute; left: 0; width: 100%; height: 8px; background: #ed1c24; box-shadow: 0 0 30px 15px rgba(237, 28, 36, 0.7); opacity: 0; top: -20%; } .supra-map-scanner.is-scanning::after { animation: supra-scan-anim 4s ease-in-out infinite; } @keyframes supra-scan-anim { 0% { opacity: 0; top: -10%; } 8% { opacity: 1; } 88% { opacity: 1; } 96% { opacity: 0; top: 110%; } 100% { opacity: 0; top: -10%; } } /* ------------------------------------------------------------ ACESSIBILIDADE — movimento reduzido desliga tudo: conteúdo visível, sem drift, sem pulso, sem reveal. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html.js-motion body { animation: none; } .supra-reveal { opacity: 1; transform: none; transition: none; } .supra-loader { transition: none; } .supra-loader__dots i { animation: none; opacity: 1; transform: none; } .supra-card::after { transition: none; } .supra-hero--full::before { animation: none; } }