/* HERO OVERLAY — brand mark and photo credit laid over a full-bleed image.
 *
 * These used to be burned into the hero JPEG, which meant they were cropped
 * with the photo, could not be themed, and cost image detail. As real elements
 * they hold their corner at every viewport and scroll away on their own.
 *
 * The layer is driven by one custom property, --ab-ov-p (0 = fully visible,
 * 1 = gone), which js/overlay.js writes on scroll. Keeping the animation in
 * CSS means the scroll handler only ever sets a number — no layout reads per
 * frame, and the overlay still renders correctly if that script never runs.
 *
 * That is the "fade" scroll style. Under the default "static" style (admin →
 * Landing Page) the layer carries .ab-overlay-static instead: nothing is bound
 * to scroll, and the mark simply holds its corner over the hero until the
 * section sliding up over it covers it. Logo size is the responsive default
 * scaled by --ab-ov-logo-scale, also set from the admin.
 */

.ab-overlay {
  --ab-ov-p: 0;
  /* Clears the fixed site header, which is ~44px tall. */
  --ab-ov-top: 56px;
  --ab-ov-bottom: 24px;
  --ab-ov-x: 20px;

  position: absolute;
  inset: 0;
  z-index: 2;                 /* above the image and its scrim, above hero copy */
  pointer-events: none;       /* never intercepts a tap meant for the hero CTA */
  opacity: calc(1 - var(--ab-ov-p));
  transform: translate3d(0, calc(var(--ab-ov-p) * -20px), 0);
  will-change: opacity, transform;
}

.ab-overlay-item { position: absolute; margin: 0; }

.ab-overlay-item[data-pos="top-left"]     { top: var(--ab-ov-top);       left:  var(--ab-ov-x); }
.ab-overlay-item[data-pos="top-right"]    { top: var(--ab-ov-top);       right: var(--ab-ov-x); }
.ab-overlay-item[data-pos="bottom-left"]  { bottom: var(--ab-ov-bottom); left:  var(--ab-ov-x); }
.ab-overlay-item[data-pos="bottom-right"] { bottom: var(--ab-ov-bottom); right: var(--ab-ov-x); }

/* ── Brand mark ─────────────────────────────────────────────────────────── */

.ab-overlay-logo img,
.ab-overlay-logo picture { display: block; }

.ab-overlay-logo img {
  /* The mark scales with the screen like the rest of the hero; the admin's
     size control multiplies that ladder rather than replacing it with a fixed
     width, so 50% is half as big on a phone and on a booth screen alike. */
  width: calc(clamp(56px, 13vw, 96px) * var(--ab-ov-logo-scale, 1));
  height: auto;
  /* The mark sits on a photograph whose brightness is not ours to control, so
     it carries its own separation rather than relying on the hero scrim. */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* Stand-in until a logo file is uploaded — styled to match .hdr-wordmark so a
   missing asset reads as a deliberate wordmark rather than a broken image. */
.ab-overlay-wordmark {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

/* ── Photo credit ───────────────────────────────────────────────────────── */

.ab-overlay-credit {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

/* Static style — the mark holds still and scrolls out under the next section
   rather than fading. Belt and braces: no scroll handler is bound in this
   mode, so the custom property is never written, but pinning the values here
   means a stale --ab-ov-p from a re-mount cannot dim a static overlay. */
.ab-overlay.ab-overlay-static { opacity: 1; transform: none; will-change: auto; }

/* ── Motion ─────────────────────────────────────────────────────────────── */

/* The drift is decoration; the fade is what communicates "this is leaving".
   Reduced motion keeps the fade and drops the movement. */
@media (prefers-reduced-motion: reduce) {
  .ab-overlay { transform: none; will-change: opacity; }
}