/* ================================================== ANIMATIONS Purpose: Scroll-reveal primitives, staggering, counters and the handful of ambient effects used across the site. Two rules govern everything here: 1. Content is visible by default. Reveal styles only apply once js/animations.js has confirmed IntersectionObserver support by adding .js-reveal to , so a failed script never hides content. 2. Everything collapses to a no-op under prefers-reduced-motion. ================================================== */ /* ================================================== SCROLL REVEAL ================================================== */ @media (prefers-reduced-motion: no-preference) { .js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 640ms var(--ease-out-expo), transform 640ms var(--ease-out-expo); transition-delay: calc(var(--reveal-index, 0) * 80ms); will-change: opacity, transform; } .js-reveal [data-reveal="fade"] { transform: none; } .js-reveal [data-reveal="left"] { transform: translateX(-26px); } .js-reveal [data-reveal="right"] { transform: translateX(26px); } .js-reveal [data-reveal="scale"] { transform: scale(0.965); } .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; } } /* Stagger children of a container without touching each child's markup. */ .js-reveal [data-reveal-group] > * { --reveal-index: 0; } .js-reveal [data-reveal-group] > *:nth-child(1) { --reveal-index: 0; } .js-reveal [data-reveal-group] > *:nth-child(2) { --reveal-index: 1; } .js-reveal [data-reveal-group] > *:nth-child(3) { --reveal-index: 2; } .js-reveal [data-reveal-group] > *:nth-child(4) { --reveal-index: 3; } .js-reveal [data-reveal-group] > *:nth-child(5) { --reveal-index: 4; } .js-reveal [data-reveal-group] > *:nth-child(6) { --reveal-index: 5; } .js-reveal [data-reveal-group] > *:nth-child(7) { --reveal-index: 6; } .js-reveal [data-reveal-group] > *:nth-child(8) { --reveal-index: 7; } .js-reveal [data-reveal-group] > *:nth-child(n+9) { --reveal-index: 8; } /* ================================================== COUNTERS Numbers tick up once, when scrolled into view. js/counters.js only animates elements that carry a real, verifiable figure. ================================================== */ .counter { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ================================================== AMBIENT EFFECTS ================================================== */ /* Slow drift for the blurred brand fields behind dark sections. */ @media (prefers-reduced-motion: no-preference) { .ambient-drift { animation: ambient-drift 22s ease-in-out infinite alternate; } } @keyframes ambient-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2%, -3%, 0) scale(1.06); } } /* Underline that draws in on hover, used for editorial links. */ .link-underline { position: relative; background-image: linear-gradient(var(--brand-500), var(--brand-500)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px; transition: background-size var(--transition-normal); } .link-underline:hover { background-size: 100% 1.5px; } /* Soft pulse for the live-availability dot in the announcement bar. */ .pulse-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--success-500); flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { .pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: inherit; animation: pulse-ring 2.4s var(--ease-out-expo) infinite; } } @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } /* ================================================== SKELETON / LOADING Used by the map embed placeholder until the iframe paints, so the area never flashes empty white. ================================================== */ .skeleton { position: absolute; inset: 0; background: linear-gradient( 100deg, var(--surface-sunken) 30%, var(--surface-muted) 50%, var(--surface-sunken) 70% ); background-size: 220% 100%; } @media (prefers-reduced-motion: no-preference) { .skeleton { animation: skeleton-sweep 1.6s linear infinite; } } @keyframes skeleton-sweep { from { background-position: 180% 0; } to { background-position: -80% 0; } } /* ================================================== HOVER LIFT Shared interaction for tiles that are not full cards. ================================================== */ .hover-lift { transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* ================================================== PAGE ENTRY A single, very short fade on first paint. Applied to only after the stylesheet has loaded so it can never leave the page blank. ================================================== */ @media (prefers-reduced-motion: no-preference) { .page-enter { animation: page-enter 420ms var(--ease-out-expo) both; } } @keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }