/* Experimental cover button: matched to the red web cover without touching
   the production styles. */
.button-test-portal {
  gap: 10px !important;
}

.button-test-portal .spider-avatar-disc {
  position: relative;
  width: 88px;
  height: 88px;
  overflow: visible;
  background: radial-gradient(circle at 50% 38%, rgba(226,54,54,.78), rgba(9,9,11,.96) 64%);
  border-color: rgba(255,255,255,.72);
  box-shadow:
    0 0 0 1px rgba(226,54,54,.5),
    0 0 0 7px rgba(226,54,54,.12),
    0 12px 34px rgba(0,0,0,.72),
    0 0 34px rgba(226,54,54,.54);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}

.button-test-portal .spider-avatar-disc::before,
.button-test-portal .spider-avatar-disc::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(226,54,54,.6);
  border-radius: 50%;
  pointer-events: none;
}

.button-test-portal .spider-avatar-disc::before {
  border-left-color: transparent;
  border-bottom-color: rgba(240,240,240,.44);
  animation: buttonTestOrbit 9s linear infinite;
}

.button-test-portal .spider-avatar-disc::after {
  inset: -13px;
  border-style: dashed;
  border-color: rgba(240,240,240,.2);
  animation: buttonTestOrbit 14s linear infinite reverse;
}

.button-test-portal .spider-avatar-disc img {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 74px;
}

.button-test-portal:hover .spider-avatar-disc,
.button-test-portal:focus-visible .spider-avatar-disc {
  transform: translateY(-5px) scale(1.045);
  box-shadow:
    0 0 0 1px rgba(226,54,54,.72),
    0 0 0 9px rgba(226,54,54,.18),
    0 16px 38px rgba(0,0,0,.76),
    0 0 44px rgba(226,54,54,.72);
}

.button-test-portal .spider-avatar-label {
  position: relative;
  overflow: hidden;
  min-width: 168px;
  padding: 10px 18px 9px;
  background: rgba(7,7,9,.68);
  border: 1px solid rgba(240,240,240,.34);
  border-top-color: rgba(226,54,54,.7);
  border-bottom-color: rgba(226,54,54,.88);
  box-shadow: 0 10px 26px rgba(0,0,0,.38), 0 0 18px rgba(226,54,54,.16);
  letter-spacing: .16em;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.button-test-portal .spider-avatar-label::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -38%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  animation: buttonTestScan 4.8s ease-in-out infinite;
}

.button-test-portal .spider-avatar-label::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(226,54,54,.78);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  pointer-events: none;
}

.button-test-portal:hover .spider-avatar-label,
.button-test-portal:focus-visible .spider-avatar-label {
  background: rgba(18,7,9,.82);
  border-color: rgba(226,54,54,.88);
  transform: none !important;
}

/* The label is a fixed anchor; only the avatar above it is allowed to lift. */
.button-test-portal:active,
.button-test-portal:active .spider-avatar-label {
  transform: none !important;
}

/* Symbiote state: carry the purple-blue theme through the experimental
   control so the avatar and its fixed label change as one visual system. */
.symbiote .button-test-portal .spider-avatar-disc {
  background: radial-gradient(circle at 50% 38%, rgba(126,91,239,.64), rgba(3,2,7,.97) 66%);
  border-color: rgba(166,137,255,.78);
  box-shadow:
    0 0 0 1px rgba(126,91,239,.6),
    0 0 0 7px rgba(126,91,239,.18),
    0 12px 34px rgba(0,0,0,.78),
    0 0 36px rgba(126,91,239,.62);
}

.symbiote .button-test-portal .spider-avatar-disc::before {
  border-color: rgba(126,91,239,.76);
  border-left-color: transparent;
  border-bottom-color: rgba(215,202,255,.58);
}

.symbiote .button-test-portal .spider-avatar-disc::after {
  border-color: rgba(215,202,255,.28);
}

.symbiote .button-test-portal:hover .spider-avatar-disc,
.symbiote .button-test-portal:focus-visible .spider-avatar-disc {
  box-shadow:
    0 0 0 1px rgba(126,91,239,.86),
    0 0 0 9px rgba(126,91,239,.24),
    0 16px 38px rgba(0,0,0,.82),
    0 0 48px rgba(126,91,239,.82);
}

.symbiote .button-test-portal .spider-avatar-label {
  color: #d7caff;
  background: rgba(6,3,12,.78);
  border-top-color: rgba(126,91,239,.84);
  border-bottom-color: rgba(126,91,239,.98);
  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 22px rgba(126,91,239,.3);
}

.symbiote .button-test-portal .spider-avatar-label::before {
  background: linear-gradient(90deg, transparent, rgba(215,202,255,.62), transparent);
}

.symbiote .button-test-portal .spider-avatar-label::after {
  border-color: rgba(126,91,239,.9);
}

.symbiote .button-test-portal:hover .spider-avatar-label,
.symbiote .button-test-portal:focus-visible .spider-avatar-label {
  background: rgba(10,5,20,.88);
  border-color: rgba(126,91,239,.98);
}

@keyframes buttonTestOrbit {
  to { transform: rotate(360deg); }
}

@keyframes buttonTestScan {
  0%, 35% { left: -38%; opacity: 0; }
  48% { opacity: .9; }
  68%, 100% { left: 125%; opacity: 0; }
}

@media (max-width: 700px) {
  .button-test-portal .spider-avatar-disc { width: 76px; height: 76px; }
  .button-test-portal .spider-avatar-disc img { width: 54px; height: 65px; }
  .button-test-portal .spider-avatar-label { min-width: 150px; padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .button-test-portal .spider-avatar-disc::before,
  .button-test-portal .spider-avatar-disc::after,
  .button-test-portal .spider-avatar-label::before { animation: none; }
}