/* ============================================================
   styles-motion.css — visual polish: parallax, fade-up, hover, transitions
   ALL animations are inside prefers-reduced-motion: no-preference
   ============================================================ */

/* ── A. Parallax Background ── */
@media (prefers-reduced-motion: no-preference) {
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(
      circle,
      rgba(139, 92, 246, 0.06) 1px,
      transparent 1px
    );
    background-size: 28px 28px;
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
  }
}

/* On mobile: skip parallax */
@media (max-width: 767px) {
  body::before {
    display: none;
  }
}

/* ── B. Fade-up on scroll ── */
@media (prefers-reduced-motion: no-preference) {
  .fade-in-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 400ms ease, transform 400ms ease;
  }
  .fade-in-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in-on-scroll {
    opacity: 1;
    transform: none;
  }
}

/* ── C. Hover effects — buttons ── */
@media (prefers-reduced-motion: no-preference) {
  /* All clickable buttons: lift + shadow + brightness */
  .btn:hover:not(:disabled),
  button.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    filter: brightness(1.05);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  }
  .btn {
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  }

  /* Icon buttons: rotate + scale */
  .btn-icon:hover:not(:disabled) {
    transform: rotate(15deg) scale(1.1) !important;
  }

  /* Primary action buttons: glow */
  .btn-primary:hover:not(:disabled) {
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.22), 0 6px 20px rgba(0,0,0,0.25) !important;
    transform: translateY(-2px) !important;
  }
  .btn-danger:hover:not(:disabled) {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.22), 0 6px 20px rgba(0,0,0,0.25) !important;
    transform: translateY(-2px) !important;
  }
  .btn-ok:hover:not(:disabled),
  .btn-success:hover:not(:disabled) {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.22), 0 6px 20px rgba(0,0,0,0.25) !important;
    transform: translateY(-2px) !important;
  }

  /* Sidebar nav items: slide-right + accent border */
  .nav-item {
    transition: background 150ms ease, transform 150ms ease, border-left 150ms ease;
    border-left: 3px solid transparent;
  }
  .nav-item:hover:not(.active) {
    transform: translateX(2px);
    border-left: 3px solid var(--brand, #8b5cf6);
    background: rgba(139, 92, 246, 0.06);
  }
  .nav-item.active {
    border-left: 3px solid var(--brand, #8b5cf6);
  }

  /* KPI / stat card: accent bar grows, number scales */
  .kpi {
    transition: box-shadow 200ms ease;
    overflow: hidden;
    position: relative;
  }
  .kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brand, #8b5cf6);
    transition: height 150ms ease;
  }
  .kpi:hover::before {
    height: 4px;
  }
  .kpi:hover .kpi-value {
    transform: scale(1.04);
    transform-origin: left center;
  }
  .kpi-value {
    transition: transform 150ms ease;
  }
}

/* ── D. Word-by-word animated heading ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes wordFadeUp {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animated-word {
    display: inline-block;
    opacity: 0;
    animation: wordFadeUp 300ms ease forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animated-word {
    opacity: 1;
    transform: none;
  }
}

/* ── F. Skeleton shimmer ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
  }

  .sk {
    background: linear-gradient(
      90deg,
      var(--bg-elev-2, rgba(255,255,255,0.05)) 25%,
      rgba(255,255,255,0.12) 50%,
      var(--bg-elev-2, rgba(255,255,255,0.05)) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite linear;
  }
}

/* ── G. Page transition ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pageEnter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* IMPORTANT: do NOT use animation-fill-mode: forwards here.
   * Residual transform (even matrix identity) creates a containing
   * block for fixed-position descendants, which breaks every
   * .drawer-overlay modal (Request PTO, Create Room, etc.) by
   * pushing them below the viewport. The animation still renders
   * because pageEnter sets opacity + transform mid-flight; after
   * 220ms we revert to the base style which has no transform. */
  .page-transition-enter {
    animation: pageEnter 220ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-transition-enter {
    animation: none;
    opacity: 1;
  }
}

/* ── H. Sidebar hover tooltip ── */
.nav-item {
  position: relative;
}

.nav-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elev-3, #1e1e2e);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text, #e4e4ef);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: opacity 150ms ease;
}

.nav-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: rgba(255,255,255,0.1);
}

.nav-item:hover .nav-tooltip {
  opacity: 1;
}

/* ── E. Interactive chart animations ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes lineDrawIn {
    from { stroke-dashoffset: var(--line-length, 1000); }
    to   { stroke-dashoffset: 0; }
  }

  .chart-line-animated {
    animation: lineDrawIn 900ms ease forwards;
  }

  /* Donut slice hover */
  .donut-slice {
    transition: transform 200ms ease;
    transform-origin: 65px 65px; /* center of typical donut */
    cursor: pointer;
  }
  .donut-slice:hover {
    transform: scale(1.06);
  }

  /* Bar segment hover */
  .bar-seg {
    transition: filter 150ms ease, opacity 150ms ease;
    cursor: pointer;
  }
  .bar-seg:hover {
    filter: brightness(1.3);
  }

  /* Chart tooltip */
  .chart-tooltip {
    position: absolute;
    background: var(--bg-elev-3, #1e1e2e);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text, #e4e4ef);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 100ms ease;
  }
  .chart-tooltip.visible {
    opacity: 1;
  }
}