/* ═══════════════════════════════════════════════════════
   CAMBUS — GLOBAL ANIMATION SYSTEM
   Included in every dashboard page via base.html
   ═══════════════════════════════════════════════════════ */

/* ── KEYFRAMES ── */
@keyframes camFadeIn     { from{opacity:0}                           to{opacity:1} }
@keyframes camFadeInUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes camFadeInLeft { from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)} }
@keyframes camSlideRight { from{transform:translateX(-100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes camFloatY     { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-6px)} }
@keyframes camSpin       { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes camPulse      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.04)} }
@keyframes camPulseRing  { 0%{transform:scale(.8);opacity:1} 100%{transform:scale(2.2);opacity:0} }
@keyframes camBlink      { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes camGradMove   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes camShimmer    { 0%{background-position:-300% 0} 100%{background-position:300% 0} }
@keyframes camBarRise    { from{height:0;opacity:0} to{height:var(--bar-h,60%);opacity:1} }
@keyframes camCountUp    { from{opacity:0;transform:translateY(12px) scale(.9)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes camRipple     { from{transform:scale(0);opacity:.4} to{transform:scale(2.5);opacity:0} }
@keyframes camSlideDown  { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes camGlow       { 0%,100%{box-shadow:0 0 0 0 rgba(2,116,57,.35)} 50%{box-shadow:0 0 0 8px rgba(2,116,57,0)} }
@keyframes camGoldGlow   { 0%,100%{box-shadow:0 0 0 0 rgba(253,196,5,.4)} 50%{box-shadow:0 0 0 10px rgba(253,196,5,0)} }
@keyframes camProgressBar{ from{width:0} to{width:var(--progress,100%)} }

/* ── PAGE LOAD ANIMATION ── */
body {
  animation: camFadeIn .45s ease forwards;
}

/* ── UTILITY CLASSES ── */
.cam-fade-in    { animation: camFadeIn .5s ease backwards }
.cam-fade-up    { animation: camFadeInUp .55s ease backwards }
.cam-fade-left  { animation: camFadeInLeft .55s ease backwards }
.cam-float      { animation: camFloatY 3.5s ease-in-out infinite }
.cam-pulse      { animation: camPulse 2s ease-in-out infinite }
.cam-spin       { animation: camSpin .7s linear infinite }
.cam-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  background-size: 300% 100%;
  animation: camShimmer 1.8s ease-in-out infinite;
}
.cam-glow       { animation: camGlow 2.5s ease-in-out infinite }
.cam-gold-glow  { animation: camGoldGlow 2.5s ease-in-out infinite }
.cam-count-up   { animation: camCountUp .6s ease backwards }

/* ── STAGGER DELAYS ── */
.cam-delay-1 { animation-delay: .08s }
.cam-delay-2 { animation-delay: .16s }
.cam-delay-3 { animation-delay: .24s }
.cam-delay-4 { animation-delay: .32s }
.cam-delay-5 { animation-delay: .4s  }
.cam-delay-6 { animation-delay: .48s }

/* ── SIDEBAR ANIMATIONS ── */
.pdg-sidebar,
.pdg-sidebar__inner,
.ca-sidebar,
.ca-sidebar__inner,
.caissier-header {
  animation: camFadeInLeft .5s ease backwards;
}

.pdg-workspace,
.ca-main,
.caissier-workarea {
  animation: camFadeIn .55s .1s ease backwards;
}

/* ── NAV LINK HOVER ENHANCEMENT ── */
.pdg-nav a,
.ca-nav a,
.pdg-nav button {
  position: relative;
  overflow: hidden;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}

/* ripple on nav items */
.pdg-nav a::after,
.ca-nav a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(2,116,57,.06);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
  border-radius: inherit;
}

.pdg-nav a:hover::after,
.ca-nav a:hover::after {
  transform: scaleX(1);
}

.pdg-nav a.is-active,
.ca-nav a.is-active {
  animation: camFadeInLeft .4s ease backwards;
}

/* ── CARD HOVER LIFT ── */
.metric-card,
.content-panel,
.cashier-agency-card,
.cashier-session-card,
.chart-card {
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              box-shadow .28s cubic-bezier(.4,0,.2,1),
              border-color .28s ease !important;
}

.metric-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px rgba(1,79,40,.14) !important;
}

/* ── BUTTON ANIMATIONS ── */
.primary-btn,
.secondary-btn,
.ghost-btn,
.pdg-primary-btn,
.pdg-secondary-btn,
.ca-primary-btn,
.ca-secondary-btn,
.caissier-danger-btn {
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}

.primary-btn::after,
.pdg-primary-btn::after,
.ca-primary-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: -200% 0;
  transition: background-position .45s;
}

