diff --git a/miniapp/assets/styles.css b/miniapp/assets/styles.css index 5430ae5..2ccefb5 100644 --- a/miniapp/assets/styles.css +++ b/miniapp/assets/styles.css @@ -222,8 +222,6 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: .brand-logo-wrap { position: relative; display: inline-block; - animation: sawWobble 5.5s ease-in-out infinite; - transform-origin: 50% 35%; /* центр диска пилы */ } .brand-logo { width: 70%; @@ -235,10 +233,28 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: filter: drop-shadow(0 6px 16px rgba(44, 62, 80, 0.18)); } -/* Опилки — точки летают вокруг пилы */ +/* Вращающийся диск-кольцо поверх саблона. + Позиция и размер подобраны под расположение диска пилы в лого. */ +.saw-rotor { + position: absolute; + top: 22%; /* центр диска пилы примерно тут */ + left: 50%; + width: 36%; + aspect-ratio: 1 / 1; + transform: translate(-50%, -50%); + pointer-events: none; + opacity: 0.55; + animation: rotorSpin 3.5s linear infinite; +} +@keyframes rotorSpin { + from { transform: translate(-50%, -50%) rotate(0deg); } + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +/* Опилки — 16 точек летают вокруг пилы */ .splash-dust { position: absolute; - inset: -10% -20% -10% -20%; + inset: -10% -25% -10% -25%; pointer-events: none; } .splash-dust .dust { @@ -250,26 +266,29 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: 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; } +/* 16 точек с разными траекториями (8 влево, 8 вправо) */ +.splash-dust .d1 { left: 30%; top: 45%; animation: dustFly 3.6s ease-out 0.0s infinite; --dx:-30px; --dy:-55px; } +.splash-dust .d2 { left: 35%; top: 50%; animation: dustFly 4.2s ease-out 0.4s infinite; --dx:-55px; --dy:-30px; } +.splash-dust .d3 { left: 25%; top: 55%; animation: dustFly 3.2s ease-out 0.8s infinite; --dx:-65px; --dy: 15px; } +.splash-dust .d4 { left: 32%; top: 60%; animation: dustFly 5.0s ease-out 0.2s infinite; --dx:-25px; --dy: 55px; } +.splash-dust .d5 { left: 38%; top: 40%; animation: dustFly 4.5s ease-out 0.6s infinite; --dx:-40px; --dy:-70px; } +.splash-dust .d6 { left: 20%; top: 50%; animation: dustFly 3.8s ease-out 1.1s infinite; --dx:-70px; --dy:-15px; } +.splash-dust .d7 { left: 28%; top: 65%; animation: dustFly 4.4s ease-out 0.5s infinite; --dx:-50px; --dy: 40px; } +.splash-dust .d8 { left: 22%; top: 38%; animation: dustFly 3.5s ease-out 0.9s infinite; --dx:-60px; --dy:-65px; } +.splash-dust .d9 { left: 70%; top: 45%; animation: dustFly 3.4s ease-out 0.3s infinite; --dx: 40px; --dy:-55px; } +.splash-dust .d10 { left: 65%; top: 50%; animation: dustFly 4.0s ease-out 0.7s infinite; --dx: 60px; --dy:-25px; } +.splash-dust .d11 { left: 75%; top: 55%; animation: dustFly 3.2s ease-out 1.0s infinite; --dx: 70px; --dy: 15px; } +.splash-dust .d12 { left: 68%; top: 60%; animation: dustFly 5.0s ease-out 0.2s infinite; --dx: 25px; --dy: 55px; } +.splash-dust .d13 { left: 62%; top: 40%; animation: dustFly 4.5s ease-out 0.6s infinite; --dx: 45px; --dy:-65px; } +.splash-dust .d14 { left: 80%; top: 50%; animation: dustFly 3.8s ease-out 0.1s infinite; --dx: 75px; --dy:-15px; } +.splash-dust .d15 { left: 72%; top: 65%; animation: dustFly 4.4s ease-out 0.4s infinite; --dx: 55px; --dy: 40px; } +.splash-dust .d16 { left: 78%; top: 38%; animation: dustFly 3.5s ease-out 0.8s infinite; --dx: 65px; --dy:-65px; } @keyframes dustFly { - 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } + 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); } + 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } } .brand-tagline-gold { font-family: "Inter", system-ui, sans-serif; diff --git a/miniapp/index.html b/miniapp/index.html index 5e17f92..3318f2b 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -12,37 +12,42 @@ - - + + - +
- + + +
CRM
- - - - - - - - - + + + + + + + + +