/* ============================================================================
   motion-polish.css — Dashboard micro-motion & interaction polish
   ----------------------------------------------------------------------------
   Additive layer, loaded LAST. Reuses the apple-polish easing / navy-glow /
   elevation tokens so motion feels native to the command center rather than
   bolted on. Scoped to .page / .nav-item / .cc-* so it never fights apple-
   polish-progressive (which owns the generic .btn / .card utilities). Every
   effect is disabled under prefers-reduced-motion.
   2026-06-10 · tuned for restraint (design-guardian pass)
   ============================================================================ */

:root {
  /* Inherit the design-system curves/tokens when present; fall back if not. */
  --mp-ease:   var(--apl-ease-out,      cubic-bezier(0.16, 1, 0.3, 1));
  --mp-spring: var(--apl-spring-snappy, cubic-bezier(0.34, 1.56, 0.64, 1));
  --mp-glow:   var(--lg-border-glow,    rgba(47, 92, 168, 0.20));
}

/* ── 1 · View entrance ───────────────────────────────────────────────────────
   When a page becomes active its sections slide UP into place — an expressive,
   cinematic reveal (Atakan, 2026-06-10: "dbi anda appear olmasın, slide up gibi
   ama daha estetik"). Each section travels 22px with a slight scale settle on a
   soft-overshoot spring, staggered per section so the view composes itself top
   to bottom. Replays on every nav switch (children only match .page.active
   while shown). */
@keyframes mp-rise {
  0%   { opacity: 0; transform: translateY(22px) scale(0.985); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.page.active > * {
  animation: mp-rise 0.62s var(--mp-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}
.page.active > *:nth-child(1) { animation-delay: 0.03s; }
.page.active > *:nth-child(2) { animation-delay: 0.09s; }
.page.active > *:nth-child(3) { animation-delay: 0.15s; }
.page.active > *:nth-child(4) { animation-delay: 0.21s; }
.page.active > *:nth-child(5) { animation-delay: 0.27s; }
.page.active > *:nth-child(6) { animation-delay: 0.33s; }
.page.active > *:nth-child(7) { animation-delay: 0.38s; }
.page.active > *:nth-child(n + 8) { animation-delay: 0.42s; } /* tail cap */

/* ── 2 · Sidebar nav ─────────────────────────────────────────────────────────
   Smooth hover glide (was instant) + a navy accent bar that springs in on the
   active item to anchor the eye. The bar sits INSIDE the item box (left:0) so a
   stray ancestor overflow:hidden can never clip it. */
.nav-item {
  position: relative;
  transition: background-color 0.2s var(--mp-ease),
              color 0.2s var(--mp-ease),
              transform 0.18s var(--mp-ease);
}
.nav-item:hover { transform: translateX(1.5px); }

.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #2f5ca8);
  opacity: 0;
  transform: translateY(-50%);
  transition: height 0.3s var(--mp-spring), opacity 0.2s var(--mp-ease);
  pointer-events: none;
}
.nav-item.active::before { height: 60%; opacity: 1; }

/* ── 3 · Command-center cards ────────────────────────────────────────────────
   Glanceable cards lift one quiet step on hover, using the system elevation
   token (not a bespoke shadow) plus a faint navy edge-glow. Interactive work
   surfaces (assistant / reminders inputs) are intentionally excluded — a lift
   under a text field reads as noise. */
.cc-card,
.cc-move-card,
.cc-report-card,
.cc-week-card {
  transition: transform 0.26s var(--mp-ease),
              box-shadow 0.26s var(--mp-ease),
              border-color 0.26s var(--mp-ease);
}
.cc-card:hover,
.cc-move-card:hover,
.cc-report-card:hover,
.cc-week-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lg-shadow-2, 0 16px 32px -8px rgba(0, 0, 0, 0.55)),
              0 0 0 1px var(--mp-glow);
}

/* ── 4 · Assistant input ─────────────────────────────────────────────────────
   The primary input blooms a navy focus ring so it clearly takes focus. All
   color derived from the accent token — no hard-coded navy. */
.cc-asistan-input-row {
  transition: box-shadow 0.25s var(--mp-ease), border-color 0.25s var(--mp-ease);
}
.cc-asistan-input-row:focus-within {
  box-shadow: 0 0 0 1px var(--mp-glow),
              0 10px 26px -16px color-mix(in srgb, var(--accent, #2f5ca8) 50%, transparent);
}

/* ── 5 · Reduced motion ──────────────────────────────────────────────────────
   Anyone who asks for less motion gets state changes with no travel. */
@media (prefers-reduced-motion: reduce) {
  .page.active > *,
  .nav-item,
  .nav-item::before,
  .cc-card,
  .cc-move-card,
  .cc-report-card,
  .cc-week-card,
  .cc-asistan-input-row {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .nav-item:hover,
  .cc-card:hover,
  .cc-move-card:hover,
  .cc-report-card:hover,
  .cc-week-card:hover {
    transform: none !important;
  }
}