/** * IV Tours USA Ads — motion. * * Safety model * ------------ * Content is VISIBLE by default. The hidden starting state is only applied when * `.js-anim` is on the element, and that class is added synchronously by * animations.js the moment the script starts evaluating. That means: * * - JavaScript disabled -> no .js-anim -> everything visible * - animations.js blocked/404 -> no .js-anim -> everything visible * - animations.js runs, then a * later script throws -> the failsafe timer in animations.js reveals * * Nothing on this page can ever be left invisible because a script misbehaved. */ /* Default, no-JS-safe state. */ [data-reveal] { opacity: 1; } /* Only hide once JavaScript has confirmed it can finish the reveal. */ .js-anim [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 640ms var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)), transform 640ms var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)); } .js-anim [data-reveal].is-revealed { opacity: 1; transform: none; } /* Gentle stagger across grid children, short enough not to delay reading. */ .js-anim .ads-styles__grid [data-reveal]:nth-child(2), .js-anim .ads-why__grid [data-reveal]:nth-child(2), .js-anim .ads-packages__grid [data-reveal]:nth-child(2) { transition-delay: 60ms; } .js-anim .ads-styles__grid [data-reveal]:nth-child(3), .js-anim .ads-why__grid [data-reveal]:nth-child(3), .js-anim .ads-packages__grid [data-reveal]:nth-child(3) { transition-delay: 120ms; } .js-anim .ads-why__grid [data-reveal]:nth-child(4) { transition-delay: 60ms; } .js-anim .ads-why__grid [data-reveal]:nth-child(5) { transition-delay: 120ms; } .js-anim .ads-why__grid [data-reveal]:nth-child(6) { transition-delay: 180ms; } /* Hero entrance */ .ads-hero__eyebrow, .ads-hero__title, .ads-hero__text, .ads-hero__services, .ads-hero__actions, .ads-hero__trust { opacity: 0; transform: translateY(16px); animation: ads-rise 880ms var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) forwards; } .ads-hero__eyebrow { animation-delay: 80ms; } .ads-hero__title { animation-delay: 160ms; } .ads-hero__text { animation-delay: 280ms; } .ads-hero__services { animation-delay: 360ms; } .ads-hero__actions { animation-delay: 440ms; } .ads-hero__trust { animation-delay: 540ms; } @keyframes ads-rise { to { opacity: 1; transform: none; } } /* Modal */ .ads-modal__panel { animation: ads-modal-in 300ms var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)); } .ads-modal[open] { animation: ads-fade-in 200ms ease; } @keyframes ads-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes ads-fade-in { from { opacity: 0; } to { opacity: 1; } } /* FAQ */ .ads-faq__item[open] .ads-faq__answer { animation: ads-faq-open 280ms var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both; } @keyframes ads-faq-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } /* Floating WhatsApp */ .ads-floating.is-visible { transition: opacity 420ms var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)), transform 420ms var(--ads-ease, cubic-bezier(0.22, 0.61, 0.36, 1)), visibility 420ms; } /* ------------------------------------------------------------------------- * Reduced motion * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js-anim [data-reveal], .ads-hero__eyebrow, .ads-hero__title, .ads-hero__text, .ads-hero__services, .ads-hero__actions, .ads-hero__trust, .ads-floating { opacity: 1 !important; transform: none !important; visibility: visible !important; } .ads-where__hint .ads-icon { animation: none; } .ads-dest:hover, .ads-style:hover, .ads-pkg:hover, .ads-service:hover, .ads-vehicle:hover, .ads-btn:hover, .ads-floating__btn:hover { transform: none; } }