/* ═══════════════════════════════════════════════════════════════
   PhishGuard — Shared Animations (FIXED v2)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. PAGE ENTRANCE ────────────────────────────────────────── */
@keyframes pg-fade-up {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pg-fade-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes pg-scale-in {
  from { opacity:0; transform:scale(.94); }
  to   { opacity:1; transform:scale(1); }
}
.pg-entrance {
  animation: pg-fade-up .55s cubic-bezier(.22,.68,0,1.2) both;
}
.pg-entrance-2 { animation-delay:.1s; }
.pg-entrance-3 { animation-delay:.2s; }
.pg-entrance-4 { animation-delay:.3s; }

/* ── 2. SCROLL STAGGER ───────────────────────────────────────── */
/* FIX: pointer-events:none so hidden items never block clicks    */
.stagger-item {
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.22,.68,0,1.2),
              transform .5s cubic-bezier(.22,.68,0,1.2);
}
.stagger-item.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── 3. BUTTON SHIMMER ───────────────────────────────────────── */
@keyframes pg-shimmer {
  0%   { transform:translateX(-100%) skewX(-12deg); }
  100% { transform:translateX(220%)  skewX(-12deg); }
}
.shimmer-btn {
  position: relative;
  overflow: hidden;
}
.shimmer-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transform: translateX(-100%) skewX(-12deg);
  pointer-events: none;
}
.shimmer-btn:hover::after {
  animation: pg-shimmer .55s ease forwards;
}

/* ── 4. SCANNING BEAM ────────────────────────────────────────── */
@keyframes pg-beam {
  0%   { left:-8%; opacity:.7; }
  100% { left:108%; opacity:.7; }
}
.scan-input-wrap {
  position: relative;
}
.scan-input-wrap.scanning::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 8%;
  background: linear-gradient(90deg, transparent, rgba(29,111,224,.35), transparent);
  border-radius: 4px;
  animation: pg-beam .9s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.scan-input-wrap.scanning .scan-input {
  border-color: #1d6fe0 !important;
  box-shadow: 0 0 0 3px rgba(29,111,224,.15) !important;
}

/* ── 5. SCORE COUNTER ANIMATION ──────────────────────────────── */
@keyframes pg-score-pop {
  0%   { transform:scale(.5); opacity:0; }
  60%  { transform:scale(1.12); }
  100% { transform:scale(1); opacity:1; }
}
.score-num-anim {
  display: inline-block;
  animation: pg-score-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── 6. RESULT CARD ENTRANCE ─────────────────────────────────── */
@keyframes pg-result-in {
  from { opacity:0; transform:translateY(16px) scale(.98); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
.result-wrap {
  animation: pg-result-in .4s cubic-bezier(.22,.68,0,1.1) both;
}

/* ── 7. NAVBAR SCROLL SHADOW ─────────────────────────────────── */
.navbar.scrolled {
  box-shadow: 0 4px 24px rgba(15,45,90,.12) !important;
  transition: box-shadow .3s ease;
}

/* ── 8. PULSE DOT (live indicator) ───────────────────────────── */
@keyframes pg-pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50%       { opacity:.5; transform:scale(1.4); }
}
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  animation: pg-pulse 1.8s ease infinite;
  margin-right: 5px;
  vertical-align: middle;
}
.live-dot.red   { background:#ef4444; }
.live-dot.amber { background:#f59e0b; }

/* ── 9. COUNTER ANIMATION (admin stats) ──────────────────────── */
.count-up {
  display: inline-block;
  transition: transform .1s;
}

/* ── 10. SKELETON SCREEN ─────────────────────────────────────── */
@keyframes pg-skeleton {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f4f8 25%, #e2eaf6 50%, #f0f4f8 75%);
  background-size: 800px 100%;
  animation: pg-skeleton 1.4s ease infinite;
  border-radius: 6px;
}

/* ── 11. CARD HOVER LIFT ─────────────────────────────────────── */
.lift-card {
  transition: transform .22s cubic-bezier(.22,.68,0,1.2),
              box-shadow .22s ease;
}
.lift-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15,45,90,.13);
}

/* ── 12. HERO VISUAL BARS ANIMATION ─────────────────────────── */
@keyframes pg-bar-fill {
  from { width:0%; }
}
.bar-fill {
  animation: pg-bar-fill .9s cubic-bezier(.22,.68,0,1.1) .4s both;
}

/* ── 13. STEP DONE CHECKMARK ─────────────────────────────────── */
@keyframes pg-check-pop {
  0%   { transform:scale(0) rotate(-20deg); opacity:0; }
  70%  { transform:scale(1.2) rotate(5deg); }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
.loading-step.done i {
  animation: pg-check-pop .3s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── 14. ADMIN SLIDE-IN (new scan rows) ──────────────────────── */
@keyframes pg-slide-right {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0); }
}
.slide-in-row {
  animation: pg-slide-right .35s cubic-bezier(.22,.68,0,1.1) both;
}

/* NOTE: tab-btn styles intentionally removed — handled by index.html */