/** * Легкі анімації головної сторінки. Вимкнення: прибрати link/script з index.html * або додати клас no-motion на (див. motion.js). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Герой: м’який «вхід» контенту (лише якщо не reduced-motion) */ @media (prefers-reduced-motion: no-preference) { .hero .hero-content > * { opacity: 0; animation: amb-hero-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero .hero-content > *:nth-child(1) { animation-delay: 0.08s; } .hero .hero-content > *:nth-child(2) { animation-delay: 0.18s; } .hero .hero-content > *:nth-child(3) { animation-delay: 0.28s; } .hero .hero-content > *:nth-child(4) { animation-delay: 0.36s; } .hero .hero-content > *:nth-child(5) { animation-delay: 0.44s; } } @keyframes amb-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Секції: поява при скролі (клас додає motion.js) */ .amb-motion { opacity: 0; transform: translateY(1.35rem); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .amb-motion.amb-motion-visible { opacity: 1; transform: none; will-change: auto; } /* Хедер: легка тінь після прокрутки */ .header.amb-header-scrolled { box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08); transition: box-shadow 0.35s ease; } /* Кнопки CTA */ @media (prefers-reduced-motion: no-preference) { .hero .btn, .btn.btn-primary, .btn.btn-secondary { transition: transform 0.22s ease, box-shadow 0.22s ease; } .hero .btn:hover, .btn.btn-primary:hover, .btn.btn-secondary:hover { transform: translateY(-2px); } .hero .btn:active, .btn.btn-primary:active, .btn.btn-secondary:active { transform: translateY(0); } } /* Картки / плитки в секціях */ @media (prefers-reduced-motion: no-preference) { .values .value-item, .products .product-category, .about .stat-card, .contact .contact-item { transition: transform 0.28s ease, box-shadow 0.28s ease; } .values .value-item:hover, .products .product-category:hover, .about .stat-card:hover, .contact .contact-item:hover { transform: translateY(-4px); } } /* Галерея: легкий акцент на елементі при наведенні */ @media (prefers-reduced-motion: no-preference) { .gallery-item { transition: transform 0.35s ease; } .gallery-item:hover { transform: scale(1.02); } } /* Повне вимкнення анімацій */ html.no-motion .amb-motion, html.no-motion .hero .hero-content > *, html.no-motion .gallery-item { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .amb-motion, .hero .hero-content > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .header.amb-header-scrolled { box-shadow: none; } .hero .btn, .btn.btn-primary, .btn.btn-secondary, .values .value-item, .products .product-category, .about .stat-card, .contact .contact-item, .gallery-item { transition: none !important; } .values .value-item:hover, .products .product-category:hover, .about .stat-card:hover, .contact .contact-item:hover, .gallery-item:hover { transform: none !important; } }