@import url("/css/controls-f8ac5549747aedf43755024ee7e96ec9.css");
@import url("/css/pages/home-scene-tokens-df47120e98e996eb353bb07f0de4ed92.css?v=20261009-home-scene");

/* Hallmark · component: day/night scene · genre: playful · theme: existing JLAS
 * Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V4
 * Keep one composition; the sun and moon carry the user-triggered motion. */

html.home-html {
  background: var(--color-home-paper) !important;
  overflow-x: clip;
}

html.home-html#jlabBaseDocument {
  scrollbar-gutter: auto;
}

body.page-home {
  /* The shared shell keeps this page's original canvas color via its fallback variable. */
  --jlab-base-page-background: var(--color-home-paper);
  margin: 0 !important;
  min-height: 100vh;
  color: var(--color-home-ink);
  background: var(--color-home-paper) !important;
  font-family: var(--font-home-body);
  overflow-x: clip;
}

/* Navigation geometry and theme are owned by jlab-base-shell.css. */

@media (min-width: 901px) {
  /* Restore the full-bleed desktop scene behind the floating navigation. */
  .page-home-main { margin-top: -84px; }
}

.home-hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-home-paper);
}

.home-scene {
  --home-night: 0;
  --home-dusk: 0;
  --home-scene-position: center center;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

html[data-theme="dark"] .home-scene {
  --home-night: 1;
}

.home-scene__layer,
.home-scene__dusk,
.home-scene__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-scene__layer {
  background-position: var(--home-scene-position);
  background-size: cover;
  background-repeat: no-repeat;
}

.home-scene__layer--day {
  --home-scene-image: url("/images/home-scene-day.webp");
  background-image: var(--home-scene-image);
}

.home-scene__layer--night {
  --home-scene-image: url("/images/home-scene-night.webp");
  background-image: var(--home-scene-image);
  opacity: var(--home-night);
}

.home-scene__dusk {
  background: linear-gradient(180deg, var(--color-home-dusk-top), var(--color-home-dusk-horizon) 65%, var(--color-home-clear));
  opacity: var(--home-dusk);
}

.home-scene__stars {
  color: var(--color-home-stars);
  opacity: clamp(0, calc((var(--home-night) - .4) * 1.6667), 1);
}

.home-scene__constellation {
  stroke-width: 1.3;
  opacity: .8;
}

.home-sky__orbit {
  position: absolute;
  /* This is the body's center; leave its full radius below the fixed navigation. */
  top: clamp(144px, 18vh, 180px);
  width: clamp(80px, 7vw, 108px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.home-sky__orbit--sun { left: 64%; }
.home-sky__orbit--moon { left: 64%; }

.home-sky__horizon {
  position: absolute;
  left: 6%;
  top: 27%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* Text follows the visible sky while the stored theme updates immediately. */
.home-hero:has([data-home-lighting="day"]) {
  --color-home-ink: var(--color-home-ink-day);
  --color-home-accent: var(--color-home-accent-day);
  --color-home-secondary: var(--color-home-secondary-day);
  --color-home-secondary-hover: var(--color-home-secondary-hover-day);
  --color-home-secondary-border: var(--color-home-secondary-border-day);
}

.home-hero:has([data-home-lighting="night"]) {
  --color-home-ink: var(--color-home-ink-night);
  --color-home-accent: var(--color-home-accent-night);
  --color-home-secondary: var(--color-home-secondary-night);
  --color-home-secondary-hover: var(--color-home-secondary-hover-night);
  --color-home-secondary-border: var(--color-home-secondary-border-night);
}

.home-sky__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: center;
}

.home-sky__sun {
  background: radial-gradient(circle at 36% 30%, var(--color-home-sun-center), var(--color-home-sun-edge));
  box-shadow: 0 0 52px 16px var(--color-home-sun-glow);
  opacity: 1;
}

.home-sky__moon {
  background:
    radial-gradient(ellipse at 30% 35%, var(--color-home-moon-crater) 0 9%, var(--color-home-clear) 10%),
    radial-gradient(ellipse at 65% 62%, var(--color-home-moon-crater) 0 13%, var(--color-home-clear) 14%),
    radial-gradient(ellipse at 43% 76%, var(--color-home-moon-crater) 0 5%, var(--color-home-clear) 6%),
    radial-gradient(circle at 38% 28%, var(--color-home-moon-center), var(--color-home-moon-edge));
  box-shadow: 0 0 60px 18px var(--color-home-moon-glow);
  opacity: 0;
}

html[data-theme="dark"] .home-sky__sun { opacity: 0; }
html[data-theme="dark"] .home-sky__moon { opacity: 1; }

.home-scene.is-transitioning .home-scene__layer--night,
.home-scene.is-transitioning .home-sky__body {
  will-change: transform, opacity;
}

.home-hero__content {
  position: relative;
  z-index: 1;
  width: min(780px, calc(100% - 48px));
  margin: 0;
  padding-top: clamp(112px, 21vh, 210px);
  padding-left: clamp(32px, 5.35vw, 88px);
}

.home-hero__title {
  max-width: 780px;
  color: var(--color-home-ink);
  font-family: var(--font-home-display);
  font-size: clamp(3rem, 5.55vw, 5.25rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.16;
  text-wrap: pretty;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color var(--dur-home-colors) var(--ease-home-colors);
}

.home-hero__title .home-hero__line {
  display: block;
  white-space: nowrap;
}

.home-hero__title .home-hero__accent {
  color: var(--color-home-accent);
  transition: color var(--dur-home-colors) var(--ease-home-colors);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(24px, 3.5vh, 38px);
}

.home-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--color-home-clear);
  border-radius: 11px;
  padding: 9px 18px;
  font-family: var(--font-home-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, color var(--dur-home-colors) ease, background-color var(--dur-home-colors) ease, border-color var(--dur-home-colors) ease;
}

.home-hero__button:hover {
  transform: translateY(-2px);
}

.home-hero__button--primary {
  min-width: 150px;
  color: var(--color-home-white) !important;
  background: var(--color-home-action);
  box-shadow: 0 5px 13px var(--color-home-action-shadow);
}

.home-hero__button--primary:hover {
  background: var(--color-home-action-hover);
  box-shadow: 0 8px 18px var(--color-home-action-shadow-hover);
}

.home-hero__button--secondary {
  min-width: 134px;
  color: var(--color-home-ink) !important;
  background: var(--color-home-secondary);
  border-color: var(--color-home-secondary-border);
}

.home-hero__button--secondary:hover {
  background: var(--color-home-secondary-hover);
}

.home-hero__button:focus-visible {
  outline: 3px solid var(--color-home-ink);
  outline-offset: 4px;
}

.home-hero__button:active { transform: translateY(0); }

.home-hero__arrow {
  margin-left: 12px;
  font-size: 26px;
  font-weight: 300;
  line-height: .65;
}

.home-hero__explore {
  margin-left: 10px;
  font-size: 19px;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

body.page-home .site-footer {
  position: relative;
  z-index: 2;
  color: var(--color-home-ink);
  background: var(--color-home-paper) !important;
  border-top: 1px solid var(--color-home-footer-rule) !important;
}

body.page-home .site-footer__copy,
body.page-home .site-footer__links a {
  color: var(--color-home-ink);
}

@media (max-width: 900px) {
  .home-hero__content {
    padding-top: clamp(24px, 5vh, 48px);
  }

  .home-hero {
    min-height: calc(100vh - var(--jlab-mobile-top, 72px) - var(--jlab-mobile-bottom, 64px) - 8px);
    min-height: calc(100dvh - var(--jlab-mobile-top, 72px) - var(--jlab-mobile-bottom, 64px) - 8px);
  }
  .home-scene { --home-scene-position: right bottom; }
  .home-scene__layer { background-image: none; }
  .home-scene__layer--day {
    --home-sky-color: var(--color-home-sky-day);
    background-color: var(--home-sky-color);
  }
  .home-scene__layer--night {
    --home-sky-color: var(--color-home-sky-night);
    background-color: var(--home-sky-color);
  }
  .home-scene__layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--home-scene-image);
    background-size: auto 70%;
    background-position: var(--home-scene-position);
    background-repeat: no-repeat;
    mask-image: linear-gradient(180deg, var(--color-home-clear) 30%, var(--color-home-white) 50%);
  }
  .home-sky__orbit { top: calc(var(--jlab-mobile-top, 72px) + 52px); width: 72px; }
  .home-sky__orbit--sun,
  .home-sky__orbit--moon { left: 50%; }
  .home-sky__horizon { left: -8%; top: 20%; }
}

@media (max-width: 760px) {
  .home-hero__content {
    width: calc(100% - 40px);
    padding-left: 20px;
  }

  .home-hero__title {
    font-size: clamp(2.7rem, 11vw, 4rem);
  }

  .home-hero__content,
  .home-hero__title {
    max-width: 100%;
  }

  .home-hero__title .home-hero__line {
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .home-sky__orbit--sun,
  .home-sky__orbit--moon { left: 35%; }
}

@media (max-width: 440px) {
  .home-sky__orbit--sun,
  .home-sky__orbit--moon { left: 30%; }

  .home-hero__actions {
    gap: 10px;
  }

  .home-hero__button {
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .home-sky__orbit--sun,
  .home-sky__orbit--moon { left: 20%; }
}