.primary-btn:hover::after,
.pdg-primary-btn:hover::after,
.ca-primary-btn:hover::after {
  background-position: 200% 0;
}

.primary-btn:hover,
.pdg-primary-btn:hover,
.ca-primary-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(1,79,40,.3) !important;
}

/* ── STATUS DOTS ── */
.status-dot,
.is-online,
.status-operationnel {
  position: relative;
}

.is-online::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand, #027439);
  margin-right: .4rem;
  animation: camPulse 2s ease-in-out infinite;
  vertical-align: middle;
}

.is-online::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--brand, #027439);
  animation: camPulseRing 2s ease-out infinite;
}

/* ── LOADING SPINNER ── */
.pdg-global-spinner__dot {
  animation: camSpin .8s linear infinite !important;
}

/* ── TABLE ROW HOVER ── */
tbody tr {
  transition: background .2s ease !important;
}

/* ── HEADER SCROLL EFFECT ── */
.pdg-header,
.ca-header,
.caissier-header {
  transition: box-shadow .3s ease, background .3s ease;
}

/* ── TAGS / BADGES ENTRANCE ── */
.tag,
.pdg-badge-region,
.pdg-active-badge,
.caissier-session-badge,
.ca-status-badge {
  transition: transform .2s ease, opacity .2s ease;
}

.tag:hover {
  transform: scale(1.04);
}

/* ── PROGRESS BAR ANIMATION ── */
.executive-coverage-locals,
.executive-column-track span,
.horizontal-bar-track span {
  animation: camProgressBar .9s .3s cubic-bezier(.4,0,.2,1) backwards;
}

/* ── DROPDOWN SLIDE ── */
.pdg-dropdown,
.ca-dropdown {
  transition: opacity .2s ease, transform .2s ease;
}

.pdg-dropdown[hidden],
.ca-dropdown[hidden] {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.pdg-dropdown:not([hidden]),
.ca-dropdown:not([hidden]) {
  animation: camSlideDown .22s ease backwards;
}

/* ── SIDEBAR HOVER ── */
.sidebar-nav a,
.sidebar-nav button {
  transition: background .22s ease, color .22s ease, transform .18s ease !important;
}

.sidebar-nav a:hover,
.sidebar-nav button:hover {
  transform: translateX(3px);
}

/* ── HERO PANEL GRADIENT ── */
.hero-panel {
  background-size: 200% 200% !important;
  animation: camGradMove 8s ease-in-out infinite;
}

/* ── METRIC VALUE ANIMATION ── */
.metric-card .value {
  animation: camCountUp .5s .2s ease backwards;
}

/* ── ALERT BANNER ── */
.caissier-alert-banner:not([hidden]),
.ca-alert-banner:not([hidden]),
#pdg-feedback:not([hidden]) {
  animation: camSlideDown .3s ease backwards;
}

/* ── EMPTY STATE ── */
.empty-state {
  animation: camFadeIn .4s ease backwards;
}

/* ── CASHIER CLOCK ── */
.caissier-clock {
  font-variant-numeric: tabular-nums;
  animation: camFadeIn .5s ease backwards;
}

/* ── FLOAT CHIPS ── */
.counter-animated {
  animation: camFadeInUp .4s ease backwards;
  transition: transform .2s ease;
}

.counter-animated:hover {
  transform: scale(1.03);
}

/* ── TABS ── */
.caissier-tabs a,
.resource-tab {
  transition: background .2s ease, color .2s ease, transform .18s ease !important;
}

.caissier-tabs a:hover,
.resource-tab:hover {
  transform: translateY(-1px);
}

.caissier-tabs a.is-active {
  animation: camFadeIn .3s ease backwards;
}

/* ── PROFILE CARD ── */
.pdg-profile-card,
.ca-profile-card,
.regional-profile-card {
  animation: camFadeInUp .5s .15s ease backwards;
}

/* ── BREADCRUMB ── */
.pdg-breadcrumb ol {
  display: flex;
  gap: .4rem;
  list-style: none;
  align-items: center;
}

.pdg-breadcrumb li {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  animation: camFadeIn .4s ease backwards;
}

.pdg-breadcrumb li + li::before {
  content: '/';
  color: var(--muted, #47624e);
  opacity: .5;
}

.pdg-breadcrumb a {
  color: var(--muted, #47624e);
  text-decoration: none;
  transition: color .2s ease;
}

.pdg-breadcrumb a:hover {
  color: var(--brand, #027439);
}

.pdg-breadcrumb li:last-child span {
  color: var(--text, #103222);
  font-weight: 600;
}

/* ── REDUCED MOTION SUPPORT ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}