/* ============================================================ FitaFlow — FLOW MODE ON Botão + aura energética estilo "super saiyan" no site todo: raios, faíscas subindo, glow amarelo do sachê pulsando. Ativa com a classe `ff-flow-on` no . ============================================================ */ /* ---------------- Botão ---------------- */ .ff-flowbtn { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 7px; writing-mode: vertical-rl; padding: 15px 9px; border: 0; cursor: pointer; border-radius: 14px 0 0 14px; font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.16em; color: #FDE047; background: linear-gradient(180deg, #2B1A4D, #4C1D95); box-shadow: 0 10px 30px rgba(76, 29, 149, .4), 0 0 0 1px rgba(253, 224, 71, .35) inset; transition: background .35s, color .35s, box-shadow .35s; } .ff-flowbtn svg { writing-mode: horizontal-tb; filter: drop-shadow(0 0 6px rgba(253, 224, 71, .8)); animation: ffxBoltIdle 2.2s ease-in-out infinite; } .ff-flowbtn__state { writing-mode: horizontal-tb; font-style: normal; font-size: 0.62rem; letter-spacing: .08em; background: rgba(253, 224, 71, .16); color: #FDE047; padding: 3px 6px; border-radius: 7px; transition: background .35s, color .35s; } .ff-flowbtn:hover { box-shadow: 0 10px 34px rgba(250, 204, 21, .45), 0 0 0 1px rgba(253, 224, 71, .6) inset; } html.ff-flow-on .ff-flowbtn { background: linear-gradient(180deg, #FDE047, #F6C400); color: #231a02; box-shadow: 0 0 26px rgba(250, 204, 21, .75), 0 0 60px rgba(250, 204, 21, .35); animation: ffxBtnGlow 1.5s ease-in-out infinite; } html.ff-flow-on .ff-flowbtn svg { filter: drop-shadow(0 0 5px rgba(120, 70, 0, .55)); } html.ff-flow-on .ff-flowbtn__state { background: rgba(35, 26, 2, .82); color: #FDE047; } @keyframes ffxBoltIdle { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } } @keyframes ffxBtnGlow { 0%,100% { box-shadow: 0 0 22px rgba(250,204,21,.65), 0 0 52px rgba(250,204,21,.3); } 50% { box-shadow: 0 0 34px rgba(250,204,21,.95), 0 0 84px rgba(250,204,21,.5); } } /* botão vira FAB redondo no mobile (acima da bottomnav) */ @media (max-width: 768px) { .ff-flowbtn { writing-mode: horizontal-tb; top: auto; bottom: 92px; right: 12px; transform: none; border-radius: 50%; width: 56px; height: 56px; padding: 0; gap: 2px; justify-content: center; } .ff-flowbtn__label { display: none; } .ff-flowbtn__state { font-size: 0.5rem; padding: 1px 5px; } } /* ---------------- Overlay de energia ---------------- */ #ffFlowFx { position: fixed; inset: 0; pointer-events: none; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s; } html.ff-flow-on #ffFlowFx { opacity: 1; visibility: visible; } /* vinheta dourada pulsando */ .ffx-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 130px rgba(248, 201, 1, .30), inset 0 0 38px rgba(248, 201, 1, .16); animation: ffxVign 2.2s ease-in-out infinite; } @keyframes ffxVign { 0%,100% { box-shadow: inset 0 0 110px rgba(248,201,1,.26), inset 0 0 32px rgba(248,201,1,.13); } 50% { box-shadow: inset 0 0 170px rgba(248,201,1,.42), inset 0 0 54px rgba(248,201,1,.24); } } /* aura nas bordas: chamas de energia subindo */ .ffx-aura { position: absolute; background: repeating-linear-gradient(0deg, rgba(255, 216, 77, 0) 0px, rgba(255, 216, 77, 0) 12px, rgba(255, 216, 77, .22) 18px, rgba(255, 216, 77, 0) 30px); filter: blur(3px); animation: ffxRiseBg 0.9s linear infinite, ffxFlicker 1.7s ease-in-out infinite; } .ffx-aura--l { left: 0; top: 0; bottom: 0; width: 84px; -webkit-mask-image: linear-gradient(to right, #000, transparent); mask-image: linear-gradient(to right, #000, transparent); } .ffx-aura--r { right: 0; top: 0; bottom: 0; width: 84px; -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); } .ffx-aura--b { left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(to top, rgba(255, 216, 77, .30), rgba(255, 216, 77, 0)); animation: ffxFlicker 1.4s ease-in-out infinite; } @keyframes ffxRiseBg { from { background-position-y: 0; } to { background-position-y: -30px; } } @keyframes ffxFlicker { 0%,100% { opacity: .75; } 42% { opacity: 1; } 68% { opacity: .55; } } /* faíscas de ki subindo */ .ffx-spark { position: absolute; bottom: -12px; border-radius: 50%; background: #FFDE45; box-shadow: 0 0 9px 2px rgba(255, 222, 69, .85); opacity: 0; animation-name: ffxSparkRise; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes ffxSparkRise { 0% { transform: translateY(0) scale(1); opacity: 0; } 6% { opacity: 1; } 46% { opacity: .85; transform: translateY(-46vh) scale(.82) translateX(6px); } 72% { opacity: .95; } 100% { transform: translateY(-104vh) scale(.45) translateX(-6px); opacity: 0; } } /* raios piscando */ .ffx-bolt { position: absolute; opacity: 0; filter: drop-shadow(0 0 10px rgba(255, 210, 31, .9)) drop-shadow(0 0 24px rgba(255, 210, 31, .5)); animation: ffxBoltFlash 3.4s ease-in-out infinite; transform: rotate(var(--rot, 0deg)); } @keyframes ffxBoltFlash { 0%, 78%, 100% { opacity: 0; transform: rotate(var(--rot)) scale(.85); } 80% { opacity: 1; transform: rotate(var(--rot)) scale(1.12); } 84% { opacity: .2; } 88% { opacity: .95; transform: rotate(var(--rot)) scale(1); } 94% { opacity: 0; } } /* flash de ativação */ .ffx-flash { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 55%, rgba(255, 232, 120, .9), rgba(255, 216, 77, .35) 55%, transparent 80%); animation: ffxFlashAnim .72s ease-out forwards; } @keyframes ffxFlashAnim { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } } /* tremida de ativação (energia liberada) */ body.ffx-shake { animation: ffxShake .55s ease-in-out; } @keyframes ffxShake { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-3px,2px); } 30% { transform: translate(3px,-2px); } 45% { transform: translate(-2px,-2px); } 60% { transform: translate(2px,2px); } 75% { transform: translate(-1px,1px); } } /* ---------------- Site energizado ---------------- */ html.ff-flow-on .ff-topbar { background: linear-gradient(90deg, #F6C400, #FFE066 50%, #F6C400); color: #231a02; } html.ff-flow-on .ff-topbar svg { fill: #231a02; } html.ff-flow-on .ff-header { border-bottom: 1px solid rgba(250, 204, 21, .55); box-shadow: 0 8px 34px rgba(250, 204, 21, .22); } html.ff-flow-on .ff-logo__word .flow, html.ff-flow-on .ff-logo__word .fita { background: linear-gradient(90deg, #F59E0B, #FFD21F); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 9px rgba(255, 210, 31, .55)); } html.ff-flow-on .ff-btn-grad { background: linear-gradient(92deg, #F59E0B 5%, #FACC15 55%, #FDE047 95%); color: #231a02; box-shadow: 0 0 24px rgba(250, 204, 21, .6); animation: ffxBtnGlow 1.6s ease-in-out infinite; } html.ff-flow-on .ff-btn-grad svg { fill: #231a02; } html.ff-flow-on .ff-grad-text { background: linear-gradient(92deg, #F59E0B 5%, #FACC15 55%, #FFB800 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.ff-flow-on .ff-eyebrow-pill { border-color: rgba(250, 204, 21, .7); box-shadow: 0 0 16px rgba(250, 204, 21, .35); } html.ff-flow-on .ff-hero__bolt { filter: drop-shadow(0 0 16px rgba(250, 204, 21, .95)); animation-duration: 1.1s; } /* cards e blocos ganham contorno de energia */ html.ff-flow-on [class*="__card"], html.ff-flow-on .ff-chip, html.ff-flow-on .ff-feat > span:first-child { box-shadow: 0 0 0 1px rgba(250, 204, 21, .42), 0 10px 44px rgba(250, 204, 21, .20) !important; } html.ff-flow-on .ff-bottomnav { border-color: rgba(250, 204, 21, .65); box-shadow: 0 0 26px rgba(250, 204, 21, .4), 0 14px 40px rgba(5, 8, 24, .55); } html.ff-flow-on ::selection { background: #FDE047; color: #231a02; } /* acessibilidade: reduz a festa para quem prefere menos movimento */ @media (prefers-reduced-motion: reduce) { .ffx-spark, .ffx-bolt { display: none; } .ffx-aura { animation: none; } body.ffx-shake { animation: none; } .ffx-vignette { animation: none; } } /* ============================================================ EFEITOS CONTÍNUOS (raios caindo, ondas de choque, bursts) ============================================================ */ /* raio irregular caindo */ .ffx-strike { position: absolute; opacity: 0; filter: drop-shadow(0 0 8px rgba(255, 224, 102, .95)) drop-shadow(0 0 24px rgba(255, 210, 31, .55)); animation: ffxStrikeFlash .85s ease-out forwards; } @keyframes ffxStrikeFlash { 0% { opacity: 0; } 7% { opacity: 1; } 20% { opacity: .2; } 32% { opacity: .95; } 52% { opacity: .3; } 70% { opacity: .6; } 100% { opacity: 0; } } /* onda de choque (anel de ki) */ .ffx-ring { position: absolute; transform: translate(-50%, -50%) scale(.15); border: 3px solid rgba(255, 216, 77, .85); border-radius: 50%; box-shadow: 0 0 20px rgba(255, 216, 77, .55), inset 0 0 14px rgba(255, 216, 77, .4); opacity: 0; animation: ffxRingGrow 1.05s ease-out forwards; } @keyframes ffxRingGrow { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.15); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } } /* explosão radial de faíscas */ .ffx-burst { position: absolute; width: 2px; height: 2px; } .ffx-burst i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #FFDE45; box-shadow: 0 0 9px 2px rgba(255, 222, 69, .85); opacity: 0; animation: ffxBurstFly .8s ease-out forwards; } @keyframes ffxBurstFly { 0% { opacity: 1; transform: rotate(var(--ang)) translateX(2px) scale(1); } 100% { opacity: 0; transform: rotate(var(--ang)) translateX(var(--dist)) scale(.35); } } /* clarão suave ocasional */ .ffx-flash--soft { animation-duration: .8s; opacity: 0; background: radial-gradient(55% 55% at 50% 45%, rgba(255, 232, 120, .38), transparent 75%); } @media (prefers-reduced-motion: reduce) { .ffx-strike, .ffx-ring, .ffx-burst, .ffx-flash--soft { display: none; } }