/* Section 2: a day in the garage. A line that draws with the scroll, steps that light up,
   and a sticky phone whose missed call counter follows them, forward and back. */
#day .day-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:clamp(32px,6vw,96px); align-items:start; margin-top:clamp(28px,4vw,48px)}
#day .day-steps{list-style:none; margin:0; padding:0; padding-inline-start:36px; position:relative; display:grid; gap:clamp(56px,9vh,110px)}
#day .day-track{position:absolute; top:6px; bottom:6px; inset-inline-start:9px; width:2px; background:var(--lav-200); border-radius:2px}
#day .day-fill{position:absolute; inset:0; background:var(--brand); transform-origin:top; transform:scaleY(1)}
#day .day-step{position:relative; display:grid; gap:6px}
#day .day-step::before{content:""; position:absolute; inset-inline-start:-33px; top:8px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--brand)}
#day .day-step time{font-weight:700; font-size:1.15rem; color:var(--deep); font-variant-numeric:tabular-nums}
#day .day-step p{margin:0; font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.5; color:var(--ink)}
#day .day-phone-wrap{position:sticky; top:100px}

/* The steps column is shorter than the sticky phone's docked range, so the phone (and its
   count) unsticks and scrolls out of view before the last step (20:00) lights up. Extra
   room below the steps keeps the phone docked through the climax. */
@media (min-width:901px){
  #day .day-steps{padding-bottom:30vh}
}
#day .day-note{margin:12px 0 0; text-align:center; font-size:.85rem; color:var(--dim)}
#day .day-close{margin:clamp(48px,7vw,88px) auto 0; max-width:820px; text-align:center; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.55}

/* Scroll states exist only when the script runs; without it everything shows. */
#day.day-js .day-step{opacity:.35; transition:opacity .4s ease-out}
#day.day-js .day-step.is-on{opacity:1}
#day.day-js .day-step::before{transition:background .3s}
#day.day-js .day-step.is-on::before{background:var(--brand)}
/* Newest call on top: a row opens from nothing and pushes the older ones down, like a real log. */
#day.day-js .day-row{max-height:0; padding-block:0; opacity:0; transition:max-height .35s ease-out, padding .35s ease-out, opacity .3s ease-out}
#day.day-js .day-row.is-on{max-height:64px; padding-block:9px; opacity:1}

/* The sky: the hall behind the whole section, pinned to the viewport while the section scrolls,
   morning light crossfading to dusk as the timeline goes from 07:30 to 20:00 (--dusk, set by
   garage-day.js). A lavender veil keeps the copy readable, strongest on the copy side. */
#day{isolation:isolate}
#day .day-sky{position:absolute; inset:0; z-index:-1; pointer-events:none}
#day .day-sky::before, #day .day-sky::after{content:""; position:absolute; left:0; right:0; z-index:1; height:220px}
#day .day-sky::before{top:0; background:linear-gradient(#f7f4ff,rgba(247,244,255,0))}
#day .day-sky::after{bottom:0; background:linear-gradient(rgba(247,244,255,0),#f7f4ff)}
#day .day-sky-pin{position:sticky; top:0; height:100vh; overflow:hidden}
#day .day-sky-img{position:absolute; inset:-24px; background:#e4e2ea url("garage/hall-v1.webp") 50% 44%/cover no-repeat; filter:blur(3px) saturate(.9)}
#day .day-sky-pm{background:#2a2440 url("garage/hall-evening-v1.webp") 40% 42%/cover no-repeat; opacity:var(--dusk,0); will-change:opacity}
#day .day-sky-veil{position:absolute; inset:0; background:linear-gradient(to left,rgba(247,244,255,.93) 0%,rgba(247,244,255,.84) 42%,rgba(247,244,255,.5) 70%,rgba(247,244,255,.32) 100%)}

@media (max-width:900px){
  #day .day-grid{grid-template-columns:1fr}
  /* On phones the counter rides under the header as an opaque band the width of the screen,
     so the steps slide beneath it instead of showing through around the phone. */
  #day .day-phone-wrap{position:sticky; top:72px; order:-1; z-index:1;
    margin-inline:calc(var(--pad-x) * -1); padding:10px var(--pad-x) 10px;
    background:#f7f4ff; box-shadow:0 12px 18px -14px rgba(30,26,51,.22)}
  /* The phone folds to its red counter badge. */
  #day .phone{width:min(280px,76vw); padding:0; border-radius:16px; background:none; box-shadow:0 10px 24px -12px rgba(40,24,90,.35)}
  #day .phone-screen{height:auto; min-height:0; aspect-ratio:auto; border-radius:16px}
  #day .phone-screen::before, #day .phone-screen::after, #day .phone-status, #day .phone-app, #day .phone-rows{display:none}
  #day .phone-count{margin:0; padding:8px 14px}
  #day .phone-count b{font-size:2.3rem}
  #day .day-sky-img{background-image:url("garage/hall-m-v1.webp"); background-position:50% 30%; filter:none}
  #day .day-sky-pm{background-image:url("garage/hall-evening-m-v1.webp")}
  #day .day-sky-veil{background:rgba(247,244,255,.8)}
  #day .day-note{margin-top:6px}
  #day .day-steps{gap:clamp(48px,14vh,96px); padding-top:24px}
}
@media (max-height:620px){ #day .day-phone-wrap{position:static} }
@media (prefers-reduced-motion:reduce){
  #day.day-js .day-step, #day.day-js .day-row{opacity:1; transform:none; transition:none}
}