/* shift-handoff: the hero's held stage, the travelling card's layer, and the phone's and the schedule's other states.
   The composition itself (the seam, the tilted panel and phone, the mocks) is the page's (public/site/home.css). */

/* ---------------------------------------------------------------- the stage: one full screen, live and at rest */
/* live (scenes.css): the section is two screens with no padding and the stage sticks a screen tall, so the stage carries the
   hero's own padding. At rest the section keeps the hero's padding (scenes.css), and the stage reaches back over it, so the
   green field runs from the top of the screen to its foot exactly as it does live. */
main > .hero--handoff.is-live > .sc__stage { padding: calc(var(--nav) + var(--hgap)) 0 calc(var(--hpadb) + var(--bar)); }
main > .hero--handoff:not(.is-live) > .sc__stage {
  height: 100vh; height: 100svh;
  margin: calc(-1 * (var(--nav) + var(--hgap))) 0 calc(-1 * (var(--hpadb) + var(--bar)));
  padding: calc(var(--nav) + var(--hgap)) 0 calc(var(--hpadb) + var(--bar));
}
.hero--handoff > .sc__stage { position: relative; }
/* the photograph and its light (home.css) lie under the words; the hero holds no docked strip, so its one block takes the whole
   content box (716 at 1440x900), as it did directly in the section */
.hero--handoff > .sc__stage > .wrap { position: relative; z-index: 1; height: 100%; }
.hero--handoff > .sc__stage > .wrap > .hero-text { min-height: 0; height: 100%; }
/* a phone: the hero is at least a screen and grows with what it holds (system.css's hero rule, one box down) */
@media (max-width: 639px) {
  main > .hero--handoff:not(.is-live) > .sc__stage { height: auto; min-height: 100vh; min-height: 100lvh; display: grid; grid-template-rows: minmax(0, 1fr); }
  .hero--handoff > .sc__stage > .wrap { height: auto; }
}

/* before the scene mounts (React hydrates first, then the kit loads): the words and the screens show at once, as they will
   live; only what the scene places waits (the card and the drawn line), so nothing jumps when it mounts and the headline
   never waits on a module. The kit's 2.5 s mark (sc-safe) shows everything should the module never come. */
.sc-js:not(.sc-safe) main > .hero--handoff.sc:not(.is-live):not(.is-rest) > .sc__stage { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .sc-js:not(.sc-safe) main > .hero--handoff.sc:not(.is-live):not(.is-rest) :is([data-handoff-card], [data-handoff-path]) { visibility: hidden; }
}
/* (under reduced motion the card is already where the still keeps it, in the deck, so it shows from the first paint) */
/* where the scene will run live, the phone already waits as it will at the start: the deck's slot dashed, the buttons at 40% */
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sc-js:not(.sc-safe) main > .hero--handoff.sc:not(.is-live):not(.is-rest) .cb-deck__acts:not(:has(:focus-visible)) .cb-btn--take { color: var(--cb-take-wait); box-shadow: none; }
  .sc-js:not(.sc-safe) main > .hero--handoff.sc:not(.is-live):not(.is-rest) .cb-deck__acts:not(:has(:focus-visible)) .cb-btn--pass { color: var(--cb-pass-wait); box-shadow: none; }
  .sc-js:not(.sc-safe) main > .hero--handoff.sc:not(.is-live):not(.is-rest) .cb-deck::before { opacity: 1; }
}

/* ---------------------------------------------------------------- the card's layer (live only) */
/* the card travels in its own layer over both screens, with the composition's perspective (set by the scene to the same
   distance and origin), so its flight is never clipped by the phone's screen and it lands exactly on the deck */
