/* ---------------------------------------------------------------------------
   week.css — the arrival of home §6's week of classes.
   ---------------------------------------------------------------------------
   A non-JSX file under hifi/ for the same reason as deck.css and grid.css:
   keyframes and `.is-live` descendant selectors cannot be inline styles.
   <link>ed by index.html only. Without it §6 renders as a finished, static week,
   which is a working section rather than an obviously broken one — so the link
   is easy to lose in a refactor.

   THE MOMENT: one wave crosses the week, column by column, and each card's
   details settle in just behind the card itself. It runs ONCE, when the week
   reaches the shared reveal point, and then rests.

   `--cd` is set per card by mocks/schedule-week.jsx and DERIVED from the card's
   place in the week, never hand-tuned — same rule as §2's bento.

   `both` is load-bearing, exactly as in grid.css: it pins each card to its 0%
   frame through its own delay. Without it a card sits at its finished state
   until its turn and then snaps, so some read as "already there" and others as
   arriving late. Nothing here runs before `.is-live`, which the section adds
   only when motion is allowed — so reduced motion and no-JS both land on the
   finished week with no delay at all.
   --------------------------------------------------------------------------- */

.cd-week.is-live .cd-week__card {
    animation: cdWkCard 0.52s var(--cd, 0s) var(--wk-ease) both;
}
@keyframes cdWkCard {
    0% {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* The details fill in behind their own card rather than with it, so a card
   reads as arriving and THEN being configured — which is the sentence the
   section is making (set the week, assign instructors, attach points). */
.cd-week.is-live .cd-week__meta {
    animation: cdWkMeta 0.46s calc(var(--cd, 0s) + 0.24s) var(--wk-ease) both;
}
@keyframes cdWkMeta {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-week *,
    .cd-week *::before,
    .cd-week *::after {
        animation: none !important;
        transition: none !important;
    }
}