/* ============================================================ ELAS NA BIKE & RUN — CAMADA PREMIUM (somente visual) Efeitos ativados apenas quando o premium.js marca . Se o JS não rodar (ou o usuário pedir menos animação), NADA é escondido: o site aparece exatamente como já é hoje. Nenhuma função é afetada. ============================================================ */ /* ---------- 1) REVELAÇÃO AO ROLAR ---------- Elementos ganham .pv (estado inicial) só depois que o observador está pronto. */ .premium-ready .pv{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; } .premium-ready .pv.pv-in{opacity:1;transform:none} /* atraso em cascata para grupos de cards (dá o efeito "um após o outro") */ .premium-ready .pv-stagger>*{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)} .premium-ready .pv-stagger.pv-in>*{opacity:1;transform:none} .premium-ready .pv-stagger.pv-in>*:nth-child(1){transition-delay:.00s} .premium-ready .pv-stagger.pv-in>*:nth-child(2){transition-delay:.09s} .premium-ready .pv-stagger.pv-in>*:nth-child(3){transition-delay:.18s} .premium-ready .pv-stagger.pv-in>*:nth-child(4){transition-delay:.27s} .premium-ready .pv-stagger.pv-in>*:nth-child(5){transition-delay:.36s} .premium-ready .pv-stagger.pv-in>*:nth-child(6){transition-delay:.45s} /* ---------- 2) HERO: entrada em cascata + luz que respira ---------- */ .premium-ready .hero .inner>*{opacity:0;transform:translateY(26px);animation:pvReveal .95s cubic-bezier(.16,1,.3,1) forwards} .premium-ready .hero .inner>*:nth-child(1){animation-delay:.10s} .premium-ready .hero .inner>*:nth-child(2){animation-delay:.26s} .premium-ready .hero .inner>*:nth-child(3){animation-delay:.42s} .premium-ready .hero .inner>*:nth-child(4){animation-delay:.58s} .premium-ready .hero .inner>*:nth-child(5){animation-delay:.74s} @keyframes pvReveal{to{opacity:1;transform:none}} /* luz de fundo que pulsa suavemente (pseudo novo, não colide com nada) */ .premium-ready .hero::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(700px 480px at 78% -8%, rgba(255,31,122,.20), transparent 55%), radial-gradient(520px 420px at 12% 115%, rgba(232,178,76,.10), transparent 55%); animation:pvBreathe 9s ease-in-out infinite; } @keyframes pvBreathe{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}} .premium-ready .hero .inner{position:relative;z-index:2} /* borboleta do hero flutuando de leve, com brilho */ .premium-ready .hero .glow-laco{animation:pvFloat 7s ease-in-out infinite} @keyframes pvFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}} /* título do hero com degradê branco→rosa e "&" dourado pulsante */ .premium-ready .hero h1{ background:linear-gradient(180deg,#fff 46%,var(--rosa,#ff74b0)); -webkit-background-clip:text;background-clip:text;color:transparent; } .premium-ready .hero h1 .amp{ -webkit-text-fill-color:var(--ouro-claro,#f6d488);color:var(--ouro-claro,#f6d488); display:inline-block;animation:pvAmp 3.2s ease-in-out infinite; } @keyframes pvAmp{0%,100%{filter:drop-shadow(0 0 0 rgba(246,212,136,0))}50%{filter:drop-shadow(0 0 14px rgba(246,212,136,.65))}} /* faíscas de luz (criadas pelo JS dentro do hero) */ .pv-spark{position:absolute;width:4px;height:4px;border-radius:50%;opacity:0;filter:blur(.4px);pointer-events:none;z-index:1;animation:pvRise linear infinite} @keyframes pvRise{0%{transform:translateY(24px);opacity:0}12%{opacity:.85}88%{opacity:.5}100%{transform:translateY(-130px);opacity:0}} /* ---------- 3) BOTÃO PRINCIPAL: brilho que percorre + elevação ---------- */ .premium-ready .btn-mag{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,filter .2s} .premium-ready .btn-mag::after{ content:"";position:absolute;top:0;left:-130%;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg);animation:pvShine 4.5s ease-in-out infinite;pointer-events:none; } @keyframes pvShine{0%,55%{left:-130%}78%,100%{left:160%}} .premium-ready .btn-mag:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 14px 40px rgba(255,31,122,.45)} .premium-ready .btn-ghost{transition:border-color .25s,background .25s,transform .25s,color .25s} .premium-ready .btn-ghost:hover{transform:translateY(-3px)} /* ---------- 4) CARDS: elevação suave no hover ---------- */ .premium-ready .kit-art>a:first-child, .premium-ready .ca-item>a:first-child, .premium-ready .mfoto, .premium-ready .patro, .premium-ready .lote, .premium-ready .step, .premium-ready .passo, .premium-ready .card{transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .32s,border-color .28s} .premium-ready .lote:hover, .premium-ready .step:hover, .premium-ready .passo:hover, .premium-ready .card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(255,31,122,.16)} /* ---------- 5) RANKING: barras "enchem" ao aparecer ---------- */ .premium-ready .rank-bar>i{transition:width 1.1s cubic-bezier(.16,1,.3,1)} .premium-ready .rank-row{transition:background .2s} .premium-ready .rank-row:hover{background:rgba(255,116,176,.06)} /* ---------- 6) SEÇÃO: título com leve realce ---------- */ .premium-ready .sec-head .eyebrow{position:relative;display:inline-block} /* ---------- 7) IMAGENS DA GALERIA: leve zoom no hover (reforço) ---------- */ .premium-ready .mfoto:hover{transform:translateY(-3px) scale(1.01)} /* ---------- ACESSIBILIDADE: quem pede menos movimento, recebe menos ---------- (o JS já nem ativa o premium-ready nesses casos; isto é reforço) */ @media (prefers-reduced-motion: reduce){ .premium-ready *{animation:none!important} .premium-ready .pv,.premium-ready .pv-stagger>*,.premium-ready .hero .inner>*{opacity:1!important;transform:none!important} }