/* Cover art transition and state styles */

/* Ensure images transition smoothly when position/size/opacity change */
#imgSeeZ, #imgSeeZB {
  transition: left 360ms ease, top 360ms ease, width 300ms ease, height 300ms ease, opacity 200ms ease, transform 360ms ease;
  /* keep existing inline POSITION: relative; but ensure a fallback */
  position: relative;
  display: inline-block;
  will-change: left, top, width, height, opacity;
}

/* Closed (default) positions — match the values used in CloseCover() */
#imgSeeZ {
    left: 180px;
    top: 50px;
    width: 150px;
    height: 150px;
    opacity: 0.8;
}
#imgSeeZB {
  left: 30px;
  top: -120px;
  width: 150px;
  height: 150px;
  opacity: 1;
}

/* Open state: when the main image has data-cover-open="true" */
#imgSeeZ[data-cover-open="true"] {
  left: 390px;
  top: 170px;
  width: 150px;
  height: 150px;
  opacity: 1;
  /* subtle elevation to indicate active cover */
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  transform: translateZ(0);
}

/* Wrapper that provides a colored translucent overlay over the canvas image */
.canvas-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.canvas-wrap::before {
  content: "";
  position: absolute;
  left: 0; top: 20px; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45); /* default tint (dark) */
  pointer-events: none;
  transition: background 360ms ease, opacity 360ms ease;
}

/* When cover is open and media is video/image, the overlay becomes very faint - handled via JS too */
#imgSeeZ[data-cover-open="true"] ~ .canvas-wrap::before {
  background: rgba(0,0,0,0.06);
}

/* If you want a lighter default tint instead, change rgba above (e.g., rgba(255,255,255,0.25) for light)
   The overlay color can be customized per-artist later by setting style on .canvas-wrap or via JS.
*/

#imgSeeZ[data-cover-open="true"] ~ #imgSeeZB {
  left: 390px;
  top: 170px;
  width: 150px;
  height: 150px;
  opacity: 1;
}

/* Accessible focus and interaction styling for the cover toggle button (if using .custom-button) */
.custom-button:focus {
  outline: 3px solid rgba(100,150,255,0.6);
  outline-offset: 3px;
}

/* Small helper: a visible state marker anchored to the main cover image */
#imgSeeZ[data-cover-open="true"]::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  background: #1db954; /* green dot */
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(29,185,84,0.6);
}