/* Timetable animation layer only. Keep layout and data styles elsewhere. */

html.schedule-intro-pending #schedule .event {
  opacity: 0;
}

html.schedule-animating #schedule .event,
html.schedule-animating #schedule .period {
  backface-visibility: hidden;
}

.period-toggle {
  transition:
    background-color 160ms ease-out,
    color 160ms ease-out,
    transform 180ms cubic-bezier(.2,.8,.2,1);
}

.period-toggle:active {
  transform: scale(.985);
}

@media (max-width: 650px) {
  html.schedule-animating #schedule .event,
  html.schedule-animating #schedule .period {
    backface-visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.schedule-intro-pending #schedule .event {
    opacity: 1;
  }

  .period-toggle {
    transition: none !important;
  }
}