/* ============================================================
   ui-effects.css — Effets CSS réutilisables
   Importer dans index.html : <link rel="stylesheet" href="ui-effects.css">
   ============================================================ */

/* ── Animations ─────────────────────────────────────────────── */
@keyframes pulse-glow-orange {
  0%,100% {
    box-shadow:
      0 0 10px 2px rgba(255,110,0,.50),
      0 0 35px 5px rgba(255,80,0,.25),
      0 0 70px 8px rgba(255,60,0,.10);
  }
  50% {
    box-shadow:
      0 0 16px 3px rgba(255,130,0,.72),
      0 0 52px 8px rgba(255,90,0,.38),
      0 0 100px 14px rgba(255,60,0,.18);
  }
}

@keyframes pulse-glow-cyan {
  0%,100% {
    box-shadow:
      0 0 10px 2px rgba(0,180,255,.45),
      0 0 35px 5px rgba(0,160,255,.22),
      0 0 70px 8px rgba(0,140,255,.10);
  }
  50% {
    box-shadow:
      0 0 16px 3px rgba(0,200,255,.65),
      0 0 52px 8px rgba(0,170,255,.35),
      0 0 100px 14px rgba(0,140,255,.16);
  }
}

@keyframes slide-shine {
  0%   { left: -80%; }
  100% { left: 140%; }
}

/* ── Classe bouton CTA orange (avancer dans le jeu) ──────────── */
/* Utilisation : ajouter la classe "btn-cta-orange" sur n'importe quel bouton */
.btn-cta-orange {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,140,0,.75) !important;
  background: linear-gradient(180deg, rgba(60,22,0,.85), rgba(18,8,2,.92)) !important;
  color: #ffe8b0 !important;
  animation: pulse-glow-orange 2.4s ease-in-out infinite;
  transition: transform .18s ease, border-color .18s ease !important;
}
.btn-cta-orange::before {
  content: "";
  position: absolute;
  top: 0; width: 35%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,200,80,.09) 50%, transparent);
  transform: skewX(-20deg);
  animation: slide-shine 3s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}
.btn-cta-orange::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 7px;
  height: 1.5px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,176,74,.95), transparent);
  pointer-events: none; z-index: 2;
}
.btn-cta-orange:hover {
  animation: none;
  transform: translateY(-2px);
  border-color: rgba(255,160,0,.9) !important;
  box-shadow:
    0 0 18px 4px rgba(255,130,0,.75),
    0 0 56px 8px rgba(255,90,0,.42),
    0 0 100px 14px rgba(255,60,0,.18) !important;
}

/* ── Classe bouton CTA cyan (actions neutres importantes) ─────── */
.btn-cta-cyan {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,180,255,.6) !important;
  background: linear-gradient(180deg, rgba(0,30,60,.88), rgba(0,15,32,.94)) !important;
  color: #c8f0ff !important;
  animation: pulse-glow-cyan 2.4s ease-in-out infinite;
  transition: transform .18s ease, border-color .18s ease !important;
}
.btn-cta-cyan::before {
  content: "";
  position: absolute;
  top: 0; width: 35%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(100,220,255,.08) 50%, transparent);
  transform: skewX(-20deg);
  animation: slide-shine 3.5s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}
.btn-cta-cyan::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 7px;
  height: 1.5px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(101,228,255,.9), transparent);
  pointer-events: none; z-index: 2;
}
.btn-cta-cyan:hover {
  animation: none;
  transform: translateY(-2px);
  border-color: rgba(0,200,255,.85) !important;
  box-shadow:
    0 0 18px 4px rgba(0,200,255,.65),
    0 0 56px 8px rgba(0,170,255,.35),
    0 0 100px 14px rgba(0,140,255,.16) !important;
}

/* ── Bouton secondaire bleu (Hangar, Carte, Retour...) ───────── */
/* Utilisation : ajouter la classe "btn-secondary" */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 26px; border-radius: 13px; cursor: pointer;
  color: white; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(104,211,255,.22);
  background: linear-gradient(180deg, rgba(9,21,44,.96), rgba(6,13,28,.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 18px rgba(0,140,255,.14);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-family: inherit; font-size: .92rem;
  position: relative; overflow: hidden;
}
.btn-secondary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%);
  pointer-events: none;
}
.btn-secondary::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 7px;
  height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(101,228,255,.9), transparent);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(104,211,255,.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 28px rgba(0,160,255,.22);
}
.btn-secondary:active { transform: translateY(0); }