<details class="acc-holo" name="acc-holo" open>
  <summary>Foil A · Aurora</summary>
  <p>Cool ribbon of violet to cyan, sweeping at 20 degrees. Catches light at any angle.</p>
</details>
<details class="acc-holo" name="acc-holo">
  <summary>Foil B · Copper</summary>
  <p>Warm metallic with a soft inner glow. Reads premium without going gold.</p>
</details>
<details class="acc-holo" name="acc-holo">
  <summary>Foil C · Mint</summary>
  <p>Cooler than gold, less corporate than silver. Quiet and confident.</p>
</details>

.acc-holo {
  background: #15151d; border: 1px solid rgba(240,238,255,0.06);
  border-radius: 10px; margin-bottom: 6px; overflow: hidden;
  position: relative;
}
.acc-holo summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; color: rgba(240,238,255,0.7);
  position: relative; z-index: 2;
}
.acc-holo summary::-webkit-details-marker { display: none; }
.acc-holo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg,
    transparent 30%, rgba(156,123,214,0.4) 45%,
    rgba(212,154,92,0.4) 55%, rgba(143,179,163,0.4) 65%,
    transparent 80%);
  background-size: 250% 100%; background-position: 100% 0;
  opacity: 0; transition: opacity .35s, background-position 1.6s ease-out;
}
.acc-holo[open] { border-color: rgba(212,154,92,0.4); }
.acc-holo[open]::before { opacity: 1; background-position: 0% 0; }
.acc-holo[open] > summary { color: #f0eeff; }
.acc-holo p {
  margin: 0; padding: 0 16px 14px; position: relative; z-index: 2;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
}