<div class="acc-aur">
  <input type="radio" name="aur" id="aur-1" checked />
  <input type="radio" name="aur" id="aur-2" />
  <input type="radio" name="aur" id="aur-3" />
  <label for="aur-1" class="acc-aur__c">
    <span class="acc-aur__l">North</span>
    <span class="acc-aur__d">Cold violet ribbon, 22:00 local</span>
  </label>
  <label for="aur-2" class="acc-aur__c">
    <span class="acc-aur__l">East</span>
    <span class="acc-aur__d">Warm copper veil, 23:30 local</span>
  </label>
  <label for="aur-3" class="acc-aur__c">
    <span class="acc-aur__l">West</span>
    <span class="acc-aur__d">Soft sage glow, 01:00 local</span>
  </label>
</div>

.acc-aur {
  display: flex; gap: 4px; height: 220px;
  border-radius: 12px; overflow: hidden;
}
.acc-aur > input { display: none; }
.acc-aur__c {
  flex: 1; cursor: pointer; padding: 16px; position: relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(156,123,214,0.5), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(212,154,92,0.4), transparent 60%),
    #15151d;
  background-size: 220% 220%, 240% 240%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  filter: brightness(0.55) saturate(0.8);
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .35s, background-position 6s linear;
}
.acc-aur__c:nth-of-type(2) {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(212,154,92,0.55), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(143,179,163,0.4), transparent 60%),
    #15151d;
}
.acc-aur__c:nth-of-type(3) {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(143,179,163,0.55), transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(156,123,214,0.4), transparent 60%),
    #15151d;
}
.acc-aur__l { font: 800 12px/1 system-ui; letter-spacing: 0.16em; color: rgba(240,238,255,0.85); }
.acc-aur__d { font: 11px/1.55 system-ui; color: rgba(240,238,255,0.55); margin-top: 6px;
  opacity: 0; transition: opacity .3s .15s; }
#aur-1:checked ~ [for="aur-1"],
#aur-2:checked ~ [for="aur-2"],
#aur-3:checked ~ [for="aur-3"] {
  flex: 4; filter: brightness(1.05) saturate(1.1);
  background-position: 100% 100%, 0% 0%, 0 0;
}
#aur-1:checked ~ [for="aur-1"] .acc-aur__d,
#aur-2:checked ~ [for="aur-2"] .acc-aur__d,
#aur-3:checked ~ [for="aur-3"] .acc-aur__d { opacity: 1; }