/* Mobiele dagnavigatie: rustige agenda-animaties in Papiermolen-stijl. */
@media (max-width: 640px) {
  .gantt-wrapper {
    overflow: hidden;
  }

  .mobile-day-view {
    will-change: transform, opacity;
  }

  /* De datumstrip voelt als een echte horizontale agenda. */
  .mobile-day-strip {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-day-strip::-webkit-scrollbar {
    display: none;
  }

  .mobile-day-chip {
    transition: transform 180ms cubic-bezier(.22,.61,.36,1),
                border-color 180ms ease,
                background-color 180ms ease,
                box-shadow 180ms ease;
  }

  .mobile-day-chip.is-active {
    transform: scale(1.055);
  }

  .mobile-day-arrow {
    transition: transform 150ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }

  .mobile-day-arrow:active,
  .mobile-day-chip:active {
    transform: scale(.96);
  }

  /* Volgende dag komt subtiel van rechts, vorige dag van links. */
  .mobile-day-view.day-enter-from-right {
    animation: mobileDayFromRight 270ms cubic-bezier(.22,.61,.36,1) both;
  }

  .mobile-day-view.day-enter-from-left {
    animation: mobileDayFromLeft 270ms cubic-bezier(.22,.61,.36,1) both;
  }

  @keyframes mobileDayFromRight {
    from { opacity: .35; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes mobileDayFromLeft {
    from { opacity: .35; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-day-strip { scroll-behavior: auto; }
    .mobile-day-chip,
    .mobile-day-arrow { transition: none; }
    .mobile-day-chip.is-active { transform: none; }
    .mobile-day-view.day-enter-from-right,
    .mobile-day-view.day-enter-from-left { animation: none; }
  }
}