/* Home page: the scroll-driven sunrise and the follow-the-sun clocks. */

/* Sunrise. --rise (registered in org.css, 1 by default) runs from 0 to 1 while the first screen scrolls away: the sun
   climbs and brightens, the sky warms, and the eleven office lights come on in follow-the-sun order. Browsers with
   scroll-driven animations do it in CSS; home.js sets --rise on the others. With reduced motion it stays at 1. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--rise,1);
  background:radial-gradient(70% 60% at 78% 100%,rgba(255,150,60,.2),transparent 70%),linear-gradient(to top,rgba(242,163,58,.08),transparent 55%)}
@keyframes sunrise{from{--rise:0}to{--rise:1}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero{animation:sunrise auto linear both;animation-timeline:scroll(root);animation-range:0 55vh}
  }
}
.hz-lit circle:first-child{transform-box:fill-box;transform-origin:center}

/* Follow-the-sun clocks: eleven offices, their local time, and whether it is day there. Without JavaScript the
   city names stand alone. */
.clocks{margin-top:3.2rem}
.clock-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));border-top:1px solid var(--line-night)}
.clock{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1.2rem .7rem 1.3rem;border-right:1px solid var(--line-night);min-width:0}
.clock:first-child{padding-left:0}
.clock:last-child{border-right:0;padding-right:0}
.clock::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.clock:first-child::before{left:0}
.clock.is-day::before{transform:scaleX(1)}
.clock-city{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);line-height:1.3;min-height:2.6em;display:flex;align-items:flex-start;gap:.45rem}
.clock-city::before{content:"";flex:none;width:6px;height:6px;margin-top:.3em;border-radius:50%;background:var(--sun)}
.clock-time{font-family:var(--f-display);font-weight:300;font-size:clamp(1.35rem,.9rem + .8vw,1.85rem);line-height:1;letter-spacing:-.01em;color:var(--on-night);font-variant-numeric:tabular-nums lining-nums}
.clock-time small{margin-left:.35rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-3);vertical-align:.5em}
.clock-meta{white-space:nowrap;display:flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-3)}
.clock-meta svg{width:12px;height:12px;flex:none}
.clock-time:empty,.clock-meta:empty{display:none}
.has-clocks .clock-city::before{display:none}
.clock.is-night .clock-time{color:var(--on-night-2)}
.clock.is-day .clock-meta{color:var(--sun-2)}
.clocks-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;margin:0 0 1rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-3)}
.clocks-sum:empty{display:none}
.clocks-sum b{color:var(--sun);font-weight:500}
@media (max-width:1060px){
  .clock-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .clock,.clock:first-child,.clock:last-child{padding:1.1rem .9rem 1.2rem;border-right:1px solid var(--line-night);border-bottom:1px solid var(--line-night)}
  .clock:nth-child(4n){border-right:0}
}
@media (max-width:560px){
  .clock-list{grid-template-columns:1fr}
  .clock,.clock:first-child,.clock:last-child{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1rem;padding:.8rem 0;border-right:0}
  .clock-city{min-height:0;font-size:.7rem}
  .clock-time{font-size:1.45rem}
  .clock-meta{min-width:4.6rem}
}