/*
 * The gate's brand reveal (templates/partials/brand-reveal.php): the Bushwick Daily wordmark, the full width of the
 * yellow gate block, directly under the block's wave edge, rising from behind the wave. Loaded only on pages that load
 * the gate's own stylesheet (includes/brand-reveal.php), in <head>, so the band has its size at first paint.
 *
 * Journalism purpose: the free part of a gated story ends on the paper's own masthead, so the ask for money comes from
 * a named Bushwick publication.
 *
 * Design: mockup A, approved by the owner 2026-10-13: docs/paywall/design/mockups/modes.css, section "the brand
 * reveal" (.bdx-reveal, .bdx-reveal__wave, .bdx-reveal__mark), markup from docs/paywall/design/build_modes.py (WAVE,
 * build()). Mechanism: Hell Gate (docs/paywall/research/27-gate-takeover-observed/REPORT.md, Addendum):
 * `#footer-name{transition:transform .5s ease}` `.shift{transform:translateY(-6vw)}`, a wave in front of the wordmark.
 *
 * Where the wave is: on the BLOCK, not here. assets/bd-membership.css `.bd-cut > .bd-gate::after` draws the block's
 * own wavy lower edge (mockup A's .bdx-reveal__wave path and height, as a mask on the block's yellow), hanging below
 * the card by --bdm-cut-wave, at z-index 1. This band is pulled up under it by exactly that height, so:
 *   - the band touches the block (the block's reserved margin-bottom +wave and this band's margin-top -wave collapse
 *     to 0: CSS 2.2 8.3.1, one positive and one negative adjoining margin = their sum);
 *   - the band is the block's width: edge to edge on phones, the block's width on desktop (the same -bleed margins
 *     as the card, bd-membership.css .bd-cut);
 *   - the wave lies over the top of the letters: the band is a stacking context at z-index 0, the wave is at
 *     z-index 1 in the same parent context.
 *
 * Geometry, mockup A's (.bdx-reveal) with its 100vw replaced by the block's width B (the band's own width here):
 *   wave height  W = clamp(26px, 5.5% of B, 84px)            (.bdx-reveal --bdx-wave: clamp(26px, 5.5vw, 84px))
 *   letters top  .64 W below the band's top                 (.bdx-reveal padding-top: calc(var(--bdx-wave) * .64))
 *   sides        max(1rem, 2.2% of B)                       (.bdx-reveal padding-inline: max(1rem, 2.2vw))
 *   foot         max(1.1rem, 2.4% of B)                     (.bdx-reveal padding-bottom: max(1.1rem, 2.4vw))
 * Every % below is of the band's content width = B (the band has no padding; margins on the mark resolve against it).
 *
 * The rise: 6% of B (6cqw: the band is the size container), Hell Gate's -6vw on a wordmark that is 100vw wide. On a
 * phone B is the viewport, so this is mockup A's translateY(6vw) exactly; on desktop the block is narrower than the
 * viewport and 6vw would sink the letters 86px into a 120px mark at 1440px. Engines without container units (Safari
 * < 16, Chrome < 105) use 6vw, mockup A's literal value.
 *
 * States (bd-reveal.js adds the classes; the default is the FINAL state, so no JS, no IntersectionObserver, a script
 * that failed to load, or a band already on screen when the script runs all show the letters up):
 *   .bd-reveal                          the letters up (final)
 *   .bd-reveal.is-armed                 lowered by 6% of B, their foot clipped by the band (overflow: hidden)
 *   .bd-reveal.is-armed.is-revealed     up again with transition: transform .5s ease
 * Arming has no transition (the band is below the screen when it is armed). Transforms move nothing else on the page
 * and are not layout shifts; the band's height is the mark's (aspect-ratio 447 / 65 of a width fixed by B) plus fixed
 * margins, all known at first paint, so CLS from the band is 0.
 */
.bd-reveal {
  position: relative;
  z-index: 0;                    /* a stacking context under the block's wave (z-index 1) */
  display: block;
  margin: 0 0 2.75rem;           /* outside the cut only (no wave above it): single.php:654 .bd-member-band margin */
  padding: 0;
  overflow: hidden;              /* the lowered letters' foot is clipped by the band */
  container-type: inline-size;   /* 6cqw = 6% of the band's width */
  background: var(--bg-primary, #0a0a0a);   /* single.php:183; mockup A .bdx-reveal background: var(--bdx-ink) */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Directly under the block (bd-membership.css .bd-cut > .bd-gate): the block's width, and pulled up under its wave.
   --bdm-cut-wave and --bdm-cut-bleed are set on .bd-cut; their % resolve against .bd-cut's width, as the card's do. */
.bd-cut > .bd-gate + .bd-reveal {
  margin: calc(-1 * var(--bdm-cut-wave)) calc(-1 * var(--bdm-cut-bleed)) 0;
}

.bd-reveal__mark {
  display: block;
  width: calc(100% - 2 * max(1rem, 2.2%));
  max-width: none;
  height: auto;
  aspect-ratio: 447 / 65;        /* the partial's viewBox: the band's height is known before the SVG is laid out */
  margin: calc(clamp(26px, 5.5%, 84px) * .64) auto max(1.1rem, 2.4%);
  overflow: visible;
}

.bd-reveal.is-armed .bd-reveal__mark {
  transform: translateY(6vw);    /* no container units: mockup A's literal value (exact on phones) */
  transform: translateY(6cqw);   /* 6% of the band's width */
}
.bd-reveal.is-armed.is-revealed .bd-reveal__mark {
  transform: none;
  transition: transform .5s ease;
}

/* Reduced motion: the final position, static, whatever the script does. */
@media (prefers-reduced-motion: reduce) {
  .bd-reveal.is-armed .bd-reveal__mark,
  .bd-reveal.is-armed.is-revealed .bd-reveal__mark {
    transform: none;
    transition: none;
  }
}