/* ═══════════════════════════════════════════════════════════════════
   CALEDOHUB PREMIUM UI v1.0 — Polish award-grade
   Composants extras + animations + détails qui font la différence
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Command Palette row hover/selected ─── */
#cds-cmdk-list .cds-cmdk-row.is-selected,
#cds-cmdk-list .cds-cmdk-row:hover {
  background: color-mix(in srgb, var(--cds-accent-500) 10%, transparent);
}
#cds-cmdk-list .cds-cmdk-row.is-selected {
  outline: 1px solid color-mix(in srgb, var(--cds-accent-500) 25%, transparent);
}

/* ─── Toast progress animation ─── */
@keyframes cdsToastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ─── SCROLL-REVEAL animations ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--cds-ease-out, cubic-bezier(.16,1,.3,1)),
              transform .6s var(--cds-ease-out, cubic-bezier(.16,1,.3,1));
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="up"]    { transform: translateY(24px); }
[data-reveal="down"]  { transform: translateY(-24px); }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(.95); }
[data-reveal="rotate"]{ transform: rotate(-3deg) translateY(12px); }

[data-reveal].cds-revealed {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0);
}

/* Stagger : [data-reveal-stagger] sur le parent, ses enfants animent en cascade */
[data-reveal-stagger] > * { transition-delay: 0ms; }
[data-reveal-stagger] > *:nth-child(2)  { transition-delay: 80ms; }
[data-reveal-stagger] > *:nth-child(3)  { transition-delay: 160ms; }
[data-reveal-stagger] > *:nth-child(4)  { transition-delay: 240ms; }
[data-reveal-stagger] > *:nth-child(5)  { transition-delay: 320ms; }
[data-reveal-stagger] > *:nth-child(6)  { transition-delay: 400ms; }
[data-reveal-stagger] > *:nth-child(7)  { transition-delay: 480ms; }
[data-reveal-stagger] > *:nth-child(8)  { transition-delay: 560ms; }

/* ─── SKELETON LOADERS — .cds-skeleton ─── */
.cds-skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--cds-bg-muted) 0%,
    var(--cds-bg-subtle) 50%,
    var(--cds-bg-muted) 100%
  );
  background-size: 200% 100%;
  animation: cdsShimmer 1.4s infinite linear;
  border-radius: var(--cds-radius-sm);
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.cds-skeleton-text { height: 1em; width: 100%; vertical-align: middle; }
.cds-skeleton-title { height: 1.4em; width: 60%; }
.cds-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.cds-skeleton-card { height: 120px; width: 100%; border-radius: var(--cds-radius-lg); }
.cds-skeleton-line { height: 12px; width: 100%; margin-bottom: 8px; }
@keyframes cdsShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── CUSTOM SCROLLBAR ─── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--cds-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cds-text) 18%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
  transition: background .2s;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--cds-text) 32%, transparent);
  background-clip: padding-box;
}

/* ─── SELECTION color matches accent ─── */
::selection {
  background: color-mix(in srgb, var(--cds-accent-500) 30%, transparent);
  color: var(--cds-text);
}

/* ─── FOCUS RING amélioré ─── */
.cds-active :focus-visible {
  outline: 2px solid var(--cds-accent-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── SUBTLE NOISE overlay (option) — donne du grain à la page ─── */
.cds-noise::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── DIVIDER avec accent ─── */
.cds-divider-accent {
  height: 2px;
  background: var(--cds-gradient-brand);
  border: none;
  border-radius: 99px;
  margin: var(--cds-space-6) 0;
  width: 60px;
}

/* ─── HERO background pattern subtle ─── */
.cds-hero-pattern {
  background-image:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--cds-accent-500) 10%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--cds-accent-700) 8%, transparent) 0%, transparent 60%);
}

