/* =====================================================================
   DASHBOT — Système central de transitions (P1-P4)
   ---------------------------------------------------------------------
   Palette Nightshade --ta-* + --ts-* (fallback hex pour pages sans la
   palette chargee, ex: pages auth minimales). CSS pur, zero lib.
   Consume par DashbotUI (transitions.js).
   ===================================================================== */

/* ── Vars locales avec fallbacks (resilients au manque de --ta-*) ── */
.dbt-host {
  --dbt-veil-bg: rgba(11, 18, 32, 0.86);
  --dbt-veil-tint: rgba(6, 182, 212, 0.10);
  --dbt-accent: var(--ta-cyan-hi, var(--ts-accent, #22d3ee));
  --dbt-text-1: var(--ta-text, #f1f5f9);
  --dbt-text-2: var(--ta-text-2, #94a3b8);
  --dbt-border: rgba(6, 182, 212, 0.18);
  --dbt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dbt-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ────────────────────────────────────────────────────────────────────
   1) FADE primitives — applique a un element ou conteneur
   ──────────────────────────────────────────────────────────────────── */
.dbt-fading-out {
  opacity: 0 !important;
  transform: translateY(-2px);
  transition: opacity var(--dbt-fade-ms, 150ms) var(--dbt-ease-out),
              transform var(--dbt-fade-ms, 150ms) var(--dbt-ease-out);
  pointer-events: none;
}
.dbt-fading-in {
  opacity: 0;
  transform: translateY(4px);
  animation: dbtFadeIn var(--dbt-fade-ms, 200ms) var(--dbt-ease-out) forwards;
}
@keyframes dbtFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────────────────────────────────
   2) VEIL — overlay glassmorphism plein ecran (transitions inter-pages)
   ──────────────────────────────────────────────────────────────────── */
.dbt-veil {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 38%,
                    var(--ta-cyan-soft, rgba(6, 182, 212, 0.10)) 0%,
                    rgba(11, 18, 32, 0.70) 55%,
                    rgba(11, 18, 32, 0.92) 100%);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 220ms;
}
.dbt-veil.dbt-veil-actif {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}
.dbt-veil-stage {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  padding: 28px 36px 26px;
  border-radius: 22px;
  background:
    linear-gradient(180deg,
                    rgba(255, 255, 255, 0.045) 0%,
                    rgba(255, 255, 255, 0.012) 60%,
                    rgba(255, 255, 255, 0) 100%),
    rgba(15, 23, 42, 0.55);
  border: 1px solid var(--ta-border-strong, rgba(6, 182, 212, 0.18));
  box-shadow:
    0 24px 64px -28px rgba(0, 0, 0, 0.65),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  min-width: 280px;
  max-width: 380px;
}
.dbt-veil-spinner {
  position: relative;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
}
.dbt-veil-halo {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--ta-cyan-hi, #22d3ee);
  opacity: 0;
  animation: dbtHaloPulse 2400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.dbt-veil-halo:nth-child(2) { animation-delay: 800ms; }
.dbt-veil-halo:nth-child(3) { animation-delay: 1600ms; }
.dbt-veil-core {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ta-cyan-hi, #22d3ee);
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.55);
  animation: dbtCoreBreathe 1800ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes dbtHaloPulse {
  0%   { transform: scale(0.55); opacity: 0; }
  20%  { opacity: 0.55; }
  100% { transform: scale(2.05); opacity: 0; }
}
@keyframes dbtCoreBreathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 14px rgba(6, 182, 212, 0.45); }
  50%      { transform: scale(1.20); box-shadow: 0 0 20px rgba(6, 182, 212, 0.65); }
}
.dbt-veil-titre {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ta-text, #f1f5f9);
  letter-spacing: -0.005em;
  text-align: center;
  margin-top: 4px;
}
.dbt-veil-sous-titre {
  font-size: 12px;
  font-weight: 350;
  color: var(--ta-text-2, #94a3b8);
  text-align: center;
  max-width: 280px;
  opacity: 0.85;
  line-height: 1.45;
}

/* ────────────────────────────────────────────────────────────────────
   3) SKELETON — placeholder gris animé pour zones en chargement
   ──────────────────────────────────────────────────────────────────── */
.dbt-skeleton {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
}
.dbt-skel-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0.04) 0%,
              rgba(255, 255, 255, 0.08) 50%,
              rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: dbtSkelShimmer 1400ms ease-in-out infinite;
}
.dbt-skel-line:nth-child(2n) { width: 78%; }
.dbt-skel-line:nth-child(3n) { width: 62%; }
@keyframes dbtSkelShimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

/* ────────────────────────────────────────────────────────────────────
   4) BUTTON LOADING — spinner inline pour boutons async (P4)
   ──────────────────────────────────────────────────────────────────── */
button.dbt-loading,
.btn-primary.dbt-loading,
[type="submit"].dbt-loading {
  position: relative;
  color: transparent !important;       /* masque le texte */
  pointer-events: none;
  cursor: wait;
}
button.dbt-loading::after,
.btn-primary.dbt-loading::after,
[type="submit"].dbt-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.30);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  animation: dbtBtnSpin 720ms linear infinite;
  pointer-events: none;
}
@keyframes dbtBtnSpin { to { transform: rotate(360deg); } }

/* ────────────────────────────────────────────────────────────────────
   5) MODAL ANIM — fade-in + translateY (P3)
   ──────────────────────────────────────────────────────────────────── */
.dbt-modal-anim {
  animation: dbtModalIn 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dbt-modal-anim-out {
  animation: dbtModalOut 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes dbtModalIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes dbtModalOut {
  from { opacity: 1; transform: translateY(0)    scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.985); }
}

/* ────────────────────────────────────────────────────────────────────
   6) STEP SWITCH — anim entre etapes onboarding (P2)
   ──────────────────────────────────────────────────────────────────── */
.dbt-step-out {
  animation: dbtStepOut 180ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.dbt-step-in {
  animation: dbtStepIn 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dbtStepOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-12px); }
}
@keyframes dbtStepIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ────────────────────────────────────────────────────────────────────
   7) Reduced motion — coupe TOUTES les anim decoratives
   ──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dbt-veil-halo,
  .dbt-veil-core,
  .dbt-skel-line,
  button.dbt-loading::after,
  .btn-primary.dbt-loading::after,
  [type="submit"].dbt-loading::after { animation: none !important; }
  .dbt-veil,
  .dbt-veil.dbt-veil-actif,
  .dbt-fading-out,
  .dbt-fading-in,
  .dbt-modal-anim,
  .dbt-step-in,
  .dbt-step-out {
    animation: none !important;
    transition-duration: 0ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
}