.cb-fly { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sc:not(.is-live) .cb-fly { display: none; }
.cb-fly > .cb-deck__card { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; pointer-events: auto; touch-action: pan-y; backface-visibility: hidden; }
.cb-fly__shadow { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 28px; opacity: 0;
  background: radial-gradient(closest-side, rgb(12 30 24 / .5), rgb(12 30 24 / .26) 55%, rgb(12 30 24 / 0)); }
.cb-fly__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--cb-dot, #7fa397); }
@media (pointer: fine) and (min-width: 1024px) {
  .cb-fly > .cb-deck__card { cursor: grab; user-select: none; -webkit-user-select: none; }
  .cb-fly > .cb-deck__card.is-grabbed { cursor: grabbing; }
}

/* while the card is on its way the phone's two buttons wait: their labels dim and Take it loses its lift (the fills stay, so
   the phone keeps one look for its buttons in both states); Take it's label keeps 4.9:1 on its green, Not this one's 6:1,
   the focus ring 3:1. They stay live buttons, a button in the group with keyboard focus shows the group at full strength,
   and they come to full as the card lands. */
.cb-phone { --cb-take-wait: rgb(255 255 255 / .74); --cb-pass-wait: var(--p-muted, #5d6270); }
.cb-phone .cb-btn { transition: transform var(--dur, 150ms) var(--ease, ease), background-color 200ms var(--ease, ease), color 200ms var(--ease, ease), box-shadow 200ms var(--ease, ease); }
.cb-phone.is-away .cb-deck__acts:not(:has(:focus-visible)) .cb-btn--take { color: var(--cb-take-wait); box-shadow: none; }
.cb-phone.is-away .cb-deck__acts:not(:has(:focus-visible)) .cb-btn--pass { color: var(--cb-pass-wait); box-shadow: none; }
/* and the deck shows where it will land: the schedule's dashed slot, on the phone */
.cb-phone .cb-deck::before { content: ""; position: absolute; inset: 0; border-radius: 18px; border: 1.5px dashed color-mix(in oklab, var(--cb-green) 45%, transparent);
  background: color-mix(in oklab, var(--cb-green) 3%, transparent); opacity: 0; transition: opacity 200ms var(--ease, ease); pointer-events: none; }
.cb-phone.is-away .cb-deck::before { opacity: 1; }

/* ---------------------------------------------------------------- the phone's board: open, passed, taken */
.cb-board { position: relative; display: flex; flex-direction: column; gap: inherit; }
.cb-deck__card { transition: opacity 240ms var(--ease, ease), translate 300ms var(--m-ease-enter, ease); }
.cb-deck__card.is-passed { translate: -40px 0; opacity: 0; transition-duration: 300ms; }
.cb-deck__card.is-gone { opacity: 0; }
.cb-board > .cb-deck__acts { transition: opacity 240ms var(--ease, ease); }
.cb-board.is-passed > .cb-deck__acts, .cb-board.is-taken > .cb-deck__acts { opacity: 0; }
.cb-board__empty, .cb-board__yours { position: absolute; inset: 0; opacity: 0; transition: opacity 240ms var(--ease, ease); }
.cb-board.is-passed > .cb-board__empty, .cb-board.is-taken > .cb-board__yours { opacity: 1; }
.cb-board.is-passed > .cb-board__empty { transition-delay: 120ms; }
/* a drop on a phone runs from the row above the screen, so the screen does not clip it while it falls */
.cb-phone.is-dropping .cb-phone__screen { overflow: visible; }

/* Monday's row: the open parts and the taken parts share their cells and cross over in 300ms */
.cb-sched__row--mon > .cb-av { grid-area: 1 / 1; }
.cb-sched__row--mon > .cb-sched__text { grid-area: 1 / 2; display: grid; }
.cb-sched__row--mon > .cb-sched__text > .cb-sched__who { grid-area: 2 / 1; }
.cb-sched__row--mon > :is(.cb-sched__slot, .cb-sched__end) { grid-area: 1 / 3; justify-self: end; }
.cb-sched__row--mon :is([data-handoff-open], [data-handoff-taken]) { transition: opacity 300ms var(--ease, ease), color 300ms var(--ease, ease); }
.cb-sched__row--mon [data-handoff-taken] { opacity: 0; }
.cb-sched__row--mon.is-taken [data-handoff-taken] { opacity: 1; }
.cb-sched__row--mon.is-taken [data-handoff-open] { opacity: 0; }
/* a phone's strip is too narrow for the chip beside the hours: it sits, compact, at the end of the row's second line */
@media (max-width: 639px) {
  .cb-sched__row--mon { position: relative; }
  .cb-sched__row--mon > .cb-sched__end { position: absolute; right: 4px; bottom: 7px; }
  .cb-sched__row--mon > .cb-sched__end > .cb-chip { height: 22px; padding: 0 7px; font-size: 11px; }
}

/* after Take it the dotted line has done its job: it fades */
.hero--handoff :is(.cb-fly__path, [data-handoff-path]) { transition: opacity 400ms var(--ease, ease); }
.hero--handoff.is-taken :is(.cb-fly__path, [data-handoff-path]) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cb-deck__card, .cb-board > *, .cb-sched__row--mon *, .cb-phone .cb-deck__acts, .cb-phone .cb-btn, .hero--handoff :is(.cb-fly__path, [data-handoff-path]) { transition: none !important; }
}