/* VERT Metal for the web. Same material as the app (VertMetal.swift) and
   the admin portal (aga/portal/static/vert-metal.css): put
   data-metal="red|gunmetal|black|silver|white|tint" on any box and
   vert-metal.js paints the real shader grain behind its content.
     data-radial    discs and avatars (concentric grain)
     data-blasted   the bib (bead-blasted plate)
     data-rim="0"   no machined rim; "0.5" = half width
     data-metal-fixed      never remap in light mode
     data-light-plain      light mode: plain black, no metal (the bib)
   Until the canvas lands (or with JS off) a CSS gradient of the same
   finish stands in. Light mode follows the app: gunmetal and black
   render as silver, and ink on metal is always white. */

/* ---- faces (OFL, self-hosted subsets; licenses in /fonts) ---- */
@font-face {
  font-family: "VERT Identity";      /* Saira Italic, wdth 125, wght 800 */
  src: url(/fonts/vert-identity.woff2?v=1) format("woff2");
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "VERT LCD";           /* Doto, round dots, digits only */
  src: url(/fonts/vert-lcd.woff2?v=1) format("woff2");
  font-weight: 700; font-display: swap;
  unicode-range: U+20, U+22, U+25, U+27, U+2D-2E, U+30-39, U+2033;
}
@font-face {
  font-family: "VERT Drill";         /* Rajdhani SemiBold, digits only */
  src: url(/fonts/vert-drill.woff2?v=1) format("woff2");
  font-weight: 600; font-display: swap;
  unicode-range: U+20, U+22, U+25, U+27, U+2B-2F, U+30-3A, U+4B, U+4D,
    U+6B, U+2033;
}

/* ---- finishes: low / high / rim light / rim dark (VertMetalFinish) ---- */
[data-metal] {
  --vm-lo: #0e0d0e; --vm-hi: #757580;           /* gunmetal */
  --vm-rl: #9ea3ad; --vm-rd: #030305;
  --vm-ink: #fff;
  --vm-rim: 1;
}
[data-metal="silver"] {
  --vm-lo: #30353d; --vm-hi: #b5b9c3; --vm-rl: #d8dade; --vm-rd: #1a1d24;
}
[data-metal="red"] {
  --vm-lo: #5c080d; --vm-hi: #fa2e3d; --vm-rl: #f27070; --vm-rd: #240305;
}
[data-metal="black"] {
  --vm-lo: #010102; --vm-hi: #222429; --vm-rl: #757a85; --vm-rd: #000;
}
[data-metal="white"] {
  --vm-lo: #c7ccd6; --vm-hi: #fff; --vm-rl: #fff; --vm-rd: #999ea8;
  --vm-ink: #231f20;
}
[data-metal="tint"] {
  --vm-hi: var(--accent, #ed1c28);
  --vm-lo: color-mix(in srgb, var(--accent, #ed1c28) 38%, #000);
  --vm-rl: color-mix(in srgb, var(--accent, #ed1c28) 60%, #fff);
  --vm-rd: color-mix(in srgb, var(--accent, #ed1c28) 15%, #000);
}
@media (prefers-color-scheme: light) {
  [data-metal="gunmetal"]:not([data-metal-fixed]),
  [data-metal="black"]:not([data-metal-fixed]) {
    --vm-lo: #30353d; --vm-hi: #b5b9c3; --vm-rl: #d8dade; --vm-rd: #1a1d24;
  }
}
[data-metal][data-ink="dark"] { --vm-ink: #281a00; }  /* bright tints */
[data-rim="0.5"] { --vm-rim: .5; }

/* ---- the surface ---- */
[data-metal] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--vm-ink);
  background-color: color-mix(in oklab, var(--vm-lo) 50%, var(--vm-hi));
  /* Brushed stand-in: the soft ~70 deg reflection band, eased stops. */
  background-image: linear-gradient(110deg in oklab,
    color-mix(in oklab, var(--vm-hi) 40%, var(--vm-lo)) 0%,
    color-mix(in oklab, var(--vm-hi) 46%, var(--vm-lo)) 22%,
    color-mix(in oklab, var(--vm-hi) 58%, var(--vm-lo)) 38%,
    color-mix(in oklab, var(--vm-hi) 66%, var(--vm-lo)) 50%,
    color-mix(in oklab, var(--vm-hi) 58%, var(--vm-lo)) 62%,
    color-mix(in oklab, var(--vm-hi) 46%, var(--vm-lo)) 78%,
    color-mix(in oklab, var(--vm-hi) 40%, var(--vm-lo)) 100%);
}
[data-metal][data-radial]:not([data-radial="auto"]) {
  /* Radial stand-in: the bowtie along the light axis (71 deg). */
  background-image: conic-gradient(from 161deg in oklab,
    color-mix(in oklab, var(--vm-hi) 72%, var(--vm-lo)),
    color-mix(in oklab, var(--vm-hi) 42%, var(--vm-lo)) 25%,
    color-mix(in oklab, var(--vm-hi) 72%, var(--vm-lo)) 50%,
    color-mix(in oklab, var(--vm-hi) 42%, var(--vm-lo)) 75%,
    color-mix(in oklab, var(--vm-hi) 72%, var(--vm-lo)));
}
[data-metal][data-blasted] {
  /* Blasted stand-in: exposure from above. */
  background-image: linear-gradient(180deg in oklab,
    color-mix(in oklab, var(--vm-hi) 73%, var(--vm-lo)) 0%,
    color-mix(in oklab, var(--vm-hi) 60%, var(--vm-lo)) 45%,
    color-mix(in oklab, var(--vm-hi) 38%, var(--vm-lo)) 100%);
}
[data-metal] > canvas.vm-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  border-radius: inherit; pointer-events: none;
}
[data-metal] > :not(canvas) { position: relative; z-index: 2; }

/* Machined bevel rim: light edge on top, dark below (1.5pt stroke on the
   shape's edge, so ~0.75pt shows inside the clip, as in the app). */
[data-metal]::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  padding: calc(1px * var(--vm-rim));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--vm-rl) 95%, transparent) 0%,
    color-mix(in srgb, var(--vm-rl) 22%, transparent) 50%,
    color-mix(in srgb, var(--vm-rd) 90%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}
[data-metal][data-rim="0"]::after { content: none; }

/* Press: scale in + darken, like MetalButtonStyle (0.97, black 18%). */
a[data-metal], button[data-metal] {
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease-out, filter .12s ease-out;
}
a[data-metal]:active, button[data-metal]:active {
  transform: scale(.97);
  filter: brightness(.82);
}

/* Light mode bib: plain black, no metal (VertBib notch). */
@media (prefers-color-scheme: light) {
  [data-light-plain] { background: #000 !important; }
  [data-light-plain] > canvas.vm-canvas { display: none; }
}

/* Sub-LSB noise for eased dims and scrims (Apple gradient rule 3). */
:root {
  --vm-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .016'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vm-dither { background-image: var(--vm-noise); }

@media (prefers-reduced-motion: reduce) {
  a[data-metal], button[data-metal] { transition: none; }
}