/* ============================================================ Balance Farm — entrance sequence No curtain, no counter: the page itself is the reveal. Every element starts offset and arrives on its own beat as soon as the hero can paint. Elements key off .is-entering / .is-entered on , so adding one to the sequence is a single selector, no JS. ============================================================ */ /* ---- the loading veil ---- Everything but the nav sits behind a blur until the page is ready, so the first thing a guest sees is a settled frame rather than assets arriving. It is a pseudo-element on so no wrapper is needed, and the nav's own stacking context (z-index 30) already lifts it clear. */ html.is-entering body::before { content: ""; position: fixed; inset: 0; z-index: 20; /* over the page, under the nav (30) */ background: var(--veil); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); pointer-events: none; } /* the veil clears on its own beat, before the content beats begin */ html.is-entered body::before { content: ""; position: fixed; inset: 0; z-index: 20; opacity: 0; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); background: transparent; pointer-events: none; transition: opacity 620ms ease, backdrop-filter 620ms ease, -webkit-backdrop-filter 620ms ease, background-color 620ms ease; } /* ---- held back before the sequence runs ---- */ html.is-entering .booking__dialog, html.is-entering .help, html.is-entering .story__copy, html.is-entering .story__label, html.is-entering .story__place { opacity: 0; } /* held back with the other captions until its beat */ html.is-entering .story__scroll { opacity: 0; } /* the hero media itself opens the sequence */ html.is-entering .story__panel--hero .story__img { opacity: 0; transform: scale(1.04); } /* Each element slides in from the edge it sits on. The offset goes on `translate`, not `transform`: several of these are centred with translateX(-50%), and a transform here would replace that centring rather than add to it — which meant every rule had to restate the X, and any layout that changed it (mobile) slid in sideways. The two properties compose, so centring and entrance stay independent. */ html.is-entering .booking__dialog { translate: 0 -28px; } html.is-entering .help { translate: 0 -28px; } /* from the top, like the nav */ html.is-entering .story__copy { translate: 0 24px; } /* from below */ html.is-entering .story__scroll { translate: 0 24px; } html.is-entering .story__label { translate: -28px 0; } /* from the left */ html.is-entering .story__place { translate: 28px 0; } /* from the right */ /* ---- the arrival ---- Scoped to the sequence: these transitions must not outlive it, or they animate every later change to the same elements (the nav being released by a modal, for one) and read as a lag. js/ui/entrance.js drops the class once the last beat has landed. */ html.is-entering .story__panel--hero .story__img, html.is-entered .story__panel--hero .story__img { transition: opacity 700ms ease, transform 900ms var(--e-out); } html.is-entering .booking__dialog, html.is-entering .help, html.is-entering .story__copy, html.is-entering .story__label, html.is-entering .story__scroll, html.is-entering .story__place, html.is-entered .booking__dialog, html.is-entered .help, html.is-entered .story__copy, html.is-entered .story__label, html.is-entered .story__scroll, html.is-entered .story__place { transition: opacity 520ms ease, translate 700ms var(--e-out); } /* one beat each, in reading order */ html.is-entered .story__panel--hero .story__img { transition-delay: 0ms; } html.is-entered .booking__dialog { transition-delay: 220ms; } /* arrives with the nav */ html.is-entered .help { transition-delay: 220ms; } /* the other chrome */ html.is-entered .story__copy { transition-delay: 340ms; } html.is-entered .story__label { transition-delay: 460ms; } html.is-entered .story__scroll { transition-delay: 530ms; } html.is-entered .story__place { transition-delay: 600ms; } /* the page holds still until the sequence starts */ html.is-entering, html.is-entering body { overflow: hidden; } @media (max-width: 600px) { /* the cue takes the left corner on phones, where the label would sit, so it arrives from the left like the label rather than from below */ html.is-entering .story__scroll { translate: -28px 0; } } @media (prefers-reduced-motion: reduce) { html.is-entering *, html.is-entered * { transition-duration: 1ms !important; transition-delay: 0ms !important; } }