/* cybee v3 · S2 One night (track T2, prefix night-). Spec: DIRECTION-v3.md §3 S2, §5 (S2 front), §2.7 (night inks).
   Ground: night #0A0A0B via .cy-night. Only blue text here: 08:00 in #85A7FF. The travelling front is CSS (cy-motion.js reads
   --accent from the root, so a night colour cannot be passed to cyMotion 'front').
   States of .night-line[data-front]:
     (none)   the HTML state = the settled state: four stops lit #85A7FF, the 28×3 front hidden (absorbed at 08:00, review taste-12).
              Used with JS off, under reduced motion / ?motion=still, and after the front has played.
     "ready"  set by s2-night.js when motion is allowed: stops #5E5E63 at rest, front hidden at the first stop.
     "play"   set once at 40% visible: the front travels 620ms cubic-bezier(.22,0,0,1), then fades over 180ms; stops light at 0, 207, 413, 620ms.
   Geometry: the rail is the top edge of the timeline; each cell's 1px left rule meets it, and the 7px stop sits centred on
   that junction. Cells are 3 of 12 columns (2 of 8), so the cell pitch is (W + gap) / 4 and the front travels
   3 × pitch − 21px (stop 1 left edge to stop 4 right edge), written with container units so it holds at every width. */

.night{--night-rest:#5E5E63;--night-stop:#85A7FF}

/* heading block on the section grid */
.night-kicker{grid-column:1 / span 4;margin-bottom:var(--space-4)}
.night-h2{grid-column:1 / span 9}
.night-l{display:block}
.night-setup{grid-column:1 / span 8;margin-top:var(--space-6);font-family:var(--font-display);font-size:clamp(22px,2.2vw,32px);font-weight:500;
  line-height:1.25;letter-spacing:-.03em;color:var(--pg-night-ink);text-wrap:pretty}

/* the setup line is read aloud: one sentence per line from 768px up */
@media (min-width:768px){.night-s{display:block}}

/* the timeline */
.night-line{grid-column:1 / -1;position:relative;margin-top:var(--pg-title-gap);container-type:inline-size}
.night-line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--pg-night-rule)}
.night-list{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap)}
.night-cell{position:relative;grid-column:span 3;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  min-width:0;padding:32px 0 4px 24px;border-left:1px solid var(--pg-night-hair)}
/* the stop: 7px square centred on the junction of the cell rule (x 0..1) and the rail (y 0..1) */
.night-cell::before{content:"";position:absolute;left:-4px;top:-3px;width:7px;height:7px;background:var(--night-stop)}
.night-time{display:block;font-family:var(--font-display);font-size:clamp(40px,5.5vw,56px);font-weight:500;line-height:1;letter-spacing:-.045em;
  color:var(--pg-night-ink);white-space:nowrap}
.night-cell--sent .night-time{color:var(--pg-lift)}
.night-what{display:block;font-size:18px;line-height:1.4;color:var(--pg-night-2)}
.night-front{--night-front-end:translateX(calc(75cqw + .75 * var(--pg-gap) - 21px));position:absolute;left:-3px;top:-1px;width:28px;height:3px;
  background:var(--night-stop);pointer-events:none;transform:var(--night-front-end);opacity:0}
/* review taste-12: the bar is absorbed at 08:00. It shows only while it travels, then fades over 180ms; every settled state (JS off,
   reduced motion, ?motion=still, after the play) hides it, and the four lit stops carry the result. */
@keyframes night-front-go{
  0%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.22,0,0,1)}
  77.5%{opacity:1;transform:var(--night-front-end);animation-timing-function:var(--ease-out)}
  100%{opacity:0;transform:var(--night-front-end)}
}

/* closing lines */
.night-close{grid-column:1 / span 8;margin-top:var(--space-6);font-family:var(--font-display);font-size:clamp(22px,2.2vw,32px);font-weight:500;
  line-height:1.25;letter-spacing:-.03em;color:var(--pg-night-ink);text-wrap:pretty}
.night-answer{grid-column:1 / span 7;margin-top:var(--space-4);color:var(--pg-night-ink)}
.night-label{grid-column:1 / -1;margin-top:16px}

/* the front, played once (s2-night.js) */
.night-line[data-front="ready"] .night-cell::before{background:var(--night-rest)}
.night-line[data-front="ready"] .night-front{opacity:0;transform:none}
.night-line[data-front="play"] .night-front{animation:night-front-go 800ms both}
.night-line[data-front="play"] .night-cell::before{transition:background-color 120ms linear}
.night-line[data-front="play"] .night-cell:nth-child(2)::before{transition-delay:207ms}
.night-line[data-front="play"] .night-cell:nth-child(3)::before{transition-delay:413ms}
.night-line[data-front="play"] .night-cell:nth-child(4)::before{transition-delay:620ms}
/* reduced motion switched on after the timeline was armed: land on the lit state at once (base.css zeroes durations, not delays) */
@media (prefers-reduced-motion:reduce){.night-line[data-front] .night-front,.night-line[data-front] .night-cell::before{transition:none!important;animation:none!important;opacity:0}}
html[data-reduced-motion="true"] .night-line[data-front] .night-front,html[data-reduced-motion="true"] .night-line[data-front] .night-cell::before{transition:none!important;animation:none!important}
html[data-reduced-motion="true"] .night-line[data-front] .night-front{opacity:0}

/* 520 to 899px: 8 columns */
@media (max-width:899px){
  .night-kicker,.night-h2,.night-setup,.night-close,.night-answer{grid-column:1 / -1}
  .night-setup,.night-close{max-width:30em}
  .night-answer{max-width:36em}
  .night-cell{grid-column:span 2}
}

/* phones: four ruled rows on a vertical rail; the front travels down it.
   Rows are exactly 64px, so the stops sit at 64px steps and the front travels 3 × 64 − 21 = 171px. */
@media (max-width:767px){
  .night-line::before{left:3px;right:auto;top:var(--night-stop-y);bottom:0;width:1px;height:auto}
  .night-line{--night-stop-y:24px}                     /* stop centre 27.5px = the cap centre of the 40px times (measured) */
  .night-list{display:block}
  .night-cell{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:baseline;align-content:center;column-gap:16px;height:64px;
    padding:0 0 0 28px;border-left:0}
  .night-cell+.night-cell::after{content:"";position:absolute;left:28px;right:0;top:0;height:1px;background:var(--pg-night-hair)}
  .night-cell::before{left:0;top:var(--night-stop-y)}      /* labels share one column: the widest time (08:00) is 118px at 40px */
  .night-time{font-size:40px}
  .night-what{font-size:16px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:clip}
  .night-front{--night-front-end:translateY(171px);left:2px;top:var(--night-stop-y);width:3px;height:28px}
  .night-line[data-front="ready"] .night-front{transform:none}
}
@media (max-width:519px){
  .night-setup,.night-close{margin-top:32px}
  .night-close{margin-top:40px}
}