/* ═══════════════════════════════════════════════════════════════ THE BARNHOUSE, loader: the hen pecks the loading dots Part A: the full screen overlay (#bhLoader, markup right after ) Part B: the hen drawing and its peck (shared with Part C) Part C: small hens that wait in photo frames and the map (.bh-ph, made by loader.js) Self contained: no tokens from style.css are needed. The overlay carries the hidden attribute in the markup, and only html.bh-load (set by the inline script in ) shows it, so without JS or without this file it never shows. Only transform and opacity animate, on HTML layers, so the hen keeps moving on the compositor while the page is still busy loading. ═══════════════════════════════════════════════════════════════ */ /* ── PART A. Overlay ───────────────────────────────────────────── */ .bh-load .bh-loader { display: block; position: fixed; left: 0; right: 0; top: -10vh; bottom: -10vh; /* spare room for the iPhone toolbar sliding away */ z-index: 1000; pointer-events: none; contain: strict; /* Failsafe: gone after 6s even if loader.js never runs */ animation: bh-failsafe .4s ease 6s forwards; } .bh-load .bh-loader.is-gone { display: none; } @keyframes bh-failsafe { to { opacity: 0; visibility: hidden; } } .bh-loader__sheet { position: absolute; inset: 0; display: grid; place-items: center; background-color: #4A2E18; /* logo chocolate */ background-image: url("../img/grain.png"); /* the site's paper grain tile, no blend modes */ background-size: 128px 128px; pointer-events: auto; } /* Later loads (reload, typed address, back without the cache): invisible at first, fades in only if the page is still loading 350ms after first paint */ .bh-load--late .bh-loader__sheet { animation: bh-late-in .25s ease-out .35s both; } @keyframes bh-late-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; } /* no visibility here: the sheet must follow the failsafe on its parent */ } /* Clicking through to another page: in over 150ms, back out after 4s at most (a cancelled or stalled navigation must not leave the page covered) */ .bh-load .bh-loader.is-nav { animation: bh-failsafe .4s ease 4s forwards; } .bh-loader.is-nav .bh-loader__sheet { animation: bh-nav-in .15s ease-out both; } @keyframes bh-nav-in { from { opacity: 0; } } /* Lifting: fade out with a little hop, then loader.js adds .is-gone */ .bh-load .bh-loader.is-out { opacity: 0; visibility: hidden; animation: none; transition: opacity .35s ease, visibility 0s linear .35s; } .bh-loader.is-out .bh-loader__sheet { pointer-events: none; animation-play-state: paused; } .bh-loader.is-out .bh-loader__stage { animation: bh-hop .35s ease-out both; } @keyframes bh-hop { 40% { transform: translateY(-.9em); } 100% { transform: translateY(-.4em); } } .bh-loader__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The little scene: a gold picket rail, the hen on it, three grains in front. Everything is in em so one font size scales it (hen 140px tall on phones). */ .bh-loader__stage { position: relative; font-size: 14px; width: 11.82em; height: 11.6em; } @media (min-width: 760px) { .bh-loader__stage { font-size: 16.8px; } } .bh-loader .bh-hen { position: absolute; left: 3.1em; top: 0; } .bh-loader__fence { position: absolute; left: -.6em; right: -.6em; top: 9.72em; height: 1.857em; /* the gold picket sill from the site's red windows, with a rail joining the pickets */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26' viewBox='0 0 28 26'%3E%3Cpath fill='%23DDAE5E' d='M6 26V8l8-7 8 7v18z'/%3E%3Cpath fill='%23B98740' d='M6 16h16v3H6z'/%3E%3C/svg%3E") repeat-x 50% 0 / 2em 1.857em, linear-gradient(transparent 61.5%, #B98740 61.5%, #B98740 73%, transparent 73%); } /* Grains: a row of three that slides up to the beak, one eaten per peck */ .bh-loader__grain { position: absolute; left: 2.8em; top: 4.5em; width: 0; height: 0; } .bh-loader__grain i { position: absolute; left: -.34em; top: -.26em; width: .68em; height: .52em; border-radius: 50%; background: #E9A63A; box-shadow: inset 0 -.12em 0 #B98740; animation: bh-grain 1.8s linear infinite; } .bh-loader__grain i:nth-child(1) { animation-delay: -.27s; } .bh-loader__grain i:nth-child(2) { animation-delay: -.87s; } .bh-loader__grain i:nth-child(3) { animation-delay: -1.47s; } /* One grain's life over three pecks (600ms each; the pecks land at 300ms and 900ms of the hen's 1.2s cycle): pop in at the back, slide up twice, eaten */ @keyframes bh-grain { 0% { transform: translate(-3.4em, 0) scale(0); opacity: 0; animation-timing-function: cubic-bezier(.3, 1.5, .6, 1); } 10% { transform: translate(-2.6em, 0) scale(1); opacity: 1; } 33.3% { transform: translate(-2.6em, 0); animation-timing-function: cubic-bezier(.3, .9, .4, 1); } 43.3% { transform: translate(-1.3em, 0); } 66.7% { transform: translate(-1.3em, 0); animation-timing-function: cubic-bezier(.3, .9, .4, 1); } 76.7% { transform: translate(0, 0); } 95% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: ease-in; } 98.5% { transform: translate(.2em, -.35em) scale(.2); opacity: 0; } 100% { transform: translate(.2em, -.35em) scale(0); opacity: 0; } } /* ── PART B. The hen ───────────────────────────────────────────── */ /* The traced logo hen (#sym-hen, 1256 x 1440) drawn in white with the red comb and the logo's dark offset shadow. For the peck it is cut in two at the neck: both halves overlap a little and share a round joint, so no seam shows. */ .bh-hen { position: relative; display: block; width: 8.7222em; height: 10em; } .bh-hen__tilt, .bh-hen__shade, .bh-hen__part { position: absolute; inset: 0; display: block; } .bh-hen__tilt { transform-origin: 39.8% 97.2%; } /* the feet */ .bh-hen__shade { transform: translate(1.752%, 1.806%); } /* 22, 26 units */ .bh-hen__part > svg { display: block; width: 100%; height: 100%; overflow: visible; } .bh-hen use, .bh-hen circle { fill: #fff; stroke: #fff; stroke-width: 16px; stroke-linejoin: round; } .bh-hen circle { stroke: none; } .bh-hen__shade use, .bh-hen__shade circle { fill: #2B1810; stroke: #2B1810; } .bh-hen__shade circle { stroke: none; } .bh-hen .bh-hen__comb use { fill: #DA1F26; stroke: #DA1F26; stroke-width: 22px; } @supports (clip-path: polygon(0 0, 1px 0, 0 1px)) { .bh-hen__part--body { clip-path: polygon(41.31% -9.72%, 110.35% -9.72%, 110.35% 109.72%, -10.35% 109.72%, -10.35% 44.93%, 22.29% 44.93%, 22.29% 25.06%, 29.04% 22.96%, 28.84% 22.26%, 28.86% 21.53%, 29.09% 20.84%, 29.52% 20.21%, 30.11% 19.71%, 30.84% 19.36%, 31.65% 19.18%, 32.48% 19.2%, 33.28% 19.4%, 33.99% 19.77%, 34.57% 20.29%, 34.97% 20.93%, 41.31% 18.53%); } .bh-hen__part--head { clip-path: polygon(-10.35% -9.72%, 41.49% -9.72%, 41.49% 18.92%, 34.97% 20.93%, 35.17% 21.63%, 35.16% 22.36%, 34.93% 23.05%, 34.5% 23.67%, 33.9% 24.18%, 33.17% 24.53%, 32.37% 24.7%, 31.54% 24.69%, 30.74% 24.49%, 30.02% 24.12%, 29.45% 23.6%, 29.04% 22.96%, 22.46% 25.44%, 22.46% 45.14%, -10.35% 45.14%); transform-origin: 32.006% 21.944%; /* the neck joint */ } .bh-loader .bh-hen__part--head { animation: bh-peck 1.2s infinite; } } .bh-loader .bh-hen__tilt { animation: bh-tilt 1.2s infinite; } /* Two pecks per cycle, landing at 300ms and 900ms; a proud look up after the second */ @keyframes bh-peck { 0% { transform: rotate(0); animation-timing-function: ease-out; } 11% { transform: rotate(5deg); animation-timing-function: cubic-bezier(.6, 0, 1, .5); } 25% { transform: rotate(-34deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 29% { transform: rotate(-30deg); animation-timing-function: cubic-bezier(.4, 0, .3, 1); } 42% { transform: rotate(0); } 61% { transform: rotate(5deg); animation-timing-function: cubic-bezier(.6, 0, 1, .5); } 75% { transform: rotate(-34deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 79% { transform: rotate(-30deg); animation-timing-function: cubic-bezier(.4, 0, .3, 1); } 91% { transform: rotate(7deg); } 96% { transform: rotate(7deg); animation-timing-function: ease-in-out; } 100% { transform: rotate(0); } } @keyframes bh-tilt { 0% { transform: rotate(0); animation-timing-function: ease-out; } 12% { transform: rotate(1deg); animation-timing-function: cubic-bezier(.6, 0, 1, .5); } 25% { transform: rotate(-9deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 29% { transform: rotate(-8deg); animation-timing-function: cubic-bezier(.4, 0, .3, 1); } 44% { transform: rotate(0); } 62% { transform: rotate(1deg); animation-timing-function: cubic-bezier(.6, 0, 1, .5); } 75% { transform: rotate(-9deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 79% { transform: rotate(-8deg); animation-timing-function: cubic-bezier(.4, 0, .3, 1); } 92% { transform: rotate(1.5deg); animation-timing-function: ease-in-out; } 100% { transform: rotate(0); } } /* ── PART C. Small hens waiting in photo frames ─────────────────── */ /* loader.js puts one behind each lazy photo that has not arrived yet and takes it out when the photo loads, so a loaded frame is exactly as before. In the red windows it sits under the photo (z-index -1 inside the window's own stacking context); in the menu signs it sits before the positioned picture. */ .bh-ph { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .25s ease; } .window > .bh-ph, .find__mapbox > .bh-ph { z-index: -1; } .bh-ph.is-done { opacity: 0; } .bh-ph__hen { position: relative; display: block; width: 45.4px; height: 52px; } .menu__sign-pic > .bh-ph .bh-ph__hen { width: 38.4px; height: 44px; } .bh-ph__hen > svg { display: block; width: 100%; height: 100%; overflow: visible; } .bh-ph__hen use { fill: #fff; stroke: #fff; stroke-width: 26px; stroke-linejoin: round; } .bh-ph__hen .bh-ph__shade { fill: rgba(0, 0, 0, .45); stroke: rgba(0, 0, 0, .45); } .bh-ph__hen .bh-hen__comb use { fill: #DA1F26; stroke: #DA1F26; stroke-width: 32px; } .bh-ph__hen { transform-origin: 39.8% 97.2%; animation: bh-nod 1.2s infinite; } @keyframes bh-nod { 0%, 44%, 50%, 94%, 100% { transform: rotate(0); } 12%, 62% { transform: rotate(2deg); animation-timing-function: cubic-bezier(.6, 0, 1, .5); } 25%, 75% { transform: rotate(-16deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } } /* ── Reduced motion: a still hen and gentle fades ───────────────── */ @media (prefers-reduced-motion: reduce) { .bh-loader__stage *, .bh-loader.is-out .bh-loader__stage, .bh-ph__hen { animation: none !important; } .bh-loader__grain i:nth-child(1) { transform: translate(0, 0); } .bh-loader__grain i:nth-child(2) { transform: translate(-1.3em, 0); } .bh-loader__grain i:nth-child(3) { transform: translate(-2.6em, 0); } /* style.css shortens every animation and transition to .001ms; keep the fades soft */ .bh-load--late .bh-loader__sheet { animation-duration: .25s !important; } .bh-loader.is-nav .bh-loader__sheet { animation-duration: .15s !important; } .bh-load .bh-loader.is-out { transition-duration: .35s, 0s !important; } }