/* PHAXIS homepage: A · reel zoom-through  B · "your night is our workday" (abstract sun scene).
   Motion parts are inert until home-motion.js adds html.hm (skipped for reduced motion). */

/* the example request board is retired (always, also for reduced motion) */
.proc .board{display:none!important}
.proc{grid-template-columns:minmax(0,1fr)!important}

/* ---------- A · hero reel zoom-through ---------- */
.hm .hm-zr{position:relative;height:var(--zr-h,190vh)}
.hm .hm-zr-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:visible}
.hm .hm-zr .reel{transform-origin:50% 50%;transform:scale(var(--s,1));border-radius:var(--zr-r,24px);box-shadow:0 30px 80px -40px rgba(0,0,0,calc(.45 * var(--zr-p,0)))}
.hm .hero h1 .ln,.hm .hero .lede{will-change:translate,opacity}
@media (max-width:860px){.hm .hm-zr{height:auto}.hm .hm-zr-pin{position:static;height:auto}}

/* ---------- B · night → morning ---------- */
.hm .proc{display:none}
.hm-dn{position:relative;height:300vh;margin:clamp(40px,6vw,80px) 0 0}
.hm-dn-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:clamp(12px,2vw,24px) 0}
.hm-sky{position:relative;width:100%;height:min(86vh,780px);border-radius:clamp(18px,2.2vw,30px);overflow:hidden;color:#f4f1ec;background:#0b0b0c;isolation:isolate}
.hm-sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hm-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-size:160px 160px;animation:hm-grain .9s steps(4) infinite}
@keyframes hm-grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* clocks */
.hm-clocks{position:absolute;z-index:2;top:clamp(18px,3vw,36px);left:clamp(18px,3vw,40px);right:clamp(18px,3vw,40px);display:flex;justify-content:space-between;gap:16px;font:500 12px/1.3 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,236,.55)}
.hm-clock b{display:block;color:#f4f1ec;font:400 clamp(28px,4.2vw,60px)/1 var(--sans,Inter,sans-serif);letter-spacing:-.045em;text-transform:none;margin-top:8px;font-variant-numeric:tabular-nums}
.hm-clock.r{text-align:right}
.hm-clock.r b{color:rgba(244,241,236,.5)}

/* story beats */
.hm-beats{position:absolute;z-index:2;left:clamp(18px,3vw,40px);bottom:clamp(22px,4vw,52px);width:min(26rem,44%);height:6.4em}
.hm-beat{position:absolute;left:0;bottom:0;width:100%;opacity:0;translate:0 18px;transition:opacity .7s cubic-bezier(.16,1,.3,1),translate .9s cubic-bezier(.16,1,.3,1)}
.hm-beat.on{opacity:1;translate:0 0}
.hm-beat small{display:block;font:500 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,236,.5);margin-bottom:12px}
.hm-beat p{margin:0;font-size:clamp(22px,2.5vw,36px);line-height:1.08;letter-spacing:-.035em;font-weight:400}

/* the request, as a quiet line of type rather than a UI card */
.hm-req{position:absolute;z-index:2;right:clamp(18px,3vw,40px);bottom:clamp(22px,4vw,52px);width:min(260px,32%);font:500 11px/1.4 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,236,.55);opacity:var(--co,0);translate:0 var(--cy,16px)}
.hm-req .t{display:flex;justify-content:space-between;gap:12px}
.hm-req .t b{font-weight:500;color:#f4f1ec}
.hm-req .bar{height:1px;background:rgba(244,241,236,.18);margin:12px 0 10px;position:relative}
.hm-req .bar i{position:absolute;left:0;top:-1px;height:3px;width:var(--pg,0%);background:var(--acc,#ff3b1f);border-radius:2px;box-shadow:0 0 12px var(--acc,#ff3b1f)}
.hm-req .st{color:var(--acc,#ff3b1f)}

@media (max-width:700px){
  .hm-dn{height:260vh}
  .hm-sky{height:min(84vh,680px)}
  .hm-beats{width:auto;right:clamp(18px,3vw,40px);bottom:clamp(96px,22%,140px)}
  .hm-req{left:clamp(18px,3vw,40px);right:clamp(18px,3vw,40px);width:auto;bottom:22px}
  .hm-clock b{font-size:26px}
}