diff --git a/miniapp/assets/styles.css b/miniapp/assets/styles.css index 61555f2..5430ae5 100644 --- a/miniapp/assets/styles.css +++ b/miniapp/assets/styles.css @@ -219,6 +219,12 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: .loader-logo path { fill: var(--walnut, #6B4A2B); } /* Бренд @wasrusgen1 на splash — SVG-лого + CRM */ +.brand-logo-wrap { + position: relative; + display: inline-block; + animation: sawWobble 5.5s ease-in-out infinite; + transform-origin: 50% 35%; /* центр диска пилы */ +} .brand-logo { width: 70%; max-width: 260px; @@ -228,6 +234,43 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: animation: logoBreath 2.2s ease-in-out infinite; filter: drop-shadow(0 6px 16px rgba(44, 62, 80, 0.18)); } + +/* Опилки — точки летают вокруг пилы */ +.splash-dust { + position: absolute; + inset: -10% -20% -10% -20%; + pointer-events: none; +} +.splash-dust .dust { + position: absolute; + width: 3px; + height: 3px; + background: #2C3E50; + border-radius: 50%; + opacity: 0; + will-change: transform, opacity; +} +/* 8 точек с разными траекториями */ +.splash-dust .d1 { left: 30%; top: 50%; animation: dustFly 3.6s ease-out 0s infinite; --dx:-30px; --dy:-50px; } +.splash-dust .d2 { left: 35%; top: 45%; animation: dustFly 4.2s ease-out 0.4s infinite; --dx:-50px; --dy:-30px; } +.splash-dust .d3 { left: 25%; top: 55%; animation: dustFly 3.2s ease-out 0.8s infinite; --dx:-60px; --dy:20px; } +.splash-dust .d4 { left: 40%; top: 60%; animation: dustFly 5.0s ease-out 0.2s infinite; --dx:-20px; --dy:50px; } +.splash-dust .d5 { left: 65%; top: 55%; animation: dustFly 3.8s ease-out 0.6s infinite; --dx: 50px; --dy: 30px; } +.splash-dust .d6 { left: 60%; top: 50%; animation: dustFly 4.6s ease-out 1.0s infinite; --dx: 60px; --dy:-20px; } +.splash-dust .d7 { left: 70%; top: 45%; animation: dustFly 3.4s ease-out 0.3s infinite; --dx: 40px; --dy:-50px; } +.splash-dust .d8 { left: 75%; top: 60%; animation: dustFly 4.0s ease-out 0.9s infinite; --dx: 70px; --dy: 40px; } + +@keyframes dustFly { + 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } + 15% { opacity: 0.55; } + 60% { opacity: 0.35; } + 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } +} + +@keyframes sawWobble { + 0%, 100% { transform: rotate(-1deg); } + 50% { transform: rotate(1.5deg); } +} .brand-tagline-gold { font-family: "Inter", system-ui, sans-serif; font-weight: 800; diff --git a/miniapp/index.html b/miniapp/index.html index 119c44c..5e17f92 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -12,25 +12,37 @@ - - + +
- +