/* ================================================================ 🔥 TURKMENHYPE — WOW ANIMATIONS ADDON v2.0 Подключи в после style.css: ================================================================ */ /* --------------------------------------------------------------- 1. CUSTOM CURSOR — жидкий магнитный курсор --------------------------------------------------------------- */ /* *, *::before, *::after { cursor: none !important; } */ /* #cursor-dot { width: 6px; height: 6px; background: var(--yellow); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 999999; transform: translate(-50%, -50%); transition: width 0.15s, height 0.15s, background 0.15s, opacity 0.15s; } #cursor-ring { width: 40px; height: 40px; border: 1.5px solid rgba(244, 184, 25, 0.6); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 999998; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1), height 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s, border-color 0.3s; } #cursor-trail { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 999997; } body.cursor-hover #cursor-dot { width: 0; height: 0; opacity: 0; } body.cursor-hover #cursor-ring { width: 60px; height: 60px; border-color: var(--yellow); border-width: 2px; background: rgba(244, 184, 25, 0.05); } @media (hover: none) { #cursor-dot, #cursor-ring, #cursor-trail { display: none !important; } *, *::before, *::after { cursor: auto !important; } } */ /* --------------------------------------------------------------- 2. CANVAS PARTICLES --------------------------------------------------------------- */ #particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; } /* --------------------------------------------------------------- 3. NOISE TEXTURE OVERLAY — зернистость поверх фона --------------------------------------------------------------- */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* --------------------------------------------------------------- 4. HERO TEXT — кинетическая типографика --------------------------------------------------------------- */ .main-title { background: linear-gradient(135deg, #1a1a1a 0%, #555 40%, #1a1a1a 70%, #F4B819 100%); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: textShine 5s linear infinite; will-change: background-position; } @keyframes textShine { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } .cursor { -webkit-text-fill-color: var(--yellow); color: var(--yellow); animation: blink 0.8s infinite, cursorPulse 2.5s ease-in-out infinite; display: inline-block; } @keyframes cursorPulse { 0%, 100% { text-shadow: 0 0 0 rgba(244,184,25,0); } 50% { text-shadow: 0 0 30px rgba(244,184,25,0.9), 0 0 60px rgba(244,184,25,0.4); } } /* --------------------------------------------------------------- 5. GLASS CARDS — 3D tilt + glow sweep + sheen --------------------------------------------------------------- */ .glass-card { transform-style: preserve-3d; position: relative; overflow: hidden; transition: transform 0.15s ease-out, box-shadow 0.3s ease; } /* Движущийся блик за курсором */ .glass-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(244,184,25,0.22) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; border-radius: inherit; z-index: 0; } /* Зеркальный шин эффект */ .glass-card::after { content: ''; position: absolute; top: -80%; left: -100%; width: 80%; height: 260%; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%); transform: skewX(-20deg); transition: none; pointer-events: none; z-index: 1; } .glass-card:hover::before { opacity: 1; } .glass-card:hover::after { animation: cardSheen 0.7s ease forwards; } @keyframes cardSheen { 0% { left: -100%; } 100% { left: 160%; } } .glass-card > * { position: relative; z-index: 2; } /* --------------------------------------------------------------- 6. STAGGERED REVEAL --------------------------------------------------------------- */ .reveal-stagger { opacity: 0; transform: translateY(50px) scale(0.97); will-change: opacity, transform; } .reveal-stagger.active { animation: staggerUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards; } @keyframes staggerUp { from { opacity: 0; transform: translateY(50px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* --------------------------------------------------------------- 7. STAT BOXES --------------------------------------------------------------- */ .stat-box { position: relative; transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .stat-box::before { content: ''; position: absolute; inset: -1px; border-radius: 16px; background: linear-gradient(135deg, rgba(244,184,25,0) 0%, rgba(244,184,25,0.3) 100%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .stat-box:hover { transform: translateY(-6px) scale(1.04); } .stat-box:hover::before { opacity: 1; } .stat-box.pop h2, .stat-box.pop h3 { animation: statPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } @keyframes statPop { 0% { transform: scale(0.2) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.25) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } } /* --------------------------------------------------------------- 8. SECTION TITLES — underline animation + number glow --------------------------------------------------------------- */ .section-title { position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 0; height: 4px; background: linear-gradient(90deg, var(--yellow), rgba(244,184,25,0.2)); border-radius: 2px; transition: width 0.9s cubic-bezier(0.23, 1, 0.32, 1); } .section-title.line-active::after, .reveal.active .section-title::after { width: 100%; } /* --------------------------------------------------------------- 9. YELLOW TEXT — animated glow --------------------------------------------------------------- */ .yellow-text { position: relative; display: inline-block; animation: yellowPulse 4s ease-in-out infinite; } @keyframes yellowPulse { 0%, 100% { text-shadow: 0 0 20px rgba(244,184,25,0); } 50% { text-shadow: 0 0 30px rgba(244,184,25,0.5), 0 0 60px rgba(244,184,25,0.2); } } /* --------------------------------------------------------------- 10. MARQUEE — shimmer на логотипах --------------------------------------------------------------- */ .client-logo { position: relative; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s, color 0.3s, box-shadow 0.3s; } .client-logo::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(244,184,25,0.2), transparent); transform: skewX(-20deg); } .client-logo:hover::after { animation: shimmer 0.55s ease forwards; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 150%; } } /* --------------------------------------------------------------- 11. NAV LINKS --------------------------------------------------------------- */ .nav-links a { transition: color 0.3s, letter-spacing 0.25s; } .nav-links a:hover { letter-spacing: 1px; } /* --------------------------------------------------------------- 12. SCROLL PROGRESS — rainbow shine --------------------------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 10000; background: linear-gradient(90deg, var(--yellow), #ff9f00, #ffe066, var(--yellow)) !important; background-size: 300% !important; animation: progressShine 2.5s linear infinite !important; box-shadow: 0 0 14px rgba(244,184,25,0.9), 0 0 30px rgba(244,184,25,0.4) !important; } @keyframes progressShine { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } /* --------------------------------------------------------------- 13. LOGO — pro glitch on hover --------------------------------------------------------------- */ .logo { position: relative; display: inline-block; } .logo:hover { animation: glitchPro 0.45s steps(1) both; } @keyframes glitchPro { 0% { transform: translate(0); clip-path: none; } 10% { transform: translate(-3px,1px); text-shadow: 3px 0 var(--yellow), -3px 0 #ff6b6b; } 20% { transform: translate(3px,-1px); clip-path: inset(20% 0 40% 0); text-shadow: -3px 0 #6bf6ff; } 30% { transform: translate(-2px,2px); clip-path: none; text-shadow: 2px 0 var(--yellow); } 40% { transform: translate(2px,-2px); clip-path: inset(60% 0 10% 0); text-shadow: -2px 0 #ff6b6b; } 50% { transform: translate(-1px,0); clip-path: none; text-shadow: none; } 60% { transform: translate(1px,0); text-shadow: none; } 100%{ transform: translate(0); text-shadow: none; clip-path: none; } } /* --------------------------------------------------------------- 14. QUOTE BOX --------------------------------------------------------------- */ .quote-box { position: relative; animation: quotePulse 4s ease-in-out infinite; } @keyframes quotePulse { 0%, 100% { border-left-color: var(--yellow); box-shadow: -4px 0 25px rgba(244,184,25,0.08); } 50% { border-left-color: #ff9f00; box-shadow: -4px 0 40px rgba(244,184,25,0.3); } } /* --------------------------------------------------------------- 15. TEAM CARDS — avatar spin glow ring --------------------------------------------------------------- */ .avatar { transition: box-shadow 0.4s ease; position: relative; } .team-card:hover .avatar { box-shadow: 0 0 0 4px rgba(244,184,25,0.15), 0 0 35px rgba(244,184,25,0.5); animation: avatarRing 6s linear infinite; } @keyframes avatarRing { from { border-color: var(--yellow); filter: drop-shadow(0 0 4px rgba(244,184,25,0.8)); } 50% { border-color: #ffe066; filter: drop-shadow(0 0 8px rgba(244,184,25,0.6)); } to { border-color: var(--yellow); filter: drop-shadow(0 0 4px rgba(244,184,25,0.8)); } } /* --------------------------------------------------------------- 16. PAGE LOAD — cinematic entrance --------------------------------------------------------------- */ .hero-content { animation: heroEntrance 1.4s cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: 0.1s; } @keyframes heroEntrance { from { opacity: 0; transform: translateY(70px) scale(0.94); filter: blur(12px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); } } /* --------------------------------------------------------------- 17. BACKGROUND BLOBS — liquid float --------------------------------------------------------------- */ .yellow-blob { animation: blobFloat1 20s ease-in-out infinite alternate; } .white-blob { animation: blobFloat2 26s ease-in-out infinite alternate; } @keyframes blobFloat1 { 0% { transform: translate(0,0) scale(1) rotate(0deg); } 33% { transform: translate(-80px,100px) scale(1.1) rotate(6deg); } 66% { transform: translate(60px,-60px) scale(0.93) rotate(-4deg); } 100% { transform: translate(-120px,80px) scale(1.15) rotate(5deg); } } @keyframes blobFloat2 { 0% { transform: translate(0,0) scale(1) rotate(0deg); } 33% { transform: translate(100px,-80px) scale(1.08) rotate(-5deg); } 66% { transform: translate(-60px,60px) scale(0.96) rotate(3deg); } 100% { transform: translate(80px,-100px) scale(1.12) rotate(-4deg); } } /* --------------------------------------------------------------- 18. FEATURED CASE CARD --------------------------------------------------------------- */ .featured-case-card { transition: box-shadow 0.5s ease, transform 0.5s ease; position: relative; overflow: hidden; } .featured-case-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(244,184,25,0.06) 0%, transparent 60%); pointer-events: none; } .featured-case-card:hover { transform: translateY(-8px); box-shadow: 0 35px 70px rgba(244,184,25,0.1), 0 0 0 1.5px rgba(244,184,25,0.25) !important; } /* --------------------------------------------------------------- 19. CONTACT FORM --------------------------------------------------------------- */ .contact-form input, .contact-form textarea { transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--yellow) !important; box-shadow: 0 0 0 3px rgba(244,184,25,0.18), 0 0 25px rgba(244,184,25,0.08); transform: scale(1.008); } .submit-btn { position: relative; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .submit-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.25); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease, opacity 0.5s; opacity: 0; } .submit-btn:active::after { width: 350px; height: 350px; opacity: 1; } .submit-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(244,184,25,0.55); } /* --------------------------------------------------------------- 20. SOCIAL ICONS --------------------------------------------------------------- */ .social-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; transition: color 0.3s, transform 0.3s; } .social-icon:hover { animation: socialBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes socialBounce { 0% { transform: translateY(0) scale(1) rotate(0deg); } 30% { transform: translateY(-14px) scale(1.2) rotate(-8deg); } 60% { transform: translateY(-8px) scale(1.1) rotate(4deg); } 100% { transform: translateY(-6px) scale(1.05) rotate(0deg); } } /* --------------------------------------------------------------- 21. WORK CARDS (About page) --------------------------------------------------------------- */ .work-card { position: relative; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; } .work-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--yellow); transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .work-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.07), 0 0 0 1.5px var(--yellow); } .work-card:hover::before { width: 100%; } .work-card h3 { transition: color 0.3s; } .work-card:hover h3 { color: var(--yellow); } /* --------------------------------------------------------------- 22. SCROLL INDICATOR — bouncing chevrons --------------------------------------------------------------- */ .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.5; animation: scrollBounce 2.2s ease-in-out infinite; pointer-events: none; } .scroll-indicator span { display: block; width: 12px; height: 12px; border-right: 2.5px solid var(--yellow); border-bottom: 2.5px solid var(--yellow); transform: rotate(45deg); } .scroll-indicator span:nth-child(2) { animation: fadeChevron 2.2s ease-in-out infinite 0.2s; opacity: 0.6; } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; } 50% { transform: translateX(-50%) translateY(10px); opacity: 1; } } @keyframes fadeChevron { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } } /* --------------------------------------------------------------- 23. YELLOW BUTTON — magnetic wobble --------------------------------------------------------------- */ .yellow-btn { position: relative; overflow: hidden; } .yellow-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 80%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transform: skewX(-20deg); transition: none; } .yellow-btn:hover::before { animation: btnSheen 0.55s ease forwards; } @keyframes btnSheen { 0% { left: -100%; } 100% { left: 160%; } } /* --------------------------------------------------------------- 24. RIPPLE ANIMATION --------------------------------------------------------------- */ @keyframes rippleAnim { to { transform: scale(1); opacity: 0; } } /* --------------------------------------------------------------- 25. PAGE TRANSITION OVERLAY --------------------------------------------------------------- */ #page-transition-overlay { position: fixed; inset: 0; background: var(--yellow); z-index: 999997; transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1); pointer-events: none; } #page-transition-overlay.enter { transform: scaleX(1); transform-origin: left; } #page-transition-overlay.exit { transform: scaleX(0); transform-origin: right; transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.05s; } /* --------------------------------------------------------------- 26. HEADER SCROLL — compact mode --------------------------------------------------------------- */ .main-header.scrolled { padding: 0; box-shadow: 0 4px 30px rgba(244,184,25,0.1); border-bottom-color: rgba(244,184,25,0.4); } .main-header.scrolled .header-container { padding-top: 12px; padding-bottom: 12px; } /* --------------------------------------------------------------- 27. CARD ICON FLOAT --------------------------------------------------------------- */ .card-icon { display: inline-block; animation: iconFloat 3s ease-in-out infinite; will-change: transform; } .glass-card:nth-child(2) .card-icon { animation-delay: 0.4s; } .glass-card:nth-child(3) .card-icon { animation-delay: 0.8s; } .glass-card:nth-child(4) .card-icon { animation-delay: 1.2s; } .glass-card:nth-child(5) .card-icon { animation-delay: 1.6s; } .glass-card:nth-child(6) .card-icon { animation-delay: 2.0s; } @keyframes iconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(-8px) rotate(4deg); } 70% { transform: translateY(-4px) rotate(-2deg); } } /* --------------------------------------------------------------- 28. FEATURED STATS — number count pulse --------------------------------------------------------------- */ .highlight-val { animation: numGlow 2.5s ease-in-out infinite; } @keyframes numGlow { 0%, 100% { text-shadow: 0 0 0 rgba(244,184,25,0); } 50% { text-shadow: 0 0 20px rgba(244,184,25,0.7), 0 0 50px rgba(244,184,25,0.3); } } /* --------------------------------------------------------------- 29. TREND BADGES — wiggle --------------------------------------------------------------- */ .trend-up { display: inline-block; animation: trendWiggle 4s ease-in-out infinite; } @keyframes trendWiggle { 0%, 90%, 100% { transform: rotate(0deg) scale(1); } 93% { transform: rotate(-5deg) scale(1.05); } 96% { transform: rotate(5deg) scale(1.05); } 99% { transform: rotate(0deg) scale(1); } } /* --------------------------------------------------------------- 30. ABOUT BIG CARDS — slide-in border --------------------------------------------------------------- */ .big-card { position: relative; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; } .big-card::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 0; background: var(--yellow); transition: height 0.5s cubic-bezier(0.23, 1, 0.32, 1); border-radius: 0 0 4px 4px; } .big-card:hover::after { height: 100%; } .big-card:hover { transform: translateX(6px); box-shadow: -4px 0 0 var(--yellow), 0 20px 40px rgba(244,184,25,0.08); }