/* Full-screen backdrop, built from HFFH's traced logo (public/img/hffh-*.svg,
   made by images/trace-logo.py).

   body.paper  every HFFH page — their cream with the heart-and-cats mark as a
               faint letterhead pattern.
   body.front  the front door (sign-in, sign-up, the public report form) adds
               their full-colour logo at the top, as they'd print it.

   A night-sky version (lit heart, stars, fireflies) was tried and dropped —
   Andy: "get rid of the space vibes". The look demo is still proto/bg.html.
   Content always sits on cards, so the pattern never sits behind body text. */

.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero{display:none}

/* ---------- paper ---------- */
body.paper{background:var(--ground)}
body.paper .backdrop{background:var(--ground)}
body.paper .backdrop .tile{position:absolute;inset:0;background:var(--marsh);opacity:.06;
  -webkit-mask-image:url(img/hffh-pattern.svg);mask-image:url(img/hffh-pattern.svg);
  -webkit-mask-size:220px 220px;mask-size:220px 220px;-webkit-mask-repeat:repeat;mask-repeat:repeat}

/* ---------- front door: the logo, then the card ---------- */
/* One big faint heart-and-cats behind the card, in place of the small
   repeating pattern. Fixed, so it stays put while the form scrolls. */
.backdrop .big{display:none}
body.front .backdrop .tile{display:none}
body.front .backdrop .big{display:block;position:absolute;left:50%;top:0;
  width:min(128vw,1020px);aspect-ratio:1676/1851;transform:translate(-50%,-7%);
  -webkit-mask:url(img/hffh-mark.svg) center/contain no-repeat;mask:url(img/hffh-mark.svg) center/contain no-repeat;
  background:var(--marsh);opacity:.07}
/* On a phone the card covers nearly everything, so the mark sits lower: its
   heart frames the logo from the sides and its cats stay behind the card
   rather than behind the lettering. */
@media (max-width:640px){body.front .backdrop .big{transform:translate(-50%,16%);opacity:.055}}
body.front .hero{display:flex;justify-content:center;padding:4px 0 20px}
.hero .hlogo{display:block;width:min(210px,56vw);height:auto}
/* the masthead's small logo + name would repeat the big one */
body.front header.mast .logo, body.front header.mast .mark{display:none}
body.front header.mast{border-bottom:none;padding-block:10px 0}
/* Their logo is black cats on cream: on a dark page it sits on its own cream
   panel, or the cats disappear. */
:root[data-theme="dark"] body.front .hero .hlogo{background:#F7F4ED;border-radius:16px;padding:14px 16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.front .hero .hlogo{
  background:#F7F4ED;border-radius:16px;padding:14px 16px}}

/* mid-way through the report form: back to the small masthead, so each
   question sits near the top of the screen */
body.front.stepping .hero{display:none}
body.front.stepping header.mast .logo{display:block}
body.front.stepping header.mast .mark{display:inline}
body.front.stepping header.mast{border-bottom:1px solid var(--line);padding-block:22px 14px}

@media print{.backdrop,.hero{display:none!important} body.paper{background:#fff}}