/* /=== SIDEBAR START ===/ */
.palette-column {
  position: fixed;
  top: 74px;
  left: 0;
  z-index: 20;

  width: 340px;
  height: calc(100svh - 74px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;

  padding: 22px 18px 24px;

  background:
    radial-gradient(circle at 35% 18%, rgba(252,191,73,.18), transparent 15rem),
    radial-gradient(circle at 70% 48%, rgba(230,57,70,.15), transparent 14rem),
    linear-gradient(160deg, #21130d, #321d12 52%, #100806);

  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.12),
    inset 0 0 80px rgba(0,0,0,.45);
}

.palette-column::before,
.palette-column::after {
  display: none;
}
/* /=== SIDEBAR END ===/ */


/* /=== SVG PALETTE START ===/ */
.main-palette.svg-palette {
  position: relative;
  z-index: 2;

  width: min(100%, 300px);
  aspect-ratio: 1;

  margin: 0 auto;
  padding: 0;

  background: transparent;
  border: 0;
  box-shadow: none;
}

.palette-svg-object {
  display: block;
  width: 100%;
  height: 100%;

  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35));
}

.main-palette::before,
.main-palette::after,
.palette-center-logo,
.paint-well {
  display: none !important;
}
/* /=== SVG PALETTE END ===/ */


/* /=== SIDEBAR STATS START ===/ */
.sidebar-stats {
  position: relative;
  z-index: 2;

  width: 100%;
  margin-top: auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border: 1px solid rgba(255,248,236,.22);
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-stats div {
  padding: 12px 6px;
  text-align: center;
  background: rgba(0,0,0,.32);
  border-right: 1px solid rgba(255,248,236,.14);
}

.sidebar-stats div:last-child {
  border-right: 0;
}

.sidebar-stats span {
  display: block;
  font-size: .58rem;
  text-transform: uppercase;
  opacity: .74;
  font-weight: 900;
}

.sidebar-stats strong {
  display: block;
  margin-top: 5px;
  font-size: .96rem;
}

.palette-label {
  position: relative;
  z-index: 2;

  max-width: 250px;
  margin: 0;

  color: rgba(255,248,236,.84);
  text-align: center;
  font-size: .92rem;
  line-height: 1.5;
}
/* /=== SIDEBAR STATS END ===/ */

.palette-tooltip {
  position: absolute;
  left: 50%;
  bottom: -14px;
  z-index: 5;

  transform: translate(-50%, 8px);

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(16, 8, 6, .92);
  color: var(--cream);

  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;

  opacity: 0;
  pointer-events: none;

  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);

  transition:
    opacity .16s ease,
    transform .16s ease;
}

.palette-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.palette-svg-object:focus {
  outline: none;
}


/* /=== PALETTE WELL LABELS START ===/ */
.palette-labels {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.palette-well-label {
  position: absolute;

  transform: translate(-50%, -50%);

  padding: 5px 9px;
  border-radius: 999px;

  background: rgba(16, 8, 6, .7);
  color: white;

  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);

  opacity: .9;

  transition:
    transform .28s ease,
    opacity .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}

.palette-well-label.is-pulsing {
  transform: translate(-50%, calc(-50% - 9px)) scale(1.08);
  opacity: 1;
  background: linear-gradient(135deg, var(--yellow), var(--orange), var(--red));
  box-shadow: 0 10px 24px rgba(230, 57, 70, .34);
}

/* adjust these if labels need nudging */
.label-home {
  left: 47%;
  top: 22%;
}

.label-gallery {
  left: 25%;
  top: 42%;
}

.label-shop {
  left: 72%;
  top: 42%;
}

.label-tools {
  left: 34%;
  top: 66%;
}

.label-about {
  left: 60%;
  top: 68%;
}

.label-socials {
  left: 52%;
  top: 86%;
}
/* /=== PALETTE WELL LABELS END ===/ */


/* /=== PALETTE BREATHING START ===/ */
.main-palette.svg-palette {
  animation: paletteBreath 4.6s ease-in-out infinite;
}

@keyframes paletteBreath {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.018);
  }
}
/* /=== PALETTE BREATHING END ===/ */