/* Work card: the standard card from the Paper board "Work · all five cards · standard", with its two climbers.
   Moved out of card-states.html (11 Oct) so all five cards share one card. card.js (WorkCard.mount) brings the
   climbers in; this file holds the card, its layers and the breath.
   Markup, one per card (no ids inside, five cards share a page):
     .work-card[data-plant]  >  .stage  >  .card-wrap  >  article.card.z5  >  .panel, .words, .space
   The engine adds the canvases and the flower layers around the article.
   01 Static: every flower open. 02 Hover on: after 100 ms every flower takes one breath, all together: it eases
   back toward its bud (440 ms, ease in and out) and flows straight out again with a long gentle settle (the fade
   back is done by about 1.7 s, the size and turn settle by 2 s); the buds rise under the flowers as they fold
   and sink as they open, so the stem is never bare. No stop at the bottom: one continuous motion (his notes,
   11 Oct: "the flower should emerge and screen time for the blank climber is less", then "make it smooth
   emerging... it should be smooth and elegant"; the build before folded in 150 ms and paused, which read as a
   blink). 03 Back to static: mouse off, the card is in flower again. Only opacity and transform animate. */

/* Every rule is scoped under .work-card, so the card never restyles a page it sits in (the home page has its own
   .stage and .layer). The defaults are 01 Alight's; every other card sets its own --card, --tag and --panel on its root. */
.work-card {
  --ink: #141414; --muted: #5E5C57; --card: #FCF5D9; --tag: #F2E5B6;
  --panel: radial-gradient(ellipse 60% 75% at 50% 55% in oklab, oklab(95% -0.004 0.043) 0%, oklab(88.8% -0.001 0.077) 60%, oklab(83.1% 0.006 0.091) 100%);
  display: flex; justify-content: center; padding: 0 0 40px; overflow-x: clip;   /* the canvases' margin never adds a sideways scroll */
  font-family: "Geist", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased;
}
.work-card, .work-card * { box-sizing: border-box; }

/* the stage is the Paper board's composition: 892 x 1042, the card at (116, 157) */
.work-card .stage { position: relative; width: 892px; height: 1042px; transform-origin: top center; flex-shrink: 0; touch-action: pan-y; }
.work-card .card-wrap { position: absolute; left: 116px; top: 157px; width: 660px; height: 728px; }
.work-card .layer { position: absolute; left: 0; top: 0; pointer-events: none; }
/* back to front: the stems and leaves behind the card (WebGL), the flowers behind it, the card, the stems and leaves
   in front of its edge (WebGL), then the flowers in front of it and every flower outside the card */
.work-card .z1 { z-index: 1; } .z2 { z-index: 2; } .z4 { z-index: 4; } .z5 { z-index: 5; } .z6 { z-index: 6; } .z7 { z-index: 7; }
.work-card .gl { position: absolute; left: -196px; top: -237px; width: 1052px; height: 1202px; pointer-events: none; }
.work-card .sprite { position: absolute; }
.work-card .unit { position: absolute; will-change: transform; }
.work-card .unit .sprite { left: 0; top: 0; width: 100%; height: 100%; }

/* At rest every flower is open and every bud waits under it at opacity 0.001 (not 0, so the browser has it drawn
   before the first hover). Each flower carries its turn (--turn), the size it folds to (--from) and where it
   meets the stem (transform-origin). --slow is 1, or 4 in slow motion.
   The breath: the fold point falls at 440 ms in all three animations (25.9% of 1700 ms, 22% of 2000 ms).
   Smoothness (his notes, 11 Oct: "smooth and elegant", then "a bit more smoothness"): the turn at the bottom is
   continuous. Folding eases in and out like a sine, cubic-bezier(0.37, 0, 0.63, 1), so it slows to a stop;
   opening starts just as slowly and settles long, cubic-bezier(0.3, 0, 0.1, 1), so there is no kick where the
   two meet (the version before opened with a fast ease-out and jumped at the bottom). The dip is shallower
   (opacity 0.24, not 0.14) and the turn and shrink smaller. (Curves written out: a var() as a keyframe's timing
   function is dropped and the browser falls back to plain ease.) */
.work-card .card-wrap { --slow: 1; }
.work-card .flw, .work-card .bud { will-change: transform, opacity; }
.work-card .flw { opacity: 1; transform: none; }
.work-card .bud { opacity: 0.001; transform: rotate(calc(var(--turn) * -0.3)) scale(1.05); }
.work-card .emerge .flw { animation: flw-fade calc(1700ms * var(--slow)) both, flw-move calc(2000ms * var(--slow)) both; }
.work-card .emerge .bud { animation: bud-rise calc(1700ms * var(--slow)) both; }
@keyframes flw-fade {
  0%     { opacity: 1;    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  25.9%  { opacity: 0.24; animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); }
  100%   { opacity: 1; }
}
@keyframes flw-move {
  0%     { transform: none; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  22%    { transform: rotate(var(--turn)) scale(var(--from)); animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); }
  100%   { transform: none; }
}
/* the buds come up as the flowers fold and go down a little slower than the flowers return, so the two always
   overlap and the stem never shows bare */
