/* =============================================================================
   Demo Polish Animations — Enterprise Micro-Interactions
   NOC Platform v12 · Accenture Demo
   
   Keyframes and utility classes for tile entrance, loading shimmer,
   and critical-status border emphasis. All tones are muted/enterprise.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. fadeSlideUp — tile entrance animation
      Fades in from transparent + slides up 12 px.
   --------------------------------------------------------------------------- */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------------
   2. shimmer — gradient sweep for loading placeholders
      Sweeps a translucent highlight band from left to right.
   --------------------------------------------------------------------------- */
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

/* ---------------------------------------------------------------------------
   3. subtlePulse — understated border emphasis for critical tiles
      Oscillates border-color opacity between 40 % and 85 %.
      Muted red (#B84444) — NOT neon glow.
   --------------------------------------------------------------------------- */
@keyframes subtlePulse {
  0%, 100% {
    border-color: rgba(184, 68, 68, 0.4);
  }
  50% {
    border-color: rgba(184, 68, 68, 0.85);
  }
}

/* ---------------------------------------------------------------------------
   4. .an — staggered entrance class
      Apply to any tile/card. Set --an-i on each element (0, 1, 2 …)
      to stagger the entrance delay by 60 ms per index.
   --------------------------------------------------------------------------- */
.an {
  animation: fadeSlideUp 0.4s ease-out both;
  animation-delay: calc(var(--an-i, 0) * 60ms);
}

/* ---------------------------------------------------------------------------
   5. .shimmer-loader — loading placeholder with shimmer sweep
   --------------------------------------------------------------------------- */
.shimmer-loader {
  background: linear-gradient(
    90deg,
    rgba(91, 123, 154, 0.08) 25%,
    rgba(91, 123, 154, 0.18) 50%,
    rgba(91, 123, 154, 0.08) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   6. Tab Discovery System — subtle cues for hidden/sibling tabs
      Applies globally via .noc-tab-bar on any tab container.
      
      Effects:
      a) Inactive tabs get a one-time underline sweep after 1.8s delay
      b) Count badges on inactive tabs do a gentle scale pulse
      c) Right-edge fade gradient hints at more tabs (overflow scenarios)
      d) All animations respect prefers-reduced-motion
   --------------------------------------------------------------------------- */

/* ── Keyframes ── */
@keyframes tabHintSweep {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

@keyframes tabBadgePulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}

@keyframes tabHintFade {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Tab bar container ── */
.noc-tab-bar {
  position: relative;
  overflow: visible !important;
}

/* Right-edge gradient fade — hints "there's more" when tabs overflow */
.noc-tab-bar::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 48px;
  background: linear-gradient(90deg, transparent, var(--bg-1, #fff));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.noc-tab-bar.has-overflow::after {
  opacity: 1;
}

/* ── Inactive tab hint underline ── */
/* Uses box-shadow inset instead of ::after to avoid inline border-bottom conflicts */
.noc-tab-bar > button:not(.noc-tab-active) {
  position: relative;
  overflow: visible;
}

/* Animated underline via ::after — positioned BELOW the button border */
.noc-tab-bar > button:not(.noc-tab-active)::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 5%; right: 5%;
  height: 3px;
  border-radius: 2px;
  z-index: 10;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124, 58, 237, 0.7) 30%,
    rgba(0, 212, 255, 0.7) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  opacity: 0;
  animation:
    tabHintFade 3s ease 1.5s 1 both,
    tabHintSweep 2.5s ease 1.5s 1 both;
  pointer-events: none;
}

/* Stagger the hint per tab position — 2nd inactive tab delayed a bit more */
.noc-tab-bar > button:not(.noc-tab-active):nth-child(2)::after {
  animation-delay: 2.0s, 2.0s;
}
.noc-tab-bar > button:not(.noc-tab-active):nth-child(3)::after {
  animation-delay: 2.3s, 2.3s;
}
.noc-tab-bar > button:not(.noc-tab-active):nth-child(4)::after {
  animation-delay: 2.6s, 2.6s;
}
.noc-tab-bar > button:not(.noc-tab-active):nth-child(5)::after {
  animation-delay: 2.9s, 2.9s;
}

