/* ============================================================================
   TRIUMPH DESIGN SYSTEM v2 — pattern.css
   The interlocking-T woven "Pattern" element, done correctly.

   THE THREE RULES THAT MAKE IT WORK (all verified by edge-wrap + 4x4 render):
   1. Use a GENUINELY SEAMLESS tile. The only ones that are:
        triumph-pattern-fog.png  516x688  WHITE on transparent  -> DARK/navy surfaces
        triumph-pattern-navy.png 1600x1600 NAVY on transparent (square) -> LIGHT surfaces
      DO NOT repeat: triumph-weave-navy (360x480), the 229x305 swatch, or any
      "SQUARE CROP/TRIM" — measured NON-seamless, they seam every tile.
   2. background-size MUST preserve the tile's true aspect:
        fog tile  = 3:4  -> 516x688, 258x344, 165x220, 129x172 (height = width x 1.3333)
        navy tile = square -> e.g. 320x320, 400x400
      A single value or a non-3:4 pair squashes the motif -> distortion + seams.
   3. Keep the pattern on an OPT-IN ::before layer per band/panel, content in a
      z-index:1 sibling. Never on the global body.

   NEVER transform:rotate() a background:repeat to "make the diagonal" — that is
   the #1 historical failure (gaps / blobs / seam lines, different per surface).
   The tilt below works ONLY because the tile is truly seamless AND the layer is
   overscanned (inset:-30%) so rotation never drags a bare corner into view.
   ========================================================================== */

/* ---- 1. Full-bleed weave field on a DARK/navy surface --------------------
   Default promo background. Subtle behind text. Canonical -8deg tilt. */
.brand-field {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}
.brand-field > * { position: relative; z-index: 1; }
.brand-field::before {
  content: "";
  position: absolute;
  inset: min(-30%, -80px);          /* fixed -80px floor: % starves on short bands and the tilt bares corners */                                   /* overscan so the tilt never reveals a corner */
  background: var(--brand-pattern-white) repeat;
  background-size: var(--brand-pattern-size);    /* 165x220 = 3:4 of the 516x688 period */
  opacity: 0.08;                                 /* behind text: 0.05–0.08 */
  transform: rotate(-8deg);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 20%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

/* Flat (untilted) variant — zero risk, for plain full-bleed fills. */
.brand-field--flat { overflow: hidden; isolation: isolate; position: relative; background: var(--navy); }
.brand-field--flat > * { position: relative; z-index: 1; }
.brand-field--flat::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand-pattern-white) repeat;
  background-size: 258px 344px;                  /* 3:4 */
  opacity: 0.10;
  pointer-events: none; z-index: 0;
}

/* ---- 2. Accent band / strip (navy) --------------------------------------
   Fixed-height header/footer strip. Slightly louder since little text on it. */
.accent-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  color: var(--ink-on-navy);
}
.accent-band > * { position: relative; z-index: 1; }
.accent-band::before {
  content: "";
  position: absolute; inset: min(-30%, -80px);          /* fixed -80px floor: % starves on short bands and the tilt bares corners */
  background: var(--brand-pattern-white) repeat;
  background-size: 129px 172px;                  /* 3:4, denser for a compact strip */
  opacity: 0.14;
  transform: rotate(-8deg);
  transform-origin: center;
  pointer-events: none; z-index: 0;
}

/* ---- 3. Light-surface weave (navy ink on a light panel) -----------------
   Uses the SQUARE navy tile -> square background-size (NOT 3:4). */
.brand-field-light {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--fog);
  color: var(--ink);
}
.brand-field-light > * { position: relative; z-index: 1; }
.brand-field-light::before {
  content: "";
  position: absolute; inset: min(-30%, -80px);          /* fixed -80px floor: % starves on short bands and the tilt bares corners */
  background: var(--brand-pattern-navy) repeat;
  background-size: 340px 340px;                  /* SQUARE tile -> square size */
  opacity: 0.06;
  transform: rotate(-8deg);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent 80%);
          mask-image: linear-gradient(to bottom, #000 15%, transparent 80%);
  pointer-events: none; z-index: 0;
}

/* ---- 4. Whisper watermark (very low opacity, behind body content) -------- */
.brand-watermark { position: relative; isolation: isolate; }
.brand-watermark > * { position: relative; z-index: 1; }
.brand-watermark::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand-pattern-navy) repeat;
  background-size: 300px 300px;                  /* square tile -> square */
  opacity: 0.035;
  pointer-events: none; z-index: 0;
}

/* ---- Green gradient hero accent rule (the flyer underline) --------------- */
.accent-rule {
  height: 6px;
  width: 120px;
  border: 0;
  background: var(--grad-hero);                  /* lime -> dark green, never flip */
}