/* Soul Song Awakening concept: shared tokens, type and the fire-circle component */
:root{
  --night:#1a0f22; --night2:#24142e; --plum:#3a1d4a; --plum2:#4d2861;
  --ember:#f0862e; --gold:#f5c45a; --rose:#d93f8e; --violet:#9a5fd6;
  --leaf:#2e6b4f; --leaf2:#a9d6b5;
  --smoke:#f1e8f3; --haze:#bcaac6;
  --phoenix:linear-gradient(100deg,#f5c45a 0%,#f0862e 38%,#d93f8e 78%,#9a5fd6 100%);
  --serif:"Alegreya",Georgia,"Times New Roman",serif;
  --sans:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
  --hand:"Caveat","Segoe Script",cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- the circle ---------- */
.ring{position:relative;width:100%;max-width:640px;aspect-ratio:1;margin-inline:auto}
.ring .seat{position:absolute;width:3.1%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  border:1.5px solid rgba(188,170,198,.55);background:transparent}
.ring .seat.held{border-color:transparent;background:radial-gradient(circle at 40% 35%,#ffe7a8,var(--ember) 55%,#b8431d);
  box-shadow:0 0 10px 2px rgba(240,134,46,.55)}
.ring .seat[data-p]{cursor:pointer}
.ring .seat[data-p]:hover,.ring .seat[data-p]:focus-visible{transform:translate(-50%,-50%) scale(1.5)}
.ring .carrier{position:absolute;width:12.5%;aspect-ratio:1;padding:0;border-radius:50%;transform:translate(-50%,-50%);
  border:2px solid var(--gold);background:var(--plum);overflow:hidden;transition:transform .18s,box-shadow .18s}
.ring .carrier img{width:100%;height:100%;object-fit:cover}
.ring .carrier:hover,.ring .carrier[aria-pressed="true"]{transform:translate(-50%,-50%) scale(1.22);z-index:2;
  box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--rose),0 0 24px rgba(217,63,142,.6)}
.ring .fire{position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%)}
.ring .fire::before{content:"";position:absolute;inset:-130%;border-radius:50%;
  background:radial-gradient(circle,rgba(240,134,46,.34),rgba(217,63,142,.13) 38%,transparent 66%);animation:glow 3.2s ease-in-out infinite}
.ring .fire i{position:absolute;left:50%;bottom:26%;width:50%;aspect-ratio:1;margin-left:-25%;border-radius:0 58% 58% 58%;
  transform-origin:70% 70%;transform:rotate(45deg);background:linear-gradient(135deg,var(--gold),var(--ember) 45%,var(--rose));
  filter:blur(1px);animation:flick 1.3s ease-in-out infinite}
.ring .fire i:nth-child(2){width:32%;margin-left:-34%;bottom:24%;background:linear-gradient(135deg,#ffe7a8,var(--ember));animation-duration:.95s;animation-delay:-.4s}
.ring .fire i:nth-child(3){width:28%;margin-left:4%;bottom:24%;background:linear-gradient(135deg,#ffe7a8,var(--gold) 50%,var(--ember));animation-duration:1.1s;animation-delay:-.7s}
.ring .fire b{position:absolute;left:8%;right:8%;bottom:10%;height:14%;border-radius:8px;background:linear-gradient(#5a3520,#2b1710);transform:rotate(-7deg);
  box-shadow:0 0 0 0 transparent}
.ring .fire b::after{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(#6b4226,#2b1710);transform:rotate(15deg)}
@keyframes flick{0%,100%{transform:rotate(45deg) scale(1)}35%{transform:rotate(49deg) scale(1.1)}70%{transform:rotate(42deg) scale(.93)}}
@keyframes glow{0%,100%{opacity:.75}50%{opacity:1}}
/* seats light one after another the first time the circle is seen */
.ring.wait .seat.held{background:transparent;border-color:rgba(188,170,198,.55);box-shadow:none}
.ring.lit .seat.held{transition:background .5s,box-shadow .5s,border-color .5s;transition-delay:calc(var(--k)*90ms)}
@media (prefers-reduced-motion:reduce){
  .ring .fire i,.ring .fire::before{animation:none}
  .ring.lit .seat.held{transition:none}
  html{scroll-behavior:auto}
}