/* ── THE GIANT EMBLEM ───────────────────────────────────────────────────────
   V, 2026-08-25: the DrawBridge emblem is a GIGANTIC, oversized element the
   size of the whole page background on the sign-in and sign-up doors, and it
   carries the holographic sheen that follows the pointer — the DrawBridge
   design language (prismatic pointer-reactive foil) applied to the door
   itself, so both screens have an interactive nuance before a field is
   touched.

   HOW IT IS PAINTED:
   * One fixed, full-viewport layer under the sheet, MASKED to the emblem
     artwork (app/static/brand/drawbridge-emblem.svg — the file declares no
     fill, so the mask is the only way to give it ink, exactly as the lockups
     are painted). Overscaled past the frame so the shape is read as a field,
     not a logo in a corner.
   * The ink is a foil: a rolled rainbow gradient blended over a dim base,
     plus a soft specular that stands where the light is. Four custom
     properties (--foil-x/--foil-y/--foil-turn/--foil-lift) are the WHOLE
     interface between emblem-foil.js and this file; at rest they paint a
     still, centred sheen — what a reader with no script, no fine pointer, or
     prefers-reduced-motion gets.
   * It never takes a pointer event and never blocks a reader; aria-hidden in
     the templates, pointer-events none here.
   * Calm-on-red: a browser that cannot mask paints NOTHING (the @supports
     guard drops the ink), never a coloured rectangle. */
.db-emblem-foil {
  --foil-x: 50%;
  --foil-y: 45%;
  --foil-turn: 120deg;
  --foil-lift: 0;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.db-emblem-foil::before,
.db-emblem-foil::after {
  content: "";
  position: absolute;
  /* Overscaled: the emblem is 1319:821, wider than tall; sized to 150% of the
     viewport's larger side and centred, so it always bleeds past every edge. */
  width: max(150vw, 150vh);
  aspect-ratio: 1319 / 821;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask: url("/static/brand/drawbridge-emblem.svg") no-repeat center / contain;
  mask: url("/static/brand/drawbridge-emblem.svg") no-repeat center / contain;
  will-change: background-position, opacity;
}
/* The foil layer. V, 2026-08-25: the GIANT elements are subtler than the
   card's foil and stay inside the DrawBridge family — greens and teals only,
   no rainbow. So this is the brand green rolled through its own neighbours
   (deep green → accent green → mint → teal → sea) and nothing else. */
.db-emblem-foil::before {
  background:
    radial-gradient(55% 55% at var(--foil-x) var(--foil-y),
      rgba(61, 226, 123, 0.06), transparent 70%),
    conic-gradient(from var(--foil-turn) at var(--foil-x) var(--foil-y),
      #1FA354 0deg, #3DE27B 70deg, #7CF0B6 130deg, #27D8C3 190deg,
      #1B9E8C 250deg, #14634A 310deg, #1FA354 360deg);
  opacity: calc(0.028 + 0.022 * var(--foil-lift));
}
/* The specular: one soft, cool highlight where the pointer is — mint, not
   white, so it reads as sheen on green rather than a torch. */
.db-emblem-foil::after {
  background:
    radial-gradient(28% 28% at var(--foil-x) var(--foil-y),
      rgba(160, 240, 205, 0.12), rgba(120, 220, 190, 0.03) 45%, transparent 72%);
  opacity: calc(0.20 + 0.40 * var(--foil-lift));
  mix-blend-mode: screen;
}
/* The doors' content stands above the emblem. */
.join-page > .join-sheet, .join-page > .join-done, .db-login-card { position: relative; z-index: 1; }

@supports not ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
  .db-emblem-foil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .db-emblem-foil::before, .db-emblem-foil::after { will-change: auto; }
}