@keyframes bud-rise {
  0%     { opacity: 0.001; transform: rotate(calc(var(--turn) * -0.3)) scale(1.05); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  25.9%  { opacity: 0.85;  transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  100%   { opacity: 0.001; transform: rotate(calc(var(--turn) * -0.3)) scale(1.05); }
}

/* the standard card (Paper board "Work · all five cards · standard", in-bloom column)
   Type (his ask, 12 Oct): the page's perfect-fourth scale (12 · 16 · 21 · 28 · 38 · 50 · 67). The card is drawn at card
   size and scaled to fit (0.86 on a 1440 screen), so each size here is its step divided by --card-k: on a 1440 screen
   every card text lands exactly on a step, and within a few percent of it from 1280 to 1536. */
.work-card { --card-k: 0.86; }
.work-card .card { position: relative; width: 660px; height: 728px; padding: 24px; background: var(--card); border-radius: 8px;
        display: flex; flex-direction: column; }
.work-card .panel { position: relative; width: 612px; height: 428px; border-radius: 2px; overflow: clip; flex-shrink: 0; background: var(--panel); }
/* a picture sits at (26, 102) at its own size (width and height in the markup), stands on the panel's bottom edge
   (.stand: device mockups cut at their foot, so the cut is the panel's edge), or fills the panel */
.work-card .panel img { position: absolute; left: 26px; top: 102px; }
.work-card .panel img.stand { top: auto; bottom: 0; }
.work-card .panel img.fill { left: 0; top: 0; width: 100%; height: 100%; }
.work-card .words { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 24px; flex-shrink: 0; }
.work-card .who { font-size: calc(12px / var(--card-k)); line-height: 20px; color: var(--muted); }                       /* 12 */
.work-card .words h2, .work-card .words h3 { margin: 0; font-size: calc(38px / var(--card-k)); font-weight: 500; letter-spacing: -0.03em; line-height: 48px; }   /* 38 */
.work-card .hook { margin: 0; font-size: calc(16px / var(--card-k)); letter-spacing: -0.005em; line-height: 27px; color: #3D3B37; }   /* 16 */
.work-card .tags { display: flex; gap: 8px; padding-top: 8px; }
.work-card .tags span { display: flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--tag);
             font-size: calc(12px / var(--card-k)); font-weight: 500; line-height: 18px; color: #4A4842; }               /* 12 */
/* the right block: Alight's award (RGD laurels), or the plant's specimen label on the other four */
.work-card .award { position: absolute; right: 0; top: 62px; display: flex; align-items: center; gap: 8px; color: #1A1A1A; }
.work-card .award img { width: 26px; height: 57px; flex-shrink: 0; }
.work-card .award div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.work-card .award .mono, .work-card .specimen .mono { font-family: "Geist Mono", monospace; font-size: calc(12px / var(--card-k)); letter-spacing: 0.06em; line-height: 16px; text-transform: uppercase; }   /* 12 */
.work-card .award b { font-size: calc(12px / var(--card-k)); font-weight: 500; line-height: 18px; }                    /* 12 */
.work-card .specimen { position: absolute; right: 0; top: 60px; width: 215px; height: 60px; display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 4px; color: #1A1A1A; }
.work-card .specimen i { font-size: calc(12px / var(--card-k)); font-style: italic; font-weight: 500; line-height: 18px; }   /* 12 */
.work-card .space { position: relative; flex-grow: 1; }
.work-card .cta { position: absolute; left: 0; top: 27px; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 18px;
       border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--card); text-decoration: none;
       font-size: calc(12px / var(--card-k)); font-weight: 500; line-height: 20px; }                                     /* 12 */
.work-card .cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* The button (his ask, 11 Oct: "give CTA a nice clean interaction"). Hover: the arrow stretches toward where it
   leads, its line 4 px longer and its head carried with it, the way the climbers stretch; the words never move,
   and the ink lifts one shade (#2A2825, cream text 13.4:1, 16.8:1 at rest). Line and head share one curve and one time, so they
   stay joined in every frame. In 420 ms on a soft ease-out, back in 300 ms. A press sinks the pill to 97% in
   140 ms. Keyboard focus shows the stretched arrow too. Touch: the press only. Reduced motion: no stretch. */
.work-card .cta { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 300ms ease, border-color 300ms ease; }
.work-card .cta svg { overflow: visible; }
.work-card .cta .shaft, .work-card .cta .head { transition: transform 300ms cubic-bezier(0.33, 0, 0.2, 1); }
.work-card .cta .shaft { transform-box: fill-box; transform-origin: 0 50%; }
.work-card .cta:focus-visible .shaft { transform: scaleX(1.4); }
.work-card .cta:focus-visible .head { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .work-card .cta:hover { background-color: #2A2825; border-color: #2A2825; }   /* the border lifts too, or a dark ring shows */
  .work-card .cta:hover .shaft { transform: scaleX(1.4); }
  .work-card .cta:hover .head { transform: translateX(4px); }
  .work-card .cta:hover .shaft, .work-card .cta:hover .head, .work-card .cta:focus-visible .shaft, .work-card .cta:focus-visible .head {
    transition-duration: 420ms; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
}
.work-card .cta:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .cta .shaft, .cta .head { transform: none !important; } }