/* ============================================================ AR-Tonirovka — Premium Animation Layer Inspired by Lumora / modern agency aesthetic ============================================================ */ /* ── 0. SMOOTH SCROLL ── */ html { scroll-behavior: smooth; } /* ── 1. PAGE ENTRANCE ── ВАЖНО: анимируем ТОЛЬКО opacity, без transform. Любой transform на (даже нулевой, из-за fill-mode:both) делает body containing-block'ом для position:fixed → ломает лайтбокс (фото уезжает при прокрутке), липкое мобильное меню, кнопку «наверх» и sticky-CTA. Без transform на body. */ @keyframes arm-page-in { from { opacity: 0; } to { opacity: 1; } } body { animation: arm-page-in .5s cubic-bezier(.16,1,.3,1) both; } /* ── 2. HERO BADGES — staggered pop-up ── */ @keyframes arm-badge-in { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } } .hero-benefits span { opacity: 0; animation: arm-badge-in .55s cubic-bezier(.16,1,.3,1) forwards; } .hero-benefits span:nth-child(1) { animation-delay: .35s; } .hero-benefits span:nth-child(2) { animation-delay: .48s; } .hero-benefits span:nth-child(3) { animation-delay: .61s; } .hero-benefits span:nth-child(4) { animation-delay: .74s; } .hero-benefits span:nth-child(5) { animation-delay: .87s; } /* ── 3. HERO BUTTONS — slide up ── */ @keyframes arm-btn-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .hero-buttons { opacity: 0; animation: arm-btn-in .6s cubic-bezier(.16,1,.3,1) 1s forwards; } /* ── 4. PRIMARY BUTTON PULSE ── */ @keyframes arm-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,184,148,.45); } 65% { box-shadow: 0 0 0 14px rgba(0,184,148,0); } 100% { box-shadow: 0 0 0 0 rgba(0,184,148,0); } } .btn-main { animation: arm-pulse 2.8s ease-out infinite 1.6s; } /* ── 5. SECTION HEADINGS — underline draw ── */ .section-hdr h2, .section-underline { position: relative; display: inline-block; } .section-hdr h2::after, .section-underline::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 3px; width: 0; background: linear-gradient(90deg, #00b894, #00cec9); border-radius: 2px; transition: width .7s cubic-bezier(.16,1,.3,1); } .section-hdr.is-visible h2::after, .section-underline.is-visible::after { width: 60%; } /* ── 6. CARD IMAGE ZOOM — отключено по просьбе ── */ .product-card, .svc-card, .pf-item { overflow: hidden; } /* ── 7. CARD BOTTOM ACCENT LINE ── */ .product-card::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 3px; width: 0; background: linear-gradient(90deg, #00b894, #00cec9); border-radius: 3px; transition: width .4s cubic-bezier(.16,1,.3,1); } .product-card { position: relative; } .product-card:hover::after { width: 92%; } /* ── 8. PROCESS STEP NUMBER POP ── */ .process-step .step-num { transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s; } .process-step:hover .step-num { transform: scale(1.2) rotate(-8deg); background: #00b894; color: #fff; } /* ── 9. WHY-ITEM hover lift + icon bounce ── */ .why-item { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; } .why-item:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,184,148,.12); } @keyframes arm-icon-bounce { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10px) scale(1.15); } 70% { transform: translateY(-4px) scale(1.05); } } .why-item:hover .why-icon { animation: arm-icon-bounce .6s ease; display: inline-block; } /* ── 10. PACKAGE CARDS — glow on hover ── */ #pkgScroll a:hover { box-shadow: 0 8px 32px rgba(0,184,148,.25) !important; } /* ── 11. MARQUEE PAUSE on hover ── */ .marquee-wrap:hover .marquee-track { animation-play-state: paused; } .brands-wrap:hover .brands-track { animation-play-state: paused; } /* ── 12. GRADIENT ACCENT TEXT ── */ .text-accent { background: linear-gradient(135deg, #00b894 0%, #00cec9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── 13. PORTFOLIO items — subtle scale ── */ .pf-item img { transition: transform .5s cubic-bezier(.16,1,.3,1), filter .3s; filter: brightness(1); } .pf-item:hover img { transform: scale(1.04); filter: brightness(1.05); } /* ── 14. STICKY CTA — float ── */ @keyframes arm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .sticky-wa { animation: arm-float 3.5s ease-in-out infinite; } .sticky-tel{ animation: arm-float 3.5s ease-in-out infinite .8s; } /* ── 15. FOOTER LINKS underline draw ── */ .footer-links li a { position: relative; display: inline-block; } .footer-links li a::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: #00b894; transition: width .25s ease; } .footer-links li a:hover::after { width: 100%; } /* ── 16. COUNTER NUMBERS ── */ @keyframes arm-count-pop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.1); } 100%{ transform: scale(1); opacity: 1; } } .arm-counter.is-counting { animation: arm-count-pop .5s cubic-bezier(.34,1.56,.64,1) both; } /* ── 17. QUIZ OPTIONS — micro-interact ── */ .quiz-opt { transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s !important; } .quiz-opt:active { transform: scale(.94) !important; } /* ── 18. FORM INPUTS — focus glow ── */ input[type="text"]:focus, input[type="tel"]:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,184,148,.2); border-color: #00b894 !important; transition: box-shadow .25s, border-color .25s; } /* ── 19. REDUCE MOTION ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }