/* animations.css — one restrained effect: sections fade up as they enter the viewport.
   Transform and opacity only, so it never causes layout work. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
/* ---------- wordmark sweep ----------
   A single band of warm light travels across the letterforms once, on load, and is then
   gone. It is the animated version of the logo treatment, rebuilt in CSS rather than
   shipped as the GIF, because a GIF of this is about 55KB, is fixed to one size and one
   background, and goes soft on a retina screen. This costs nothing and stays sharp.

   HOW IT WORKS, because it is not obvious. The logo in the header is an <img> pointing at
   an SVG, and page CSS cannot reach inside an <img> to style it. So instead a pseudo-
   element is laid exactly over the top of it, given the SAME SVG as a mask, and filled with
   a moving gradient. The mask means the light only ever appears on the glyph shapes: the
   bar and the letters. Everywhere else the pseudo-element is transparent and the logo
   underneath shows through untouched.

   VERIFIED ON THE LIVE SITE, not assumed. The concern was that an SVG used as a mask
   renders without external fonts, so its <text> could fall back to a different typeface and
   the light would land beside the letters rather than on them. It does not: an <img> of the
   same SVG renders under the same restriction, so the two agree exactly. Checked by filling
   the mask with solid red on the live page and confirming it covered the letterforms and
   nothing else. If the wordmark is ever converted to outlines, this stays correct.

   .brand{position:relative} lives here rather than in layout.css so the whole effect is one
   file and can be added or removed in a single upload. animations.css loads after
   layout.css, so it wins.

   THE LIGHT IS COPPER, NOT WHITE. The first version swept a warm white highlight, which is
   what a "shine" normally is. On this wordmark it was invisible: the letters are already
   #E9EAEC, so a near-white band passing over near-white text has almost nothing to show.
   Copper is the one colour on this site that differs from the letterforms enough to read,
   and it is the brand accent, so the sweep now tints the letters copper as it passes.

   THE NUMBERS ARE MEASURED, NOT DERIVED. Percentage background-position is not a position
   along the element: it resolves against (element width minus image width), so with a
   background wider than the element the whole thing runs BACKWARDS and much further than
   expected. A first attempt at 320% background-size travelled about seven logo-widths, right
   to left, with a band four times wider than intended. Keeping the gradient NARROWER than
   the element (50%) makes the percentages behave the way anyone would assume: -80% is off
   the left, 180% is off the right, and it travels left to right. Both endpoints were checked
   on the live page and show the wordmark completely untouched.

   Fill mode `both` holds that clean final state. It never loops and never asks for attention
   twice. */
.brand{position:relative}
.brand::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:url(../images/logo-wordmark.svg);mask-image:url(../images/logo-wordmark.svg);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  background-image:linear-gradient(100deg,
    rgba(200,139,74,0) 24%,
    rgba(200,139,74,1) 50%,
    rgba(200,139,74,0) 76%);
  background-size:50% 100%;background-repeat:no-repeat;
  animation:brand-sweep 1.15s cubic-bezier(.33,0,.2,1) .45s 1 both}
@keyframes brand-sweep{from{background-position:-80% 0}to{background-position:180% 0}}

/* Anyone who has asked their system to reduce motion sees no movement at all. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  /* The blanket rule above would leave the sweep frozen mid-frame as a permanent bright
     smear across the wordmark, which is worse than the animation. Remove it outright. */
  .brand::after{display:none}
}