/* One holographic material shared across Dent-X pass surfaces. */
.dx-ds .dx-foil { --foil-x: 50%; --foil-y: 30%; --foil-shift: 0%; position: relative; isolation: isolate; overflow: hidden; background: #380a19; }
.dx-ds .dx-foil::before {
  content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,rgba(35,5,15,.55),transparent 28%,rgba(35,5,15,.2) 46%,#2c0613 88%),
    radial-gradient(ellipse at var(--foil-x) var(--foil-y),rgba(246,224,115,.36),transparent 60%),
    conic-gradient(from 125deg at 72% 36%,#380a19 0deg,#774b49 42deg,#526870 80deg,#77504e 125deg,#380a19 170deg,#856b38 215deg,#545a74 265deg,#653747 310deg,#380a19);
}
.dx-ds .dx-foil::after {
  content: ""; position: absolute; z-index: -1; inset: -50%; pointer-events: none;
  background: linear-gradient(115deg,transparent 32%,rgba(227,239,202,.22) 42%,rgba(232,199,237,.38) 47%,rgba(205,239,244,.28) 52%,transparent 63%);
  transform: translateX(var(--foil-shift)); mix-blend-mode: screen;
  mask-image: linear-gradient(transparent 20%,#000 36%,#000 48%,transparent 68%);
}
.dx-ds .dx-foil-number {
  color: var(--dx-gold); background: linear-gradient(125deg,#fbefab 5%,#f6e073 24%,#e6c5e9 43%,#bde8e3 55%,#f6e073 72%,#fff2cb 90%);
  background-size: 200% 200%; background-position: var(--foil-x) var(--foil-y);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dx-ds .dx-foil-orbit {
  background: repeating-radial-gradient(ellipse at center,transparent 0 4px,rgba(246,232,178,.3) 4.5px 5px,transparent 5.5px 9px);
  mask: radial-gradient(ellipse at center,transparent 40%,#000 42%,#000 68%,transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .dx-ds .dx-foil.is-reflecting::after { animation: dxp-foil-reflection 900ms ease-out; }
  @keyframes dxp-foil-reflection { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
}