/* Bandroom's movement: calm, quick and small, and nothing that loops or needs stopping. Pages fade into
   place and their lists and seat charts settle in just after; sheets, toasts and counts come and go
   gently; and the diary's months slide the way you're going. core/motion.js decides when, and leaves
   it all off for anyone whose phone or computer is set to reduce motion, as does base.css. */

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } }

/* Changing page (core/motion.js): the old page fades away over the new one, and the new page's content
   comes in as it goes, so the two are never muddled together and nothing shows through. --through is
   the old page's fade, which everything arriving waits for. */
::view-transition-old(root) { z-index: 1; animation: fade-out 100ms var(--ease-in) both; }
::view-transition-new(root) { animation: none; }

/* The new page settles a few pixels up as it comes in. Back to a page, it only fades. */
.page-root.arrive { animation: arrive var(--slow) var(--ease) var(--through, 0ms) backwards; }
.page-root.arrive-back { animation: fade-in var(--mid) var(--ease) var(--through, 0ms) backwards; }
.loading { animation: fade-in var(--mid) var(--ease) backwards; }

/* A list's rows follow a moment behind, from the top. */
.arrive :is(.rows, .chat-list, .post-list, .results-list, .ticket-list, .notes-list, .band-grid, .contest-grid, .actions-grid, .tool-tiles, .staff-grid) > * { animation: settle var(--slow) var(--ease) backwards; animation-delay: calc(var(--through, 0ms) + 60ms); }
.arrive :is(.rows, .chat-list, .post-list, .results-list, .ticket-list, .notes-list, .band-grid, .contest-grid, .actions-grid, .tool-tiles, .staff-grid) > :nth-child(2) { animation-delay: calc(var(--through, 0ms) + 95ms); }
.arrive :is(.rows, .chat-list, .post-list, .results-list, .ticket-list, .notes-list, .band-grid, .contest-grid, .actions-grid, .tool-tiles, .staff-grid) > :nth-child(3) { animation-delay: calc(var(--through, 0ms) + 130ms); }
.arrive :is(.rows, .chat-list, .post-list, .results-list, .ticket-list, .notes-list, .band-grid, .contest-grid, .actions-grid, .tool-tiles, .staff-grid) > :nth-child(4) { animation-delay: calc(var(--through, 0ms) + 165ms); }
.arrive :is(.rows, .chat-list, .post-list, .results-list, .ticket-list, .notes-list, .band-grid, .contest-grid, .actions-grid, .tool-tiles, .staff-grid) > :nth-child(5) { animation-delay: calc(var(--through, 0ms) + 200ms); }
.arrive :is(.rows, .chat-list, .post-list, .results-list, .ticket-list, .notes-list, .band-grid, .contest-grid, .actions-grid, .tool-tiles, .staff-grid) > :nth-child(n+6) { animation-delay: calc(var(--through, 0ms) + 235ms); }

/* The band takes its seats, from the conductor outwards (core/seats.js gives each seat its distance). */
@keyframes seat-in { from { opacity: 0; transform: scale(0.5); } }
.arrive .seatchart .seat { animation: seat-in var(--slow) var(--ease) backwards; animation-delay: calc(var(--through, 0ms) + 40ms + var(--d, 0) * 280ms); transform-box: fill-box; transform-origin: center; }

/* The website's opening: the heading, then the words, then the buttons, with the app beside them. */
.arrive .s-hero .s-copy > * { animation: settle 420ms var(--ease) var(--through, 0ms) backwards; }
.arrive .s-hero .s-copy > :nth-child(2) { animation-delay: calc(var(--through, 0ms) + 70ms); }
.arrive .s-hero .s-copy > :nth-child(3) { animation-delay: calc(var(--through, 0ms) + 140ms); }
.arrive .s-hero .s-shot { animation: arrive 480ms var(--ease) calc(var(--through, 0ms) + 160ms) backwards; }

/* The diary's months slide the way you're going, while the rest of the page stays where it is. The bars
   are named too, so the sliding month passes under them. */
:root[data-move] .cal-grid { view-transition-name: cal-month; }
:root[data-move] .topbar { view-transition-name: topbar; }
:root[data-move] .tabbar { view-transition-name: tabbar; }
@keyframes month-out-left { to { opacity: 0; transform: translateX(-32px); } }
@keyframes month-out-right { to { opacity: 0; transform: translateX(32px); } }
@keyframes month-in-right { from { opacity: 0; transform: translateX(32px); } }
@keyframes month-in-left { from { opacity: 0; transform: translateX(-32px); } }
::view-transition-group(cal-month) { animation-duration: var(--slow); animation-timing-function: var(--ease); }
::view-transition-old(cal-month), ::view-transition-new(cal-month) { mix-blend-mode: normal; }
::view-transition-old(cal-month) { animation: month-out-left 160ms var(--ease-in) both; }
::view-transition-new(cal-month) { animation: month-in-right var(--slow) var(--ease) 80ms both; }
:root[data-move='prev']::view-transition-old(cal-month) { animation-name: month-out-right; }
:root[data-move='prev']::view-transition-new(cal-month) { animation-name: month-in-left; }

/* Sheets: the page behind dims as one rises, and when it closes the sheet sinks away and the page
   brightens again (core/ui.js waits for it). */
dialog.sheet[open]::backdrop { animation: fade-in var(--mid) var(--ease); }
dialog.sheet.closing::backdrop { animation: fade-out 200ms var(--ease-in) forwards; }
dialog.sheet.closing .sheet-box { animation: sink 200ms var(--ease-in) forwards; pointer-events: none; }
@keyframes sink { to { opacity: 0; transform: translateY(40px); } }
@keyframes drop { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (min-width: 720px) { dialog.sheet.closing .sheet-box { animation-name: drop; } }

/* Toasts drop away as they go. */
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }
.toast.leaving { animation: toast-out 200ms var(--ease-in) forwards; }

/* The tab you move to grows its highlight from the middle. */
@keyframes grow-in { from { opacity: 0; transform: scaleX(0.5); } }
.tabbar a.moved[aria-current='page'] .ti { animation: grow-in var(--slow) var(--ease); }

/* A count that goes up gives a small bump. */
@keyframes bump { from { transform: scale(0.6); opacity: 0.4; } }
.count.bump { animation: bump var(--slow) var(--ease); }

/* A new message rises into place from its own side. */
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.msg.fresh { animation: msg-in var(--slow) var(--ease) backwards; transform-origin: bottom left; }
.msg.mine.fresh { transform-origin: bottom right; }

/* Questions on the website and the note on a date open and close smoothly, where the browser can. */
.faq details, details.note-toggle { interpolate-size: allow-keywords; }
.faq details::details-content, details.note-toggle::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--mid) var(--ease), content-visibility var(--mid) allow-discrete; }
.faq details[open]::details-content, details.note-toggle[open]::details-content { block-size: auto; }