/*
 * V53 / AUTHORITY CHAMBER
 * Prismatic proof object with reversible front/back evidence and liquid waves.
 */

.authority {
  --artifact-rx: -8deg;
  --artifact-ry: 18deg;
  --artifact-rz: 0deg;
  --field-x: 50%;
  --field-y: 50%;
  min-height: 1120px;
  background:
    radial-gradient(circle at var(--field-x) var(--field-y),rgba(150,209,220,.045),transparent 17rem),
    radial-gradient(circle at 72% 48%,rgba(203,158,72,.13),transparent 31rem),
    #040606;
}

.authority::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg,transparent 49.95%,rgba(231,199,125,.04) 50%,transparent 50.05%),
    linear-gradient(transparent 49.95%,rgba(150,209,220,.03) 50%,transparent 50.05%);
  background-size: 8vw 8vw;
  content: "";
  opacity: .28;
  -webkit-mask-image: radial-gradient(circle at 72% 50%,black,transparent 62%);
  mask-image: radial-gradient(circle at 72% 50%,black,transparent 62%);
}

.authority-copy { position: relative; z-index: 5; }
.authority-copy h2 { max-width: 690px; font-size: clamp(54px,5.4vw,88px); }
.authority-stats { max-width: 700px; }
.authority-stats span { position: relative; overflow: hidden; }
.authority-stats span::after {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(231,199,125,.08);
  border-radius: 50%;
  content: "";
}

.artifact-stage {
  right: 4vw;
  width: min(47vw,700px);
  outline: 0;
}
.artifact-stage:focus-visible { box-shadow: 0 0 0 1px rgba(231,199,125,.55) inset; }

.artifact-spectrum {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    conic-gradient(from 40deg,transparent,rgba(151,210,222,.08),transparent 28%,rgba(231,199,125,.1),transparent 58%,rgba(172,150,221,.045),transparent);
  filter: blur(18px);
  opacity: .7;
  animation: spectrumTurn 18s linear infinite;
}
@keyframes spectrumTurn { to { rotate: 1turn; } }

.artifact-reactor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(231,199,125,.12);
  border-radius: 50%;
  transform: perspective(900px) rotateX(66deg) rotateZ(-12deg);
}
.artifact-reactor::before,
.artifact-reactor::after {
  position: absolute;
  border: 1px solid rgba(151,210,222,.1);
  border-radius: 50%;
  content: "";
}
.artifact-reactor::before { inset: 12%; }
.artifact-reactor::after { inset: 27%; border-color: rgba(231,199,125,.14); }
.artifact-reactor i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(8px + var(--reactor-i,0) * 2px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(231,199,125,.7);
  transform:
    translate(-50%,-50%)
    rotate(calc(var(--reactor-i,0) * 90deg))
    translateX(calc(110px + var(--reactor-i,0) * 14px));
}
.artifact-reactor i:nth-child(1) { --reactor-i:0; }
.artifact-reactor i:nth-child(2) { --reactor-i:1; background:#98d2dd; }
.artifact-reactor i:nth-child(3) { --reactor-i:2; }
.artifact-reactor i:nth-child(4) { --reactor-i:3; background:#98d2dd; }

.artifact {
  width: 270px;
  height: 350px;
  animation: none;
  transform:
    rotateX(var(--artifact-rx))
    rotateY(var(--artifact-ry))
    rotateZ(var(--artifact-rz));
  transition: transform .12s linear;
}

.artifact-face {
  border-color: rgba(240,211,147,.48);
  background:
    linear-gradient(128deg,rgba(255,255,255,.16),transparent 20% 55%,rgba(151,210,222,.07) 66%,transparent 77%),
    radial-gradient(circle at 50% 42%,rgba(229,190,108,.24),transparent 30%),
    linear-gradient(145deg,rgba(54,48,36,.88),rgba(9,12,12,.96) 63%);
  box-shadow:
    inset 0 0 70px rgba(232,194,107,.1),
    inset 0 0 0 1px rgba(151,210,222,.035),
    0 0 60px rgba(231,199,125,.1);
}
.artifact-face::before { border-color: rgba(231,199,125,.24); }
.artifact-face::after {
  background: linear-gradient(110deg,transparent 27%,rgba(255,255,255,.16) 43%,rgba(151,210,222,.08) 48%,transparent 58%);
}
.artifact-face--back {
  background:
    radial-gradient(circle at 50% 44%,rgba(151,210,222,.14),transparent 28%),
    linear-gradient(145deg,#182222,#080b0b 68%);
}
.artifact-face--back b { color: rgba(166,221,231,.8); font-size: 14px; }
.artifact-edge { width: 28px; transform: rotateY(90deg) translateZ(135px); }
.artifact-orbit { inset: 11%; border-color: rgba(231,199,125,.18); }
.artifact-hint { bottom: 7%; color: rgba(197,189,170,.34); }

.proof-wave {
  --wave-delay: 0ms;
  position: absolute;
  z-index: 9;
  top: var(--wave-y);
  left: var(--wave-x);
  width: 36px;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(231,199,125,.64);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(151,210,222,.12);
  pointer-events: none;
  animation: proofWave 1.25s cubic-bezier(.16,1,.3,1) var(--wave-delay) both;
}
.proof-wave:nth-last-of-type(even) { border-color: rgba(151,210,222,.48); }
@keyframes proofWave {
  0% { scale: .18; opacity: 1; filter: blur(0); }
  72% { opacity: .42; }
  100% { scale: 12; opacity: 0; filter: blur(2px); }
}

.authority.is-proof-reversed .artifact-orbit { border-color: rgba(151,210,222,.22); }
.authority.is-proof-reversed .artifact-orbit::before { background:#99d3de; box-shadow:0 0 18px #99d3de; }

@media (max-width: 900px) {
  .artifact-stage { right: 1vw; width: min(49vw,620px); }
  .artifact { width: 235px; height: 310px; }
  .artifact-edge { transform: rotateY(90deg) translateZ(117px); }
}

@media (max-width: 760px) {
  .authority { min-height: 1160px; }
  .authority::before { background-size: 24vw 24vw; }
  .authority-copy h2 { font-size: clamp(46px,13.5vw,64px); }
  .artifact-stage {
    right: 50%;
    bottom: 105px;
    width: 440px;
    max-width: 112vw;
    translate: 50% 0;
  }
  .artifact { width: 195px; height: 255px; }
  .artifact-edge { width: 22px; transform: rotateY(90deg) translateZ(97px); }
  .artifact-reactor { width: 68%; }
  .authority-links { bottom: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-spectrum,
  .artifact-orbit { animation: none; }
  .artifact { transition: none; }
}