/* ═══════════════════════════════════════════════════════════════
   BABYSOOK — Effets hologramme (section 7.3)
   Ces classes s'appliquent aux éléments <img> affichés en hologramme
═══════════════════════════════════════════════════════════════ */

/* Conteneur principal de l'hologramme */
.bsk-hologram-frame {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(56vw, 520px);
  width: 100%;
  z-index: 15;
  pointer-events: none;
  display: none; /* affiché par JS quand image prête */
}
.bsk-hologram-frame.bsk-hologram--visible { display: block; }

/* Wrapper avec effets */
.bsk-hologram-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  animation: bskHologramFloat 3s ease-in-out infinite;
}

/* Image elle-même */
.bsk-hologram-image {
  display: block;
  width: 100%;
  border-radius: 12px;
  opacity: 0.88;
  mix-blend-mode: screen;
  filter: brightness(1.1) contrast(1.05) saturate(1.1) hue-rotate(10deg);
}

/* Teinte hologramme (couche par-dessus l'image, pas sur l'image elle-même) */
.bsk-hologram-wrapper::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(111, 216, 255, 0.15) 0%,
    rgba(232, 184, 115, 0.08) 50%,
    rgba(111, 216, 255, 0.1) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Lignes de balayage (scanlines) */
.bsk-hologram-wrapper::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(111, 216, 255, 0.04) 3px,
    rgba(111, 216, 255, 0.04) 4px
  );
  pointer-events: none;
  z-index: 2;
  animation: bskScanline 4s linear infinite;
}

/* Halo lumineux autour des contours */
.bsk-hologram-halo {
  position: absolute; inset: -6px;
  border-radius: 16px;
  box-shadow:
    0 0 12px rgba(111, 216, 255, 0.5),
    0 0 28px rgba(111, 216, 255, 0.3),
    0 0 56px rgba(111, 216, 255, 0.15),
    inset 0 0 12px rgba(111, 216, 255, 0.1);
  animation: bskHaloPulse 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Particules d'apparition (créées dynamiquement par JS) */
.bsk-hologram-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bsk-color-accent-glow);
  pointer-events: none;
  animation: bskParticleRise 0.8s ease-out forwards;
}

/* Animation d'apparition progressive */
.bsk-hologram-frame.bsk-hologram--appearing .bsk-hologram-wrapper {
  animation: bskHologramAppear 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             bskHologramFloat 3s ease-in-out 1.2s infinite;
}

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes bskHologramFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes bskHologramAppear {
  0%   { opacity: 0; transform: scale(0.7) translateY(20px); filter: brightness(3); }
  40%  { opacity: 0.7; filter: brightness(2); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1.1); }
}

@keyframes bskHaloPulse {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(111, 216, 255, 0.5),
      0 0 28px rgba(111, 216, 255, 0.3),
      0 0 56px rgba(111, 216, 255, 0.15);
  }
  50% {
    box-shadow:
      0 0 18px rgba(111, 216, 255, 0.7),
      0 0 40px rgba(111, 216, 255, 0.45),
      0 0 80px rgba(111, 216, 255, 0.25);
  }
}

@keyframes bskScanline {
  from { background-position-y: 0; }
  to   { background-position-y: 100%; }
}

@keyframes bskParticleRise {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0); }
}

/* ── Version allégée (palier "Allégé") ───────────────────── */
.bsk-tier-leger .bsk-hologram-wrapper::after { display: none; }  /* pas de scanlines */
.bsk-tier-leger .bsk-hologram-halo {
  box-shadow:
    0 0 10px rgba(111, 216, 255, 0.4),
    0 0 20px rgba(111, 216, 255, 0.2);
  animation: none;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 599px) {
  .bsk-hologram-frame { max-width: 90vw; }
}