/* base.css — global reset, viewport, and the sky crossfade layer */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0f0d; /* dark fallback before any image loads */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #f4f1ea;
  user-select: none;
}

/* ----- Sky layer -------------------------------------------------------- */

#sky-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0a0f0d;
}

.sky-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  will-change: opacity;
  pointer-events: none;
}

/* #sky-a is the initial active layer */
#sky-a {
  opacity: 1;
}

/* Off-screen preloader — kept in the DOM but never visible */
.sky-preload {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
  top: -9999px;
}

/* ----- Screen layer ----------------------------------------------------- */

#screen-root {
  position: absolute;
  inset: 0;
  z-index: 10;
}