/* ===================================
   FUMETTO POP-ART v2.0 — Base CSS
   I colori vengono dalle impostazioni plugin
   =================================== */

/* === SHORTCODE WRAPPER === */
.fpa-fumetto-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
  max-width: 100%;
}

.fpa-fumetto-wrap .fpa-fumetto-img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bolla */
.fpa-fumetto-wrap .fpa-fumetto-bolla,
.fumetto-pop .fpa-auto-bolla {
  position: absolute;
  bottom: calc(100% + 18px);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Coda */
.fpa-fumetto-wrap .fpa-fumetto-coda,
.fumetto-pop .fpa-auto-coda {
  position: absolute;
  bottom: calc(100% + 4px);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
  z-index: 9999;
  pointer-events: none;
}

/* === CLASSE + DATA-ATTRIBUTE === */
.fumetto-pop {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* === ANIMAZIONI === */
@keyframes fpa-shake {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2deg) scale(1.02); }
  75%      { transform: rotate(2deg) scale(1.02); }
}

@keyframes fpa-bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-8px); }
  60%      { transform: translateY(-3px); }
}

@keyframes fpa-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .fpa-fumetto-wrap .fpa-fumetto-bolla,
  .fumetto-pop .fpa-auto-bolla {
    font-size: 13px !important;
    white-space: normal;
    max-width: 250px;
    min-width: 180px;
  }
}