/* A decorative world at the hero's lower edge. Load after pilot.css. */
.home-hero {
  /* The world is 110% of the hero wide (720–1040px); half of its 2:1 disc shows. */
  --world-width: clamp(720px, calc(110vw - 35px), 1040px);
  --world-crown: calc(var(--world-width) / 4);
  --world-sun-size: clamp(120px, 14vw, 184px);
  /* Morning and evening rest on the hill: higher where the narrow screen shows more of the globe. */
  --world-orbit-base: clamp(72px, calc(175px - 12vw), 130px);
  --world-orbit-span: 43%;
  /* At noon the sun stands just above the rooftop and tucks a quarter under the glass window. */
  --world-noon: calc(var(--world-crown) - 12px + var(--world-sun-size) / 2);
  --world-orbit-rise: calc(var(--world-noon) - var(--world-orbit-base));
  --world-space: calc(var(--world-noon) + var(--world-sun-size) / 4);
  --world-sun-stop: 50%;
  padding-bottom: var(--world-space);
}

.home-hero .welcome-preview { z-index: 2; }

.welcome-world {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  width: var(--world-width);
  aspect-ratio: 2;
  transform: translate(-50%, 50%);
  pointer-events: none;
  user-select: none;
}

.welcome-world > img,
.welcome-world > svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  filter: saturate(.94) brightness(1.025);
  transition: filter 2400ms ease;
}

.home-hero[data-day="noon"] {
  --world-sun-stop: 75%;
}
.home-hero[data-day="evening"] {
  --world-sun-stop: 100%;
}
.home-hero[data-day="noon"] .welcome-world > :is(img, svg) {
  filter: saturate(1.02) brightness(1.04);
}
.home-hero[data-day="evening"] .welcome-world > :is(img, svg) {
  filter: saturate(.85) brightness(.9) sepia(.1);
}

/* Same three positions as the existing day controller, with a CSS fallback. */
.home-hero .welcome-sun {
  width: var(--world-sun-size);
  left: calc(50% - var(--world-orbit-span) - var(--world-sun-size) / 2);
  top: auto;
  bottom: calc(var(--world-orbit-base) - var(--world-sun-size) / 2);
  transform: none;
  transition: left 2400ms cubic-bezier(.4, 0, .2, 1), bottom 2400ms cubic-bezier(.4, 0, .2, 1), filter 2400ms ease;
}
.home-hero[data-day="noon"] .welcome-sun {
  left: calc(50% - var(--world-sun-size) / 2);
  bottom: calc(var(--world-orbit-base) + var(--world-orbit-rise) - var(--world-sun-size) / 2);
  transform: none;
}
.home-hero[data-day="evening"] .welcome-sun {
  left: calc(50% + var(--world-orbit-span) - var(--world-sun-size) / 2);
  bottom: calc(var(--world-orbit-base) - var(--world-sun-size) / 2);
  transform: none;
}

@supports (offset-path: ellipse(43% 120px at 50% 100%)) {
  .home-hero .welcome-sun,
  .home-hero[data-day] .welcome-sun {
    left: 0;
    top: 0;
    bottom: auto;
    offset-path: ellipse(var(--world-orbit-span) var(--world-orbit-rise) at 50% calc(100% - var(--world-orbit-base)));
    offset-distance: var(--sun-travel, var(--world-sun-stop));
    offset-rotate: 0deg;
    offset-anchor: 50% 50%;
    transition: offset-distance 2400ms cubic-bezier(.4, 0, .2, 1), filter 2400ms ease;
  }
}

@media (max-width: 640px) {
  .home-hero {
    --world-orbit-span: 38%;
  }
}

/* No autonomous scene animation: day changes follow the existing pause control. */
.home-hero[data-motion="paused"] .welcome-world > :is(img, svg) {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .welcome-world > :is(img, svg),
  .home-hero .welcome-sun,
  .home-hero[data-day] .welcome-sun {
    transition: none;
  }
}