/* Reveal-on-scroll utility Graceful enhancement: elements are visible by default. Only when JS adds the .js-enabled class to do we apply the initial hidden state. This way, no-JS users (and full-page screenshot tools) see everything. */ .js-enabled [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .js-enabled [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } .js-enabled [data-reveal][data-reveal-delay="1"].is-revealed { transition-delay: 0.12s; } .js-enabled [data-reveal][data-reveal-delay="2"].is-revealed { transition-delay: 0.24s; } .js-enabled [data-reveal][data-reveal-delay="3"].is-revealed { transition-delay: 0.36s; } .js-enabled [data-reveal][data-reveal-delay="4"].is-revealed { transition-delay: 0.48s; } @media (prefers-reduced-motion: reduce) { .js-enabled [data-reveal] { opacity: 1; transform: none; transition: none; } .hero-cinematic__seal { animation: none; } .hero-cinematic__light { animation: none; opacity: 0.6; } .hero-cinematic__slat { animation: none; } }