/* Motion: page transitions between tabs, tab-bar indicator, list entrance. */

/* ---------- page transition ----------
   The incoming page slides in from the side its tab sits on, so movement
   matches the direction you navigated. */
@keyframes page-in-right {
  from { opacity: 0; transform: translate3d(22px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes page-in-left {
  from { opacity: 0; transform: translate3d(-22px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.page.enter-right { animation: page-in-right .26s cubic-bezier(.22, .8, .3, 1) both; }
.page.enter-left  { animation: page-in-left  .26s cubic-bezier(.22, .8, .3, 1) both; }

/* body swaps (day <-> week <-> table) get a lighter fade */
.sched-view { animation: fade-up .2s ease both; }

/* ---------- tab bar indicator ---------- */
.tabbar { position: relative; }
.tab-indicator {
  position: absolute; top: 0; left: 0;
  width: calc(100% / var(--tabs, 3)); height: 2px;
  background: var(--primary); border-radius: 0 0 2px 2px;
  transform: translateX(calc(100% * var(--active, 0)));
  transition: transform .28s cubic-bezier(.22, .8, .3, 1);
}
.tab-item .tab-icon { transition: transform .2s ease; }
.tab-item.active .tab-icon { transform: translateY(-1px) scale(1.06); }
.tab-item:active .tab-icon { transform: scale(.92); }

/* ---------- segmented control ---------- */
.segmented button { transition: background .18s ease, color .18s ease; }

/* ---------- pressable feedback ---------- */
.btn:active, .icon-btn:active, .day-pill:active,
.week-chip:active, .wp-item:active, .acc-item:active { transform: scale(.98); }
.btn, .icon-btn, .day-pill, .week-chip, .wp-item, .acc-item { transition: transform .12s ease; }

/* ---------- favourite star ---------- */
.fav-star { transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), color .16s ease; }
.fav-star.on { transform: scale(1.12); }

/* ---------- list entrance (staggered, cheap) ---------- */
.emp-cards .emp-card { animation: fade-up .22s ease both; }
.emp-cards .emp-card:nth-child(1) { animation-delay: .01s; }
.emp-cards .emp-card:nth-child(2) { animation-delay: .03s; }
.emp-cards .emp-card:nth-child(3) { animation-delay: .05s; }
.emp-cards .emp-card:nth-child(4) { animation-delay: .07s; }
.emp-cards .emp-card:nth-child(n+5) { animation-delay: .08s; }

/* ---------- respect user preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .page.enter-right, .page.enter-left, .sched-view,
  .emp-cards .emp-card { animation: none; }
  .tab-indicator { transition: none; }
  .btn:active, .icon-btn:active, .day-pill:active,
  .week-chip:active, .wp-item:active, .acc-item:active { transform: none; }
}

/* ---------- icon feedback ---------- */
.icon-btn .ico,
.btn .ico,
.acc-item .ico,
.fr-x .ico,
.fav-tag button .ico { transition: transform .18s cubic-bezier(.34, 1.4, .64, 1), color .15s ease; }

.icon-btn:hover .ico { transform: scale(1.14); color: var(--text); }
.icon-btn:active .ico { transform: scale(.9); }
.btn:hover .ico { transform: translateX(-1px) scale(1.06); }
.btn:active .ico { transform: scale(.92); }
.acc-item:hover .ico { transform: scale(1.12); }
.fr-x:hover .ico, .fav-tag button:hover .ico { transform: rotate(90deg) scale(1.1); }

/* the key icon gives a little wiggle — it is the "change password" affordance */
#pwBtn:hover .ico { animation: key-wiggle .4s ease; }
@keyframes key-wiggle {
  0%, 100% { transform: rotate(0) scale(1.1); }
  35% { transform: rotate(-14deg) scale(1.1); }
  70% { transform: rotate(10deg) scale(1.1); }
}
#logoutBtn:hover .ico { transform: translateX(2px) scale(1.1); }
#setBtn:hover .ico { transform: rotate(25deg) scale(1.1); }

.day-th-btn:hover .dow { color: var(--primary); }
.cal-cell:not(:disabled):hover { transform: translateY(-1px); }
.cal-cell { transition: transform .12s ease, background .15s ease; }

@media (prefers-reduced-motion: reduce) {
  .icon-btn:hover .ico, .btn:hover .ico, .acc-item:hover .ico,
  #pwBtn:hover .ico, #logoutBtn:hover .ico, #setBtn:hover .ico,
  .cal-cell:not(:disabled):hover { transform: none; animation: none; }
}