/* daypart.css — time-of-day horizon backgrounds for vajgrtlabs.com.
 *
 * site/assets/vl-daypart.js sets <html data-daypart="sunrise|noon|sunset|night">
 * from the real Central-Time sun (Franklin County, IL). These overrides swap
 * ONLY the image layer of each existing horizon rule (exact gradient stacks
 * copied from styles.284326aa73d5.css / profile.css, daypart URL substituted),
 * so positions and sizes are inherited unchanged. (The per-section crops —
 * games left / lab right / wow star-zoom — were removed 2026-10-13: every
 * page now runs the one centered theme.) Non-night parts also get a gently
 * lightened hero shade and a slightly stronger .inner backdrop so daytime
 * actually reads as daytime; the hero's bottom stays dark for text.
 *
 * No data-daypart (JS off) = the site's original horizon.webp look.
 */

/* ---------------- NIGHT (the original dark look, moon edition) -------- */
html[data-daypart="night"] .horizon-art{background-image:url("/assets/horizon-night.webp")}
html[data-daypart="night"] .inner:before{background-image:linear-gradient(180deg,#040c1866,#060d17 95%),url("/assets/horizon-night.webp")}
html[data-daypart="night"] .pf-hero{background-image:radial-gradient(1100px 560px at 78% 8%,#12294a4d 0%,#05090f00 62%),radial-gradient(760px 480px at 10% 95%,#0d20134d 0%,#05090f00 60%),linear-gradient(#05090f80,#05090f80),url("/assets/horizon-night.webp")}

/* ---------------- SUNRISE ---------------------------------------------- */
html[data-daypart="sunrise"] .horizon-art{background-image:url("/assets/horizon-sunrise.webp")}
html[data-daypart="sunrise"] .horizon:after{background:linear-gradient(180deg,#02091514 0%,transparent 40%,#02071108 53%,#020711b8 100%)}
html[data-daypart="sunrise"] .inner:before{background-image:linear-gradient(180deg,#040c1866,#060d17 95%),url("/assets/horizon-sunrise.webp");opacity:.8}
html[data-daypart="sunrise"] .pf-hero{background-image:radial-gradient(1100px 560px at 78% 8%,#12294a4d 0%,#05090f00 62%),radial-gradient(760px 480px at 10% 95%,#0d20134d 0%,#05090f00 60%),linear-gradient(#05090f59,#05090f59),url("/assets/horizon-sunrise.webp")}

/* ---------------- NOON -------------------------------------------------- */
html[data-daypart="noon"] .horizon-art{background-image:url("/assets/horizon-noon.webp")}
html[data-daypart="noon"] .horizon:after{background:linear-gradient(180deg,#02091514 0%,transparent 40%,#02071108 53%,#020711b8 100%)}
html[data-daypart="noon"] .inner:before{background-image:linear-gradient(180deg,#040c1866,#060d17 95%),url("/assets/horizon-noon.webp");opacity:.8}
html[data-daypart="noon"] .pf-hero{background-image:radial-gradient(1100px 560px at 78% 8%,#12294a4d 0%,#05090f00 62%),radial-gradient(760px 480px at 10% 95%,#0d20134d 0%,#05090f00 60%),linear-gradient(#05090f59,#05090f59),url("/assets/horizon-noon.webp")}

/* ---------------- SUNSET ------------------------------------------------ */
html[data-daypart="sunset"] .horizon-art{background-image:url("/assets/horizon-sunset.webp")}
html[data-daypart="sunset"] .horizon:after{background:linear-gradient(180deg,#02091514 0%,transparent 40%,#02071108 53%,#020711b8 100%)}
html[data-daypart="sunset"] .inner:before{background-image:linear-gradient(180deg,#040c1866,#060d17 95%),url("/assets/horizon-sunset.webp");opacity:.8}
html[data-daypart="sunset"] .pf-hero{background-image:radial-gradient(1100px 560px at 78% 8%,#12294a4d 0%,#05090f00 62%),radial-gradient(760px 480px at 10% 95%,#0d20134d 0%,#05090f00 60%),linear-gradient(#05090f59,#05090f59),url("/assets/horizon-sunset.webp")}

/* ---------------- Mobile portal heroes (max-width:700px) ----------------
 * On phones the homepage hero image rides on .portal:before instead of
 * .horizon-art (.lab-portal:before only repositions that same layer). */
@media (max-width:700px){
  html[data-daypart="night"] .portal:before{background-image:linear-gradient(180deg,transparent 25%,#040b1740 43%,#040b17ed 100%),url("/assets/horizon-night.webp")}
  html[data-daypart="sunrise"] .portal:before{background-image:linear-gradient(180deg,transparent 25%,#040b1740 43%,#040b17ed 100%),url("/assets/horizon-sunrise.webp")}
  html[data-daypart="noon"] .portal:before{background-image:linear-gradient(180deg,transparent 25%,#040b1740 43%,#040b17ed 100%),url("/assets/horizon-noon.webp")}
  html[data-daypart="sunset"] .portal:before{background-image:linear-gradient(180deg,transparent 25%,#040b1740 43%,#040b17ed 100%),url("/assets/horizon-sunset.webp")}
  /* gentler lift than desktop here — the base mobile opacity is .4, not .64 */
  html[data-daypart="sunrise"] .inner:before,
  html[data-daypart="noon"] .inner:before,
  html[data-daypart="sunset"] .inner:before{opacity:.55}
}