/* home-walk.css: the home page's walk, from the owner's styling pass of 20 October 2026. Three things: the route winds
   (route.py draws it), the opening on a laptop with a mouse pulls back from the clip into the map, and the first hedge stands
   over the map instead of on a green band. A phone keeps the plain opening. Every animation here is driven by the scroll and
   moves transform, opacity or visibility only, under the same reduced-motion gate as the page's own (tests/site/gates.test.ts). */

/* The map at its drawn size on every map section, tiling downwards and multiplied with the paper ground (the owner, 20 Oct 2026:
   the map was too zoomed in; the older faded paper). Later than the page's own rules, so it wins at equal specificity. */
[data-run], [data-run] .cover::before { background-repeat: repeat-y; background-blend-mode: multiply; }

/* The path that leaves the pub exists only with the pull-back. */
.rt-leave { display: none; }

/* 1. The winding route: its rules are in shared-chrome.css now, so the two inner pages that have a route wind too. */

/* 2. The opening on a laptop with a mouse. The first screen is pinned for a screen and a bit while the clip pulls back into a
   postcard lying on the map, which is the same sheet the sections below carry, placed so it runs on without a break. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (pointer: fine) {
    @keyframes walk-card { from { transform: translate(0, 0) scale(1); } to { transform: translate(var(--card-x), var(--card-y)) scale(var(--card-k)); } }
    @keyframes walk-frame { from { opacity: 0; } to { opacity: 1; } }
    @keyframes walk-hide { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
    @keyframes walk-panel { from { transform: translateY(0); } to { transform: translateY(-70svh); } }
    /* no inset: the page's 80 px scroll padding (room for the bar when a link jumps to a section) would otherwise count as
       already scrolled, and the panel would open 100 px up, under the bar (the owner, 20 Oct 2026) */
    .first { display: block; block-size: 230svh; overflow: clip; view-timeline-inset: 0; --card-k: .36; --card-x: 32vw; --card-y: 30svh; }
    .stage {
      display: block; position: sticky; top: 0; block-size: 100svh; overflow: clip;
      background: var(--mapground) var(--run-2) 50% calc(100svh + .42 * var(--hh)) / max(var(--sheet-w), 100%) auto repeat-y;
      background-blend-mode: multiply;
    }
    .la { position: absolute; inset: 0; block-size: auto; min-block-size: 0; transform-origin: 0 0; animation: walk-card linear both; animation-timeline: --first; animation-range: contain 37% contain 78%; }
    .la::after { content: ""; position: absolute; inset: 0; border: 28px solid var(--paper); box-shadow: 0 30px 60px var(--ink-shade); opacity: 0; pointer-events: none; animation: walk-frame linear both; animation-timeline: --first; animation-range: contain 60% contain 78%; }
    /* the panel follows the stage in the flow, pulled up over the pinned stage; it leaves a little faster than the page, so the
       words are gone before the picture pulls back (its h1 keeps no animation of its own: the first-paint gate) */
    .panel { margin: calc(112px - 100svh) 0 0 var(--gut); animation: walk-panel linear both; animation-timeline: --first; animation-range: contain 0% contain 40%; }
    .vbtn { top: auto; bottom: 28px; animation: walk-hide linear both; animation-timeline: --first; animation-range: contain 30% contain 38%; }
    /* the bar turns to paper while the stage is still pinned, once the map is behind the card */
    .home .bar::before, .home .fl::before, .home .fl::after, .home .mark .pd, .home .mark .pi { animation-range: contain 42% contain 52%; }
    /* the first hedge stands over the map: in place of its green band it carries the same sheet, placed so the map runs on
       under its plants (its top is .72 of its height above the first map section; the page's paper showed through before) */
    .hedge[data-hedge="a"] {
      background: var(--mapground) var(--run-2) 50% calc(.72 * var(--hh)) / max(var(--sheet-w), 100%) auto repeat-y;
      background-blend-mode: multiply;
    }
    .hedge[data-hedge="a"] .rt line { stroke: var(--orange); stroke-opacity: .4; stroke-width: 8; }
    /* the walk leaves the pub: a path from the postcard's foot to the route at the hedge, laid with footprints like the rest */
    .first .rt-leave { display: block; left: 0; width: 100%; top: calc(130svh + var(--card-y) + 100svh * var(--card-k)); height: calc(100svh - var(--card-y) - 100svh * var(--card-k)); }
    .first .rt-leave path { stroke: var(--orange); stroke-opacity: .4; stroke-width: 8; }
  }
}

/* After "Keep Facebook. Give your pub a home of its own." the map ran empty for a screen's third before the plans: a leftover of
   the sections that once sat there (the owner's styling pass, 20 Oct 2026). The breath stays, the void goes. */
#why { padding-block-end: 88px; }
@media (max-width: 63.99rem) { #why { padding-block-end: 56px; } }

/* The title's size follows the screen's height, but the panel stops at 600 px wide, so on a tall laptop window the title broke
   a word a line (the owner, 20 Oct 2026). Capped by the panel's width too: "Your pub's online" is 7.13 times as wide as the
   type is tall, so it and "presence, sorted" keep to two lines at every width. */
@media (min-width: 64rem) {
  .first .panel h1 { font-size: max(3rem, min(clamp(3rem, 1.6rem + 5vw, 6.75rem), 7.6svh, (min(600px, 46vw) - 88px) / 7.4)); }
}

/* The hops under the first hedge showed only a strip: the hedge's sheet hid their vine and the old shape cut through their cones
   (the owner, 20 Oct 2026: "the hops on the left underneath are cut off"). They hang whole from the hedge's foot, in front of it. */
#two-sides .hop { z-index: 6; clip-path: none; }