/* ========================================================================== animations.css — scroll reveal + hover polish Loaded after style.css, so same-specificity rules here win. Motion is opt-in: the "hidden" start state only applies once the inline head script adds .has-reveal to . If JS is blocked or the visitor asks for reduced motion, nothing is ever hidden and the page reads exactly as it does today. ========================================================================== */ :root { --anim-ease: cubic-bezier(.22, .61, .36, 1); --anim-reveal: .45s; --anim-hover: .35s; } /* --- Scroll reveal ------------------------------------------------------ */ .has-reveal [data-reveal] { opacity: 0; transform: translateY(24px); } /* Sideways variants — mirrored, so they read correctly in RTL */ .has-reveal [data-reveal="start"] { transform: translateX(32px); } .has-reveal [data-reveal="end"] { transform: translateX(-32px); } /* Large artwork just fades; sliding a big image looks heavy */ .has-reveal [data-reveal="fade"] { transform: none; } .has-reveal [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity var(--anim-reveal) var(--anim-ease), transform var(--anim-reveal) var(--anim-ease); transition-delay: var(--reveal-delay, 0ms); } /* --- Card hover: lift + deepen the existing shadow ----------------------- */ .product-feature-item, .product-benefit-item, .cooperation-item, .service-card, .groups, .images-group-with-text, .blog-item { transition: transform var(--anim-hover) var(--anim-ease), box-shadow var(--anim-hover) var(--anim-ease); } .product-feature-item:hover, .blog-item:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(44, 46, 131, .22); } .product-benefit-item:hover { transform: translateY(-4px); } .cooperation-item:hover, .service-card:hover, .groups:hover { transform: translateY(-6px); } .images-group-with-text:hover { transform: translateY(-8px); } /* Logo tiles / icon badges nudge up with their card */ .feature-logo, .benefit-logo, .cooperation-item img { transition: transform var(--anim-hover) var(--anim-ease); } .product-feature-item:hover .feature-logo, .product-benefit-item:hover .benefit-logo { transform: scale(1.08); } .cooperation-item:hover img { transform: scale(1.06); } /* --- Buttons ------------------------------------------------------------ */ .btn-green, .btn-blue, .btn-white, .btn-contactUs { transition: background-color var(--anim-hover) ease, color var(--anim-hover) ease, transform var(--anim-hover) var(--anim-ease), box-shadow var(--anim-hover) var(--anim-ease); } .btn-green:hover, .btn-blue:hover, .btn-white:hover, .btn-contactUs:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(44, 46, 131, .25); } .btn-green:active, .btn-blue:active, .btn-white:active, .btn-contactUs:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(44, 46, 131, .2); } /* --- Contact icons ------------------------------------------------------ */ .contact-icon, .social-links .social-item { transition: transform var(--anim-hover) var(--anim-ease); } .contact-icon:hover, .social-links .social-item:hover { transform: translateY(-3px) scale(1.1); } /* --- Counters ----------------------------------------------------------- */ /* Reserve the final width so the layout doesn't jitter while digits tick up */ [data-countup], .data-count h1 { font-variant-numeric: tabular-nums; } /* --- Back to top -------------------------------------------------------- */ .to-top { position: fixed; bottom: 28px; left: 28px; width: 46px; height: 46px; border: none; border-radius: 50%; background-color: #2C2E83; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(12px); box-shadow: 0 6px 16px rgba(44, 46, 131, .35); transition: opacity .3s ease, visibility .3s ease, transform .3s var(--anim-ease), background-color .3s ease; } .to-top.is-shown { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background-color: #3d40b0; transform: translateY(-3px); } /* --- Respect the OS "reduce motion" setting ----------------------------- */ @media (prefers-reduced-motion: reduce) { .has-reveal [data-reveal], .has-reveal [data-reveal].is-visible { opacity: 1; transform: none; transition: none; } .product-feature-item, .product-benefit-item, .cooperation-item, .service-card, .groups, .images-group-with-text, .blog-item, .btn-green, .btn-blue, .btn-white, .btn-contactUs, .feature-logo, .benefit-logo, .contact-icon, .to-top { transition: none; } .product-feature-item:hover, .product-benefit-item:hover, .cooperation-item:hover, .service-card:hover, .groups:hover, .images-group-with-text:hover, .blog-item:hover, .btn-green:hover, .btn-blue:hover, .btn-white:hover, .btn-contactUs:hover, .contact-icon:hover, .to-top:hover { transform: none; } }