/* JS Artisan Beauté — the first-light scene. Only what the two SVGs drawn by js/sky.js need. */

/* the hero scene, inside [data-horizon] */
.sky {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* text under the line stays selectable; pointer is read on .hero__stage */
  user-select: none;
}
.sky__sun  { fill: var(--sun, currentColor); }
.sky__line { fill: var(--ink, currentColor); }

/* the day meter, inside [data-daymeter] (64 by 32) */
.daymeter__svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.daymeter__sun  { fill: var(--sun, currentColor); }
.daymeter__line { fill: currentColor; }

/* static stand-ins written in index.html; js/sky.js removes them when it mounts.
   The hero one is the logo pose: sun resting on the line, line at --horizon, centred.
   --r follows sceneMetrics() in sky.js: 13% of the smaller side, 48 to 150px, and never under the header. */
.horizon > .sky-fallback {
  --r: max(14px, min(clamp(48px, 13vmin, 150px), (44vh - 64px) / 2.15));
  position: absolute;
  left: 50%;
  top: var(--horizon, 44%);
  width: calc(var(--r) * 4.2);        /* viewBox is 420 wide for a sun of radius 100 */
  height: auto;
  transform: translate(-50%, -93.75%); /* the line sits 150/160 down the viewBox */
  pointer-events: none;
  user-select: none;
}
.daymeter > .sky-fallback {
  display: block;
  width: 100%;
  height: 100%;
}
/* with scripting and motion the sun rises from under the line: do not flash it risen before the script runs */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .horizon > .sky-fallback .sky__sun { visibility: hidden; }
}