/* ── Badge pulse on inactive tabs ── */
.noc-tab-bar > button:not(.noc-tab-active) > .noc-tab-badge {
  animation: tabBadgePulse 0.8s ease 2.2s 2 both;
}
.noc-tab-bar > button:not(.noc-tab-active):nth-child(3) > .noc-tab-badge {
  animation-delay: 2.5s;
}
.noc-tab-bar > button:not(.noc-tab-active):nth-child(4) > .noc-tab-badge {
  animation-delay: 2.8s;
}
.noc-tab-bar > button:not(.noc-tab-active):nth-child(5) > .noc-tab-badge {
  animation-delay: 3.1s;
}

/* ── All tab buttons need position:relative for the ::after pseudo ── */
.noc-tab-bar > button {
  position: relative !important;
  overflow: visible !important;
}

/* ── Active tab marker — no hint animation, just the solid underline ── */
.noc-tab-bar > button.noc-tab-active::after {
  content: none;
}

/* ── Hover lift on inactive tabs — subtle invitation ── */
.noc-tab-bar > button:not(.noc-tab-active):hover {
  transform: translateY(-1px);
  transition: transform 0.15s ease, color 0.2s ease;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .noc-tab-bar > button:not(.noc-tab-active)::after {
    animation: none;
    opacity: 0;
  }
  .noc-tab-bar > button:not(.noc-tab-active) > .noc-tab-badge {
    animation: none;
  }
  .noc-tab-bar > button:not(.noc-tab-active):hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   7. Sidebar Navigation Enhancements
      Subtle entrance animations, hover micro-interactions, section transitions
   --------------------------------------------------------------------------- */

/* ── Sidebar entrance — slide in from left ── */
@keyframes sidebarSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.noc-sidebar {
  animation: sidebarSlideIn 0.35s ease-out both;
}

/* ── Nav item entrance stagger ── */
@keyframes navItemFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.noc-sidebar [data-nav-item] {
  animation: navItemFadeIn 0.3s ease-out both;
}

/* ── Section header hover glow ── */
.noc-sidebar button[data-section-header]:hover {
  background: rgba(161, 0, 255, 0.04);
}

/* ── Active nav item left-bar pulse ── */
@keyframes navActivePulse {
  0%, 100% { box-shadow: 0 0 6px currentColor; }
  50%      { box-shadow: 0 0 12px currentColor; }
}

/* ---------------------------------------------------------------------------
   8. Dark Mode Contrast Improvements
      Boost readability of secondary text, borders, and glass panels
   --------------------------------------------------------------------------- */

/* Improve dark mode text contrast — tx-2 and tx-3 are too dim */
:root {
  --tx-2-boost: #8E9DB8;
  --tx-3-boost: #6B7A92;
}

/* Dark mode: boost glass panel contrast */
:root .noc-sidebar {
  --sidebar-border: rgba(80, 100, 140, 0.3);
}

/* Dark mode card borders — slightly more visible */
:root .an {
  --card-border-boost: rgba(56, 68, 100, 0.45);
}

/* Light mode overrides — no boost needed */
[data-theme="light"] {
  --tx-2-boost: #5A6A80;
  --tx-3-boost: #8899AA;
  --sidebar-border: rgba(0, 20, 60, 0.15);
  --card-border-boost: rgba(0, 20, 60, 0.12);
}

/* ── Section collapse/expand transition ── */
.noc-sidebar .nav-section-items {
  transition: max-height 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
}

/* ── Scrollbar styling for sidebar ── */
.noc-sidebar::-webkit-scrollbar {
  width: 4px;
}
.noc-sidebar::-webkit-scrollbar-thumb {
  background: rgba(161, 0, 255, 0.2);
  border-radius: 4px;
}
.noc-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(161, 0, 255, 0.35);
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .noc-sidebar {
    animation: none;
  }
  .noc-sidebar [data-nav-item] {
    animation: none;
  }
}