/* ══════════════════════════════════════════════════════════
   日历翻页：横向滑动

   上一版用 rotateY 做翻书，透视会把纸张靠近视点的那一边往外投射，
   右侧几列日期顶出了卡片。这一版只在平面内做位移，再由外层
   overflow:hidden 兜底 —— 结构上就不可能溢出。

   旧页往一侧滑出、新页从另一侧滑入，两张同时动，读起来是「整块内容
   被推走」，方向一目了然。
   ══════════════════════════════════════════════════════════ */

/* 外层负责裁切。日历格子是圆的，裁切边缘给点圆角免得切出直角。
   只在动画期间开启裁切：常态下留着 visible，避免影响 hover 时
   .cal-day 放大到 1.08 的那点溢出。 */
.cal-slide {
  position: relative;
}
.cal-slide.sliding {
  overflow: hidden;
  border-radius: 8px;
}

/* 旧的那一页：绝对定位盖在新网格上，不挡鼠标 */
.cal-slide > .cal-ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* ── 往后翻（下个月）：旧的推向左，新的从右边进来 ── */
.cal-slide.to-next > .cal-ghost {
  animation: calSlideOutLeft .34s cubic-bezier(.4,0,.2,1) both;
}
.cal-slide.to-next > .cal-days:not(.cal-ghost) {
  animation: calSlideInRight .34s cubic-bezier(.2,.7,.3,1) both;
}

/* ── 往前翻（上个月）：镜像 ── */
.cal-slide.to-prev > .cal-ghost {
  animation: calSlideOutRight .34s cubic-bezier(.4,0,.2,1) both;
}
.cal-slide.to-prev > .cal-days:not(.cal-ghost) {
  animation: calSlideInLeft .34s cubic-bezier(.2,.7,.3,1) both;
}

/* 位移只用百分比，跟着容器走，窄屏也不会算错。
   带一点透明度变化，纯位移会显得生硬。 */
@keyframes calSlideOutLeft {
  from { transform: translateX(0);      opacity: 1; }
  to   { transform: translateX(-38%);   opacity: 0; }
}
@keyframes calSlideInRight {
  from { transform: translateX(38%);    opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}
@keyframes calSlideOutRight {
  from { transform: translateX(0);      opacity: 1; }
  to   { transform: translateX(38%);    opacity: 0; }
}
@keyframes calSlideInLeft {
  from { transform: translateX(-38%);   opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}

/* ── 月份标题跟着走一小段，方向感更明确 ── */
.cal-title.cal-t-next { animation: calTitleNext .38s cubic-bezier(.2,.7,.3,1) both; }
.cal-title.cal-t-prev { animation: calTitlePrev .38s cubic-bezier(.2,.7,.3,1) both; }
@keyframes calTitleNext {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes calTitlePrev {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

/* 连点时按钮给个回弹，反馈别断 */
.cal-nav:active { transform: scale(.9); }

@media (prefers-reduced-motion: reduce) {
  .cal-slide > .cal-ghost,
  .cal-slide > .cal-days,
  .cal-title.cal-t-next,
  .cal-title.cal-t-prev { animation: none !important; }
  .cal-slide > .cal-ghost { display: none; }
}