/* ==========================================================================
   DPDPSaathi — UI Enhancement Layer
   Targets classes used in the main SPA (index.html)
   ========================================================================== */

/* === SMOOTH PAGE TRANSITIONS === */
.pg { animation: fadeSlideIn 0.25s cubic-bezier(0.4,0,0.2,1); }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === CARD MICRO-INTERACTIONS === */
.card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* === BUTTON EFFECTS === */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Ripple on click */
.btn::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: 0s;
}

/* === SIDEBAR ANIMATIONS === */
.sbbtn {
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}
.sbbtn:hover {
  border-left-color: var(--or);
  padding-left: 14px;
}
.sbbtn.active {
  border-left-color: var(--or);
}

/* === SCAN PROGRESS BAR === */
.scan-pf {
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* === STAGGER CHILDREN (requirements / findings lists) === */
.req-item { animation: fadeSlideIn 0.3s ease both; }
.req-item:nth-child(1) { animation-delay: 0.05s; }
.req-item:nth-child(2) { animation-delay: 0.10s; }
.req-item:nth-child(3) { animation-delay: 0.15s; }
.req-item:nth-child(4) { animation-delay: 0.20s; }
.req-item:nth-child(5) { animation-delay: 0.25s; }
.req-item:nth-child(6) { animation-delay: 0.30s; }
.req-item:nth-child(7) { animation-delay: 0.35s; }
.req-item:nth-child(8) { animation-delay: 0.40s; }

/* === PLUGIN CARD ACTIVATION PULSE === */
@keyframes activationPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,.4); }
  50%     { box-shadow: 0 0 0 8px rgba(249,115,22,0); }
}
.plugin-card-active { animation: activationPulse 2s infinite; }

/* === TERMINAL CURSOR === */
@keyframes terminalBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}
.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: rgba(255,255,255,.7);
  margin-left: 2px;
  animation: terminalBlink 1s step-end infinite;
  vertical-align: text-bottom;
}

/* === STAT CARD NUMBERS === */
.sc-num { transition: color 0.3s ease; }

/* === TOAST ANIMATIONS === */
@keyframes toastIn  {
  from { opacity: 0; transform: translateX(100px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100px); }
}
.toast-in  { animation: toastIn  0.3s cubic-bezier(0.4,0,0.2,1) both; }
.toast-out { animation: toastOut 0.25s ease forwards; }

/* === SECTOR HERO === */
.sector-hero { animation: fadeSlideIn 0.4s ease; }

/* === ACTION PLAN STEP — RUNNING INDICATOR === */
@keyframes runningDot {
  0%,100% { opacity: .3; }
  50%     { opacity: 1; }
}
.ap-step.running .ap-ico { animation: runningDot 1.2s ease infinite; }

/* === MODAL OPEN ANIMATION === */
.ov.open .modal { animation: fadeSlideIn 0.25s cubic-bezier(0.4,0,0.2,1); }

/* === NAV SCROLL SHADOW === */
.topbar { transition: box-shadow 0.2s ease; }
.topbar.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.25); }

/* === FOCUS STYLES (accessibility) === */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 4px;
}

/* === SECTOR TABS === */
.sector-tab { transition: all 0.15s ease; }
.sector-tab.active { transform: none; }

/* === COMPLIANCE SCORE RING === */
@keyframes scoreIn { from { stroke-dashoffset: 283; } }
.score-ring-progress { animation: scoreIn 1s cubic-bezier(0.4,0,0.2,1) both; }

/* === HUMAN TOUCH: slightly varied card shadows === */
.g4 > .sc:nth-child(odd)  .card { --shadow-angle: -1deg; }
.g4 > .sc:nth-child(even) .card { --shadow-angle:  1deg; }

/* === TABLE ROW HOVER === */
tr { transition: background-color 0.15s ease; }

/* === SKELETON LOADING === */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}

/* === BADGE PULSE (for open breach incidents) === */
@keyframes badgePulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .5; }
}
.badge-critical-live { animation: badgePulse 2s ease infinite; }

/* === SCROLLBAR (webkit) === */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }