/* paragon-display.css */

/*─────────────────────────────────────────────────*
 * 1) Outer wrapper
 *─────────────────────────────────────────────────*/
#paragon-display {
  position: relative;
  width: 450px;
  height: 256px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

/*─────────────────────────────────────────────────*
 * 2) Background container
 *─────────────────────────────────────────────────*/
#paragon-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease;
}

/*─────────────────────────────────────────────────*
 * 3) Icons container
 *─────────────────────────────────────────────────*/
#paragon-list {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* allow clicks on imgs only */
}

/*─────────────────────────────────────────────────*
 * 4) Base icon styling (no horizontal placement)
 *─────────────────────────────────────────────────*/
#paragon-list img {
  position:        absolute;
  bottom:          0;
  width:           125px;
  height:          auto;
  cursor:          pointer;
  transform-origin: bottom center;
  opacity:         1;
  transition:      all 0.4s cubic-bezier(0.33,1,0.68,1);
  /* only scale here, no left/translate: */
  transform:       scale(1);
}

/*─────────────────────────────────────────────────*
 * 5) Positioning: left • center • right with initial scale
 *─────────────────────────────────────────────────*/
#paragon-list img.left {
  left:      18%;
  transform: translateX(-50%) scale(1.4);
}
#paragon-list img.center {
  left:      50%;
  transform: translateX(-50%) scale(1.5);
}
#paragon-list img.right {
  left:      83%;
  transform: translateX(-50%) scale(1.4);
}

/*─────────────────────────────────────────────────*
 * 6) Pop‐in on .selected
 *─────────────────────────────────────────────────*/
@keyframes paragonPop {
  0%   { transform: translateX(-50%) scale(1.4)  translateY(0); }
  40%  { transform: translateX(-50%) scale(1.5)  translateY(-4px); }
  80%  { transform: translateX(-50%) scale(1.6)  translateY(1px); }
  100% { transform: translateX(-50%) scale(1.5)  translateY(0); }
}

#paragon-list img.selected {
  animation: paragonPop 0.4s ease-out;
  z-index:   10;
  filter:    brightness(110%) saturate(120%) drop-shadow(0 0 10px rgba(255,255,255,1));
}
    
    
/*─────────────────────────────────────────────────*
 * 7) Dim non-selected icons
 *─────────────────────────────────────────────────*/
#paragon-list img.dimmed {
  /* keep the same positioning as .left/.center/.right */
  /* browser will merge the left/translate from that class */
  opacity: 1;           /* or .8 if you prefer */
  filter:  grayscale(20%);
  transform: translateX(-50%) scale(1.3);
}

/*─────────────────────────────────────────────────*
 * 8) hover sparkle & pulse
 *─────────────────────────────────────────────────*/
@keyframes paragonPulse {
  0%   { transform: translateX(-50%) scale(1.3); }
  50%  { transform: translateX(-50%) scale(1.35); }
  100% { transform: translateX(-50%) scale(1.3); }
}
#paragon-list img:hover {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.5));
}
#paragon-list img:not(.selected):hover {
  animation: paragonPulse 0.4s ease-in-out;
}

/*─────────────────────────────────────────────────*
 * 9) tooltip labels via data-name
 *─────────────────────────────────────────────────*/
#paragon-list img::after {
  content: attr(data-name);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 0.85rem;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  font-family: 'Aldrich', sans-serif;
  pointer-events: none;
  z-index: 999;
}
#paragon-list img:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Allow clicks through the list container */
#paragon-list {
  pointer-events: auto !important;
  z-index: 2; /* sit above the background */
}

/* Make sure the images themselves receive clicks */
#paragon-list img {
  pointer-events: auto;
  z-index: 3;  /* above the container */
}