/* ─────────────────────────────────────────────────────────
   portal-staff-motion.css
   Purposeful motion for the faculty dashboard.
   All animation is opt-in; content is visible without JS.
   ───────────────────────────────────────────────────────── */

/* ── Easing tokens ────────────────────────────────────── */
:root {
  --ease-staff-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-staff-snap: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Shared reveal keyframe ───────────────────────────── */
@keyframes staff-fade-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── 1. Hero section entrance ─────────────────────────── */
/* Applied unconditionally — hero is always above fold.
   Uses animation-fill-mode: both so opacity=0 before delay fires. */
.portal-staff-hero__lead {
  animation: staff-fade-rise 360ms var(--ease-staff-out) 40ms both;
}

.portal-staff-hero__side {
  animation: staff-fade-rise 360ms var(--ease-staff-out) 110ms both;
}

/* ── 2. Route list stagger ────────────────────────────── */
/* JS adds --stagger-i on each .portal-route-card and
   the .staff-route--in class when the list is observed. */
.portal-route-card.staff-route--pending {
  opacity: 0;
  transform: translateY(10px);
}

.portal-route-card.staff-route--in {
  animation: staff-fade-rise 300ms var(--ease-staff-out) both;
  animation-delay: calc(var(--stagger-i, 0) * 55ms);
}

/* ── 3. Stat counter ──────────────────────────────────── */
/* JS drives the count-up; no CSS needed beyond visibility. */

/* ── 4. URGENT badge pulse ────────────────────────────── */
/* Semantic: signals active urgency, not decoration. */
@keyframes urgent-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(168, 32, 32, 0);
  }
  45% {
    transform: scale(1.035);
    box-shadow: 0 0 0 3px rgba(168, 32, 32, 0.12);
  }
}

.staff-urgent-pulse {
  animation: urgent-pulse 2.6s var(--ease-staff-snap) infinite;
  will-change: transform;
  display: inline-block; /* ensure transform works on inline span */
}

/* ── 5. Panel hover — background only ────────────────── */
/* No translateY: panels use editorial border-grid, lift
   would gap the border lines. Background transition only. */
.portal-public-panel--staff {
  transition:
    background-color 160ms var(--ease-staff-snap),
    border-color 160ms var(--ease-staff-snap);
}

.portal-public-panel--staff:hover {
  background: rgba(255, 255, 255, 0.58);
  border-right-color: rgba(15, 16, 18, 0.14);
  border-bottom-color: rgba(15, 16, 18, 0.14);
}

/* ── 6. Quick action button micro-interaction ─────────── */
.portal-staff-quickbar__btn {
  transition:
    background 140ms var(--ease-staff-snap),
    border-color 140ms var(--ease-staff-snap),
    transform 140ms var(--ease-staff-snap),
    box-shadow 140ms var(--ease-staff-snap);
}

.portal-staff-quickbar__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 16, 18, 0.08);
}

.portal-staff-quickbar__btn:active {
  transform: scale(0.97);
  transition-duration: 70ms;
  box-shadow: none;
}

/* ── 7. Side nav active indicator entrance ────────────── */
/* The ::before rule already scaleX(0.52→1) on active,
   but on initial load it snaps. Add a brief settle. */
.page-shell--with-sidenav .side-nav__link.is-active::before {
  transition-delay: 200ms;
}

/* ── Reduced motion: full opt-out ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .portal-staff-hero__lead,
  .portal-staff-hero__side {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .portal-route-card.staff-route--pending {
    opacity: 1;
    transform: none;
  }

  .portal-route-card.staff-route--in {
    animation: none;
  }

  .staff-urgent-pulse {
    animation: none;
  }

  .portal-public-panel--staff {
    transition: background-color 80ms linear;
  }

  .portal-staff-quickbar__btn {
    transition: background 80ms linear;
    transform: none !important;
    box-shadow: none !important;
  }

  .page-shell--with-sidenav .side-nav__link.is-active::before {
    transition-delay: 0ms;
  }
}