/** * ANIME-BASE.CSS — BASE CRÍTICA DA ANIMAÇÃO * Bomber Mídia — Hero Animation Engine * VERSÃO CORRIGIDA — botão usa imagens PNG reais * * Carregado no do index.html: * */ /* ───────────────────────────────────────────── VARIÁVEIS CSS DO SISTEMA DE ANIMAÇÃO ───────────────────────────────────────────── */ :root { --bm-azul: #0A1A42; --bm-azul-medio: #0D2154; --bm-laranja: #FF3613; --bm-laranja-medio: #FF6B35; --bm-ambar: #FFB347; --bm-branco-quente: #FFF0A0; --bm-branco: #FFFFFF; --bm-sombra-laranja: 0 8px 32px rgba(255, 54, 19, 0.4); --bm-sombra-laranja-lg: 0 16px 48px rgba(255, 54, 19, 0.6); --bm-sombra-escura: 0 8px 32px rgba(0, 0, 0, 0.5); --bm-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --bm-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --bm-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); } /* ───────────────────────────────────────────── HERO — garante position:relative para o container da animação funcionar ───────────────────────────────────────────── */ #hero { position: relative; } /* ───────────────────────────────────────────── CONTAINER DA ANIMAÇÃO ───────────────────────────────────────────── */ .bm-anim-container { position: fixed; inset: 0; z-index: 1000; display: none; overflow: hidden; background: var(--bm-azul); font-family: 'Barlow', sans-serif; } /* ───────────────────────────────────────────── WRAPPER DO BOTÃO ───────────────────────────────────────────── */ #bm-btn-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; margin: 0; padding: 0; } /* ───────────────────────────────────────────── BOTÃO — CONTAINER PRINCIPAL ───────────────────────────────────────────── */ #bm-btn-ativar { position: relative; display: inline-block; cursor: pointer; background: none; border: none; padding: 0; animation: bm-respiracao 3s ease-in-out infinite; } #bm-btn-ativar:hover { animation: none; } #bm-btn-ativar.ativo { animation: none; } @keyframes bm-respiracao { 0%, 100% { transform: scale(1.0); } 50% { transform: scale(1.03); } } /* ───────────────────────────────────────────── GLOW DE HOVER ───────────────────────────────────────────── */ .bm-btn-glow { position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient( circle, rgba(255, 54, 19, 0.35) 0%, transparent 70% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 0; } #bm-btn-ativar:hover .bm-btn-glow { opacity: 1; } #bm-btn-ativar.ativo .bm-btn-glow { opacity: 1; background: radial-gradient( circle, rgba(255, 54, 19, 0.5) 0%, transparent 70% ); } /* ───────────────────────────────────────────── VISUAL DO BOTÃO — CONTAINER DAS IMAGENS PNG Container com aspect ratio exato da imagem (785×269) Garante que a área clicável = área visual ───────────────────────────────────────────── */ .bm-btn-visual { position: relative; display: inline-block; width: 210px; height: 72px; overflow: hidden; z-index: 1; } /* ───────────────────────────────────────────── IMAGENS PNG DO BOTÃO Preenchem o container sem distorção ───────────────────────────────────────────── */ #bm-btn-ativar .bm-btn-img-off, #bm-btn-ativar .bm-btn-img-on { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; transition: opacity 0.2s ease; max-width: none; } #bm-btn-ativar .bm-btn-img-on { opacity: 0; } /* Estado ligado — troca de imagem */ #bm-btn-ativar.ativo .bm-btn-img-off { opacity: 0; } #bm-btn-ativar.ativo .bm-btn-img-on { opacity: 1; } /* ───────────────────────────────────────────── TEXTOS ABAIXO DO BOTÃO ───────────────────────────────────────────── */ .bm-btn-texto { display: block; text-align: center; margin-top: 0.75rem; color: rgba(255, 255, 255, 0.85); font-family: 'Barlow', sans-serif; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; } .bm-btn-audio-hint { display: block; text-align: center; font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); margin-top: 0.25rem; } /* ───────────────────────────────────────────── CLASSES DO BODY ───────────────────────────────────────────── */ body.bm-mobile .bm-btn-visual { width: 188px; height: 64px; } body.bm-performance-mode #bm-btn-ativar { animation: none; } body.bm-performance-mode .bm-btn-glow { display: none; } /* ───────────────────────────────────────────── PREFERS-REDUCED-MOTION ───────────────────────────────────────────── */ .reduced-motion #bm-btn-ativar { animation: none !important; } .reduced-motion .bm-anim-container * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } @media (prefers-reduced-motion: reduce) { #bm-btn-ativar { animation: none !important; } .bm-anim-container * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }