/* "A lot happens before you notice": the visitor's own scroll is the night passing.
   No autoplay and no loop, so there is nothing to pause — the reader drives it and can stop
   anywhere. A rail fills as the section crosses the viewport, four statements arrive along it,
   and the ground lifts from deep night toward opening time. Type and light only: no invented
   activity, no timestamps, nothing that needs a disclaimer. */
.care-section { position: relative; isolation: isolate; background: #08202e; color: #fff; overflow: hidden; }
.care-sky { position: absolute; inset: 0; z-index: -2; opacity: var(--care-lift, 0); background: linear-gradient(#0d2e40 0%, #14415a 58%, #1a4a60 100%); }
.care-glow { position: absolute; inset: 0; z-index: -1; opacity: calc(var(--care-lift, 0) * .45); background: radial-gradient(120% 78% at 84% 108%, #d8b98a3d 0%, #d8b98a14 34%, #d8b98a00 66%); }

.care-stage { position: relative; padding-left: 4px; }
.care-when { display: block; color: #c2dae5; font-size: 12px; letter-spacing: .01em; }

.care-beats { position: relative; margin: 18px 0; padding-left: 34px; }
.care-rail { position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: #ffffff26; }
.care-rail i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(#4fd0f5, #7fe0ff); box-shadow: 0 0 12px #4fd0f566; transform: scaleY(0); transform-origin: top; transition: transform .18s linear; }
/* The rail: a faint track the whole way, and a fill the binder scales to scroll progress. */

.care-beats li { position: relative; padding: 3px 0; font-size: clamp(25px, 2.9vw, 39px); font-weight: 500; line-height: 1.22; letter-spacing: -.03em; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.care-beats li + li { margin-top: clamp(20px, 2.3vw, 32px); }
.care-beats li::before { content: ''; position: absolute; left: -34px; top: .52em; width: 12px; height: 12px; margin-top: -6px; border: 2px solid #08202e; border-radius: 50%; background: #4a6d80; transition: background .45s var(--ease), box-shadow .45s var(--ease); }
.care-beats li.is-in { opacity: 1; transform: none; }
.care-beats li.is-in::before { background: #4fd0f5; box-shadow: 0 0 0 4px #4fd0f524, 0 0 14px #4fd0f5aa; }
.care-beats .care-beat-end { color: #8fe4ff; }
.care-beats .care-beat-end.is-in::before { background: #8fe4ff; box-shadow: 0 0 0 5px #8fe4ff2e, 0 0 18px #8fe4ffc4; }

@media(max-width:960px) {
  .care-beats { padding-left: 30px; }
  .care-beats li::before { left: -30px; }
}
@media(max-width:600px) {
  .care-beats { margin: 14px 0; padding-left: 26px; }
  .care-beats li { font-size: clamp(22px, 6.4vw, 28px); }
  .care-beats li + li { margin-top: 18px; }
  .care-beats li::before { left: -26px; width: 10px; height: 10px; margin-top: -5px; }
  .care-when { font-size: 13px; }
}

/* Nothing moves on its own, so reduced motion only needs the arrival transitions removed:
   the binder puts every statement in its final state and the rail at full. */
@media(prefers-reduced-motion:reduce) {
  .care-beats li, .care-rail i { transition: none; }
}