/* ═══════════════════════════════════════════════════════ BizFit AI Animated Logo — Shared Styles Mirror of frantic-logo.css with `bf-` prefix and a violet accent (#8b5cf6) so both logos can live in one stylesheet without bleeding into each other. Markup pattern:
SINGLE CONTROL: change --bf-size to scale everything. ═══════════════════════════════════════════════════════ */ .bf-wrap { --bf-size: 1.2; --bf-accent: #8b5cf6; --bf-accent-soft: rgba(139,92,246,0.5); position: relative; display: inline-flex; align-items: center; padding: 4px 8px; overflow: visible; cursor: pointer; flex-shrink: 0; font-size: calc(22px * var(--bf-size)); } .bf-logo { display: flex; align-items: baseline; position: relative; z-index: 2; } .bf-logo span { font-family: 'Urbanist', sans-serif; font-size: 1em; font-weight: 700; color: #fff; display: inline-block; animation: bfFloat 6s ease-in-out infinite; transition: letter-spacing 0.6s cubic-bezier(0.22,1,0.36,1); } .bf-logo span:nth-child(1) { animation-delay: 0s; } .bf-logo span:nth-child(2) { animation-delay: 0.4s; } .bf-logo span:nth-child(3) { animation-delay: 0.8s; } .bf-logo .bf-sun { color: var(--bf-accent); font-size: 1.18em; position: relative; animation: bfFloat 6s ease-in-out infinite, bfPulse 3s ease-in-out infinite; animation-delay: 1.2s, 0s; text-shadow: 0 0 0.55em var(--bf-accent-soft), 0 0 1.36em rgba(139,92,246,0.2); filter: drop-shadow(0 0 0.27em rgba(139,92,246,0.4)); } .bf-logo span:nth-child(5) { animation-delay: 1.5s; color: rgba(255,255,255,0.4); font-weight: 300; } .bf-logo span:nth-child(6) { animation-delay: 1.8s; color: rgba(255,255,255,0.4); font-weight: 300; } .bf-logo span:nth-child(7) { animation-delay: 2.1s; color: rgba(255,255,255,0.4); font-weight: 300; } /* "AI" suffix — solid violet pill in superscript "power-to" position. animation:none overrides the bfFloat applied by .bf-logo span — the static translateY needs to win, otherwise the keyframes drag it back to baseline. */ .bf-logo .bf-ai { display: inline-block; font-family: 'Urbanist', sans-serif; font-size: 0.28em; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--bf-accent); margin-left: 0.21em; padding: 0.14em 0.26em; border-radius: 3px; line-height: 1; transform: translateY(-2.62em); animation: none !important; } @keyframes bfFloat { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-0.14em); } 70% { transform: translateY(0.09em); } } @keyframes bfPulse { 0%,100% { text-shadow: 0 0 0.36em rgba(139,92,246,0.4), 0 0 0.9em rgba(139,92,246,0.15); } 50% { text-shadow: 0 0 0.82em rgba(139,92,246,0.7), 0 0 1.8em rgba(139,92,246,0.3), 0 0 2.7em rgba(139,92,246,0.1); } } /* Underline glow */ .bf-logo::after { content: ''; position: absolute; bottom: -0.18em; left: 10%; width: 60%; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,92,246,0.35), transparent); animation: bfUnder 4s ease-in-out infinite; will-change: transform, opacity; } @keyframes bfUnder { 0%,100% { opacity: 0.3; transform: scaleX(0.7); } 50% { opacity: 0.7; transform: scaleX(1); } } /* Orbiting data points — Pulse preset (saved from logo editor) */ .bf-orb { position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; z-index: 3; } .bf-od { position: absolute; border-radius: 50%; transform-style: flat; } .bf-orb-1 .bf-od { top: 0; left: 50%; transform: translate(-50%,-50%); } .bf-orb-2 .bf-od { top: 50%; left: 100%; transform: translate(-50%,-50%); } .bf-orb-3 .bf-od { top: 100%; left: 50%; transform: translate(-50%,-50%); } /* Specular highlight on each sphere */ .bf-od::after { content: ''; position: absolute; border-radius: 50%; width: 55%; height: 55%; top: 8%; left: 12%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0) 70%); pointer-events: none; filter: blur(0.5px); } .bf-orb-1 { width: 1.14em; height: 0.98em; margin-left: -0.57em; margin-top: -0.49em; animation: bfSpin1 7s linear infinite; } .bf-orb-1 .bf-od { width: 0.22em; height: 0.22em; color: #ffffff; background: radial-gradient(circle at 32% 25%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.15) 18%, transparent 35%), radial-gradient(circle at 50% 50%, rgb(255,255,255) 0%, #ffffff 30%, rgb(235,235,235) 60%, rgb(155,155,155) 90%, rgb(115,115,115) 100%); box-shadow: 0 0 0.16em #ffffff66, 0 0 0.40em #ffffff22, inset -0.014em -0.014em 0.03em rgb(115,115,115), inset 0.006em 0.006em 0.014em rgba(255,255,255,0.25); } .bf-orb-2 { width: 2.50em; height: 2.15em; margin-left: -1.25em; margin-top: -1.07em; animation: bfSpin2 24s linear infinite; } .bf-orb-2 .bf-od { width: 0.18em; height: 0.18em; color: #ffffff; background: radial-gradient(circle at 32% 25%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.15) 18%, transparent 35%), radial-gradient(circle at 50% 50%, rgb(255,255,255) 0%, #ffffff 30%, rgb(235,235,235) 60%, rgb(155,155,155) 90%, rgb(115,115,115) 100%); box-shadow: 0 0 0.16em #ffffff66, 0 0 0.40em #ffffff22, inset -0.014em -0.014em 0.03em rgb(115,115,115), inset 0.006em 0.006em 0.014em rgba(255,255,255,0.25); } .bf-orb-3 { width: 4.55em; height: 3.91em; margin-left: -2.27em; margin-top: -1.96em; animation: bfSpin3 48s linear infinite; } .bf-orb-3 .bf-od { width: 0.20em; height: 0.20em; color: #8b5cf6; background: radial-gradient(circle at 32% 25%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.15) 18%, transparent 35%), radial-gradient(circle at 50% 50%, rgb(199,152,255) 0%, #8b5cf6 30%, rgb(119,72,226) 60%, rgb(39,0,146) 90%, rgb(0,0,106) 100%); box-shadow: 0 0 0.16em #8b5cf666, 0 0 0.40em #8b5cf622, inset -0.014em -0.014em 0.03em rgb(0,0,106), inset 0.006em 0.006em 0.014em rgba(255,255,255,0.25); } @keyframes bfSpin1 { from { transform: rotateX(78deg) rotateY(0deg) rotateZ(0deg); } to { transform: rotateX(78deg) rotateY(0deg) rotateZ(360deg); } } @keyframes bfSpin2 { from { transform: rotateX(62deg) rotateY(35deg) rotateZ(360deg); } to { transform: rotateX(62deg) rotateY(35deg) rotateZ(0deg); } } @keyframes bfSpin3 { from { transform: rotateX(50deg) rotateY(-20deg) rotateZ(0deg); } to { transform: rotateX(50deg) rotateY(-20deg) rotateZ(360deg); } } /* Hover */ .bf-wrap:hover .bf-logo span:not(.bf-sun):not(.bf-ai) { letter-spacing: 0.14em; } .bf-wrap:hover .bf-sun { text-shadow: 0 0 1.1em rgba(139,92,246,0.9), 0 0 2.27em rgba(139,92,246,0.4) !important; } .bf-wrap:hover .bf-ai { background: #7c3aed; box-shadow: 0 4px 14px rgba(139,92,246,0.45); } .bf-wrap:hover .bf-od { opacity: 1 !important; filter: brightness(1.3); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .bf-logo span, .bf-orb, .bf-od, .bf-logo::after { animation: none !important; } }