<details class="acc-drift" name="acc-drift" open>
  <summary>Northern Lights</summary>
  <p>Charged particles meet the upper atmosphere. The sky turns to ribbon.</p>
</details>
<details class="acc-drift" name="acc-drift">
  <summary>Solar Wind</summary>
  <p>A constant stream from the sun. Some nights it sings louder than others.</p>
</details>
<details class="acc-drift" name="acc-drift">
  <summary>Geomagnetic Storm</summary>
  <p>When the wind hits hard, the auroral oval expands south. Rare gift for lower latitudes.</p>
</details>

.acc-drift {
  position: relative; margin-bottom: 6px;
  background: #15151d; border-radius: 12px;
  border: 1px solid rgba(240,238,255,0.06);
  overflow: hidden;
}
.acc-drift::before {
  content: ''; position: absolute; inset: -50%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(156,123,214,0.5), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(143,179,163,0.4), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(212,154,92,0.35), transparent 60%);
  filter: blur(20px); opacity: 0;
  animation: acc-drift-roll 18s linear infinite;
  transition: opacity .4s;
  pointer-events: none;
}
.acc-drift 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-drift summary::-webkit-details-marker { display: none; }
.acc-drift[open]::before { opacity: 0.7; }
.acc-drift[open] > summary { color: #f0eeff; }
.acc-drift p {
  margin: 0; padding: 0 16px 14px; position: relative; z-index: 2;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.7);
}
@keyframes acc-drift-roll {
  0%   { transform: translate(0,0) rotate(0); }
  100% { transform: translate(8%,-6%) rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
  .acc-drift::before { animation: none; }
}