/* * Scroll-reveal. Defined ONCE here and enqueued globally. * Never redefine these keyframes inside a block's style.css. * * Two patterns — do NOT combine them on the same wrapper/children pair, the * translateY would compound: * .jaguarlandroverpreston-fade-up on a section wrapper (whole section reveals) * .jaguarlandroverpreston-fade-up-stagger on a parent, .jaguarlandroverpreston-fade-up-item on children */ /* Scoped to .has-js — set by an inline line in header.php's . Without it these rules do not apply and every section paints normally, which is what a visitor with no JS (or a JS error) must get. Hiding content that only a script can reveal is how a page ends up as a column of empty bands. */ .has-js .jaguarlandroverpreston-fade-up, .has-js .jaguarlandroverpreston-fade-up-item { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--jaguarlandroverpreston-ease), transform .7s var(--jaguarlandroverpreston-ease); will-change: opacity, transform; } .has-js .jaguarlandroverpreston-fade-up.is-visible, .has-js .jaguarlandroverpreston-fade-up-item.is-visible { opacity: 1; transform: none; } /* Stagger children in sequence. */ .has-js .jaguarlandroverpreston-fade-up-stagger .jaguarlandroverpreston-fade-up-item:nth-child(1) { transition-delay: 0ms; } .has-js .jaguarlandroverpreston-fade-up-stagger .jaguarlandroverpreston-fade-up-item:nth-child(2) { transition-delay: 90ms; } .has-js .jaguarlandroverpreston-fade-up-stagger .jaguarlandroverpreston-fade-up-item:nth-child(3) { transition-delay: 180ms; } .has-js .jaguarlandroverpreston-fade-up-stagger .jaguarlandroverpreston-fade-up-item:nth-child(4) { transition-delay: 270ms; } .has-js .jaguarlandroverpreston-fade-up-stagger .jaguarlandroverpreston-fade-up-item:nth-child(5) { transition-delay: 360ms; } .has-js .jaguarlandroverpreston-fade-up-stagger .jaguarlandroverpreston-fade-up-item:nth-child(6) { transition-delay: 450ms; } /* In the block editor there is no IntersectionObserver run — show everything. */ .block-editor-block-list__layout .jaguarlandroverpreston-fade-up, .block-editor-block-list__layout .jaguarlandroverpreston-fade-up-item { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-js .jaguarlandroverpreston-fade-up, .has-js .jaguarlandroverpreston-fade-up-item { opacity: 1; transform: none; transition: none; } }