/* Footer wordmark in brushed aluminium (sections/footer.js moves the light).
   Layers, top to bottom: a narrow vertical streak (brushed metal smears a highlight across the grain), a broad sheen
   around it, the horizontal grain, and the room's reflection as soft bands. Without JS the light simply rests at --lx/--ly. */
.bigmark[data-metal] {
  --lx: 30%; --ly: 40%;
  --m-0: #7e8186; --m-1: #c4c7cb; --m-2: #8c8f94; --m-3: #4e5156; --m-4: #7b7e83;
  --m-spec: #f1f2f4; --m-sheen: rgba(255, 255, 255, 0.28); /* never pure white: on a white page it would erase the letter edges */
  --m-rim: rgba(0, 0, 0, 0.22); --m-shade: rgba(0, 0, 0, 0.12); /* on white, the edges are defined by shade, not light */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bigmark[data-metal] {
    --m-0: #4c4f54; --m-1: #9da0a5; --m-2: #6f7277; --m-3: #3a3c40; --m-4: #6a6d72;
    --m-spec: rgba(255, 255, 255, 0.85); --m-sheen: rgba(220, 226, 236, 0.22);
    --m-rim: rgba(255, 255, 255, 0.28); --m-shade: rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] .bigmark[data-metal] {
  --m-0: #4c4f54; --m-1: #9da0a5; --m-2: #6f7277; --m-3: #3a3c40; --m-4: #6a6d72;
  --m-spec: rgba(255, 255, 255, 0.85); --m-sheen: rgba(220, 226, 236, 0.22);
  --m-rim: rgba(255, 255, 255, 0.28); --m-shade: rgba(0, 0, 0, 0.7);
}

.bigmark[data-metal] span { color: #8e9196; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bigmark[data-metal] span {
    /* glyphs overshoot the 0.8 line box; extend the painted area without moving anything */
    padding-block: 0.12em; margin-block: -0.12em;
    padding-inline-end: 0.055em; /* the last letter's ink runs past the box by the negative tracking; give it room so the "t" isn't cut */
    background:
      radial-gradient(ellipse 7% 90% at var(--lx) var(--ly), var(--m-spec), transparent 72%),
      radial-gradient(ellipse 30% 150% at var(--lx) var(--ly), var(--m-sheen), transparent 70%),
      url("footer/brush.svg") 0 0 / 640px 320px,
      linear-gradient(180deg, var(--m-0) 14%, var(--m-1) 42%, var(--m-2) 52%, var(--m-3) 78%, var(--m-4) 90%);
    background-blend-mode: normal, normal, overlay, normal;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    /* the chamfers: a lit top edge and a shaded lower edge, sized with the type */
    filter: drop-shadow(0 -0.0035em 0 var(--m-rim)) drop-shadow(0 0.005em 0.003em var(--m-shade));
  }
}