/* ═══════════════════════════════════════════ WOW UPGRADES — profimotors.com.ru Файл: /assets/wow.css Подключить в ПОСЛЕ основных стилей: ═══════════════════════════════════════════ */ /* ═══ 1. FLOATING PARTICLES в hero ═══ */ .hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .hero-particles span{position:absolute;width:3px;height:3px;background:var(--acc);border-radius:50%;opacity:0;animation:floatUp linear infinite} .hero-particles span:nth-child(1){left:10%;animation-duration:8s;animation-delay:0s} .hero-particles span:nth-child(2){left:25%;animation-duration:12s;animation-delay:2s;width:2px;height:2px} .hero-particles span:nth-child(3){left:40%;animation-duration:10s;animation-delay:1s} .hero-particles span:nth-child(4){left:55%;animation-duration:14s;animation-delay:3s;width:4px;height:4px;opacity:.3} .hero-particles span:nth-child(5){left:70%;animation-duration:9s;animation-delay:0.5s;width:2px;height:2px} .hero-particles span:nth-child(6){left:85%;animation-duration:11s;animation-delay:4s} .hero-particles span:nth-child(7){left:15%;animation-duration:13s;animation-delay:2.5s;width:5px;height:5px} .hero-particles span:nth-child(8){left:60%;animation-duration:7s;animation-delay:1.5s;width:2px;height:2px} .hero-particles span:nth-child(9){left:92%;animation-duration:15s;animation-delay:3.5s} .hero-particles span:nth-child(10){left:35%;animation-duration:10s;animation-delay:0.8s;width:3px;height:3px} @keyframes floatUp{0%{bottom:-10px;opacity:0;transform:translateX(0)}10%{opacity:.6}50%{transform:translateX(20px)}90%{opacity:.2}100%{bottom:110%;opacity:0;transform:translateX(-15px)}} /* ═══ 2. ANIMATED NUMBER COUNTERS ═══ */ .hero-stat strong{display:inline-block} .hero-stat strong[data-count]{transition:all .3s} @keyframes countPop{0%{transform:scale(1)}50%{transform:scale(1.15);color:var(--acc2)}100%{transform:scale(1)}} /* ═══ 3. GLOW CARD HOVER EFFECT (border glow follows mouse) ═══ */ .pc,.cc,.bc,.rev,.dw,.contc{position:relative} .card-glow{display:none} .pc,.cc,.bc,.rev{--gx:50%;--gy:50%;transition:all .35s cubic-bezier(.4,0,.2,1)} .pc:hover,.cc:hover,.bc:hover,.rev:hover{border-color:rgba(245,166,35,.35)!important;box-shadow:0 0 20px rgba(245,166,35,.06),inset 0 0 30px rgba(245,166,35,.03)!important} /* ═══ 4. STAGGERED REVEAL для секций ═══ */ .stagger-1{animation-delay:.05s!important} .stagger-2{animation-delay:.1s!important} .stagger-3{animation-delay:.15s!important} .stagger-4{animation-delay:.2s!important} .stagger-5{animation-delay:.25s!important} .stagger-6{animation-delay:.3s!important} .stagger-7{animation-delay:.35s!important} .stagger-8{animation-delay:.4s!important} /* ═══ 5. PULSING GLOW на hero-card ═══ */ .hero-card{position:relative;background:var(--card)!important} .hero-card::after{content:'';position:absolute;inset:-3px;border-radius:26px;background:linear-gradient(135deg,rgba(245,166,35,.6),rgba(255,215,110,.3) 30%,transparent 50%,rgba(245,166,35,.2) 70%,rgba(245,166,35,.5));pointer-events:none;animation:heroPulse 2.5s ease-in-out infinite;z-index:0} .hero-card>*{position:relative;z-index:1} @keyframes heroPulse{0%,100%{opacity:.15;transform:scale(1);filter:blur(2px)}50%{opacity:.85;transform:scale(1.008);filter:blur(4px)}} /* ═══ 6. SMOOTH SECTION DIVIDERS ═══ */ section+section{border-top:none!important;position:relative} section+section::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(245,166,35,.2) 30%,rgba(245,166,35,.3) 50%,rgba(245,166,35,.2) 70%,transparent)} /* ═══ 7. ENHANCED PRODUCT CARD ═══ */ .pc{transition:all .35s cubic-bezier(.4,0,.2,1)!important} .pc:hover{transform:translateY(-8px)!important;box-shadow:0 24px 56px rgba(0,0,0,.5),0 0 0 1px rgba(245,166,35,.15)!important} .pc-btn{position:relative;overflow:hidden} .pc-btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.3);border-radius:50%;transform:translate(-50%,-50%);transition:width .5s,height .5s} .pc-btn:hover::after{width:200px;height:200px} /* ═══ 8. ANIMATED STATS (подчёркивание) ═══ */ .hero-stat{position:relative;padding-bottom:12px} .hero-stat::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)} .hero-stat:hover::after{width:100%} /* ═══ 9. FLOATING BADGE на hero ═══ */ .hero-badge{animation:badgeFloat 3s ease-in-out infinite} @keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} /* ═══ 10. REVIEW QUOTE GLOW ═══ */ .rev:hover .rev-text::before{color:var(--acc2);text-shadow:0 0 20px rgba(245,166,35,.4);transition:all .3s} /* ═══ 11. SMOOTH SCROLL PROGRESS ═══ */ .pbar{background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc))!important;background-size:200% 100%;animation:progressShine 3s linear infinite} @keyframes progressShine{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ═══ 12. CTA BUTTON SHINE ═══ */ .btn-p,.h-cta{position:relative;overflow:hidden} .btn-p::before,.h-cta::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);transition:none;animation:btnShine 4s ease-in-out infinite} @keyframes btnShine{0%,100%{left:-100%}50%{left:150%}} /* ═══ 13. FAB PULSE ═══ */ .fab-m{animation:fabPulse 3s ease-in-out infinite} @keyframes fabPulse{0%,100%{box-shadow:0 8px 28px rgba(245,166,35,.4)}50%{box-shadow:0 8px 28px rgba(245,166,35,.4),0 0 0 12px rgba(245,166,35,.08)}} /* ═══ 14. MOBILE MENU FIX ═══ */ @media(max-width:960px){ #menu.menu-open{background:rgba(8,9,11,.92)!important;backdrop-filter:saturate(180%) blur(20px)!important;-webkit-backdrop-filter:saturate(180%) blur(20px)!important;position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;z-index:100000!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:80px 24px 24px!important;gap:0!important} #menu.menu-open li{list-style:none;width:100%;max-width:340px;text-align:center} #menu.menu-open a,#menu.menu-open li a{display:block!important;padding:18px 20px!important;font-size:20px!important;font-weight:600!important;color:#fff!important;border-radius:12px;border-bottom:1px solid rgba(255,255,255,.06)} #menu.menu-open a:hover,#menu.menu-open li a:hover{background:rgba(245,166,35,.1)!important;color:#ffd76e!important} }