/* Nezavisna strelica (body overlay) ka "Production notes" u PI lightboxu */

.pi-production-notes-attn-pointer {
  --pi-attn-entry-shift: 190px;
  --pi-attn-ease-out: cubic-bezier(0.2, 0.85, 0.35, 1);
  --pi-attn-enter-dur: 0.7s;
  --pi-attn-idle-amp: 19px;
  --pi-attn-idle-dur: 1.25s;

  position: fixed;
  z-index: 100050;
  width: 60px;
  height: 60px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.pi-production-notes-attn-pointer.pi-production-notes-attn-pointer--visible {
  opacity: 1;
  visibility: visible;
}

/* Kratak fade-out nakon klika na "Production notes" */
.pi-production-notes-attn-pointer.pi-production-notes-attn-pointer--visible.pi-production-notes-attn-pointer--exiting {
  opacity: 0;
  transition: opacity 0.28s ease;
}

.pi-production-notes-attn-pointer.pi-production-notes-attn-pointer--session-dismissed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.pi-production-notes-attn-pointer__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f43f3f;
  filter: drop-shadow(0 0 12px rgba(255, 75, 75, 0.9))
    drop-shadow(0 0 4px rgba(255, 59, 59, 0.65))
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.4));
  transform: translateZ(0);
  will-change: transform, opacity;
}

.pi-production-notes-attn-pointer__inner svg {
  display: block;
  width: 60px;
  height: 60px;
  transform-origin: center center;
}

.pi-production-notes-attn-pointer--down .pi-production-notes-attn-pointer__inner svg {
  transform: rotate(90deg);
}

/* Ulaz: horizontalno sleva ka cilju (~5cm), brzo pa ease-out — ne menjati */
.pi-production-notes-attn-pointer__inner.is-entering {
  animation: pi-notes-attn-enter-x var(--pi-attn-enter-dur) var(--pi-attn-ease-out) forwards;
}

@keyframes pi-notes-attn-enter-x {
  from {
    transform: translate3d(calc(-1 * var(--pi-attn-entry-shift)), 0, 0);
    opacity: 0.82;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* Idle: beskonačno klimanje levo–desno (~38px ukupno), uz blag scale/opacity */
.pi-production-notes-attn-pointer__inner.is-pulse-phase {
  animation: pi-notes-attn-idle-rock var(--pi-attn-idle-dur) ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes pi-notes-attn-idle-rock {
  0%,
  100% {
    transform: translate3d(calc(-1 * var(--pi-attn-idle-amp)), 0, 0) scale(1);
    opacity: 0.93;
  }
  50% {
    transform: translate3d(var(--pi-attn-idle-amp), 0, 0) scale(1.02);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .pi-production-notes-attn-pointer {
    width: 52px;
    height: 52px;
    --pi-attn-entry-shift: 160px;
    --pi-attn-idle-amp: 14px;
    --pi-attn-idle-dur: 1.15s;
  }

  .pi-production-notes-attn-pointer__inner svg {
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-production-notes-attn-pointer {
    --pi-attn-enter-dur: 0.01s;
  }

  .pi-production-notes-attn-pointer__inner.is-entering {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .pi-production-notes-attn-pointer__inner.is-pulse-phase {
    animation: pi-notes-attn-idle-rock-subtle 3.5s ease-in-out infinite;
  }

  @keyframes pi-notes-attn-idle-rock-subtle {
    0%,
    100% {
      transform: translate3d(-6px, 0, 0) scale(1);
      opacity: 0.94;
    }
    50% {
      transform: translate3d(6px, 0, 0) scale(1.015);
      opacity: 1;
    }
  }
}