/* ─── CTA Section template ─── */
.cds-cta {
  position: relative;
  padding: var(--cds-space-12) var(--cds-space-6);
  border-radius: var(--cds-radius-2xl);
  background: var(--cds-gradient-hero);
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cds-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(at 70% 30%, rgba(255,255,255,.15), transparent 50%),
    radial-gradient(at 30% 70%, rgba(0,0,0,.2), transparent 50%);
}
.cds-cta h2 { color: #fff; }
.cds-cta p { color: rgba(255,255,255,.85); }

/* ─── KBD style ─── */
kbd {
  font-family: var(--cds-font-mono);
  background: var(--cds-bg-muted);
  border: 1px solid var(--cds-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: var(--cds-text-2xs);
  color: var(--cds-text-muted);
  white-space: nowrap;
}

/* ─── BLOCKQUOTE polish ─── */
.cds-prose blockquote, .cds-active blockquote {
  border-left: 3px solid var(--cds-accent-500);
  padding: var(--cds-space-2) var(--cds-space-5);
  color: var(--cds-text-muted);
  font-style: italic;
  margin: var(--cds-space-5) 0;
  background: var(--cds-bg-muted);
  border-radius: 0 var(--cds-radius-md) var(--cds-radius-md) 0;
}

/* ─── Loading spinner ─── */
.cds-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--cds-text) 15%, transparent);
  border-top-color: var(--cds-accent-500);
  border-radius: 50%;
  animation: cdsSpin .8s linear infinite;
  vertical-align: middle;
}
.cds-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes cdsSpin { to { transform: rotate(360deg); } }

/* ─── Empty state ─── */
.cds-empty {
  text-align: center;
  padding: var(--cds-space-12) var(--cds-space-6);
  color: var(--cds-text-faint);
}
.cds-empty .icon { font-size: 64px; display: block; margin-bottom: var(--cds-space-4); opacity: .4; }
.cds-empty .title { font-size: var(--cds-text-lg); font-weight: var(--cds-weight-semibold); color: var(--cds-text); margin-bottom: var(--cds-space-2); }

/* ─── Dot indicator ─── */
.cds-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cds-text-faint);
  vertical-align: middle;
}
.cds-dot-live {
  background: var(--cds-success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cds-success) 60%, transparent);
  animation: cdsPulseDot 1.6s infinite;
}
@keyframes cdsPulseDot {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cds-success) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ─── Animations Utility ─── */
.cds-fade-in { animation: cdsFadeIn .4s var(--cds-ease-out, cubic-bezier(.16,1,.3,1)) both; }
.cds-slide-up { animation: cdsSlideUp .5s var(--cds-ease-out, cubic-bezier(.16,1,.3,1)) both; }
.cds-zoom-in { animation: cdsZoomIn .4s var(--cds-ease-spring, cubic-bezier(.34,1.56,.64,1)) both; }
@keyframes cdsFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cdsSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cdsZoomIn  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ─── Skip link visible focus ─── */
#cds-skip:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── Hero title with gradient ─── */
.cds-gradient-text {
  background: var(--cds-gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* ─── Glow effect ─── */
.cds-glow {
  position: relative;
}
.cds-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: var(--cds-gradient-brand);
  border-radius: inherit;
  z-index: -1;
  filter: blur(12px);
  opacity: .4;
  transition: opacity .3s;
}
.cds-glow:hover::before { opacity: .7; }

/* ─── Surface variants ─── */
.cds-surface-1 { background: var(--cds-bg);        border: 1px solid var(--cds-border); }
.cds-surface-2 { background: var(--cds-bg-elev);   border: 1px solid var(--cds-border); }
.cds-surface-3 { background: var(--cds-bg-muted);  border: 1px solid var(--cds-border-subtle); }

/* ─── Tag (alternative to badge for inline) ─── */
.cds-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--cds-radius-sm);
  font-size: var(--cds-text-xs);
  font-weight: var(--cds-weight-medium);
  background: var(--cds-bg-muted);
  color: var(--cds-text-muted);
  border: 1px solid var(--cds-border-subtle);
}

/* ─── Modal backdrop helper (for custom modals) ─── */
.cds-modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #0F172A 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--cds-z-modal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cds-space-5);
  animation: cdsFadeIn .2s ease-out;
}
.cds-modal-dialog {
  background: var(--cds-bg-elev);
  border-radius: var(--cds-radius-xl);
  padding: var(--cds-space-8);
  max-width: 500px;
  width: 100%;
  box-shadow: var(--cds-shadow-xl);
  animation: cdsZoomIn .25s var(--cds-ease-spring);
}