/* ================================================================ Vilana — premium text & card reveal animations Scope: text (H1/H2 headings + selected hero/lead paragraphs) and a small set of real card components (see "Card reveal" below). Progressive enhancement: elements are only hidden pre-animation once js/text-reveal.js has confirmed it can run and added the "js-reveal-ready" class to . Without JS (or if it fails), this file never hides anything — content stays fully visible. ================================================================ */ html.js-reveal-ready [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y, 14px)); /* opacity and transform intentionally finish at different times (see "Card reveal" below): opacity makes the element readable quickly, transform keeps gently settling a little longer, so the stop never feels abrupt. Each falls back to the single --reveal-duration used by text reveal (h1/h2/h3/p), which keeps opacity/transform in sync there exactly as before. Easing defaults to the original text-reveal curve; only card reveal opts into the newer premium curve below. */ transition: opacity var(--reveal-duration-opacity, var(--reveal-duration, 600ms)) var(--reveal-easing, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--reveal-duration-transform, var(--reveal-duration, 600ms)) var(--reveal-easing, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } html.js-reveal-ready [data-reveal].is-revealed { opacity: 1; transform: translateY(0); will-change: auto; } /* Per-tag intensity: small, elegant movement — never a big slide */ html.js-reveal-ready [data-reveal="h1"] { --reveal-y: 18px; --reveal-duration: 700ms; } html.js-reveal-ready [data-reveal="h2"] { --reveal-y: 14px; --reveal-duration: 600ms; } html.js-reveal-ready [data-reveal="h3"] { --reveal-y: 12px; --reveal-duration: 600ms; } html.js-reveal-ready [data-reveal="p"] { --reveal-y: 10px; --reveal-duration: 550ms; } /* Card reveal — service/anlass/event/menu/city cards. Slightly more travel than text since a whole card is a bigger visual unit, but still calm: opacity + a small rise, no scale/rotate/blur. Opacity settles first (700ms) so the card reads quickly; transform keeps gently arriving a little longer (950ms) for a soft, unhurried stop. */ html.js-reveal-ready [data-reveal="card"] { --reveal-y: 14px; --reveal-duration-opacity: 700ms; --reveal-duration-transform: 950ms; --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1); } /* Small contact-info chips: same character, lighter amplitude — these are small UI chips, not full photo cards, so they move less and settle sooner. */ html.js-reveal-ready .info-card[data-reveal="card"] { --reveal-y: 9px; --reveal-duration-opacity: 600ms; --reveal-duration-transform: 700ms; --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1); } /* Short, subtle stagger — for stacked hero text (H1 -> subtitle -> lead text) and for neighboring cards in the same row/grid. Deliberately understated: felt more than seen, never a visible "waiting" queue. */ html.js-reveal-ready [data-reveal-delay="1"] { --reveal-delay: 45ms; } html.js-reveal-ready [data-reveal-delay="2"] { --reveal-delay: 90ms; } /* Cards already appear one at a time as the user scrolls past them on narrow viewports (single-column layout), so an extra artificial stagger there would only make them feel like they're lagging behind the scroll — remove it below the desktop grid breakpoint. */ @media (max-width: 767px) { html.js-reveal-ready [data-reveal-delay="1"], html.js-reveal-ready [data-reveal-delay="2"] { --reveal-delay: 0ms; } } /* Accessibility: no motion for users who asked for less of it */ @media (prefers-reduced-motion: reduce) { html.js-reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }