/* Shared metallic lettering for POST-QUANTUM ROADMAP. */
.metal-title {
  --metal-x: -120px;
  display: block;
  width: max-content;
  max-width: 100%;
  isolation: isolate;
}

.metal-title .lead {
  position: relative;
  width: max-content;
  max-width: 100%;
}

.metal-lettering { color: var(--orange); padding-right: 0.08em; margin-right: -0.08em; }
.metal-glint { display: none; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .metal-lettering {
    display: block;
    background-image:
      repeating-linear-gradient(0deg, rgba(255, 238, 209, 0.035) 0 0.5px, transparent 0.5px 3px),
      linear-gradient(174deg, #ff8b31 0%, #ff6c06 29%, #ff9850 43%, #ffd7a0 47%, #d44900 49%, #f15a00 57%, #ff780e 78%, #d44b00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(158, 57, 0, 0.62)) drop-shadow(0 -0.5px 0 #fff0dc);
  }

  .metal-glint {
    position: absolute;
    inset: 0 -0.08em 0 0;
    display: block;
    pointer-events: none;
    user-select: none;
    color: transparent;
    background-image: linear-gradient(112deg,
      transparent calc(var(--metal-x) - var(--metal-offset, 0px) - 58px),
      rgba(255, 218, 160, 0.08) calc(var(--metal-x) - var(--metal-offset, 0px) - 32px),
      rgba(255, 247, 224, 0.58) calc(var(--metal-x) - var(--metal-offset, 0px) - 8px),
      #fffef8 calc(var(--metal-x) - var(--metal-offset, 0px) - 1px),
      #fffef8 calc(var(--metal-x) - var(--metal-offset, 0px) + 2px),
      rgba(255, 246, 220, 0.76) calc(var(--metal-x) - var(--metal-offset, 0px) + 5px),
      rgba(255, 210, 134, 0.14) calc(var(--metal-x) - var(--metal-offset, 0px) + 23px),
      transparent calc(var(--metal-x) - var(--metal-offset, 0px) + 58px));
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    filter: drop-shadow(0 0 3px rgba(255, 209, 135, 0.34));
    transition: opacity 260ms ease;
  }

  .metal-title.is-lit .metal-glint { opacity: 1; }
}



@media (prefers-reduced-motion: reduce), (hover: none) {
  .metal-glint { display: none; }
}

@media (forced-colors: active) {
  .metal-lettering { background: none; color: CanvasText; filter: none; }
  .metal-glint { display: none; }
}