/* IndexSolar Panel Overlay (v1.2.0) */
.ispo-overlay {
  position: absolute;

  /* iOS Safari safe: evitar calc(% + px) con CSS vars */
  left: var(--ispo-left, 55%);
  top:  var(--ispo-top, 55%);

  /* offsets en transform para compatibilidad */
  transform: translate(var(--ispo-xoff, 0px), var(--ispo-yoff, 0px));

  z-index: var(--ispo-z, 20);
  pointer-events: none;
  will-change: transform, opacity;
}

.ispo-overlay__inner {
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.ispo-overlay img {
  display: block;
  width: calc(var(--ispo-width-vw, 26) * 1vw);
  max-width: calc(var(--ispo-max-w, 520) * 1px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.22));
}

/* Animaciones: se activan cuando el overlay está montado (para permitir delay) */
.ispo-overlay__inner {
  /* centrado base */
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: none;
}

.ispo-overlay.ispo-mounted .ispo-overlay__inner {
  animation: ispoEnter var(--ispo-enter, 1200ms) cubic-bezier(.22,1,.36,1) forwards;
}

.ispo-overlay.ispo-floating .ispo-overlay__inner {
  animation:
    ispoEnter var(--ispo-enter, 1200ms) cubic-bezier(.22,1,.36,1) forwards,
    ispoFloat var(--ispo-float, 3600ms) ease-in-out infinite;
  animation-delay: 0ms, var(--ispo-float-delay, 100ms);
}

@keyframes ispoEnter {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(calc(var(--ispo-enter-from, -120) * 1px)) scale(0.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}

@keyframes ispoFloat {
  0%   { transform: translate(-50%, -50%) translateY(0); }
  50%  { transform: translate(-50%, -50%) translateY(calc(var(--ispo-float-dist, 6) * -1px)); }
  100% { transform: translate(-50%, -50%) translateY(0); }
}

/* Hacemos visible el img cuando el inner ya está animando (via opacity del inner) */
.ispo-overlay__inner { opacity: 0; }
@keyframes ispoEnterOpacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Sincroniza opacidad del inner y del img */
.ispo-overlay__inner { opacity: 0; }
.ispo-overlay.ispo-mounted .ispo-overlay__inner { opacity: 1; }
.ispo-overlay.ispo-mounted img { opacity: 1; }