/* ========================================================= EMARK GLOBAL REVEAL ANIMATIONS File: /assets/css/animations.css ========================================================= */ /* Important: Elements remain normally visible unless JavaScript successfully adds .reveal-ready to . */ html.reveal-ready [data-reveal] { opacity: 0; transition: opacity 680ms ease, transform 680ms cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } /* --------------------------------------------------------- REVEAL DIRECTIONS --------------------------------------------------------- */ html.reveal-ready [data-reveal="up"] { transform: translate3d(0, 24px, 0); } html.reveal-ready [data-reveal="down"] { transform: translate3d(0, -20px, 0); } html.reveal-ready [data-reveal="left"] { transform: translate3d(-24px, 0, 0); } html.reveal-ready [data-reveal="right"] { transform: translate3d(24px, 0, 0); } html.reveal-ready [data-reveal="scale"] { transform: scale(.97); } /* --------------------------------------------------------- VISIBLE STATE --------------------------------------------------------- */ html.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* --------------------------------------------------------- OPTIONAL SLIGHTLY SOFTER REVEAL --------------------------------------------------------- */ html.reveal-ready [data-reveal="soft"] { transform: translate3d(0, 14px, 0); } /* --------------------------------------------------------- DECORATIVE FLOAT Use only on decorative elements --------------------------------------------------------- */ [data-float="soft"] { animation: emarkSoftFloat 9s ease-in-out infinite alternate; } @keyframes emarkSoftFloat { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-7px, -6px, 0); } } /* --------------------------------------------------------- SUBTLE CARD HOVER Add class only where suitable --------------------------------------------------------- */ .emark-animate-card { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } @media (hover: hover) and (pointer: fine) { .emark-animate-card:hover { transform: translateY(-4px); } } /* --------------------------------------------------------- MOBILE Reduce movement distance --------------------------------------------------------- */ @media (max-width: 700px) { html.reveal-ready [data-reveal="up"], html.reveal-ready [data-reveal="soft"] { transform: translate3d(0, 16px, 0); } html.reveal-ready [data-reveal="left"] { transform: translate3d(-14px, 0, 0); } html.reveal-ready [data-reveal="right"] { transform: translate3d(14px, 0, 0); } [data-float="soft"] { animation: none; } } /* --------------------------------------------------------- ACCESSIBILITY --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } [data-float="soft"] { animation: none !important; } .emark-animate-card { transition: none !important; } } @media (hover: hover) and (pointer: fine) { .emark-faq__item { transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .emark-faq__item:hover { transform: translateY(-2px); border-color: rgba(8, 62, 127, 0.14); box-shadow: 0 10px 24px rgba(18, 43, 73, 0.05); } }